Sencha Architect 入門(実践編)

基本編でSencha Architectの全体像がわかったことと思いますので、 ここでは実践編として、実際にプロジェクトを操作しながら解説してみます。

プロジェクトの作成

プロジェクトを作成する前に、開発環境を整えましょう。

ローカルでWebサーバーが動作する環境になっていますでしょうか。 そこにプロジェクト用のフォルダをセットアップします。 僕の場合は、Apacheのuserdirモジュールを使ってプロジェクト毎に開発環境を整えていますので、 次のようなURLプリフィックスになります。

http://localhost/~test/

Sencha Architect を起動して、新しいExt JSプロジェクトを開きます。 最初にするのは、プロジェクトの設定です。 ツールバーのSettingsボタンをクリックします。

Viewの作成

まず実際にViewを作成してみます。 Ext JSにとって一般的な、Viewportを使ったものを想定します。 通常のブラウザ画面を占領するExt JSアプリケーションを作るために、Viewportを配置します。

Viewportの定義

ToolboxからViewportをドラッグしてCanvasにドロップします。 配置すると、Canvas一杯に広がったViewportができます。 次にセオリー通り、Viewportのレイアウトをborderレイアウトにします。 画面右下のConfigペインで指定することもできますが、 Canvas上のViewportをクリックしたときに表示される、歯車アイコンをクリックする方が便利です。

gear-icon

この歯車アイコンでは、レイアウトに関するプロパティなどを設定する事ができます。 他のコンポーネントでも利用可能です。 ここで設定できる内容は、コンポーネントによって異なりますが、 コンフィグの中でも非常に重要な物が表示されるようになっています。

initialView

Configペインを見てみますと、initialViewという設定項目があり、チェックが入った状態になっていると思います。 Ext JS 4のMVCでは、ApplicationのautoCreateViewportがtrueになっている場合、 自動的に Viewport.jsというクラスを読み込んで、ビューポートを表示します。 今回追加した、Viewportクラスのクラス名(userClassName)は、MyViewport になっています。

ビューポートの自動生成に対応させるために、 Viewportのクラス名をViewportにしたい所ですが、Architectではそれはできません。 実際にuserClassNameをViewportに設定するとエラーが発生します。

Error

Architectが生成したコードを見てみると、 Myiewportの他にViewportというクラスも出力されています。 実は、initialViewという設定項目がtrueになっているビューがあると、 そのクラスを継承した、Viewportクラスを自動生成してくれるのです。

コンポーネントの配置

このViewportの上にパネルなどを配置してみます。

  • FormPanelを一つCanvasにドロップします。
  • Panelを一つProject InspectorのViewport上にドロップします。

こうすると、FormPanelのregionはcenter、Panelのreginはwestになると思います。 二つ目のPanelをProject Inspectorにドロップしたのは、 Canvasは最初にドロップしたFormPanelで覆われているので、 そこにドロップすると、その子アイテムとして追加されてしまうからです。

Formのアイテムを追加

次に、FormPanelの上に、Text Fieldを二つほどドロップします。 それぞれのText Fieldのname属性を設定しましょう。 最初のをfield1 後のをfield2とでもしましょう。

Toolbarの追加

さらに、FormPanelの上に、Toolbarをドロップしましょう。 その後、ToolbarにButtonを二つドロップします。 ボタンのitemIdとtext属性を設定します。

一つ目
text: 'Message'
itemId: 'msgButton'
二つ目
text: 'Window'
itemId: 'windowButton'

Panelの設定

region: westのPanelを折りたためるようにしてみます。 Panelを選択して、Configペインでcollapsibleコンフィグを探してチェックを入れます。 タイトルバーの所にアイコンが表示されて、それによりパネルを折りたたむことができるようになります。 この状態で、collapsedのチェックを入れると、初期状態が折りたたまれた状態になります。

次にサイズ変更できるようにしてみます。 resizableをtrueに設定し、resizeHandlesを 'e' にしてみます。 これはリサイズするハンドルをどこに表示するかを指定する物で、allを指定するとすべてに表示されます。 この場合は、region: westですから、右側だけにハンドルを表示させたいので、 'e' (east)を設定しています。

これでいったん保存して、プレビューしてみてください。

ちゃんと、Panelが折りたためるようになっていて、サイズ変更もできるようになっています。

Controllerの設定

References(refs)

Viewに配置した refsを追加するには、次の二つの方法があります。

  • Configペインで追加する
  • Toolboxから追加する

