コントローラ

コントローラには、アプリケーションのそれぞれの部分を結びつける接着剤のような役割があります。 アプリケーションが意図した動作を行うように、決められたルールのもと動作を実行します。ビューから送られてくるイベントをリッスンし、そのイベントに基づいて、ビューのレンダリング、モデルのインスタンス化、他のアプリケーションロジックの実行などのアクションを行います。例えば、ゲームアプリにタップ式のログアウトボタンがある場合、コントローラはボタンタップのイベントをリッスンして、その動きを別のユーザーに通知するというような、適切なアクションを実行します。コントローラはビューのデータの表示を操作し、モデルへのデータのロードと保存を行います。

Architect内でのコントローラの働き

SenchaのMVCパッケージでは、コントローラはビューを管理します。ビューはメソッド呼び出すためにコントローラをコールしません。ビューがイベントを発火し、コントローラはそれに対するレスポンスを行います。Architect でビューとコントローラを関連づけるには、[Project Inspector(プロジェクトインスペクタ)] でコントローラを選択して、 [Config(コンフィグ)] パネルの Views コンフィグに移動し、表示されるドロップダウンリストから選択可能なビューを選択するか、選択するビューの名前を入力します。ビューとコントローラを関連づける前に、プロジェクトにビューの追加と構築を行う必要があることに注意してください。

コントローラがイベントに応答できるようにするには、[Config(コンフィグ)] パネルを使用してコントローラにコントローラアクションを追加します。

  • [Project Inspector(プロジェクトインスペクタ)] で使用するコントローラを選択します。
  • [Config(コンフィグ)] パネルに移動し、 [Actions(アクション)] に移動します。
  • [Value(値)] で、右の追加ボタン(「+」)をクリックし、[Controller Action(コントローラアクション)] を選択します。
  • アクションに対し、ターゲットのタイプ(ビュー)とイベントを選択するように求められます。

ターゲットのビューとイベントを選択すると、このタイプのユーザーインターフェイスコントロールすべてにサブスクライブするために必要なものが Architect に揃います。

例えば、Sencha Touchのプロジェクトでは、Ext.Buttonをターゲットとして、タップをイベントととして選択します。Architectは(リネームを行うことができる)onButtonTapメソッドを自動的に生成します。さらに、button の controlQuery も生成します。controlQuery には、コントローラが監視する必要のあるUIコントロールを指定します。これは、ページ内でインスタンス化されたコンポーネントと共に動作する CSS セレクタと似ています。[Project Inspector(プロジェクトインスペクタ)] でコントローラアクションをダブルクリックすると、アクションのコードビューが開きます。ここにカスタムのコードを追加して、ユーザーがボタンをタップしたときに発生する動作を決定できます。

コントローラの追加

Ext JS または Sencha Touch プロジェクトのいずれかにコントローラを追加するには、[Project Inspector(プロジェクトインスペクタ)] を使用します。[Project Inspector(プロジェクトインスペクタ)] の右上にある「+」ボタンをクリックして、コンポーネントのリストからコントローラを選択します。Architect では、Controllerノードにコントローラ(「MyController」)が表示されます。ここから、[Config(コンフィグ)] パネルを使用してコントローラに機能を追加します。方法については、以下のセクションを参照してください。

コントローラはツールボックスで追加することもできます。ここでは、コントローラ、コントローラアクション、コントローラリファレンスがすべて標準のコンポーネントとして利用できます。しかし、この方法は推奨されません。

メインコントローラの構成

コントローラのコンフィグを設定するには、[Project Inspector(プロジェクトインスペクタ)] でコントローラを選択して、[Config(コンフィグ)] パネルを開きます。Ext JS と Sencha Touch プロジェクトで最も一般的に使用されるコンフィグは次のとおりです。

Actions.コントローラにアクションを追加するには、[Config(コンフィグ)] パネルの [Actions(アクション)] の隣にあるボタンをクリックします。Controller Actionsまたは、Application Actionsを選択します。Controller Actions については、[Config(コンフィグ)] の指示に従ってビューコンポーネントの一覧からターゲットのタイプを選択し、アクションのイベントを選択します。カスタムコードをアクションへ追加するために、インスペクタ内に生成されたController Actionコンポーネントをダブルクリックします。インスペクタ内のController ActionやApplication Actionを選択し、全てのコンフィグ設定を見ることができます。鍵となるアクション設定はターゲットとなるコンポーネントのタイプをセットするtargetTypeと、ターゲットとなるイベントと結びつけるnameです。

