463.html

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

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

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

[edit]

目次 †

目次
ビジュアルコンポーネントで使用される基本概念
Flexコントロール
コンテナ
ビューステート
- トランジション <mx:transition>
スタイル
サーバとの通信

↑

[edit]

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

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

↑

[edit]

Flexコントロール †

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

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

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

↑

[edit]

基本コントロール †

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

↑

[edit]

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

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

↑

[edit]

画像コントロール †

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

↑

[edit]

データグリッド †

要するに表。

何ができる？

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

↑

[edit]

コンテナ †

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

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

↑

[edit]

ビューステート †

サーバアクセスなしに、画面遷移（画面の一部あるいは全部を切りかえ）
タイムラインを使わずに設計できるので開発効率が高い

各場面をステートと呼ぶ。FireWorkdのフレームみたいなもん？

ステート間で構成要素を共有できる。

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

↑

[edit]

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

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

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

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

↑

[edit]

スタイル †

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

↑

[edit]

サーバとの通信 †

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

== (おわり) ==

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

tag: Flex

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

Flexメモ/「Flex3プログラミング入門」ざっと読み(2) http://www.ark-web.jp/sandbox/marketing/wiki/463.html

目次 †

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

Flexコントロール †

基本コントロール †

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

画像コントロール †

データグリッド †

コンテナ †

ビューステート †

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

スタイル †

サーバとの通信 †

Menu

Movable Type用プラグイン Aシリーズ

ECサイト構築 Zen Cartハイエンド

Tag

最新の20件

アークウェブビジネスブログ最新記事

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