ConfigペインのReferenceの+ボタンをクリックすると、 簡単なウィザードが起動します。

Step 1 of 2 Enter a name of reference

と表示されたら、Referenceの名前をつけ、Nextボタンをクリックします。

Step 2 of 2 Enter a selector

と表示されたら、コンポーネント クエリー式を入力します。 すると次のようなrefsコンフィグが定義されます。

refs: [
    {
        ref: 'hoge',
        selector: 'hoge#fuga'
    }
],

Inspectorからではなく、ToolboxからController ReferenceをProject Inspector上の該当のControllerにドラッグ アンド ドロップしても追加することもできます。 この場合には、ウィザードは起動しません。

どちらの方法をとっても、ConfigペインのReferencesの下に今追加したReferenceが表示されると思います。 また、Project Inspectorにも表示されます。 Configペイン上でのReferenceの➡ボタンをクリックするか、Project InspectorでReferenceを選択すると、 ConfigペインにReferenceの設定情報が表示されます。 refとselectorのコンフィグがあると思います。ウィザードを使っていない場合は、 ここでrefとselectorを設定します。

refで設定した文字列を使って、selectorで指定したコンポーネントを簡単に参照することができます。 例えば、ref: ‘hoge’ の場合は、this.getHoge() でコンポーネントを取得できます。 selectorには、Ext.CompornentQueryで使える式を設定します。

コラム: コンポーネント クエリー

コンポーネント クエリーとは、文字列によるクエリー式で、コンポーネントを検索するものです。

button#okButton // itemIdがokButtonであるボタンを探す
textfield[name=firstname] // name属性がfirstnameのテキストフィールドを探す
mywindow button#cancel    // mywindowに配置されたitemIdがcancelのボタン

のように記述します。buttonとかmywindowとかいうのはxtypeです。 ビューを定義するときには、userAliasやitemIdの設定をきちんとしておくと コンポーネント クエリーを記述するのが楽になります。 詳しくはAPIのドキュメントを参照してください。

Actions

イベント ハンドラーを設定します。 Referencesと同様、ConfigペインからでもToolboxからのドロップでも追加できます。

ConfigペインのActionsの +ボタンをクリックします。 メニューがポップアップして、Controller Action かApplication Actionかを問い合わせてきます。 Viewのコンポーネントのイベントを記述する際は、Controller Actionを選択します。 (Application Actionの方は、別な稿で説明しようと思います)

＞ Step 1 of 2 Choose a target type

と表示されたら、対象のコンポーネントのタイプを選択してNextボタンをクリックします。

Step 2 of 2 Choose an event by name

と表示されたら、イベント名を選択して、Finishボタンをクリックします。

Referencesと同じように、Actionsに追加したActionも、ConfigペインやProject Inspectorに表示され、 それを選択すると、Configペインでパラメーターを設定できます。

Controllerでのイベント ハンドラーは、Referencesと同様、 コンポーネント クエリーを使って対象のオブジェクトを指定します。 Refsでのselectorにあたるのが、controlQueryです。 ここに対象となるコンポーネントを特定するクエリー式を設定します。 ウィザードで指定した場合、ここはtarget typeで指定したコンポーネントのxtypeになっています。 そのままですと、コンポーネントの特定ができないので、適切な値に変更します。

button#msgButton

これで、msgButtonを指すようになりました。

targetTypeでは、コンポーネントのタイプを指定し、 nameコンフィグには、イベント名を設定します。 targetTypeを正しく設定すると、nameのコンボボックスに設定できるイベントがリストされます。

fnには、ハンドラーの関数名を設定します。 ウィザードで作った場合には、onButtonClickなどの名前が自動でつけられますが、 必要に応じて変更します。

また、Actionを選択した状態では、中央のビューをCodeに切り替えると、 Actionのハンドラーのコードを入力することができます。 ArchitectのCodeビューでは、通常はRead Onlyと表示されていて、 手でコードを修正することはできませんが、 ハンドラーやinitメソッドなどの入力が必要な部分では、入力が可能になります。 さっそく次のように入力してみます。

Ext.Msg.alert('ボタンが押されました');

プレビューして、ツールバーのMessageボタンをクリックすると、 アラート ダイアログが表示されます。

Actionsで追加するイベントは、 セレクターが同じイベントの場合は次のようにちゃんとまとめてくれます。 賢いですね。

"gridpanel": {
    itemdblclick: this.onGridpanelItemDblClick,
    select: this.onGridpanelSelect
}

長くなりましたので、続きは別稿にします。