Microsoft PowerPoint - G-1_Flexでつくる初めてのRIA.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - G-1_Flexでつくる初めてのRIA.ppt"

あつとしさくもと
5 years ago
Views:

1 Flex 3 でつくるはじめての RIA ( リッチインターネットアプリケーション ) たいらひでかづアドビ認定インストラクター (ACI) 1 Who is this guy? たいらひでかづ m-school インストラクター Flex および Flash アドビ認定インストラクター (ACI) *A 10 point footnote can go here, if necessary 2 1

2 本日のテーマ Flex による RIA ( リッチインターネットアプリケーション ) 開発の初歩をハンズオン ( 操作演習 ) を通して習得します Flex の開発経験がない Web アプリケーション開発者を対象としています代表的な UI コンポーネント ( コンテナやコントロール ) を配置したアプリケーション画面を作成し Web サービスなどのリモートデータへのアクセスを行いますまた Flex で開発したアプリケーションを Adobe Integrated Runtime (AIR) 上で実行可能な形式に変更する方法も簡単にご紹介します Flex Builder 3( ベータ ) を使用します LiveCycle Data Services(LCDS) 2.5 Express Edition を使用します 3 本日の内容 1. Flexの概要と基本シンタックス 2. MXMLカスタムコンポーネント 3. コンポーネントの使用に関して 4. Webサービス 5. イベント処理 6. リモート Java オブジェクトへのアクセス (LCDS 登場 ) 7. DataGrid の概要 8. Web 版のFlexアプリケーションをAIR 版に書き換える 4 2

3 セッションデータの公開以下の URL で 11 月 5 日 ( 月 ) 以降順次公開させていただきます著作権の関係上公開できないファイルがございます 5 P.5 リッチインターネットアプリケーションの理解 6 3

4 P.6 Flex の製品群 Adobe Flex 3 SDK 無償 Adobe Flex Builder 3 開発環境 Charting チャートコンポーネント LiveCycle Data Services ( 旧 Flex Data Services) Flex アプリケーションにおけるメッセージインフラストラクチャ ( データ通信の土台 ) 7 P.7 開発から配信までの流れ 8 4

5 開発から配信までの概要 Web サーババックグラウンドシステム.swf RDB ソースコード <mx:applic ation xmlns:mx=" adobe.com /2006/mxm l" xmlns="*" MXML + ActionScript アップロードアクセスダウンロードデータ要求応答 fx コンパイル.mxml.swf アプリ開発クライアント f e f ユーザクライアントブラウザプラグインの FlashPlayer クロスドメインは考慮していません 9 コンパイルについて Flash の場合パブリッシュ ( ) Flex の場合コンパイル ( ) ( ).as 10 5

6 P.8 MXML の基本シンタックス 11 P.10 インスタンス名 12 6

7 P.10 プロパティ値設定の 2 つの方法 13 P.10 バインディングバインディングあるインスタンスのプロパティを動的にほかのインスタンスのプロパティに反映させる 14 7

8 P.13 UI コンポーネントコントロール要素部品 Button TextInput List などコンテナレイアウトを担当さらに2つに分かれるレイアウトコンテナ静的なレイアウト担当 VBox, Hbox, Canvas などナビゲータコンテナ画面遷移担当 ViewStack, Accordion, TabNavigator 15 P.13 layout プロパティとレイアウトコンテナの対応 VBox HBox Canvas 16 8

9 P.17 MXML コンポーネント側 17 P.17 メインアプリケーション <mx:application> があるファイルをメインアプリケーションということがある 18 9

10 P.18 [Bindabel] メタキーワードが必要な場合宣言した変数 ( プロパティ ) をバインディングする場合コンパイル時警告表示にはなるがコンパイルエラーとはならない動作上の問題変数 ( プロパティ ) の値の変化が検出されないつまり値が動的に反映されない 19 P.23 WebService 1. インスタンス化とアクセス先の指定 <mx:webservice id= インスタンス名 wsdl= WSDL を指定 > 2. 送受信のトリガインスタンス名. 呼び出すメソッド名() ユーザイベントで呼び出す <mx:webservice> 自身のloadイベントで呼び出す WSDLの読み込み完了時 <mx:application> のcreationCompleteイベントで呼び出す Flexアプリケーションの初期化終了時 3. 受信 a. 受信したデータを単純に表示インスタンス名. 呼び出したメソッド名.lastResult b. 受信したデータを元に処理をする <mx:webservice> のresultイベントでActionScriptの処理関数を呼び出す 20 10

11 P.26 イベントイベントの種類ユーザイベントユーザによるマウスイベントキーボードイベントシステムイベントアプリケーション実行中に自動的に発生するイベントイベントオブジェクトイベントが発生すると必ず生成されるオブジェクト flash.events.event クラス ( またはそのサブクラス ) eventという文字列で ActionScriptの関数の引数に渡せるイベントオブジェクトには役立つ情報が満載 21 P.33 RemoteObject 1. インスタンス化とアクセス先の指定 <mx:remoteobject id= インスタンス名 wsdl= LCDS 上のJavaクラスを指定 > LCDS 上のJavaクラス POJO(Plain Old Java Object) を作成し WEB-INF classesフォルダに配置 WEB-INF flex remoting-config.xml を設定 2. 送受信のトリガインスタンス名. 呼び出すメソッド名() ユーザイベントで呼び出す <mx:application> のcreationCompleteイベントで呼び出す 3. 受信 a. 受信したデータを単純に表示インスタンス名. 呼び出したメソッド名.lastResult b. 受信したデータを元に処理をする <mx:remoteobject> のresultイベントでActionScriptの処理関数を呼び出す 22 11

12 23 ありがとうございましたもっと習得したい方はこちら Fx のトレーニングなら m-school

untitled

untitled Flex 2010 1 21 5106139 5106144 1 -------------------------------------------------------------------------------------------------p3 ----------------------------------------------------------------------------------------------p4