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

Flexならデータ・バインディングもカンタン



電通国際情報サービス
公門 和也
2005/11/8

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

 第3回の記事で、練習用のサイトを作成しました。今回は、第3回で作ったサイトにサンプルを追加していきます。もし、まだ練習用のサイトを作成されていない方は、第1〜3回を参考にして、練習用のサイトを作成してください。

Flexでのバインディングの概要

 今回は、Flexでデータを扱う際に便利な「バインディング」という機能を紹介します。

 例えば、表にデータを表示したい場合、HTMLでは「データの数を調べて、その数だけ繰り返し表示するロジックを記述して……」と面倒くさいことをしなければなりません。ところがFlexでは、そのようなわずらわしいことは必要なく、ほとんどコーディングなしでデータを表示できます。これが「バインディング」という機能です。

 また、現在表示されているデータが内部で更新されると、HTMLではそれを反映させるために「そのタイミングを拾ってページ全体をリフレッシュさせて表示を更新して……」と面倒くさいことをしなければなりません。ところがFlexでは、「バインディング」を利用することで表示とデータソースを自動で連動するように結び付けることができます。

 簡単な例をお見せしましょう。図1では、空の表があります。これにデータをバインディングすれば、図2のようになります。

図1 プレーンの表

図2 データ・バインディング後の表

 また図3では入力エリアがあり、データは下の文章部分にバインディングされています。入力エリアに値を入力すると、内容が図4のように即座に反映されます。

図3 バインディングされた入力エリア

図4 バインディングによるデータの反映

 それでは、実際にサンプルを作ってみましょう。(次ページへ続く)

1/3

 INDEX

Flashベースのリッチクライアントを体験 第5回
Flexならデータ・バインディングもカンタン
Page 1
Flexでのバインディングの概要
  Page 2
バインディングの準備として、データを定義しよう
  Page 3
データをバインディングしよう
まとめ




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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間