本記事では、Flex 4.6 SDKから採用された新しいコンポーネントについて解説します。なお、Flash Builder 4.6にバンドルされている標準のFlex SDK(バージョン4.6.0.23201)を対象にしています。

前編ではSpinnerList/DateSpinner/ToggleSwitchコンポーネントを解説しました。後編となる本記事では、Callout/SplitViewNavigatorコンポーネントを解説します。

新しいモバイルコンポーネント

Flex 4.6 SDKで新しく追加されたコンポーネントは、主にFlexモバイルアプリケーション向けのコンポーネントで、次の5種類です。

  • SpinnerList
  • DateSpinner
  • ToggleSwitch
  • Callout
  • SplitViewNavigator

それでは各コンポーネントについて解説していきますが、前編ではSpinnerList/DateSpinner/ToggleSwitch、後編ではCallout/SplitViewNavigatorを取り上げます。

SpinnerListコンポーネント

SpinnerListは、上下にドラッグすることによって、回転ドラムのように動作するリストのコンポーネントです。一般的には、NumericStepperコンポーネントのように、数字選択の用途で使用します。

ListBaseを継承しているので、Listコンポーネントと同様にdataProviderプロパティにデータをセットしてリストを構築します。SpinnerListコンポーネントは常に単一の選択状態をサポートし、選択した項目はコンポーネントの中心に位置するという特徴を兼ね備えています。

SpinnerListコンポーネントを使用するときには、基本的にSpinnerListContainerと併せて使います。次のコードは、SpinnerListコンポーネントを使ったシンプルなサンプルです(サンプル:SpinnerListSample.fxp)。

ソースコード:SpinnerListSample/src/views/SpinnerListSampleView01.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- SpinnerList Sample 01 --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "SpinnerList Sample" > <s:SpinnerListContainer width = "100" verticalCenter = "0" horizontalCenter = "0" > <s:SpinnerList width="100%" textAlign="center"> <s:dataProvider> <s:ArrayList> <fx:int>1</fx:int> <fx:int>2</fx:int> <fx:int>3</fx:int> <fx:int>4</fx:int> <fx:int>5</fx:int> <fx:int>6</fx:int> <fx:int>7</fx:int> <fx:int>8</fx:int> <fx:int>9</fx:int> </s:ArrayList> </s:dataProvider> </s:SpinnerList> </s:SpinnerListContainer> </s:View>

SpinnerContainerは、複数のSpinnerListを内包することができ、水平方向にレイアウトする機能を持っているので、次のようなUIを構築することも可能です。

ソースコード:SpinnerListSample/src/views/SpinnerListSampleView02.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- SpinnerList Sample 02 --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "SpinnerList Sample" > <s:SpinnerListContainer width = "200" verticalCenter = "0" horizontalCenter = "0" > <s:SpinnerList width="100%" textAlign="center"> <s:dataProvider>…</s:dataProvider> </s:SpinnerList> <s:SpinnerList width="100%" textAlign="center"> <s:dataProvider>…</s:dataProvider> </s:SpinnerList> </s:SpinnerListContainer> </s:View>

SpinnerListのアイテムレンダラーをIconItemRendererに変更することで、画像を表示することも可能です。

ソースコード:SpinnerListSample/src/views/SpinnerListSampleView03.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- SpinnerList Sample 03 --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "SpinnerList Sample 03" > <fx:Declarations> <s:ArrayList id="listData"> <fx:Object data="@Embed(source='assets/images/taigaBlack.png')" label="" /> <fx:Object data="@Embed(source='assets/images/taigaBlue.png')" label="" /> <fx:Object data="@Embed(source='assets/images/taigaGreen.png')" label="" /> <fx:Object data="@Embed(source='assets/images/taigaOrange.png')" label="" /> <fx:Object data="@Embed(source='assets/images/taigaPink.png')" label="" /> <fx:Object data="@Embed(source='assets/images/taigaRed.png')" label="" /> <fx:Object data="@Embed(source='assets/images/taigaYellow.png')" label="" /> </s:ArrayList> </fx:Declarations> <s:SpinnerListContainer width = "400" height = "300" verticalCenter = "0" horizontalCenter = "0" > <s:SpinnerList width="100%" textAlign="center" dataProvider="{listData}"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer iconField="data" /> </fx:Component> </s:itemRenderer> </s:SpinnerList> <s:SpinnerList width="100%" textAlign="center" dataProvider="{listData}"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer iconField="data" /> </fx:Component> </s:itemRenderer> </s:SpinnerList> </s:SpinnerListContainer> </s:View>

DateSpinnerコンポーネント

DateSpinnerは、前述のSprinnerContainerとSpinnerListを拡張した、日付選択コンポーネントです。次の3つの表示モードを備えています。

  • 「日付」表示(年月日) displayMode=”date”
  • 「時刻」表示(時分) displayMode=”time”
  • 「日付+時刻」表示(月日時分) displayMode=”dateAndTime”

さらにロケールにも対応しているので、日本表記にする場合は、localeスタイルプロパティに”ja_JP”という値を指定します(デフォルト値は“en_US”)。他にも、選択できる日付の範囲を指定することができるminDate/maxDateプロパティや、選択できる分間隔を指定するminuteStepSizeプロパティが用意されています。

次のコードは、DateSpinnerコンポーネントを使ったサンプルで、ロケールは“ja_JP”、表示モードは日付に設定しています(サンプル:DateSpinnerSample.fxp)

ソースコード:DateSpinnerSample/src/views/DateSpinnerSampleView01.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- DateSpinner Sample 01 --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "SpinnerList Sample 01" > <s:DateSpinner width = "400" displayMode = "date" verticalCenter = "0" horizontalCenter = "0" locale = "ja_JP" /> </s:View>

他の指定方法と出力結果を以下にまとめました。

ロケール:“ja_JP”、表示モード:時間

ソースコード:DateSpinnerSample/src/views/DateSpinnerSampleView02.mxml

<s:DateSpinner displayMode = "time" locale = "ja_JP" />

ロケール:“en_US”、表示モード:時間

ソースコード:DateSpinnerSample/src/views/DateSpinnerSampleView03.mxml

<s:DateSpinner displayMode = "time" locale = "en_US" />

ロケール:“ja_JP”、表示モード:日付+時間

ソースコード:DateSpinnerSample/src/views/DateSpinnerSampleView04.mxml

<s:DateSpinner displayMode = "dateAndTime" locale = "ja_JP" />

ロケール:“ja_JP”、表示モード:日付(選択範囲を制限)

ソースコード:DateSpinnerSample/src/views/DateSpinnerSampleView05.mxml

<s:DateSpinner displayMode = "date" locale = "ja_JP" minDate = "{new Date(2000, 10, 1)}" maxDate = "{new Date(2020, 11, 1)}" selectedDate = "{new Date(2011, 10, 20)}" />

ロケール:“en_US”、表示モード:時間(選択肢を15分間隔に設定)

ソースコード:DateSpinnerSample/src/views/DateSpinnerSampleView06.mxml

<s:DateSpinner displayMode = "time" locale = "en_US" minuteStepSize = "15" />

ToggleSwitchコンポーネント

ToggleSwitchは、モバイルやタブレットデバイスで馴染みのあるトグルスイッチコンポーネントです。ToggleButtonBaseを継承しているので、ToggleButtonコンポーネントと同じようにオン/オフ(選択/非選択)を切り替えることができ、さらにHSliderコンポーネントのようなスライダー操作機能を兼ね備えています。

次のコードは、ToggleSwitch コンポーネントを使ったシンプルなサンプルです(サンプル:ToggleSwitchSample.fxp)。

ソースコード:ToggleSwitchSample/src/views/ToggleSwitchSampleView01.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- ToggleSwitch Sample 01 --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "ToggleSwitch Sample 01" > <s:layout> <s:VerticalLayout verticalAlign = "middle" horizontalAlign = "center" /> </s:layout> <s:ToggleSwitch selected="true" /> <s:ToggleSwitch selected="false" /> </s:View>

ToggleSwitchコンポーネントのラベルを変更する場合には、ToggleSwitchSkinクラスを拡張したカスタムスキンを作成します。次のコードは、ToggleSwitchコンポーネントのラベルと、選択/非選択状態それぞれのスキンカラーを変更するカスタムスキンクラスです。

ソースコード:ToggleSwitchSample/src/skins/CustomToggleSwitchSkin.as

package skins { import spark.skins.mobile.ToggleSwitchSkin; /** * Custom ToggleSwitch Skin */ public class CustomToggleSwitchSkin extends ToggleSwitchSkin { public function CustomToggleSwitchSkin() { super(); selectedLabel = "ja_JP"; //選択状態のラベル文字列 unselectedLabel = "en_US"; //非選択状態のラベル文字列 setStyle("accentColor", "0xff6666");//選択状態のスキンカラー setStyle("chromeColor", "0x6666ff");//非選択状態のスキンカラー } } }

次は、作成したカスタムスキンを適用したサンプルです。ToggleSwitchを使って、前述のDateSpinnerコンポーネントのlocaleスタイルプロパティの値を切り替えるというものです。

ソースコード:ToggleSwitchSample/src/views/ToggleSwitchSampleView02.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- ToggleSwitch Sample 02 --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "ToggleSwitch Sample 02" > … <s:ToggleSwitch id = "ts" selected = "true" skinClass = "skins.CustomToggleSwitchSkin" /> <s:DateSpinner displayMode = "date" locale = "{ts.selected?'ja_JP':'en_US'}" /> </s:View>

後編では、Callout/SplitViewNavigatorを解説します。

関連記事