D&D Mashup Framework

Durango
shoito
Flex3勉強会第60回@北陸

自己紹介
ハンドルネーム:shoito
ソフトウェアエンジニア@福井←仙台
技術歴:Flex(1年半くらい), Java(だいぶ)
仕事:開発支援ツールの開発
Blog : http://blog.air-life.net/
twitter : @shoito

おことわり
本資料には、Durangoに対し
ての誤認/説明不足な点があ
るやもしれません。気づかれ
た方は後ほどお教えください。

アジェンダ
Durango前提知識/概要
Durangoデモ
Durangoアプリ/コンポーネント
概要
作り方
自動コード生成
気付き/まとめ

なぜDurangoに
 関心を抱いたか?

Framework
Adobe AIR
Component

Durango

Drag & Drop

Reuse
Easily

Connect
Mashup

Automatic code generation

Adobe MAX 2008 US
Sneak Peek(ちら見せ)動画

Adobe Durango in HD
http://www.youtube.com/watch?v=UnWNNL4XuBs

Adobe AIRとは
Adobe製のデスクトップアプリ実行環境
リッチなUI
クロスプラットフォーム対応
ローカルリソースへアクセス可能
開発スタイル − Web技術をそのままに
HTML/CSS+JavaScript
Flash+ActionScript
MXML/CSS+ActionScript

マッシュアップとは
2つ以上の曲から片方はボーカルトラック、もう片方
はオケトラックを取り出してそれらをもともとあった
曲のようにミックスし重ねて一つにした音楽の手法
である。

Wikipedia

Durangoとは
再利用可能なコンポーネントを組み合わせてアプリ
ケーション構築を可能にするAdobe AIRのフレーム
ワーク
Durango対応コンポーネント同士であればコードの記
述無しでマッシュアップを実現可能
正式リリースはまだ(2009/02/21時点prerelease)

Durangoの機能

アプリ間でのコンポーネントのD&D
コンポーネント間接続
Webサービスの再利用
自動コード生成

インストール
Adobe Labs Durangoページからインストーラーをダ
ウンロード(Adobe Membershipに要登録)
http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_durango

あとはインストーラーが自動でサンプル、ライブラ
リ等を配置してくれる
Mac OSX
/Applications/Adobe/Durango
Windows
C:¥Program Files¥Adobe¥Durango

Durangoライブラリ
ReuseLib.swc
Durangoアプリに追加で必要な唯一のライブラリ
約1.3 MB
Mac OSX
/Applications/Adobe/Durango/Libraries/ReuseLib.swc
Windows
C:¥Program Files¥Adobe¥Durango¥Libraries
¥ReuseLib.swc

Durangoを動かしてみる

Durangoアプリケーション
/コンポーネントの概要

アプリケーションタイプ
ドナー

Durango

レシーバー

アプリケーションタイプ
レシーバー&ドナー

Durango
Durango
Component

Durangoコンポーネント
ビジュアルコンポーネント
UIを伴うコンポーネント
Google Maps, Movie Player, Chat ...
サービス(非ビジュアル)コンポーネント
データ(Array, XML, String ...)
Web Service, DBアクセス ...

Durangoアプリケーション
/コンポーネントの作り方

プロジェクトの準備
(Flex Builderを使用)
Flexプロジェクト作成
ファイル>新規>Flexプロジェクト
デスクトップアプリケーション(Adobe AIR)を選択
SWCの追加でReuseLib.swcを選択
追加コンパイル引数を追加(中身は後ほど)
-load-config+=DynamicConfig.xml

ビジュアルコンポーネントの
作り方

作成するコンポーネントの構成

Hello!

<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml">

Push

<mx:Text id="helloText" width="180" height="120"/>
<mx:Button id="pushButton" label="Push"/>

</mx:VBox>

手順1: atl.reuse.IComposableを実装する

<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
implements= "atl.reuse.IComposable">

<mx:Text id="helloText" width="180" height="120"/>
<mx:Button id="pushButton" label="Push"/>

</mx:VBox>

再利用可能なDurangoコンポーネントにするため

手順2: reusableプロパティを定義する
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
implements= "atl.reuse.IComposable">
<mx:Script>
<![CDATA[
private var _reusable:Boolean = true;

public function get reusable():Boolean {
return _reusable;
}
public function set reusable (b:Boolean ):void {
_reusable = b;
}
]]>
</mx:Script>

<mx:Text id="helloText" width="180" height="120"/>

サービスコンポーネントの
作り方

作成するコンポーネントの構成
テキスト部分のデータを保持
Hello!
package {
public class HelloServiceComponent {
public var sourceText:String = "Hello!";
}
}

Push

手順1: [DesignModeOnly]メタタグを付与

package {
[DesignModeOnly]
public class HelloServiceComponent {
public var sourceText:String = "Hello!";
}
}

デザインモード時にReusable Services Panel上に
表示されるようにするため

手順2: mx.core.IMXMLObjectを実装する
package {
import mx.core.IMXMLObject;
[DesingModeOnly]
public class HelloServiceComponent implements IMXMLObject {
[Bindable]
[Inspectable]
public var id : String = null;
public function initialized (doc:Object, theId:String):void {
id = theId;
}
public var sourceText:String = "Hello!";
}
}

ReusableServicesCollectionに配置するため

手順3: atl.reuse.IComposableを実装
する

package {
import atl.reuse.IComposable;
import mx.core.IMXMLObject;
[DesingModeOnly]
public class HelloServiceComponent implements IComposable,
IMXMLObject {
[Bindable]
[Inspectable]
public var id : String = null;
public function initialized (doc:Object, id:String):void {
this.id = id;
}
public var sourceText:String = "Hello!";
}
}

手順4: reusableプロパティを定義する
package {
import atl.reuse.IComposable;
import mx.core.IMXMLObject;
[DesingModeOnly]
public class HelloServiceComponent implements IComposable,
IMXMLObject {
private var _reusable:Boolean = true;

public function get reusable():Boolean {
return _reusable;
}
public function set reusable (b:Boolean ):void {
_reusable = b;
}

ドナーアプリの作り方
1)
2)
3)

ComposableDragSupportオブジェクトを初期化
コンテナにビジュアルコンポーネントを配置
ReusableServicesCollectionにサービスコンポーネ
ントを配置

4)

ToolTrayHostコントロールを追加

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

initialize="initApp()" xmlns:local="*" xmlns:reuse="atl.reuse.*">

<mx:Script>


<![CDATA[



import atl.reuse.ComposableDragSupport;

(1)

public var dragSupport : ComposableDragSupport = null;

private function initApp () : void {

dragSupport = ComposableDragSupport.createDragSupportDonor(
reuseArea, this.nativeWindow, services);

dragSupport.setupComplete();
}

]]>
</mx:Script>
<mx:Canvas id="reuseArea" width="100%" height="100%">
<mx:Canvas id="dropHere" width="100%" height="100%">


<local:HelloVisualComponent id="display" htmlText="{staticText.sourceText}"/>
</mx:Canvas>
</mx:Canvas>

(2)

<reuse:ReusableServicesCollection id="services">


<local:HelloServiceComponent id="staticText"/>

</reuse:ReusableServicesCollection>

<reuse:ToolTrayHost />
</mx:WindowedApplication>

(4)

(3)

レシーバーアプリの作り方
1)
2)
3)
4)

ComposableDragSupportオブジェクトを初期化
ドロップ先のコンテナを配置
ドロップ先のReusableServicesCollectionを配置
ToolTrayHostコントロールを追加

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

initialize="initApp()" xmlns:local="*" xmlns:reuse="atl.reuse.*">

<mx:Script>


<![CDATA[



import atl.reuse.ComposableDragSupport;

(1)

public var dragSupport : ComposableDragSupport = null;

private function initApp () : void {

dragSupport = ComposableDragSupport.createDragSupport(
reuseArea, this.nativeWindow);

dragSupport.createDropHandlerFor(dropHere, services);

dragSupport.setupComplete();
}

]]>
</mx:Script>
<mx:Canvas id="reuseArea" width="100%" height="100%">
<mx:Canvas id="dropHere" width="100%" height="100%">
</mx:Canvas>
</mx:Canvas>
<reuse:ReusableServicesCollection id="services">
</reuse:ReusableServicesCollection>

<reuse:ToolTrayHost />
</mx:WindowedApplication>

(2)

(3)

(4)

コンテキストメニューから簡単作成
その他>New Adobe AIR Application > UI選択

レシーバー&ドナーアプリの
Flex Builderプロジェクトがこれだけで完成

自動コード生成を試す
0. ドナーアプリからコンポーネントをD&Dしておく
1. ツールトレイからSave Configurationを選択
 ↑設定を保存してから
2. Create Flex Builder Projectを選択(自動コード生成)

Before

After
bin/loadedにドナーのswfが配置される
コンポーネントに[SourceURLs]メタタ
グが指定されていれば、srcにソース
コードがDLされる

気付き

レシーバーはドナーのSWFをローカルに保持
MXML/CSS+ActionScript構成が対象
HTML/CSS+JavaScript構成は対象外

自動生成されたアプリの実行について

自動生成されたFlexBuilderプロジェクトから 
Durangoアプリが起動できない
Flex SDK 3.2使用時(3.1, 3.0であれば問題なし)

自動生成されたxxx-app.xml
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">

修正後
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">

定形コードは.asにまとめとくと楽ちん
DurangoApp.mxml
<mx:WindowedApplication creationComplete="initializeApplication()" ...../>
<mx:Script>
<![CDATA[
include "ApplicationScripts.as"
]]>
</mx:Script>

ApplicationScripts.as
public var dragSupport : ComposableDragSupport = null;
private function initializeApplication ():void {
dragSupport = ComposableDragSupport.createDragSupport(
container, this.nativeWindow);
dragSupport.createDropHandlerFor(dropHere, services);
dragSupport.setupComplete();
WindowSupport.loadWindowSettings(this.nativeWindow);
}

セキュリティに関して疑問
コンポーネントが信頼できるものかどうかの
判別手段は?
AIRのセキュリティモデルでうまいことなって
る?

まとめ

Durangoはペタペタとコンポーネントを組み
合わせてAIRアプリが作れる
自動コード生成を用いることで、さらにプロ
グラミング・発展が可能

Durangoサンプルアプリ一覧
HelloWorld(Donar)
HitTestProto(Receiver)
SimpleDonor(D)
Adobe Weather(D)
Adobe City Guide Demo(D)
Adobe City Map Demo(D)
Buzzword Extensions(R)

簡単に試せます

リファレンス
Adobe Labs - Durango
http://labs.adobe.com/technologies/durango/
Durango Hello World Tutorial
http://labs.adobe.com/technologies/durango/
durango_helloworld_tutorial.pdf

詳説Durango

主要構成要素
atl.reuse.IComposable
reusableプロパティのget, setをアクセサ定義
ComposableDragSupport
コンポーネントをdraggableにする
ReusableServicesCollection
サービスコンポーネントのコレクション

デザインモード
ビジュアルコンポーネントが選択可能
サービスコンポーネントが下部に表示
コンポーネント操作が可能
プロパティ編集
移動/リサイズ/削除

<reuse:ToolTrayHost .../>
フライパネルを表示するコンポーネント
offerConfigTools
アプリケーション設定の保存/読込み機能を追加する
offerCFPB
Flex Builderプロジェクト作成機能を追加する
offerUser
不明 - Toggle Desktopとツールチップが出るけど
dragSupportInstance
ComposableDragSupportのインスタンスを指定する

<reuse:ReusableServicesCollection>
サービスコンポーネントのコレクション
<reuse:ReusableServicesCollection id="services">

<service:ServiceComponentX id="zipCode"/>

<service:ServiceComponentY id="syncService"/>

</reuse:ReusableServicesCollection>

Reusable Services Panel上に表示される

Durango用メタデータ一覧
DynamicConfig.xmlに列挙しコンパイルオプションに指定する
AutoConnect

DesignModeOnly

PersistentStyles

NoDesktopBorder

PersistentProperties
Persistent
EditableProperties
Editable
ModuleFileName
SourceURLs

DynamicConfig.xml
<flex-config>
<compiler>
<keep-as3-metadata>
<name>AutoConnect</name>
<name>PersistentStyles</name>
<name>PersistentProperties</name>
<name>Persistent</name>
<name>EditableProperties</name>
<name>Editable</name>
<name>ModuleFileName</name>
<name>SourceURLs</name>
<name>DesignModeOnly</name>
<name>NoDesktopBorder</name>
</keep-as3-metadata>
</compiler>
</flex-config>

[AutoConnect]
他のコンポーネントと接続できることを示す
sink: データ入力としてのプロパティ
source: データ出力としてのプロパティ
nameMustMatch: コンポーネント同士のプロパティ名が一致していることが条件
allowMultiple: 複数接続可能
order: Propertiesの表示順

[AutoConnect(sink, source)]
public function set text (val:String):void {

[PersistentStyles]
ドロップ時に値を保持するスタイルを指定する
[PersistentStyles("color", "fontFamily", "fontSize")]
public class ReusableTextArea extends TextArea
implements IComposable {

[PersistentProperties]
ドロップ時に値を保持するプロパティを指定する
[PersistentProperties("text", "drawHello")]
public class ReusableTextArea extends TextArea
implements IComposable {

[Persistent]
ドロップ時に値を保存するプロパティであることを示す

[Persistent]
public function set fileName (name:String):void {

[Editable]
プロパティ編集画面の編集対象であることを示す
sink: データ入力としてのプロパティであることを示す
Name: 表示名
type: 型
Value: 値
Values: 選択オプション

[Editable(sink, type="File")]
public function get source():Object {

[DesignModeOnly]
サービスコンポーネントであることを示す

[DesignModeOnly]
public class HelloServiceComponent
implements IComposable, IMXMLObject {

[ModuleFileName]
[NoDesktopBorder]
詳細不明

メタタグの使われ方
こんな感じに組み合わせて使われる
[Bindable]
[Editable]
[Persistent]
[AutoConnect(source)]
public var sourceText : String = "Hello!";

Thanks Adobe Systems!