SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

1から分かるJava開発者のためのFlex 4入門

Flexの概要とFlash Builder 4 Eclipseプラグインのインストール方法 ~ Java開発者のためのFlex 4入門

1から分かるJava開発者のためのFlex 4入門(前編)


  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルソース (1.2 KB)

簡単なAIRアプリケーションを作って実行してみる

 インストールが完了したところで、簡単なアプリケーションを作って実行してみたいと思います。今回作るのは、郵便番号を入力すると住所を表示するという簡単なAIRアプリケーションです。Web APIを使って郵便番号から住所を表示します。

郵便番号検索アプリケーションの完成イメージ
郵便番号検索アプリケーションの完成イメージ
※注

 郵便番号検索のためのWeb APIはいろいろありますが、ここでは「郵便番号API」を利用しました。

「TestZip」プロジェクトの作成

 では、さっそく作っていきましょう。Flash Builderを起動したら、メニューから[ファイル]-[新規]-[Flexプロジェクト]を選択します。

メニューから[ファイル]-[新規]-[Flexプロジェクト]を選択
メニューから[ファイル]-[新規]-[Flexプロジェクト]を選択

 プロジェクト名に「TestZip」と記入して、アプリケーションの種類で「デスクトップ(Adobe AIRで実行)」を選択し、[終了]ボタンをクリックします。

プロジェクト名を入力してアプリケーションの種類「デスクトップ」を選び、[終了]ボタンをクリック
プロジェクト名を入力してアプリケーションの種類「デスクトップ」を選び、[終了]ボタンをクリック

 プロジェクトを作成すると、アプリケーションのひな形ができます。画面左上に表示されている「パッケージエクスプローラー」を確認してみましょう。メインソースファイルとなる「TestZip.mxml」が作成されており、他にもAIRの設定ファイル「TestZip-app.xml」などがあります。

作成されたひな形を確認してみる
作成されたひな形を確認してみる

コンポーネントを配置する

 では、早速ボタンやエディタなどのコンポーネントを配置してみます。マウス操作で配置したいので、画面を「デザインモード」に切り替えましょう。画面中央のTestZip.mxmlの編集画面の上方にある「ソース|デザイン」というタブの[デザイン]のボタンをクリックします。

[デザイン]のボタンをクリック、デザインモードに切り替える
[デザイン]のボタンをクリック、デザインモードに切り替える

 次に、コンポーネントの一覧が並んでいるパレットから、「Button」を1つ、「TextInput」を2つ配置します。コンポーネントを配置するには、マウスでコンポーネントのアイコンをドラッグして、ステージ上でドロップします。

ドラッグ&ドロップで、コンポーネントのアイコンをステージ上に配置
ドラッグ&ドロップで、コンポーネントのアイコンをステージ上に配置

プロパティを設定する

 コンポーネントを配置したら、コンポーネントのプロパティを設定します。配置したコンポーネントをクリックすると、画面右側の「プロパティ」ビューでプロパティの確認と変更ができるようになります。ここで、次のようにIDとラベルを設定します。

プロパティ設定
種類 ID ラベル/テキスト
Button buttonGet 取得
TextInput textZip  
TextInput textAddress  
プロパティビューで、IDやラベルを設定
プロパティビューで、IDやラベルを設定

 「buttonGet」については、クリックした時に郵便番号を取得する処理を記述します。「クリック時」の右側にある稲妻のマークをクリックして、[イベントハンドラーを作成]を選択します。

稲妻のマークをクリックし、[イベントハンドラーを作成]を選択
稲妻のマークをクリックし、[イベントハンドラーを作成]を選択

 すると、自動的に画面がソース編集モードに切り替わり、イベントハンドラーの定義「buttonGet_clickHandler」がソースコードに挿入されます。

「buttonGet_clickHandler」がソースコードに挿入される
「buttonGet_clickHandler」がソースコードに挿入される

コードを記述する

 後は、ここにWeb APIにアクセスして郵便番号を調べる処理を記述します。buttonGet_clickHandler()を次のように書き換えます。郵便番号のWeb APIにアクセスするために、URLLoaderやXMLといったクラスを利用しているので、ActionScript 3に慣れていないとちょっと驚くかもしれませんが、10行程度のコードなのでコピーして貼り付けてみてください。

<fx:Script>
<![CDATA[
    protected function buttonGet_clickHandler(event:MouseEvent):void
    {
        var loader:URLLoader = new URLLoader();
        var request:URLRequest = new URLRequest();
        // APIのURLとパラメータをセット
        request.url = "http://api.aoikujira.com/zip/xml/get.php" +
            "?zn=" + textZip.text;
        // APIにアクセスする
        loader.addEventListener(Event.COMPLETE, showResult);
        loader.load(request);
        // 実行結果の表示
        function showResult(event:Event):void {
            var xml:XML = new XML(event.target.data);
            textAddress.text = xml.value.disp;
        }
    }
]]>
</fx:Script>

実行してみる

 Eclipseのツールボタンにあるデバッグのアイコンをクリックして、アプリケーションをデバッグ実行します。

デバッグアイコンをクリックしてデバッグ実行
デバッグアイコンをクリックしてデバッグ実行

 2つ並んだテキストボックス(TextInput)の上側(textZip)に「150-0034」などの郵便番号を入力してボタンをクリックすると、Web APIにアクセスして、郵便番号が取得され下側のテキストボックス(textAddress)に住所が表示されます。

完成した郵便番号検索アプリケーション
完成した郵便番号検索アプリケーション

まとめ

 今回は、Flexについて概要を紹介して、Flash Builderのインストールし、それを使って簡単なサンプルアプリケーションを作ってみました。今回作ったサンプルでは、プロジェクト作成から実行までの手順の確認が目的でしたので、詳しくコードの解説などできませんでしたが、次回は、もう少し本格的なアプリケーションを作成し、Flexの魅力に迫ってみたいと思います。

「FlexではじめるRIA開発」特集、絶賛公開中!

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
1から分かるJava開発者のためのFlex 4入門連載記事一覧
この記事の著者

クジラ飛行机(クジラヒコウヅクエ)

ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5342 2010/08/05 17:40

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング