Flashベースのリッチクライアントを体験(4) 1/2

ドラッグ&ドロップでUIコンポーネントを配置



電通国際情報サービス
比嘉 康雄
2005/10/7

- PR -

 Macromedia Flex(以下、Flex)は、J2EEアプリケーションサーバ上で動作するプレゼンテーションサーバであり、XMLのタグベースでFlashによるユーザーインターフェイス(UI)を定義します。

 前回「FlexBuilderで新規アプリの開発に着手しよう」で、練習用のサイトを作成しました。今回の記事は、前回の記事で作ったサイトにサンプルを追加していきます。もし、まだ練習用のサイトを作成されていない方は、第1〜3回の記事を参考にして、練習用のサイトを作成してください。

 今回の記事では、Flexに豊富に用意されているUIコンポーネントを紹介します。HTMLにも存在するような当たり前のものではなく、FlexならではのUIコンポーネントを紹介しましょう。最初は、Accordion(アコーディオン)です。

UIコンポーネント“Accordion”の概要

 Accordionとは、ピアノに似た楽器の1つです。どんな楽器だったか思い出せない人は、アコーディオンの屋根裏部屋で実物のイメージをつかんでください。これが、どんなUIコンポーネントになるのかちょっと想像がつかないかもしれません。空気を送り込む蛇腹(?)の部分がタブ形式になっていて、タブをクリックするとクリックした部分が「ぼよーん」と開くようなインターフェイスです。

 説明を聞いてもよく分からないと思うので、実際のサンプルをお見せしましょう。次のサンプルでは、第一画面、第二画面、第三画面と名前の付けられた3つの画面が1つのAccordionの中に入っています。最初は、図1のように第一画面が表示されています。次に第二画面のタブをクリックすると図2のように第二画面が表示されます。続いて、第三画面のタブをクリックすると図3のように第三画面が表示されます。

図1 第一画面 図2 第二画面 図3 第三画面

 確かに面白い機能ですが、どのような場合にAccordionコンポーネントが効果的に機能するのでしょうか。例えば、ショッピングサイトでいくつか商品を購入してチェックアウトするときに、「一般的な情報」「出荷情報」「支払情報」の3つの画面で情報を入力する必要があるとします。Accordionコンポーネントを使えば、「支払情報」を入力しているときに、「一般的な情報」を修正したくなったら、「一般的な情報」のタブをクリックすることで、サーバと通信することなく、クライアント側だけでレスポンスよく処理できるようになります。また、タブに名前が付いているので、どのような情報が1つのタブにまとめられているのかが一目瞭然(りょうぜん)です。

 Flex Application Examplesのページの上から3段目のサンプルの「Flex Store」を試していただければ、ここで説明したことを実体験できます。(次ページへ続く)

1/2

 INDEX

Flashベースのリッチクライアントを体験 第4回
ドラッグ&ドロップでUIコンポーネントを配置
Page1
UIコンポーネント“Accordion”の概要
  Page2
Accordionコンポーネントを配置しよう
TabNavigatorコンポーネントを配置しよう
まとめ




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH