Sencha Architect では、デスクトップ端末やモバイル端末のアプリケーションのユーザーインターフェイスを迅速に組み立てることができます。Architect の ビュー機能を使用すると、Sencha Ext JS や Sencha Touch フレームワーク、あるいはビューの基礎をなしている JavaScript についての知識がほとんど、あるいは全くなくても、UI を構築できます。
このことにより、Architectではアプリケーションの「見える」部分を素早く試作することが可能となります。さらに、他のメンバーがアプリケーションの他の部分に注力している間、デザインチームが別にアプリケーションのヒューマンインターフェースの作業に取り組めます。データ設計者が、モデルやストアを使用したアプリケーションのデータサイドの定義に取り組む間に、開発者は、ビジネスルールとアプリケーションのロジックを実装するための、コントローラの構築に集中することができます。
ビューコンポーネント（例えば、コンテナやグリッド、フォーム、チャート）を [Project Inspector（プロジェクトインスペクタ）] へドラッグして、キャンバスで確認し、レイアウトを適用し、[Config（コンフィグ）] を使用してプロパティを構成できます。独自のカスタムJavaScriptを追加することもできます。プロジェクトをビルドするたびに、Architect ではプロジェクトの最新状態のコードを生成します。ビューコンポーネントをカスタマイズすることもでき、それをエクスポートし、他のプロジェクトで再利用することや、他の開発者と共有することもできます。
Architectを使用したUI構築
Architectはウェブページの要素の柔軟な組み立て、ビューコンポーネントの簡単な再利用、UIの単純化されたメンテナンスを可能にします。ArchitectでUIコンポーネントを配置する際、ツールボックスからWindowやForm Panelコンテナなどのコンポーネントを探して、インスペクタかキャンバスにドラッグし、最上位の親コンポーネントもしくは、親コンポーネント内にネストされた“子”コンポーネントとして、コンポーネントを追加します。プロジェクトへ最上位のコンテナを追加することによって、UIの異なる部分を別々の構成要素として配置することができます。プロジェクトのビルド時には、各最上位コンテナは、個別のファイルに固有のコードを持つクラスとして表現されます。
コンポーネントをプロジェクトへドラッグするときに、Architectは互換性のないコンポーネント同士のネストを防ぎます。例えば、Window または Viewport コンポーネントをコンテナに入れることはできません。キャンバスで選択されているコンポーネントに追加できないコンポーネントをツールボックスからドラッグすると、Architect によって互換性がないことを示すアイコンが表示されます。
Architect を使って、実際にビューを使用した UI 構築を見ていきましょう。以降のセクションでは、この Architect ドキュメンテーション全体で使われている、Car Listings という名前の Ext JS ベースのデスクトップアプリケーション構築の最初の段階を説明します。Sencha Touchフレームワークを利用したモバイルアプリケーションの構築も、同様の基本的テクニックで行うことができます。
まずはじめに：ビューの追加と構築
Architectを起動し、デスクトップ端末向けの Ext JS を使用したプロジェクトを開きましょう。それでは、以下の説明に従ってください。
ビューの追加
ツールボックスからパネルコンテナを探します。いくつかある手順を以下に示します。
- Panelが見つかるまで、ツールボックスをスクロールします。
- Panelを含む、Containersグループへ移動します。
- Viewsグループへ移動し、Containerカテゴリーまでスクロールします。
- ツールボックス上部にあるFilterフィールドへ
Panelと入力します。
インスペクタで、PanelをViewsノードへドラッグします。またはキャンバスへドラッグすることもできます。 これらは、全く同様の作業です。Panel をドラッグし始めると、まだドロップできないことを示す以下のようなアイコンが表示されます。
PanelをViewsノードまたは、キャンバスへドラッグすると、そこへドラッグできることを示すアイコンに変わります。このようにツールバーの全てのコンポーネントで、お互いのコンポーネントが共存できるかどうかを知らせてくれます。
ビューの削除
UIコンポーネントを追加した後に、それを削除する必要がある場合があります。削除する方法を以下に示します。２つめのコンポーネントをプロジェクトへドラッグしてください。そのコンポーネントが必要でないことが分かったので、削除してみましょう。インスペクタのPanelを右クリックし、Deleteを選択します。同様の操作がキャンバス内でも行えます。また、追加したばかりのコンポーネントを削除するには ⌘Z という Ｍａｃ のキーボードショートカット、またはCtrl+z という Windows および Linux のショートカットを使用します。あるいは、 Shift+Deleteを押して、[Project Inspector（プロジェクトインスペクタ）] で選択されているコンポーネントを削除します。
プロジェクトをビルドまたは保存し、その後は定期的に保存します。これについては、本ガイドで後述します。
ビューの追加
ツールバーから Grid Panel（グリッドパネル）を探して、インスペクタまたはキャンバス内の Panel コンテナの上にドロップします。インスペクタあるいはキャンバスのパネルを選択し、Grid Panelをダブルクリックすることでも同様の操作が可能です。
最初のPanelコンテナへ２つのPanelをドラッグします。キャンバス上にドロップする場合には、パネル内のグリッドパネル( “My Grid Panel” )の上以外の場所にドロップするようにしてください。さもないと、追加したパネルが、最初のパネルの子でなく、グリッドパネルの子になってしまいます。
次に、３番目のパネルへColumn Chart（縦棒グラフ）をドラッグします。 最後に追加したパネルは、キャンバスまたはインスペクタ内で一番下に表示されます。繰り返しますが、ドロップする場所に注意してください。キャンバスの最後のパネルのヘッダーにドロップすると、そのパネルの子になります。ヘッダーの下にある空白部分にドロップすると、最初に追加したパネルの子になります。コンポーネントは [Project Inspector（プロジェクトインスペクタ）] にドロップするのが最も確実です。目的のコンポーネントに確実にドロップできます。
キャンバスは以下のように表示されているはずです。
また、インスペクタは、以下のように表示されているはずです。選択されているコンポーネントは濃い青色で、最上位の親は淡い青色でハイライトされていることに注目してください。また、[Project Inspector（プロジェクトインスペクタ）] の表示には、プロジェクトツリーが正確に反映されていることにも注意してください。ColumnChart は最後に追加したパネルの子であり、このパネルは最初に追加したパネルの子です。並べ直したい場合は、インスペクタで行います。 ツリー内で上下にドラッグします。
ビューの構成
プロジェクトへビューを追加したならば、次に構築するアプリケーション内で使用されるコンポーネントの適切なレイアウトやその他の設定を選択し構成の設定を行います。先ほど追加したいくつかのコンポーネントの構成を行ってみましょう。
構成についてさらに詳しい情報が必要な場合、カーソルを各プロパティ名の隣にあるクエスチョンマークの上に乗せます。１、２秒後にそのプロパティについての説明と、APIドキュメンテーションへのリンクが表示されます。
レイアウトの設定
今、３番目のパネルがキャンバスまたはインスペクタで選択されている状態です。選択されていない場合、どちらでもよいので選択してください。このボタンをクリックして、Flyout Config ウィンドウを開きます。キャンバス内のパネルの右上隅の外側にある小さな歯車のボタンです。Flyout Configボタンをクリックしてください。 ここには、頻繁に使われるプロパティの一覧が含まれています。クリックすると以下のように表示されます。
Select a layoutの下の一覧をスクロールして、fitを選択します。これでlayoutプロパティがfitに指定されました。インスペクタの下のConfigパネルでも同様の操作ができます。 プロパティの一覧をスクロールしてlayoutを見つけるか、Filterボックス内へlayoutと入力します。
次に、最上位にあるパネルを選択して、Flyout Configボタンを選択します。layoutをvboxに設定します。もう一度、Flyout Configボタンをクリックして、alignmentをstretchとし、autoScrollにチェックを入れます。（Packはデフォルトのstartのままにしておきます。）これで、グリッドとサブパネルは、垂直に配置されます。レイアウトに関する情報は、レイアウトを参照してください。
追加のプロパティの設定
さらにプロパティの設定を行うために [Config（コンフィグ）] パネルを使用します。インスペクタでGrid Panelを選択してください。以下の画像に示すように、グリッドパネルのConfigパネルが表示されます。Configパネル内をスクロールして、コンポーネントに設定することができる標準的な設定を見直します。
最上位のパネルに名前とIDを設定します。キャンバス内でタイトルバーをダブルクリックし、Car Listingsと入力し、タイトルをMy Panelから変更します。Configパネル内のtitleプロパティの設定からも行えます。Configパネルでidプロパティをcarlistingsに設定します。
注意：このIDはグローバルで一意的なものでなければなりません。ここで設定したIDは他のコンポーネントに使用することはできません。 Architectは同じIDを使用するコンポーネントを作成することができないということに気をつけましょう。
次に、flexプロパティを見つけてください。プロパティ名の右にある（(none)と表示されている）フィールドをクリックして、1と入力してReturn(Enter)キーを押してください。 Gridパネルのflexが１となります。Configパネルは以下のように表示されているはずです。
他の２つのパネルにも同様の操作を行ってください。
上級者向け：カスタムコンフィグ
Architectの上級者向けの使い方として、カスタムコンフィグの追加をすることができます。コンポーネントに必要なコンフィグが見当たらない場合には、カスタムコンフィグとして、Configパネル上部のフィルターフィールドに名前を入力し、Addをクリックします。追加したコンフィグオプションは、[Config（コンフィグ）] パネル内で設定できます。
イベントの追加
イベントには、マウスクリック、マウスオーバー、タップ、ピンチ、スワイプなどがあります。ユーザーがこれらの動作をしたら、アプリケーションで適切な応答をすることが必要です。これは、Architect のツールボックスの「Behavior（動作）」グループの中に一覧表示されているコンポーネントを使用して実装します。
- コントローラアクション:ビューコンポーネントで生成されたイベントは、アプリケーションで定義されたコントローラのいずれかにあるリスナによって検出されます。このリスナがコントローラ関数を呼び出してイベントを処理します。データをクエリし、何らかの方法でデータを操作し、得られた値をビューコンポーネントに返します。このパラダイムが使われるのは、定義された動作が、イベントを生成したコンポーネントと同じ最上位コンポーネントには属していないグラフィカルコンポーネントに対して作用する場合です。これは、最も一般的な状況です。
- イベントハンドラ:ビューコンポーネントで生成されたイベントは、イベントを生成したコンポーネントと同じクラスに存在するイベントハンドリング関数によって検出され処理されます。“me” (this) のすべての子であるコンポーネントと対話動作を実装する場合、それは一般的にイベントハンドラに属します。基本的なイベントバインディングの使用が唯一許されるのは、イベントとそのハンドラのコードが１つのビューの中で完全に自己完結し、アプリケーションの他のビュー、モデル、またはコントローラに頼らないか影響を及ぼさない時です。
言い換えると、基本的なイベントバインディングはビューによって引き起こされるイベントが同じビューに影響を及ぼすときのみに使用するべきです。次に示す単純なイベントバインディングは、このことを示す良い例です。ボタンが影響するのはその親パネルのサイズのみであり、アプリケーションの他の部分には影響しません。
イベントは、Configパネルによりビューへ追加されます。Event プロパティを探し、値の下にある、丸の中に「+」が描かれた追加ボタンをクリックします。 Step 1 of 1（手順 1/1）にある空白のフィールドの矢印をクリックし、スクロール可能なイベントの一覧を開いて、使用したいイベントを選択します。必要ならば、コンフィグ名の右にある削除ボタンをクリックすることで、イベントを削除することもできます。インスペクタのイベントをダブルクリック（または、インスペクタのイベントを右クリックし、Edit Codeを選択）することで、コードエディタを開き、イベントのコードをカスタマイズすることができます。
初期ビューの設定
イニシャルビューの設定はプロジェクトにとって重要です。イニシャルビューとは、ユーザーがアプリケーションを初めて開くと表示される UI コンポーネントです。Architectではこの設定を容易に行えます。最初に表示させたい最上位のビューを選択します。 ConfigパネルでinitialViewプロパティを探し、隣にあるチェックボックスにチェックを入れます。インスペクタので右クリックし、Mark as Initial Viewを選択しても同様の操作が行えます。
インスペクタ内の最上位のビューコンポーネントだけが、initial Viewsに設定できます。作成した例では、Car Listings と名前を変更した最初のパネルだけが最上位に表示されることに注目してください。デフォルトでは、これがプロジェクトのイニシャルビューです。インスペクタ内で、[Initial view（イニシャルビュー）] アイコンがコンポーネント名の右に表示され、上記の [Project Inspector] の画像に、また順に作業を行っている場合は Architect の画面に表示されます。
これがどのように動作するか見るために、もう一つPanelをViewsノードへドラッグし、Viewsの上に直接ドロップしてください。これにより、2 つ目の最上位パネルが作成されます。右クリックをして、Mark as Initial Viewを選択してください。イニシャルビューのアイコンが切り替わります。このパネルはこの例のためだけに追加しているので、プロジェクトで必要なくなったら削除してください。最初の最上位バネル(Car Listings)を右クリックして、Mark as Initial Viewを選択すると、イニシャルビューアイコンが表示されます。
プロジェクトにおいてイニシャルビューを作成するのに良い方法は、プロジェクトへツールボックスからViewportを追加して、イニシャルビューとして設定することです。そうすることでビューポート内へ配置したものは全て最初に表示されます。
ここでは、以上になります。コントローラ、データストア、モデルといった、デスクトップ端末およびモバイル端末用のアプリのビルドに関する詳細な情報は、デスクトップ端末向けのアプリケーションの構築 および モバイル端末向けのアプリの構築を参照してください。
高度なビューに関するトピック
ここでは、Architectを用いたアプリケーションの構築時に役立つ、ビューを使用したいくつかの方法を紹介しています。
リンクされたインスタンスの作成
コンポーネントを上位の階層に移動させるときに、役立つ機能です。 コンテナ内のグリッド、または、最上位のコンテナの子になっているコンテナを、最上位のコンポーネントになるように移動させます。基本的には、このコンポーネントはサブクラスとして振る舞います。
本ガイドでArchitectを使用して作成したビューを見てください。最上位の（My Panelという名前の）パネルをViewsの上へドラッグドロップしてください。現れるダイアログのLinkをクリックします。Architect では、パネルのリンクされたインスタンスを作成します。プロジェクトの最上位にあるパネルの完全なコピーです。
今回作成したこのようなリンクしたインスタンス化は、複雑なプロジェクトを構築する際に、非常に役立ちます。同じコンポーネントへリンクしたインスタンス化を行えば、オリジナルのコンポーネントを変更すると、リンクされたコンポーネントもその変更を継承します。リンクされたコンポーネントを個々に編集することも可能です。 そのときの変更は、オリジナルのコンポーネントの属性を上書きします。特にPromote to Classの機能を使用するときに、この機能は役立つでしょう。
クラス化
コンポーネントのどの子のアイテムでも最上位のコンポーネントにすることができ、プロジェクトディレクトリ内でクラスになることもできます。例えば、グリッドカラムは特に使用されていないので、初回作成時にグリッドパネルまたはツリーパネルのみに追加することができます。
こうするために、インスペクタのViewsへGrid Panelをドラッグします。作成したグリッドパネルはデフォルトでいくつかのカラムを有しています。インスペクタでBoolean（カラムのヘッダー名）を右クリックし、Promote to Classをクリックします。
カラムは最上位のコンポーネントとなり、インスペクタ内では、リンクしたインスタンス化が行われます。Architect でプロジェクトをエクスポートすると、コンポーネント/クラスに対して別々の .js ファイルを生成します。この機能は、ほとんどのビューコンポーネントで機能します。
この機能を使用すると、チームで作業する場合に、プロジェクトの共有や管理が簡単に行えます。より管理しやすいコードを生成することに加えて、Architect プロジェクトを最上位のコンポーネントの集合体として整理すると、プロジェクトの継続的な開発が容易になります。メインのアプリケーションビュー内でリンクされたインスタンスを使用することにより、全最上位のコンポーネントの前後関係をより簡単に確認できます。
オーバーライドの作成
上級ユーザーのために、Architect では、ビューに含まれる全てのコンポーネントのコードを上書きすることができます。ことためには、コンポーネントを選択し、コードビューへ移動後、Create Overrideをクリックします。「この機能は、上級者向けのものですが続けますか。 」というメッセージが表示されます。Yesをクリックし、コードエディタを開き、コードを作成してください。後で、コンポーネントを選択することで、上書きを取り消すことができます。 コードビューへ移動し、Remove Overrideを選択します。
ビューコンポーネント
Architectでは、全てのビューコンポーネントをツールボックスから使用することができます。ツールボックスはExt JS向けとSencha Touch向けの環境どちらでも使用できますが、２つの環境では、いくつか異なる点があります。 ２つの環境では、同じコンポーネント名を持つものがありますが、それらの振る舞いは異なる場合があります。一部のコンポーネントには、使用方法も動作も異なるのに両方の環境で同じ名前になっているものがあります。これは、Ext JS コンポーネントではポインティングデバイスによる操作を想定しているのに対し、Sencha Touch コンポーネントではジェスチャーやタッチによる操作を想定しているためです。
Architectドキュメンテーションは、ビューコンポーネントについて、それぞれの環境に分けて説明しています。
- Ext JS バージョンの Architect のツールボックスにあるビューコンポーネントのカテゴリに関する全般的な説明は、Ext JS ビューコンポーネントを参照してください。
- Sencha Touch バージョンの Architect のツールボックスにあるビューコンポーネントのカテゴリに関する全般的な説明は、Sencha Touch ビューコンポーネントを参照してください。