本稿では、ここ最近、Web系プログラマーの間で話題になっているAdobe Flex 2を使って、商品注文フォームを作る過程を紹介します。Flexはすでに様々なところで、機能が紹介されていますが、実際にその機能を使う時にどんな手順で作るのか、またどのくらいの作業量が必要になるのかという部分までは、なかなか見えてこない部分があります。そこで本稿では、一歩突っ込んで、簡単なWebカタログと商品注文フォームを作ることで、Flexという技術の魅力を確認していこうと思います。

今回作成するプログラム

ここではFlex Builder 2を使って簡単なWebカタログと商品注文フォームを作ってみます。このURLでテスト版を試すことができます。

商品選択画面	フォームには郵便番号を自動検索する仕組みもある

Flex 2の魅力はコンポーネントにあり

Flex 2には、豊富なコンポーネントが用意されており、本稿で作成するサンプルプログラムでも利用しています。リストやコンボボックスは当然のこと、ツリーや、データグリッドなど、HTMLとJavaScriptで実現しようと思ったら、非常に苦労するような高度なUIコンポーネントが手軽に利用できるのが魅力です。

それだけでなく、タブでページを切り替えたり、レイアウトの大きさをマウスで調整したり、アイテムをドラッグ & ドロップさせたり、ポップアップするメニューやフォームが利用できたりと、Windowsのクライアントアプリケーション顔負けの、様々なコンポーネントが用意されています。

複雑なレイアウトを持つWebアプリケーションが必要な場合、先に挙げたUIコンポーネントが用意されたFlex 2を採用することで、開発にかかる時間を大幅に短縮できるでしょう。また、自作コンポーネントが手軽に作成できるように工夫されていますので、今後、いろいろなコンポーネントが登場してくることが予想されます。

「Adobe Flex 2プロフェッショナルガイド Windows & Macintosh対応」

宣伝になってしまいますが、筆者は、「Adobe Flex 2プロフェッショナルガイド Windows & Macintosh対応」( ISBN978-4-8399-2589-5、価格3,990円 )という書籍を執筆しました。Flex 2の基本から、ActionScript 3.0について文法の解説、コンポーネントの使い方、活用方法や実際のアプリケーション開発まで、この本を読めば一通り分かる内容になっています。本稿とともに、Flex 2活用の際にはぜひ参考にしてください。