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

Flexの表現力をActionScriptで強化する



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

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

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

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

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

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

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


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

 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
関数を外部ファイルに定義して呼び出す
まとめ




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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間