Flex 4.6 New Spark Components Preview

先日、Flex 4.6 SDK と Flash Builder 4.6 が発表されました。年内にリリースされる予定ですが、すでにプレリリースプログラムの募集も開始されているので、応募した開発者はリリース前に試すことができます。今回は、Flex 4.6 SDK に追加予定のコンポーネントを少しだけ紹介します。（リリース前なので、ソースコードは割愛）

spark.components.SpinnerList

データを回転ドラム上にリスト表示する新しいUIコンポーネントです。

Smartphoneで見た事があるアレを再現します。Listクラス同様、ListBaseクラスを継承しているので、dataProviderプロパティにデータセットを渡してリスト表示させます。SpinnerListは、一つの回転ドラムそのものなので、通常はSpinnerListContainerクラスでネストして使うことになるでしょう。

デフォルトでは、ドラム上にデータを巻き付ける（Wrap）した状態で表示されるので、ユーザーはエンドレスで回転させることができます（下図左）。この設定は、flag指定するだけで変更が可能になっています（下図右）。

SpinnerListとItemRendererを組み合わせれば、どんなカスタムSpinnerコンポーネントも簡単に作れそうです。下図はSpinnerListとIconItemRendererを組み合わせた例です。実機上で気持ちいいほどサクサク動きました。

spark.components.DateSpinner

日付や時間を表示したり指定したりする新しいUIコンポーネントです。

SpinnerListとSpinnerListContainerの組み合わせで出来ています。デフォルトでLocaleの現在時間が中央に表示され、アクセントカラーが付きます。

上図のような「日付」モードだけでなく、「時間」「日付＋時間」の表示モードを指定することで下図のような表示にすることもできます。（下図左「時間モード」、下図右「日付＋時間モード」）

選択できる期間に制約をつけたり（下図左）、選択する時間間隔を15分に設定したり（下図中央）、Localeに応じて日時表示のローカライズ（下図右）も簡単にできます。海外展開するアプリを作る場合は、Capabilities.languages[0]を指定すればOKですね。

spark.components.ToggleSwitch

今までFlexにありそうで無かったトグルスイッチ式のボタンコンポーネントです。

Flex 4でトグルスイッチが必要な場合は、ToggleButtonBaseクラスのサブクラス（ToggleButtonやCheckBoxなど）のスキンをカスタマイズするなどして代用していたかと思いますが、今後は本職のToggleSwitchが使えるようになります。親クラスは、やはりToggleButtonBaseです。

デフォルトのラベルは「ON」と「OFF」なので、ToggleSwitchSkinクラスでラベルを変更したり、CSSで色やスライド時間の設定が可能です。

spark.components.Callout

Callout（吹き出しみたいなもの）を表現する新しいUIコンポーネントです。

SkinnablePopUpContainerクラスを継承し、吹き出しのようなポップアップを表示することができます。ホストとなるコンポーネントを起点に吹き出しの方向を設定でき、モーダル指定やOK/Cancelボタンを扱うためのコミットflagなどがあります。

また、Calloutの中にViewNavigatorを入れることもできるため、Flex 4.5 までにはないUI表現が可能になります。

spark.components.SplitViewNavigator

デバイスの画面向きがLandscapeモード（横長）になった場合に、画面を分割（Split）してくれる新しいViewNavigatorです。

ViewNavigatorBaseのサブクラス（ViewNavigatorやTabbedViewNavigator）を複数ネストすることができ（数に制限なし）、分割表示してくれます。Calloutクラスとの併用で、Portraitモード（縦長）時にはCalloutでメニュー部分がポップアップし、Landscapeモード時にはメニュー部分が分割された画面左側に表示される、といったタブレットデバイスで見かけるようなレイアウトが簡単に実装できます。

他にも追加される予定のコンポーネントがありますが、プレビューなのでこの辺りにしておきます。

関連記事：
ADC「What’s new in Flex 4.6 SDK and Flash Builder 4.6」

広告