&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]]
 
 *** 画像コントロール [#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]]
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

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

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)