Download presentation
Presentation is loading. Please wait.
1
Flex カス タムコン ポーネン ト の 作 り 方 ( 有 )CO-CONV 最田 健一
2
自己紹介
3
にとよん という名前でブログやってま す http://tech.nitoyon.com/
4
Agenda 1.Flex 概要 2. 非カスタムコンポーネント な開発 3. カスタムコンポーネント開 発 4. まとめ
5
１
6
Flex 概要
7
Flash と ActionScript がベース
8
しかし
9
タイムライン が
10
ない
11
プログ ラマ用
12
Flash やっ てた人よ り
13
Java や C# 経験者 の方が とっつきやす い
14
特徴
15
豊富な GUI パーツ
17
XML で 配置
18
具体例
19
具体例
20
具体例
21
具体例
22
具体例
23
流行し 始め
24
Anywhere.FM http://www.anywhere.fm/player/ http://www.anywhere.fm/player/
25
SearchMash （ Google の検索実験サイト）
26
Google Analytics AIR beta ※ これは AIR だが UI は Flex で作られている
27
弊社某案件
28
2
29
非カスタ ムコン ポーネン トな開発
30
鉄則
31
可能な限り 既存のコン ポーネント を使おう
32
複雑 な 塊 には 複合コンポー ネント を定義
33
例
36
複合コンポーネント化
38
DateRange.mxml
39
利点
40
構造が すっきり
41
実装の 責任範囲 が明確に
42
再利用性 UP
43
注意点
44
大きなクラスも問題だ が
45
分けすぎにも注意
46
バランスが大事
47
既存のコン ポーネントに 不満があれば
48
3
49
カスタム コンポー ネント開 発
50
大きく分け て ３通りの方 法
51
1 既存コンポーネント の 拡張 2 既存コンポーネント の 再実装 3 新規コンポーネン ト
52
1 既存コンポーネント の 拡張 既存コンポーネン トを 継承 して 機能を追加
53
コンポーネン トのクラス階 層
54
UIComponent Button ScrollControlBase ListBase Tree DataGrid
55
UIComponent ListBase Button Tree DataGrid ScrollControlBase MyTree MyButton
56
新たなプロパ ティ や メソッド を 追加 できる
57
protected な メソッ ド や プロパティ を 使って色々できる
58
super の 前後に コードを入れ て色々できる
59
もしも、 継承では限界 がある場合 は
60
つまり、 private にアクセス したいときは
61
2 既存コンポーネント の 再実装 既存コンポーネントの ソースをコピーして 一部書き換える
62
UIComponent ListBase Button Tree DataGrid ScrollControlBase MyTree MyButton コピー
63
mx.controls.Button のソースコードは frameworks\source\mx\ controls\Button.as
64
mx.controls.Button のソースコードは frameworks\source\mx\ controls\Button.as ( 2,355 行 !!! )
65
あまりお薦め しない
66
ソースが 煩雑になる
67
ライセンス 的 に 微妙
68
開発 は OK ソース公開 NG 詳しくは、、、 Flex SDK の 「 license.htm 」をご覧くだ さい
69
2 3 新規コンポーネン ト １からコンポーネン トを 作る場合
70
UIComponent Button ScrollControlBase ListBase Tree DataGrid MyComp UIComponent を 継承する
71
UIComponent って何？
72
その前に、 ありがちな 実装例
73
円を描画する コンポーネン ト
74
<mx:Application xmlns:mx="http://www..." xmlns:comp="*"> <comp:Circle text="test" color="#ffffff" backgroundColor="#336699" width="100" height="100"/> 使用例
75
Package { import flash.text.*; import flash.events.Event; import mx.core.UIComponent; public class Circle extends UIComponent{ // テキスト private var textField:TextField; （つづく） } 実装例 (1/6) – クラス定義
76
/****** color プロパティ ******/ // 変数定義 private var _color:uint; // getter public function get color():uint { return _color; } // setter public function set color(value:uint):void { _color = value; dispatchEvent(new Event("colorChange")); } 実装例 (2/6) – プロパティ
77
/****** backgroundColor プロパティ ******/ // 変数定義 private var _backgroundColor:uint; // getter ・ setter は同様のため略 /****** text プロパティ ******/ // 変数定義 private var _text:String; // getter ・ setter は同様のため略 実装例 (3/6) – プロパティ (cont.)
78
// コンストラクタ public function Circle() { // TextField 作成 textField = new TextField(); addChild(textField); // イベント登録 addEventListener("colorChange", colorChangeHandler); addEventListener("backgroundColorChange", bgColorChangeHandler); addEventListener("textChange", textChangeHandler); } 実装例 (4/6) – コンストラクタ
79
private function colorChangeHandler(event:Event):void { render(); } private function bgColorChangeHandler(event:Event):void { render(); } private function textChangeHandler(event:Event):void { render(); } 実装例 (5/6) – イベントハンド ラ
80
// 描画処理 private function render():void { graphics.clear(); graphics.beginFill(backgroundColor); graphics.drawEllipse(0, 0, unscaledWidth, unscaledHeight); graphics.endFill(); var tf:TextFormat = textField.getTextFormat(); tf.color = color; tf.size = 30; textField.defaultTextFormat = tf; textField.text = text ? text : ""; } 実装例 (6/6) – 描画処理
81
できた！
82
問題点
83
イベント処 理が煩雑
84
プロパティの数だ け イベントハン ドラ が増える
85
パフォーマ ンスの問題
86
circle.text = " hoge " ; circle.color = 0xffff00; circle.backgroundColor = 0xff0000; このコードは 描画処理が３回走る
87
UIComponent で解決！
88
無効化メソッ ドの活用
89
// setter public function set color(value:uint):void { _color = value; dispatchEvent(new Event("colorChange")); invalidateDisplayList(); } setter で 無効化メソッドを呼 ぶ
90
次の画面更新で 描画処理が 行われる invalidateDisplayList()
91
addEventListener と イベントハンド ラ は、 いらないの で削除
92
override protected function updateDisplayList(w:Number, h:Number):void { super.updateDisplayList(w, h); // 忘れずに !! render(); } updateDisplayList で描画する
93
１度でも無効化され ると、次の画面更新 で Flex システムが 呼び出すメソッド updateDisplayList()
94
circle.text = " hoge " ; circle.color = 0xffff00; circle.backgroundColor = 0xff0000; ３回 invalidate される が 描画処理は１回だけ
95
（補足） 無効化メソッ ド３種類
96
1. 描画処理 invalidateDisplayList ↓ updateDisplayList
97
2. サイズ処 理 invalidateSize ↓ measure
98
3. プロパティ変更処 理 invalidateProperties ↓ commitProperties
99
さらに チューニング
100
// change フラグ private var colorChanged:Boolean = false; // setter public function set color(value:uint):void { _color = value; colorChanged = true; dispatchEvent(new Event("colorChange")); invalidateDisplayList(); } changed フラグを導入
101
// 描画処理 private function render():void { // ( 略 ) if(colorChanged) { colorChanged = false; var tf:TextFormat = textField.getTextFormat(); tf.color = color; tf.size = 30; textField.defaultTextFormat = tf; } textField.text = text ? text : ""; } changed フラグが true のとき のみ描画に反映
102
// 描画処理 private function render():void { // ( 略 ) if(colorChanged) { colorChanged = false; var tf:TextFormat = textField.getTextFormat(); tf.color = color; tf.size = 30; textField.defaultTextFormat = tf; } textField.text = text ? text : ""; } changed フラグが true のとき のみ描画に反映 この部分が重い処理の場合に 速度が向上する
103
さらに さらに チューニング
104
// コンストラクタ public function Circle() { // TextField 作成 textField = new TextField(); addChild(textField); } コンストラクタで 子を作成するのをやめる
105
// コンストラクタ public function Circle() { } override protected function createChildren(){ super.createChildren(); // TextField 作成 textField = new TextField(); addChild(textField); } コンストラクタで 子を作成するのをやめる
106
createChildren() は addChild されたとき に Flex が呼ぶメソッド
107
new だけされて addChild されない場合、 パフォーマンスが向上 するだけでなく
108
初期化のコードを createChildren() に 集約 できる
109
無効化メソッド・ createChildren の嬉しいところ
110
コーディング は 煩雑になるが 多少
111
書く場所が 一意に定まる
112
スパゲッティ になりがちな UI をすっきり 書ける
113
UIComponent こそが Flex の 肝
114
UIComponent は フレームワーク だ
115
4
116
まと め
117
基本は標準コンポーネントを使 う 不満があれば継承して拡張する どこにもなければ、 UIComponent を継承して、１か ら作る
118
参考資料 Flex コンポーネントの作成と拡張 flex2_createextendcomponents.pdf 前回よりは成長したブログ http://d.hatena.ne.jp/s-ohira/
Similar presentations
