Flexメモ/「Flex3プログラミング入門」ざっと読み(2) の編集 : アークウェブWebマーケティングSandBox

タイムスタンプを変更しない

&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="ステート名" >
							
         </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]]

テキスト整形のルールを表示する

アークウェブWebマーケティングSandBox

アークウェブのサービスやソリューションはこちら