Sencha Architect 入門(基礎編)

Ext Designer がバージョンアップしてSencha Architectになりました。 単なるバージョンアップではなく、Visual StudioのようなRAD & IDE環境を目指しているように思われます。

VBで初めてプログラムを作ったとき、 フォームにボタンを配置して、そのクリック イベントを記述して、 ってのをやりませんでしたか？ そのようなことが、Ext JSでもできる環境が出てきたと言うことです。

さらに、ArchitectからはMVCへの対応がなされていて、 Designerの時のようにViewだけではなく、 アプリケーション全体の構築をArchitect上でできるようになっています。

Architect

Viewのデザイン

この部分が一番、Architectの得意とするところです。

標準では画面の左側にToolboxがあり、 その中からオブジェクトをプロジェクトに追加していきます。 コンポーネントなどを追加したら、画面中央のCanvasに表示されます。 また、画面右上にはProject Inspectorがあり、 プロジェクトの全体像を把握することができます。 追加したオブジェクトのコンフィグは、 画面右下にあるConfig Inspectorで設定します。

Toolbox

標準では画面左側に表示されるToolbox。

Toolbox

Toolboxには、コンポーネント、コンテナなどのオブジェクトが並べられています。 オブジェクトをプロジェクトに追加するには、次の3つの方法があります。

  1. Toolboxのオブジェクトを選択して、 中央のCanvasにドロップします。
  2. Toolboxのオブジェクトを選択して、 画面右側のProject Inspectorにドロップします。
  3. Project Inspectorで対象となるオブジェクトを選択した後、 Toolbox上で追加したいオブジェクトをダブルクリックします。

この辺りの操作感はVisual StudioやDeiphiなどのRADツールと同様です。 最初の方法が一番わかりやすいのですが、ドロップ先のコンテナーの状態によっては、 適切な場所にドロップできないことがあります。 また、Behaviorsグループに存在するような、非ヴィジュアルなオブジェクトはCanvasにドロップできません。 そんな時は、2番目3番目の方法をとるといいでしょう。

Toolboxでは、ツールのグループが表示されており、グループを選択すると、それに所属するオブジェクトが右側に表示されます。 あるオブジェクトは複数のグループに所属していて、例えばToolbarは、ContainersにもFormsにも表示されます。 グループの下のCUSTOMと書かれているところの +ボタンをクリックすると自分でグループを作成することもできます。

また大変便利なのが、Toolbox上部のFilterテキストボックスです。グループ内の部品をその名前でフィルタリングできます。 グループでEverithingを選択してから指定すると、すべての部品の中から該当する部品をリストアップしてくれます。

Canvasとコードビュー

画面中央のペインはCanvasです。 ここにビューが表示されます。 中央ペインの右上にある Code をクリックすると、現在選択されているオブジェクトのコードが表示されます。

コードは主にRead onlyとなっていて、ユーザーが直接コーディングすることはできません。 ただ、イベント ハンドラーなど一部においては、コード入力が可能になります。 コードの入力に関しては、実践編をご覧ください。

Project Inspector

プロジェクトの全体像を管理するProject Inspectorには、プロジェクト上のすべてのものが表示されます。

Project Inspector

初期状態の図を見ると、ApplicationとかControllerなどと表示されています。 Architectで作成したプロジェクトは、MVCに則った形式で出力されます。 そして、コントローラーを配置したViewだけでなく、ControllerやModel、Storeといったオブジェクトも設定できます。

Ext JSのMVCでは、いろいろと約束事がありますので、このツールを使って作っていれば、 そのルールに沿った物ができるというのはいいことでしょう。 Architectが紡ぎ出すコードはなかなかに良いExt JSのサンプルプロジェクトになります。

Project Inspector上でアイテムをドラッグすると、 配置したコンポーネントが所属するコンテナーを変更したり、 順序を変更することができます。

コンフィグオプションの設定

画面の右下のConfigペインで、各コンポーネントのコンフィグ オプションを設定します。

Config

コンフィグ オプションとは、そのコンポーネントの外見や振る舞いに関する各種のパラメーターです。 これらを適切に設定する事がとても重要になります。 Ext JSやSencha Touchのコードでは、コンフィグ オプションはオブジェクト リテラルで記述されますが、 ここでは、プロパティ グリッド上で値を設定することができます。

