フォームの作り方 - 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プロパティで指定できる。

絶対配置 - 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>

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

<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>
...

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ではブレーク

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