&pgid;
Flexについて知らなさ過ぎるので、[[「Flex3プログラミング入門」>http://www.amazon.co.jp/Flex3プログラミング入門-宮田-亮/dp/4798020435/]]にざっと目を通して
何ができるものなのか把握する。2回目。
→ 1回目はここに： [[Flexメモ/「Flex3プログラミング入門」ざっと読み]]
** 目次 [#gd0197b6]
#contents();
** ビジュアルコンポーネントで使用される基本概念 [#be7a70f6]
- サイズ:コンポーネントの高さと幅。サイズプロパティで取得と設定が可能。
- スキン: 外観に関するグラフィカルな要素を指す
- スタイル: CSSのようなもの。
- イベント: アプリ起動、マウス操作やキー入力によって発生
- ビヘイビア
** Flexコントロール [#h871cb70]
- インタフェースを司るビジュアルコンポーネントをコントロールと呼ぶ。
-- ボタン、ラベル、テキストフィールド、コンボボックス、チェックボックスなど
- コンテナ内に配置する。
:Adobe Flex Component Explorer（コントロールの一覧）|
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
どんなコントロールが備わっているか、それぞれの外観とソースを確認できる。
また、これ自身がmxmlで書かれていて、しかも一つ一つは短いので、コードを読む勉強にも良さそう。
- HTMLのフォームのパーツをもっとリッチにした感じ。
- それぞれクラス名があって、タグ/プロパティ/イベント/メソッド/スタイルをもつ。
*** 基本コントロール [#g2b6d641]
- ↑Adobe Flex Component Explorer眺めた方が早いので省略
-- Alert
-- タグ見たらだいたい想像つくやつ： <mx.Button>、<mx:CheckBox>、<mx.ComboBox>、<mx:List>、<mx:Menu>、<mx:NumericStepper>（▲▼で数字選ぶやつ）、<mx:RadioButton>
-- スライダー <mx:HSlider><mx:VSlider>
-- カラーピッカー <mx:ColorPicker>
-- デートチューザー <mx:DateChooser> カレンダー表示して日を選ぶ
-- タイルリスト <mx:TileList> タイル上に複数のアイテムを並べて表示。Tileコンテナコントロールより初期表示が速い
-- ツリー <mx:Tree> 開閉可能な階層ツリー
*** テキスト関連のコントロール [#b0792f4c]
- テキストデータの表示、入力処理用のコントロール
- 基本的なHTML文書を表示できる htmlText:ほげほげ（HTML文）
- スタイルによる書式設定ができる
-- 表示専用：<mx:Label>, <mx:Text>
-- 入力処理用： <mx:TextInput>, <mx:TextArea>,
-- リッチテキストエディタ： <mx:RichTextEditor>
*** 画像コントロール [#q1fda685]
Flexで扱える画像ファイル形式
- JPEG（除：プログレッシブ）
- GIF（透明GIFもOK）
- PNG（αチャンネルOK）
- SWF
- SVG（実行時読み込みはNG。コンパイル時埋め込みのみ。）
画像の持たせ方
- アプリケーションファイル自身で持っておく（swfファイル内埋め込み）
- 実行時にロード
--(1)Imageコントロールのsourceプロパティ使ってロード → このコード実行時にロード
<mxd:Image source="asset/image1.jpg" />
--(2)Imageクラスのload()メソッドを使ってロード → 特定のタイミングにロードできる
<mx:Button label="説明" click="display_image.load('image2.jpg')" />
*** データグリッド [#z08e521b]
要するに表。
何ができる？
- データ編集ができる
- 列幅を変えられる
- 列項目でソート
- 行選択時のイベント取得
** コンテナ [#ma2c377f]
レイアウトコンテナ、ナビゲータコンテナの2種類ある。
-レイアウトコンテナ：レイアウトを制御する。
-- <div>タグのお利口さんバージョンって感じ
- ナビゲータコンテナ：
--アコーディオン、タブ切りかえ、とかできるようになる。
-- ほほぉ。。これ使えば簡単にできるんだ。アコーディオン。
-- 子コンテナをグループとして管理する。
-- 管理できるのはコンテナのみ。コントロールを直接の子にはできない。
** ビューステート [#w0bce70e]
- サーバアクセスなしに、画面遷移（画面の一部あるいは全部を切りかえ）
- タイムラインを使わずに設計できるので開発効率が高い
- 各場面をステートと呼ぶ。FireWorkdのフレームみたいなもん？
-- ステート間で構成要素を共有できる。
<mx:Application ・・・>
<mx:states>
<mx:State name="ステート名" >
<!-- Stateオブジェクトについて記述 -->
</mx:State>
</mx:states>
<!-- ベースステートについて記述 -->
</mx:Application
*** トランジション <mx:transition> [#vd7fd7b1]
ステート切りかえ時にアニメーション効果をつけることができる
- ぼかし効果
- dissolve（不透明 → 透明に）
- フェードイン、フェードアウト
- Glow（発光効果）
- Iris（ターゲット中央のマスク矩形を拡張/縮小)
- ワイプ
- Move, Pause, Resize, Rotate, Zoom
- SoundEffect
パラレルにエフェクトかける<mx:Parallel>ことも、シーケンシャルにエフェクトをかける<mx:Sequence> こともできる。
** スタイル [#db940dc3]
CSSとほぼ同じ。
- mxタグ内に直書き： 初期設定などに
< mx:Text id="foo" text="ほげほげ" fontSize="12" />
- setStyle()メソッド使う: 動的制御可能
style_pnl.setStyle ( "borderColor", border_col.selectedColor );
- <mx:Style>で書く
<mx:Style>
.style1 { font-size: 16px; } ←クラスセレクタ
Panel { font-size: 16px; } ← タイプセレクタも使える
</mx:Style>
クラスセレクタの適用は↓styleNameプロパティで行う
<mx:Text styleName ="style1" ・・・/>
** サーバとの通信 [#l8233e36]
（時間なくなったので後で）
== (おわり) ==
#blikifooter(八木)
tag: [[Flex>tag/Flex]]
![[ARK-Web SandBox]](image/sandbox.gif "[ARK-Web SandBox]")
