| Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > ナビゲータコンテナの使用 > Accordion ナビゲータコンテナ | |||
|
|||
|
|||
|
|||
フォームは多くのアプリケーションの基本的なコンポーネントです。しかし、複雑なフォームの操作や複数ページにわたるフォームの移動は、ユーザーにわかりやすいとは言えません。また、フォームが大きすぎて画面内に収まらない場合もあります。
Flex では Accordion ナビゲータコンテナを使用して、フォームの外観と移動の操作性を向上させることができます。Accordion コンテナでは一連の子パネルを定義しますが、一度に表示されるパネルは 1 つだけです。次の図は、Accordion コンテナの例です。
コンテナを移動する場合、ユーザーはアクセスする子パネルに対応するナビゲーションボタンをクリックします。Accordion コンテナを使用すると、ユーザーはどのような順序でもフォーム内を移動できます。たとえば、ユーザーが Credit Card Information パネルを使用しているときに、Billing Address パネルの情報を変更したいと考えたとします。そのためには、Billing Address パネルに移動して情報を編集してから、Credit Card Information パネルに戻らなければなりません。
HTML の場合、配送先住所、請求先住所、およびクレジットカード情報を入力するフォームは 3 ページで作成されることが多く、ユーザーは次のページに移動する前に各ページをサーバーに送信する必要があります。Accordion コンテナを使用すると、3 つの子パネルの情報をまとめて、1 つの送信ボタンで送信できます。このアーキテクチャにより、サーバーのトラフィックが最小限に抑えられるとともに、ユーザーが自分が今どこにいてどのような操作をしているのかを把握しやすくなります。
|
メモ |
|
子パネルのない空の Accordion コンテナはフォーカスを取得できません。 |
Accordion コンテナは特にフォームや Form コンテナの操作に便利ですが、Flex のどのコンポーネントも Accordion コンテナの子パネル内で使用できます。たとえば、Accordion コンテナを使用して製品のカタログを作成し、各パネルで類似製品のグループを紹介する使い方が考えられます。
Accordion コンテナには、次のデフォルトサイズ設定属性があります。
|
プロパティ |
デフォルト値 |
|---|---|
|
デフォルトサイズ |
現在アクティブな子の幅と高さ。 |
|
コンテナのサイズ変更規則 |
Accordion コンテナのサイズは、デフォルトでは、最初の子コンテナのサイズに合わせて一度だけ設定されます。デフォルトでは、他のコンテナに切り替えても、サイズは変更されません。別の子コンテナに切り替えたときに Accordion コンテナのサイズを変更するには、 |
|
子のサイズ設定規則 |
子のサイズはデフォルトサイズに設定されます。子のサイズが Accordion コンテナより大きい場合は、一部がクリッピングされます。子コンテナが Accordion コンテナより小さい場合は、Accordion コンテナの左上隅に位置合わせされます。 |
|
デフォルトパディング |
|
詳細については、『Adobe Flex 2 リファレンスガイド』の Accordion を参照してください。
Flex 2.01