Flexフレームワークで変わるRIA開発の現場
連載インデックスへ
第2回

Flex開発を楽にするFlash Builder 4の11の機能とは


株式会社ニークシステムテクノロジー
技術部 舩倉 純
2010/6/24


手順4.Flexプロジェクトの作成

 新規にFlexプロジェクトを作成しサーバテクノロジで「J2EE」を選択し、[リモートオブジェクトアクセスサービスを使用]にチェックをして「BlazeDS」を選択します。

図8 プロジェクトの作成
図8 プロジェクトの作成

手順5.サーバの設定

 接続するBlazeDSの設定情報を入力します。

図9 J2EEサーバ設定
図9 J2EEサーバ設定
  • [ルートフォルダー]
    C:\dev\blazeds\blazeds-turnkey-4.0.0.14931\tomcat\webapps\samples(パスは、BlazeDSをインストールしているディレクトリにあわせて適宜修正してください)
  • [ルートURL]
    http://localhost:8400/samples/
  • [コンテキストルート]
    /samples

手順6.データとサービスの接続設定

 プロジェクトを作成したら、データとサービスの設定を行います。[データとサービス]ビューから[データとサービスに接続...]をクリックしてウィザード画面を表示します。サービスタイプでBlazeDSのアイコンを選択します。

図10 [サービスタイプを選択]
図10 [サービスタイプを選択]

 サーバのRDS認証設定のダイアログが表示されます。手順2の段階でuseAppserverSecurityの設定をfalseにしているので、[パスワードは必要ありません]をチェックして[OK]ボタンをクリックすると、サービスの一覧が表示されます。

図11 認証の設定
図11 認証の設定

 ProductServiceをチェックして[終了]ボタンをクリックすると、対応するServiceを呼び出すAction Scriptのクラスとデータ型で返ってくるモデルであるProductクラスが生成されます。

図12 [読み込み先を選択]
図12 [読み込み先を選択]

図13 設定したサービスとメソッドの一覧
図13 設定したサービスとメソッドの一覧

手順7.コントロール(UI部品)とのバインディング(結び付け)

 メインのMXMLファイルをデザインビューで開き、一覧データを表示するコントロール「DataGrid」を配置します。[データとサービス]ビューで設定したサービスの中から製品一覧を取得するメソッドである「getProducts():Product[]」を選択してデザインビューにあるDataGridにドラッグします。

図14 サービスのメソッドとデータグリッド設定
図14 サービスのメソッドとデータグリッド設定

 データをバインディングするダイアログが表示されます。

図15 [データにバインド]ダイアログ
図15 [データにバインド]ダイアログ

 この状態で[OK]をクリックすると、DataGridの項目がProductServiceのgetProductsを呼び出した際に返ってくるProductクラスの属性に設定されます。

手順8.動作確認

 これまでの作業を保存して実行すると、WebブラウザでTomcatにアクセスして製品(product)データの一覧がDataGridに表示されることが確認できます。

図16 まったくコーディングせずに製品(product)データの一覧がDataGridに表示された!
図16 まったくコーディングせずに製品(product)データの一覧がDataGridに表示された!

 このように、データ取得するだけなら、Flex側のコードを手動で書かなくてもサービスを呼び出し、結果を表示するアプリケーションを作成可能です。

Flex 3の案件でもFlash Builderは生産性を向上させる

 Flex BuilderからFlash Builder 4とブランディングが変更され、パッケージエクスプローラーの導入や、FlexUnit 4との統合、そしてデータ中心開発といった大きな機能が追加されました。

 また、従来のコーディング機能もより使いやすく改良され、まさにテーマの1つである生産性の向上が見込めるかと思います。

 Flash Builder 4は、Flex 4だけではなく、Flex 3もサポートしています。Flex 3の案件でも、開発環境として導入することでコーディングが楽になり、生産性の向上に貢献できるのではないでしょうか。

@IT関連記事


いまさら聞けないFlex、そして、いまこそ入門のとき!?
Flex 3正式版リリース! Flexの過去・現在・未来
 
先日ついに正式リリースされたFlashベースのRIA技術Flex 3。いまが入門に最適なFlexの過去・現在・未来を一挙に解説
リッチクライアント & 帳票」フ ォーラム 2008/3/31
PHPとFlex作法の違いをずばり解説
PHPプログラマのためのFlex入門 PHPとFlex Builderの開発作法の違いを知って、Flashへの苦手意識を克服しよう。勉強会で簡単なサンプルを作ってみませんか?
リッチクライアント & 帳票」フォーラム 2009/11/11
Java開発者のためのActionScript/Flex Builder入門
Javaプログラマでも知っておくべきFlexのポイント なぜJava開発者にFlexはお勧めなのか? その理由とともに両者の類似点や動くサンプルでFlexの便利機能を紹介する
リッチクライアント & 帳票」フォーラム 2009/8/28
作って学ぶAIRウィジェットの基礎→応用
最近よく聞くAdobe AIRって何だっけ? ウィジェットを簡単に作れるらしいけど…… と曖昧な知識のあなたに贈る超入門連載。楽しいサンプルを作って基礎から応用まで学ぼう
業務用RIAの本命!? Flex+Java開発入門
本連載では、サーバサイドとしてJava、リッチなクライアントサイドとしてJavaと相性の良いFlexを用いたRIA開発の基礎を解説します。EclipseベースのIDEであるFlex Builderを使って、Tomcatで動くRIAをいくつか作成しましょう
速いFlash/ActionScriptチューニング入門
Flash/ActionScriptチューニングの基礎知識から実践的テクニックまでを紹介する連載。読みながら試せるオンライン・サンプルもあります。Adobe AIR/Flexにも応用可能です
デザインハック」コーナー
現場で使えるFlex実践テクニック
本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します
Flex2でWebアプリ開発
これまで3週間かかっていたWebアプリのモック開発工程を、3日に短縮できたというFlex2の体験版をダウンロードして簡単アプリを作ってみよう

プロフィール:舩倉 純(ふなくら じゅん):ブログ
株式会社ニークシステムテクノロジー 技術部所属

PerlやJavaなどでWebアプリケーションでの開発に従事し、SeasarProjectでオープンソースプロジェクトのコミッタとしても活動中。Flexは1.5のころから利用を始め、Flex User Groupでの勉強会にも参加。

全国11都市を回る「Flex User Group 全国ツアー 2010」展開中。Adobe MAXツアー招待やAdobe CS5などが抽選で当たる可能性も

1-2-3  

 INDEX
Flexフレームワークで変わるRIA開発の現場(2)
Flex開発を楽にするFlash Builder 4の11の機能とは
  Page1
「Flash Builder 4」の掲げる3つのテーマ
Flash Builder 4の「生産性の向上」機能
  Page2
Flash Builder 4の「コーディング自動化」機能
Flash Builderを使うデザイン/開発の連携ワークフロー
【11】Flash Builder 4の目玉機能「データ中心開発」
Page3
Flex 3の案件でもFlash Builderは生産性を向上させる


リッチクライアント&帳票 全記事一覧へ



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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間