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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Flexメモ/「Flex3プログラミング入門」ざっと読み(2) へ行く。
  • 1 (2008-10-23 (木) 12:09:25)
  • 2 (2008-10-23 (木) 12:10:42)

Flexメモ/「Flex3プログラミング入門」ざっと読み(2)

Flexについて知らなさ過ぎるので、「Flex3プログラミング入門」にざっと目を通して
何ができるものなのか把握する。2回目。

→ 1回目はここに： Flexメモ/「Flex3プログラミング入門」ざっと読み

目次 †

ビジュアルコンポーネントで使用される基本概念 †

• サイズ:コンポーネントの高さと幅。サイズプロパティで取得と設定が可能。
• スキン: 外観に関するグラフィカルな要素を指す
• スタイル: CSSのようなもの。
• イベント: アプリ起動、マウス操作やキー入力によって発生
• ビヘイビア

Flexコントロール †

• インタフェースを司るビジュアルコンポーネントをコントロールと呼ぶ。
  • ボタン、ラベル、テキストフィールド、コンボボックス、チェックボックスなど
• コンテナ内に配置する。

Adobe Flex Component Explorer（コントロールの一覧）

http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
どんなコントロールが備わっているか、それぞれの外観とソースを確認できる。
また、これ自身がmxmlで書かれていて、しかも一つ一つは短いので、コードを読む勉強にも良さそう。

• HTMLのフォームのパーツをもっとリッチにした感じ。
• それぞれクラス名があって、タグ/プロパティ/イベント/メソッド/スタイルをもつ。

基本コントロール †

• ↑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> 開閉可能な階層ツリー

テキスト関連のコントロール †

• テキストデータの表示、入力処理用のコントロール
• 基本的なHTML文書を表示できる htmlText:ほげほげ（HTML文）
• スタイルによる書式設定ができる
  • 表示専用：<mx:Label>, <mx:Text>
  • 入力処理用： <mx:TextInput>, <mx:TextArea>,
  • リッチテキストエディタ： <mx:RichTextEditor>

画像コントロール †

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')" />

データグリッド †

要するに表。

何ができる？

• データ編集ができる
• 列幅を変えられる
• 列項目でソート
• 行選択時のイベント取得

コンテナ †

レイアウトコンテナ、ナビゲータコンテナの2種類ある。

• レイアウトコンテナ：レイアウトを制御する。
  • <div>タグのお利口さんバージョンって感じ
• ナビゲータコンテナ：
  • アコーディオン、タブ切りかえ、とかできるようになる。
  • ほほぉ。。これ使えば簡単にできるんだ。アコーディオン。
  • 子コンテナをグループとして管理する。
  • 管理できるのはコンテナのみ。コントロールを直接の子にはできない。

ビューステート †

• サーバアクセスなしに、画面遷移（画面の一部あるいは全部を切りかえ）
• タイムラインを使わずに設計できるので開発効率が高い
• 各場面をステートと呼ぶ。FireWorkdのフレームみたいなもん？
  • ステート間で構成要素を共有できる。

    <mx:Application ・・・>
        <mx:states>
            <mx:State name="ステート名" >
    							<!-- Stateオブジェクトについて記述 -->
            </mx:State>
        </mx:states>
        <!-- ベースステートについて記述 -->
    </mx:Application

トランジション <mx:transition> †

ステート切りかえ時にアニメーション効果をつけることができる

• ぼかし効果
• dissolve（不透明 → 透明に）
• フェードイン、フェードアウト
• Glow（発光効果）
• Iris（ターゲット中央のマスク矩形を拡張/縮小)
• ワイプ
• Move, Pause, Resize, Rotate, Zoom
• SoundEffect

パラレルにエフェクトかける<mx:Parallel>ことも、シーケンシャルにエフェクトをかける<mx:Sequence> こともできる。

スタイル †

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" ・・・/>

サーバとの通信 †

（時間なくなったので後で）

== (おわり) ==

投稿者八木 | パーマリンク

|

tag: Flex