本ガイドでは、Touch ビューコンポーネントのカテゴリに関する全般的な説明を行います。ツールボックス内のコンポーネント名をマウスでポイントすると、Architect によってそのコンポーネントの簡単な説明が表示されます。
Touch のコンポーネントに関する詳細につていは、Sencha Touch API ドキュメンテーションを参照してください。
Sencha Touch ビューコンポーネントカテゴリ
ツールボックスは、以下の順に示すSencha Touchのビューで構成されています。
- Behaviors（ふるまい）
- Containers（コンテナ）
- Form Fields（フォームフィールド）
- Media（メディア）
- Pickers（ピッカー）
- Standard（スタンダード）
- Toolbar（ツールバー）
- Views（ビュー）
Containers
コンテナは、他のコンポーネントを含むことができるコンポーネントです。Sencha Touchコンテナはタッチインターフェースのモバイル端末向けのアプリケーションのために最適化されています。Architectでは以下のコンテナを使用することができます。
ActionSheetAction Sheet コンポーネントは、ポップアップダイアログ内のボタンの一覧を表示します。Action Sheetはスクリーン下部へ結合され、デフォルトのタイプとして button が設定されています。
Carousel.Carousel はユーザーに複数のフルスクリーンのカードをスライドさせます。Carouselは水平、垂直方向どちらにも配置することができます。Carousel とは、アクティブな 1 つのカードがあり、残りのカードは左右の画面外へ伸びている状態をイメージしてください。多くの場合、何枚のカードをスライドさせられるかを示すドットのインジケーターが表示されています。一覧を配置することもできますし、TouchのCarouselでサポートされている他の種類のビューを配置することも可能です。一般的なCarouselの構成は、カードが移動する方向と、指によるスライドによりCarouselが前後のどちらのカードへ移動するかを示すものとなっています。
Container.Touch の Container コンポーネントは、Touch コンポーネントの全機能を装備することに加え、内部に他のコンポーネントをネストすることができます。子コンポーネントは、アプリケーションの UI の必要に応じて、配置・表示されます。ほとんどのタッチアプリはViewportという最上位のコンテナを一つだけ持ちます。 このコンテナは、スクリーン全体に表示され、他のコンポーネントを内包しています。例えば、メールアプリでは、受信メールの一覧とEメールのプレビューを表示するViewportが使われています。
FieldSet.FieldSet は、Form Panel 内の関連するフィールドをグループ化し、フォーム内の要素を視覚的に区分するために使われます。例えば、オンラインショップのフォームでは、フィールドを請求先住所と配送先住所のようなグループに分けていることがあります。FieldSetは、それ自身かフォーム内で使用され、上部にタイトルを持ちます。
Form Panel.Form Panelはフォームフィールドを成す一つであり、データを読み込み、保存する場合などに用いられます。通常、フォームパネルには、表示させたいフィールドの一つを表示させます。例えば、Form Pamelを使用することで、ウェブサービスの簡単な会員登録フォームを作成することができます。このフォームパネルには、たとえば、ユーザー名を入力するプレーンテキストフィールド、Email フィールド、パスワードフィールドなどが含まれることになるでしょう。
Menu.メニューは画面のどの側面（上、左、下、右）にもリンクでき、メニューのコンテンツを表示します。
Panel.Touchにおいて、Panelコンポーネントはオーバーレイさせる場合に最も有効なコンポーネントです。オーバーレイというのは、アプリの他の部分の上に「フローティング」するコンテナのことです。Panel にはスタイルを追加することもできます。Panel の showBy メソッドを使うと、参照先のコンポーネントの上にフローティングするパネルが、他のコンポーネントを指し示す矢印とともに、角の丸い黒色のボックスとして表示されます。必要がないときは、Containerを代わりに使用すればよいでしょう。
sheet.ポップアップやサイドアンカースライドパネルのための、向きに対応して遷移するための基本サポートを提供するコンテナをレンダリングします。
Tab Panel.Tab Panel コンポーネントは、（ツールボックスの Standard カテゴリで提供されている）各コンポーネントをタブとして内包するパネルです。各タブは固有の機能と内容を持ちます。タブパネルは、ユーザーに複数のフルスクリーンページを切り替えさせる方法として使われます。タブパネル内の各コンポーネントは固有のタブを持っており、このタブをタップするとそのコンポーネントが表示されます。タブはTab Panelの上部または下部に配置することができ、タイトルとアイコン設定を任意に受け入れることができます。
Ext.Viewport.ViewportはSencha Touchプロジェクトでは、ツールボックスからコンポーネントとして追加することはありません。デフォルトでは、単体のViewportがSencha Touchフレームワークにより、追加されています。Viewportは、Applicationノード内で構成することができます。InspectorでApplicationを選択し、ConfigパネルでViewportを検索してください。
Form Fields
フォームフィールドは、フォームを作成する際にForm Panelコンテナへ追加するコンポーネントのことです。Sencha Touchは、Checkbox、Date Picker Field、Email Field、Number Field、Search Fieldなどの、モバイルアプリ用のあらゆる種類のフォームを構築するために使用される標準的なフィールドの種類を提供します。関連するフィールドをグループ化するには、それらをForm Panel内にネストされているFieldSetコンテナ内へ配置します。フォームを構築する際の詳細は、Sencha Touchにおけるフォームの構築を参照してください。
Media
Mediaは、HTML5 Audio要素や、ちょうど他のコンポーネントと同じようにレイアウトシステムでも使用できるどんなサイズの画像、HTML5 Video要素を使用しているオーディオを含んだ数多くのメディアのためのコンテナを提供します。
Pickers
コンポーネントは、スクリーン上に日付ピッカーや、一つのピッカー内でスロットのようにスクロールできるPicker Slotのような一般的なピッカーを表示します。
Standard
Standartコンポーネントは、Button、Label、Map、Spacerどのコンポーネントを含むモバイル端末用アプリのUIに使用される基本的なブロックを提供します。Standardには、他の全てのコンポーネントの基礎となるComponentを含んでいます。Sencha Touchの全てのコンポーネントは、Ext.Componentのサブクラスです。
Toolbars
Toolbarは、ToolbarやTitle Barなどのツールバーを構築する際に使用するコンポーネントが含まれています。Toolbarコンポーネントは、一般的にコンテナ内に結合されたアイテムとして使用されます。docked コンフィグ設定を利用すると、上部にドッキングすることも下部にドッキングすることもできます。また、一般的なボタンを挿入することもでき、タイトルを設定できます。
Views
Viewコンポーネントは、データストアの動的なデータを表示します。 XTemplateを使用することで、データのフォーマットやレイアウトを操作することができます。DataViewで動的にサーバー上や、いろいろなデータソースのデータを反映させたコンポーネントを作成することができます。List, List Index Bar, Navigation View, Nested Listやストアからデータを提供される他のコンポーネントなども同様に使用することができます。