Tweet

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

　FlexではActionScriptを用いて、計算処理・イベント処理・UIの動きなどのロジックの記述を行うことができます。ActionScriptの記述には次のような方法があります。

• コンポーネントのタグ内にプロパティとして直接記述する
• 関数を同一ファイルに定義して呼び出す
• 関数を外部ファイルに定義して呼び出す

　では、この3種類の方法を使って簡単な足し算のアプリケーションを作成し、ActionScriptの記述を体験してみましょう。

図1　ActionScriptで記述した足し算アプリケーション（クリックすると拡大します）

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

• 第1回 Macromedia Flexのインストール
• 第2回 Flex開発環境「Flex Builder」のセットアップ
• 第3回 FlexBuilderで新規アプリの開発に着手しよう

■コンポーネントのタグ内にプロパティとして直接記述する

　FlexBuilderを立ち上げて、前回までの要領で「Add1.mxml」という新しいファイルをflex-exampleサイトの直下に作成します。

　インサートバーで「HBox」を選び、Application内にドラッグ＆ドロップしてください。Flexではコンテナという概念があり、HBoxは中に配置されたコンポーネントを水平方向に並べるコンテナです。

図2　インサートバーのHBoxコンポーネント（クリックすると拡大します）

　HBoxの中に、次のコンポーネントを順に配置していきます。

• TextInputを配置
  
  

  属性名	値
  id	arg1

• Labelを配置
  
  

  属性名	値
  text	+

• TextInputを配置
  
  

  属性名	値
  id	arg2

• Labelを配置
  
  

  属性名	値
  text	=

• Labelを配置
  
  

  属性名	値
  id	result

• Buttonを配置
  
  

  属性名	値
  label	calculate

図3　各コンポーネントを配置（クリックすると拡大します）

　以上で、足し算を行うアプリケーションのユーザーインターフェイスが完成しました。

1/3

INDEX
Flashベースのリッチクライアントを体験 第6回 Flexの表現力をActionScriptで強化する
	Page 1 コンポーネントのタグ内にプロパティとして直接記述する
	Page 2 関数を同一ファイルに定義して呼び出す
	Page 3 関数を外部ファイルに定義して呼び出す まとめ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード