Flexとは - FlashベースのRich Internet Applications (RIAs) 作成環境。MXMLと呼ばれるXMLの

マークアップとJavaScriptライクなスクリプト言語で、簡単にアプリケーションを作ることができる。

Flash Playerの普及率は約99%。Flex SDKはコンパイラとライブラリとツール群で構成される。

複雑なアプリケーションには、アニメーションツールとして進化したFlash IDEよりも向いている。

AIRとは - Adobe Integrated Runtime (AIR) は、Flashやウェブコンテンツをデスクトップアプリと

して動かすソリューション。AIRの実行環境さえあれば動作する (OSに依存しない)。

なぜFlexなのか? - 綺麗に素早く書けて、リッチで動作も速く、オープンソースでフリーだから。

他との比較 - Flash IDEやAjax等との比較の説明。MXMLやAjaxよりも素直に書ける点が利点。 (Ajax

よりも"hackery"ではない)。タイムラインベースのアニメーションはFlash IDEの方が、テキストの

動的ロードや単純なインタラクションにはHTML/Ajaxの方が向いている。

開発環境

- Flex Builder : 一番お勧めだが有料

- Eclipse : XMLエディタ有り。コンパイルできるよう設定することもできる。

- FlashDevelop : オープンソースのActionScript用IDE。Windowsのみ。

- TextMate : ActionScriptやFlexのサポート有り。Macのみ。有償。

- その他のテキストエディタ

コマンドラインからコンパイルする方法の情報は、http://livedocs.adobe.com/flex/3/html/compilers_01.html

Flex Builder - EclipseベースのAdobe純正IDE。スタンドアロン版とEclipse plug-in版の両方があるが、

スタンドアロン版がお勧め。

Flex Builderでのプロジェクト - アプリケーションはプロジェクト単位で扱う。具体的な操作方法の

説明等 (省略) 。プロジェクト下のフォルダ構成は、

- bin-debug : コンパイル済みファイル (.swf) や、テンプレートから生成したHTMLや補助ファイル等

- html-template : テンプレートHTMLファイル

- libs : 追加のコンパイル済みライブラリ群

- src : ソースコード。.mxml, .as。AIRの場合は Application Descriptor File も

デザインモードでは、WYSIWYGエディタによってUIを作成できる。作成した内容は自動的に.mxml

ファイルに反映される。

Flex Builderの使い方 - コンポーネントパネルの使い方やコンポーネントの種類、配置等 (省略) 。

http://examples.adobe.com/flex3/componentexplorer/explorer.html

Flex Property Panel - Flex Property panelからコンポーネントのプロパティを直接編集できる。

代表的なプロパティの紹介等 (省略) 。

<mx:Button label="Two" visible="false"/>

<mx:Button label="Two" visible="false" includeInLayout="false"/>

では両方とも表示されないが、前者はレイアウトにそのサイズが考慮され、後者では考慮されない

<mx:TextArea alpha="0.5" text="..."/>

alphaプロパティで半透明にできる。

ソースモードでは、.mxmlファイルを直接編集できる。コード補完機能あり (Ctrl+Space) 。

MXML - XMLフォーマットの構造の紹介等 (省略) 。

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

のxmlnsの部分は、"http://www.adobe.com/2006/mxml"を指すネームスペースmxを作成するという意味。

("MX"の意味は不明。"Maximum eXperience"という説もある)

Flex3 良いですね。読書ログに感謝！

ActionScriptの埋め込み - HTMLタグの中のJavaScriptのように、MXMLタグの中に埋め込める。

また、<mx:Script>の中に書くこともできる。

<mx:Button id="myButton" click="someComponent.someProperty = 'something'" />

<mx:Script>

<![CDATA[

// ActionScript

]]>

</mx:Script>

Dot Notation - ".プロパティ名"で、コンポーネントのプロパティを読み書きできる。

<mx:TextInput id="fullNameTextInput" text="John Smith"/>

fullNameTextInput.text // => John Smith

fullNameTextInput.text = "John Smith";

関数の定義 - public, privateの指定子や、引数の省略と省略時の値、戻り値の型を

指定できる。

public function setForm(txt = "John Smith", sel = true):void

変数の定義 - "var"で定義する。

public var username = "Tom";

データ型 - 基本的な組み込み型は以下の通り。

String: 文字列。初期値はnull

Number: 小数を含む数値。初期値はNaN

uint: 0 ～ 4,294,967,295の整数。初期値は0

int: -2,147,483,648 ～ 2,147,483,647の整数。初期値は0

Boolean: true/false。初期値はfalse

void: undefinedのみを取る型。

Object型 - 任意のプロパティを持つことができるコンテナ

var car:Object = new Object();

car.color = "red";

Class - Objectをベースとして、プロパティやメソッドを規定したもの。

public class Car

{

var color:uint;

}

var car:Car = new Car();

car.color = 0xFF0000;

MXMLとの関係 - MXMLは内部的にはActionScriptに変換されてコンパイルされる。各タグは

対応するクラスのオブジェクトに、各属性はプロパティやスタイル、イベントリスナに

変換される。

コメント - ActionScriptは"//"または"/* ～ */", MXMLは"<!-- ～ -->"

Flexのオンラインドキュメント - Flex BuilderのHelp→Help Contents、または

http://livedocs.adobe.com/flex/3/langref/index.html

MXMLでのイベントの定義方法 - タグの中の属性としてActionScriptを書く。

<mx:Label id="myLabel" text="The Button will change my text" />

<mx:Button id="myButton" label="Change it!" click="myLabel.text = 'Some new text'"/>

代表的なイベント - ActionScript内ではEvent.CHANGEなどの定数を使って指定する。

change : Event.CHANGE

click : MouseEvent.CLICK

creationComplete : FlexEvent.CREATION_COMPLETE

mouseDown : MouseEvent.MOUSE_DOWN

mouseUp : MouseEvent.MOUSE_UP

resize : Event.RESIZE

rollOut : MouseEvent.ROLL_OUT

rollOver : MouseEvent.ROLL_OVER

型について - 例えばNumericStepperは数値を保持するコントロールなので、その

数値はtextではなくvalueで取得する。valueの型はNumberで、'ageNS.value + 10'の

ように数値の演算に使える他、'"some string" + ageNS.value'のように書くと

文字列として連結できる (暗黙に文字列に変換して連結する)。NumberからStringへの

変換の明示的な指定には、以下のような方法がある。

fullNameTextInput.text = String(ageNS.value)

fullNameTextInput.text = ageNS.value as String

fullNameTextInput.text = ageNS.value.toString()

デバッグ - trace関数でコンソールにデバッグ出力できる。Flex Builderではブレーク

ポイントの設定、変数パネルなどが使える。

データバインディング - あるデータの内容や変更を他のオブジェクトにも伝搬させる。

<mx:TextInput id="helloTextInput" text="Hello, World"/>
<mx:Label text="{ helloTextInput.text }"/>
<mx:String id="firstName">Alaric</mx:String>
<mx:Label id="nameLabel" text="{'Hello, ' + firstName}"/>

また、mx:Bindingタグでバインディングだけ切り出すこともできる。

<mx:String id="firstName">Alaric</mx:String>
<mx:Label id="nameLabel"/>
<mx:Binding source="firstName" destination="nameLabel.text"/>

双方向 (互いにバインディング) することも可能。

データが変更される度にトリガされるので、使い方によっては重くなるケースがある。

データモデルを使ったバインディング -

<mx:Model id="model">
 <info>
...

絶対配置 - layout="absolute"。絶対座標でコンポーネントの位置を指定する。

Flex Builderのデフォルトだが、Panel等のコンテナの中は相対配置で指定するのが

一般的。

相対配置 - 他のコンポーネントの位置やサイズを考慮して位置を決定する。

layout="vertical", layout="horizontal"がよく使われる。

コンテナ - MXMLでは子要素として記述、またはASでaddChild()を使うことで、

任意の数のコンポーネントを含めることができる。

<mx:Panel>
 <mx:TextInput/>
</mx:Panel>

Panel, HBox, VBox, Divided Box, Tile, Grid, Form等。

各子要素は0からインデックス番号がつけられ、getChildAt(1)でアクセスできる。

また、removeChild()で削除、swapChildren()で置換ができる。

サイズ - width, heightプロパティで、ピクセル数またはパーセントで指定できる。

ただし、ASではパーセント指定は、percentWidth, percentHeightで0-100の数値に

より行う。minWidth, maxWidth, minHeight, maxHeightで最小、最大サイズも指定

できる。

レイアウト - paddingLeft, paddingRight, paddingTop, paddingBottomで余白を

設定できる。また、horizontalGap, verticalGapで子要素間のギャップを指定する

方法もある。内部ではレイアウトは、以下の順に行われる。

- コンポーネントのデフォルトサイズの設定

- 最深の要素から順にサイズの算出

- 上位のコンテナから順にサイズと位置の決定

レイアウトのコントロール - Spacer, HRule, VRule等。

<mx:HBox width="250">
 <mx:Button label="Left"/>
 <mx:Spacer width="100%"/>
 <mx:Button label="Right"/>
</mx:HBox>

フォームの作り方 - TextFieldやRadioButtonを配置してフォームを作る方法について。

日付の入力・選択にはDateFieldが便利 (formatStringで日付の書式を設定できる。

DateオブジェクトがselectedDateプロパティに格納される) 。

Validator - 必須項目のバリデーションは、以下のようなMXMLで記述できる。

<mx:StringValidator id="firstNameValidator"
    source="{firstNameTextInput}"
    property="text">

requiredFieldErrorでエラーメッセージを指定する。

n文字以上のバリデーションは、required="false" (デフォルトはfalse) とし、

minLengthで文字数, tooShortErrorでエラーメッセージを記述する

<mx:StringValidator id="lastNameValidator"
    source="{lastNameTextInput}"
    property="text"
    required="false"
    minLength="2"
    tooShortError="What kind of last name is that?"/>

EmailValidator, PhoneNumberValidator, ZipCodeValidator等も使用できる。

バリデーションのタイミングはtriggerEventで、どのコントロールのイベントを

モニタするかはtriggerプロパティで指定できる。