References.コントローラにリファレンスを追加するには、[Config(コンフィグ)] の [References(リファレンス)] の隣にあるボタンをクリックして、[Config(コンフィグ)] の指示に従ってリファレンス名とセレクタを入力します。インスペクタのreferenceを選択して、内容を編集します。特定のビューのみを参照する名前およびセレクタとしては、アプリケーションのビューコンポーネントの正確な名前を使用してください。

init.init 関数をコントローラに追加するには、[Config(コンフィグ)] の init の隣にあるボタンをクリックします。init 関数はコントローラとビューの相互作用を設定します。通常はもう一つのコントローラ関数である control と連携して使用されます。control はコントローラがイベントをリッスンし、ハンドラ関数を使用して何らかのアクションを行うことを支援します。インスペクタで init 関数をダブルクリックすると Architect コードエディタが開き、init 関数に control やその他の関数などの機能を追加するためのコードを書き込めます。

onLaunch.コントローラに onLaunch 関数を追加するには、[Config(コンフィグ)] の [Actions(アクション)] の隣にあるボタンをクリックします。インスペクタでonLaunch関数をダブルクリックすると、Architectコードエディタが開き、必要な機能を追加することもできます。

Touchプロジェクトのためのコントローラコンフィグ設定

Sencha Touchでのコントローラのコンフィグオプションはわずかに異なります。モバイルアプリ向けのための追加のコンフィグ設定を以下に示します。

Before Filters.before filter を追加するには、Before Filters の隣にある追加ボタンをクリックします。そして、追加したフィルタをインスペクタの中で選択して、利用可能なコンフィグを表示します。これらのコンフィグは、ルートの中で指定された関数の前に実行される、フィルター関数を定義するために使用されます。例としては、特定のアクションまたは、まだページ上にないクラスの読み込みについてのユーザーの認証・認可が含まれています。

Routes.route を追加するには、Routes の隣にある追加ボタンをクリックします。そして、追加したルートをインスペクタの中で選択して、利用可能なコンフィグを表示します。これらのコンフィグは、コントローラに対象のルートを指定するために使用します。ルートは、アプリ内の履歴サポートや、ルートを提供したアプリのあらゆる部分を緊密にリンクする機能を提供します。

その他の利用可能なコンフィグ設定

Architect でコントローラが利用できるコンフィグとしては、他にも以下のようなものがあります。通常、アプリケーションの構成は、アプリケーションレベルで設定されています。これらのコンフィグをコントローラで設定するのは、それらを特定のコントローラでのみ利用できるようにし、アプリケーションレベルでは利用できないようにしたい場合だけです。

Functions.コントローラに関数を追加するには、[Config(コンフィグ)] パネルの [Functions(関数)] の隣にあるボタンをクリックします。インスペクタでfunctionを選択し、Configパネル内の全ての関数を見ることができます。

Models.コントローラへモデルを結合します。プロジェクトへ追加されたモデル名は、[Config(コンフィグ)] パネルの右側の Value フィールドにスクロール可能な形で一覧表示されます。フィールド(デフォルトでは「(none)」というテキストを表示)をクリックすると、一覧を開くことができます。

stores.ストアとコントローラへ結びつけます。プロジェクトへ追加されたストア名は、[Config(コンフィグ)] パネルの右側の Value フィールドにスクロール可能な形で一覧表示されます。フィールド(デフォルトでは「(none)」というテキストを表示)をクリックすると、一覧を開くことができます。

Views.ビューとコントローラへ結びつけます。最上位のビューのみが選択できます。プロジェクトの最上位のビュー名は、[Config(コンフィグ)] パネルの右側の Value フィールドにスクロール可能な形で一覧表示されます。フィールド(デフォルトでは「(none)」というテキストを表示)をクリックすると、一覧を開くことができます。

その他のリソース

Architectのコントローラについての詳細は、以下を参照してください。

Last updated