ADC MEETUP ROUND03 レポート Flash SESSION4： What's new in Flex 4.6 SDK
作成日
24 November 2011
ページ ツール |
必要条件
ユーザーレベル
すべて
Adobe Developer Connection（ADC）と連動する開発者向けイベント「ADC MEETUP ROUND3」では、General Sessionの他にHTML関連情報とFlash関連情報の2つのトラックが設けられた。FlashトラックのSession4では、廣畑大雅氏により、年内リリース予定のFlex SDK 4.6で採用されるスマートフォン／タブレット向けの新コンポーネントの紹介が行われた。
1 Flex SDKの開発ツール、Flash Builder
廣畑氏はまず、アドビが提供するFlex SDKの開発ツールであるFlash Builderの現状について紹介した。現在の正式リリースビルドはFlash Builder 4.5.1で、Flash Builder 4.5の場合はAndroidアプリのみの対応だったが、4.5.1からはiOSとBlackBerryOSにも対応している。
Flex SDK 4.6とともにFlash Builder 4.6もリリースされる予定で、Flex SDK 4.6の新機能に対応している。廣畑氏は「Flex SDK 4.6はまだ公開されてないため、正式公開時は多少内容が変更される可能性もある」と前置きした上で、SpinnerList／DateSpinner／ToggleSwitch／Callout／CalloutButton／SplitViewNavigatorなど、新規追加予定の6つのコンポーネントを中心にFlex SDK 4.6の新機能を紹介した。
2 SpinnerListコンポーネント
SpinnerListは任意のアイテムリストを図2.1のように表示するコンポーネントで、登録したアイテムが繰り返して表示される。動きとしては、フリック（PCではドラッグ）したり、画面上のアイテムを選択すると、リストがスクロールし選択されたアイテムの値がコンポーネントのセンターに移動する。なお、アイテムリストの数が画面上で表示できる数を超えない場合は、繰り返さず、センター揃えに固定配置される。
次は図2.1のMXMLソース。
<s:SpinnerList>
<s:dataProvider>
<s:ArrayList>
<fx:Object label="1" />
<fx:Object label="2" />
<fx:Object label="3" />
<fx:Object label="4" />
<fx:Object label="5" />
<fx:Object label="6" />
</s:ArrayList>
</s:dataProvider>
</s:SpinnerList>
SpinnerListを使えば、新しいリストを表現できるが、実際に使うにはデザイン的に足りない部分がある。その場合は、SpinnerListをSpinnerContainerに含めることで解決できる。SpinnerListをSpinnerContainerに含めると、図2.2のようにiOSのドラム式のリストのように表示された。デモでは、iPad2上だったにも関わらず、滑らかに操作できていた。廣畑氏によれば、「画面上にコンポーネントが増えれば増えるほど、コンテンツのパフォーマンスは下がるため、この点に気を付けて設計する必要がある」という。
次は図2.2のMXMLソース。
<s:SpinnerListContainer>
<s:SpinnerList>
<s:dataProvider>
<s:ArrayList>
<fx:Object label="1" />
<fx:Object label="2" />
<fx:Object label="3" />
<fx:Object label="4" />
<fx:Object label="5" />
<fx:Object label="6" />
</s:ArrayList>
</s:dataProvider>
</s:SpinnerList>
</s:SpinnerListContainer>
SpinnerListは、図2.3のように複数並べることもできる。SpinnerListContainerの中にSpinnerListを追加するだけで、あとは自動で中にあるSpinnerListのレイアウトをまとめてくれるようだ。当然なことだが、SpinnerListContainerに含めずに、複数のSpinnerListを生成した場合は、それぞれ独立されたSpinnerListとして配置される。
次は図2.3のMXMLソース。
<s:SpinnerListContainer>
<s:SpinnerList>
<s:dataProvider>
<s:ArrayList>
<fx:Object label="1" />
<fx:Object label="2" />
<fx:Object label="3" />
<fx:Object label="4" />
<fx:Object label="5" />
<fx:Object label="6" />
</s:ArrayList>
</s:dataProvider>
</s:SpinnerList>
<s:SpinnerList>
<s:dataProvider>
<s:ArrayList>
<fx:Object label="A" />
<fx:Object label="B" />
<fx:Object label="C" />
<fx:Object label="D" />
<fx:Object label="E" />
<fx:Object label="F" />
</s:ArrayList>
</s:dataProvider>
</s:SpinnerList>
</s:SpinnerListContainer>
また、SpinnerListは基本的にitemRendererを利用するため、図2.4のようにテキストの代わりに画像を利用することも可能だ。
3 DateSpinnerコンポーネント
DateSpinnerは、SpinnerListを拡張したコンポーネントだ。DateSpinnerにはdisplayMode属性があり、date（日付、図3.1）／time（時間、図3.2）／dateAndTime（日付と時間、図3.3）を指定できる。また、デフォルトがen_USのlocale属性は、localeスタイルプロパティで表示を変更することができる。さらに便利な点として、DateSpinnerでは、存在しないデータは選択できなくなる。例えば、うるう年の2月29日を選んだ状態で、年を変更すると、選択できる日付に自動に更新してくれる。
次はDateSpinnerで日付を表示するMXMLソース。
<s:DateSpinner displayMode="date" />
次はlocale属性を変更するstyleソース。
setStyle("locale", "en_US|ja_JP");
次はDateSpinnerで時間を表示するMXMLソース。
<s:DateSpinner displayMode="time" />
locale属性をja_JPに設定した場合でもen_USのように12時間形式に表示したり、1分刻みになっているアイテムリストを5分刻みに修正したり、表示されるリストの範囲を指定することもできる。
次はDateSpinnerで日付と時間を表示するMXMLソース。
<s:DateSpinner displayMode="dateAndTime" />
4 ToggleSwitchコンポーネント
ToggleSwitchコンポーネントにはselected属性があり、trueもしくはfalseを指定することで、フリック（PCではドラッグ）時の見た目を図4.1のように設定できる。
次はToggleSwitchを生成するMXMLソース。
<s:ToggleSwitch selected="true|false" />
ToggleSwitchに適用するラベルは、次のように別途のskinClassを利用することで変更する。
<s:ToggleSwitch selected="true" skinClass="jp.taiga.skin.LocaleToggleSwitchSkin />
ToggleSwitchのラベルに適用するskinのクラスファイルは、次のようにToggleSwitchの基本SkinクラスであるToggleSwitchSkinを拡張して設定できる。
package jp.taiga.skin {
import spark.skins.mobile.ToggleSwitchSkin;
public class LocaleToggleSwitchSkin extends ToggleSwitchSkin {
public function LocaleToggleSwitchSkin() {
super();
selectedLabel = "ja_JP"; // ex)OK
unselectedLabel = "en_US"; // ex)Cancel
}
}
}
5 CalloutコンポーネントとCalloutButtonコンポーネント
Calloutは吹き出しを表示するコンポーネントで、CalloutButtonはその吹き出しを表示するきっかけとなるボタンを表示するコンポーネントだ。例えば図5.1で見ると、「AAAA」と「BBBB」が表示されている吹き出し部分はCalloutコンポーネントで、「show」ボタン部分はCalloutButtonコンポーネントで生成されている。また、calloutLayoutコンポーネントを使って水平垂直などのレイアウトの変更することができる。なお、calloutContentタグの場合は省略することが可能だ。
次は図5.1のMXMLソース。
<s:CalloutButton label="show">
<s:calloutLayout>
<s:HorizontalLayout ・・・ />
</s:calloutLayout>
<s:calloutContent>
<s:Button label="AAAA" />
<s:Button label="BBBB" />
</s:calloutContent>
</s:CalloutButton>
6 SplitViewNavigatorコンポーネント
SplitViewNavigatorは、ViewNavigatorにCallout機能が追加されたコンポーネントで、モバイルデバイス特有の縦向き（portrait）と横向き（landscape）を自動でチェックして表示を切り替えてくれる。また、autoHideFirstNavigator属性にtrueまたはfalseを指定することで、firstViewをCallout形式あるいはメニュー形式で表示することができる（図6.1と図6.2）。「Flex 4.5でも似たような機能を自作するこができるが、正式なコンポーネントが提供されるのは嬉しいことだ」と廣畑氏は語る。
次はSplitViewNavigatorを生成するMXMLソース。
<s:SplitViewNavigator autoHideFirstViewNavigator="true|false">
<s:ViewNavigator firstView="views.MasterCategory" />
<s:ViewNavigator firstView="views.DetailView">
<s:actionContent.portrait>
<s:Button label="Show Navigator" />
</s:actionContent.portrait>
</s:ViewNavigator>
</s:SplitViewNavigator>
このように新しく追加されたコンポーネントの利便性とパフォーマンスは、モバイル開発ツールとしてのFlexの立場をもっと引き上げてくれることは間違いなさそうだ。
関連記事
ADC MEETUP ROUND03 レポート
- SESSION1： General Session from Adobe MAX 2011
- HTML SESSION2： Adobe new tools＿Introduction of Edge, Muse and Proto
- HTML SESSION3： HTML5でユーザビリティを高めるためのフォーム構築法
- HTML SESSION4： Design Tips & Development with jQuery Mobile and PhoneGap
- Flash SESSION2： Stage3Dの利用で広がるFlashの表現と可能性
- Flash SESSION3： AIR3の新機能＿Captive Runtime + Native Extensions
More Like This
- Flex mobile skins – Part 1: Optimized skinning basics
- 初めてのモバイルFlexアプリケーションの作成 - Twitter Trends
- Flex 4.5 SDK と Flash Builder 4.5を使用したモバイルアプリケーション開発
- Building a mobile employee directory sample with Flex and Flash Builder
- Flex 4.5 SDKのご紹介
- Flex 4.6 SDKの新機能 前編 SpinnerList／DateSpinner／ToggleSwitch
- Flash Builder 4.5 マスターシリーズ 第2回 Flash Builder 4.5での変更点と改善点、そして便利な機能
- Flex 4.5 モバイル マスターシリーズ 第4回 Flexモバイルスキンの紹介
- Flex 4.5 SDK マスターシリーズ 第1回 コーディング環境の大幅な強化
- Flex 4.5 モバイル マスターシリーズ 第5回 Flexモバイルアイテムレンダラーの紹介