Ext JS 4やSencha Touch2では、不要なコンフィグを書かなくてもいいように、 コンフィグの初期値が設定されていて、 初期値のままの場合には、コンフィグ オブジェクトにその項目を指定する必要はありません。 Architectでもデフォルト値のままにしておくと、そのコンフィグは生成されるコードに含まれません。 レイアウトなどを試行錯誤していて、不要なコンフィグが残ってしまう場合がありますので、 たまに生成されたコードをみて不要なコンフィグはクリアするようにしましょう。

コンフィグプロパティの上にマウスカーソルをホバーさせると、？マークが標示されます。 そのボタンをクリックすると、そのコンフィグに関する説明がポップアップします。

Architectは、こうしたGUI上で画面のデザインをすることができますが、 このコンフィグオプションの設定などについては、Ext JSの基本的知識を必要とします。 先ほど出てきたレイアウトなどについても同様です。 ただ、GUI上に部品を配置し、コンフィグオプションを設定すると即座に表示が更新されるというのは、 画面デザインをするにあたり、非常に便利であることは確かです。 沢山のコンポーネントを配置した複雑なフォームでも 試行錯誤もやりやすくなります。

userClassName

これはExt JSのコンフィグではなく、Architectが使うパラメーターです。 トップレベルのコンポーネントは、クラスとして定義されます。 その際のクラス名をここで指定します。ここで指定した値が、生成されるコードでのクラス名になります。

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {

userAlias

これも同名のコンフィグがExt JSにあるのではなく、Architectが使うパラメーターです。 コンポーネントに設定された場合、次のようにwidget.をつけてaliasコンフィグに設定されます。

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

これは、コンポーネントのxtypeをmyviewportとしたことになります。

イベント ハンドラーの設定

ボタンのイベント ハンドラーを設定するには、ボタンのhandlerコンフィグオプションを設定することで対応できます。 しかしMVCアーキテクチャではViewで発生したイベントは、通常Controllerで処理します。 Controllerにイベントリスナを設定するのです。 ハンドコーディングの場合は、Controllerのinitメソッド内でcontrolメソッドを使って定義しますが、 Architectでリスナを設定してやると、そういったコードが生成されます。

イベント ハンドラーについては実践編で説明します。

Controllerの設定

ArchitectではControllerの定義もできます。 Controllerとは、で発火したイベントを処理して、Modelに伝えたり、Modelのデータを取り出してViewに渡したりします。

Controllerに装備された重要な機能をArchitectから設定する事ができます。

References(refs)

Controllerのrefsコンフィグの指定です。 ビュー上のオブジェクトを簡単に取得できるgetterメソッドを生成してくれます。

Actions

Controllerにイベント ハンドラを定義します。 Contoller ActionとApplication Actionを定義できます。 Controller Actionというのは、Viewに配置したコンポーネントなどで発火したイベントの処理を記述します。 Application Actionというのは、それ以外のアプリケーション ワイドなイベントを処理します。

init / onLaunch

Controllerのinit/onLaunchメソッドでは、コントローラーが初期化されるときと起動するときのアクションを定義できます。 前項でActionsを指定した場合には、initメソッドの中にイベント ハンドラを設定するためのコードが生成されますが、 ここのinitで定義した内容は、その次に実行されます。

Codeビューでコードを入力します。

onLaunchは、 です。

Views / Medels / Stores

これらの定義をすると、getHogeView(), getHogeModel(), getHogeStore() という 特別なgetterメソッドが定義され、それぞれクラス定義やインスタンスを簡単に参照できるようになります。

詳しくはAPIドキュメントの各項目を参照してください。

Model(Model/Store)

Ext DesignerでもStoreの定義をすることができましたが、 Architectでもそれが可能です。

Project InspectorのModels / Storesの下の階層に配置されます。

Project Settings

ツールバーのSettingボタンをクリックするか、メニューの Edit > Project Settings を選ぶと プロジェクトの設定ができます。

Project Settings

Ext JS Path

Ext JSのライブラリが保存されているpathを指定します。 新しいプロジェクトを作った場合には、Cacheflyに設定されていますが、 実際のプロジェクトでは、サーバー上にライブラリを置くことになると思いますので、 そのパスを指定します。

ここで指定した内容を元に、htmlファイルのscriptタグが生成されます。

URL prifix

Webサーバーに配置されたときのURLのプリフィクスを指定します。

http://localhost/myprojects/sampleproject1

のような感じで指定します。 これを指定しておくことでPreview機能を利用できます。

Deploy path

プロジェクトのソースコードをエクスポートする先のパスを指定します。 このパスを指定しておくと、ツールバーのDeployボタン(またはF5キー) で生成されたソースコードをエクスポートすることができます。

参照
Project Basics