Flex カスタムコンポーネントの作り方

Flexカスタムコンポーネントの作り方 (有)CO-CONV最田健一

自己紹介

にとよんという名前でブログやってます http://tech.nitoyon.com/

Agenda • Flex概要 • 非カスタムコンポーネントな開発 • カスタムコンポーネント開発 • まとめ

Flex概要

Flash と ActionScriptがベース

しかし

タイムラインが

ない

プログラマ用

Flashやってた人より

JavaやC#経験者の方がとっつきやすい

特徴

豊富なGUIパーツ

XMLで配置

<mx:Panel title="パネル"> <mx:HBox> <mx:Button label="ボタン"/> <mx:CheckBox label="チェックボックス"/> <mx:RadioButton label="ラジオボタン"/> <mx:ComboBox dataProvider="{array}"/> </mx:HBox> </mx:Panel> 具体例

流行し始め

Anywhere.FM http://www.anywhere.fm/player/

SearchMash （Googleの検索実験サイト）

Google Analytics AIR beta ※ これはAIRだがUIはFlexで作られている

弊社某案件

非カスタムコンポーネントな開発

鉄則

可能な限り既存のコンポーネントを使おう

複雑な塊には複合コンポーネントを定義

<?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>

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe..."> <mx:Labeltext="春休み"/><mx:HBox> <mx:DateField/> <mx:Label text="～"/> <mx:DateField/> </mx:HBox></mx:Application>

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe..."> <mx:Labeltext="春休み"/><mx:HBox> <mx:DateField/> <mx:Label text="～"/> <mx:DateField/> </mx:HBox></mx:Application> 複合コンポーネント化

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe..."xmlns:comp="*"> <mx:Labeltext="春休み"/><comp:DateRange/></mx:Application>

<?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

利点

構造がすっきり

実装の責任範囲が明確に

再利用性UP

注意点

大きなクラスも問題だが

分けすぎにも注意

バランスが大事

既存のコンポーネントに不満があれば

カスタムコンポーネント開発

大きく分けて３通りの方法

Flex カスタムコンポーネントの作り方