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