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

図1　SpinnerListSampleView01.mxmlの出力結果

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>
    

図2　SpinnerListSampleView02.mxmlの出力結果

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>
    

図3　SpinnerListSampleView03.mxmlの出力結果

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>
    

図4　DateSpinnerSampleView01.mxmlの出力結果。現在の日付となる選択肢部分は青色で表示されます（時刻表示のときには適用されません）

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

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

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

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

図5　DateSpinnerSampleView02.mxmlの出力結果。“ja_JP”では24時間表示となります

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

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

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

図6　DateSpinnerSampleView03.mxmlの出力結果。“en_US”ではAM／PM表示となります

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

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

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

図7　DateSpinnerSampleView04.mxmlの出力結果

ロケール：“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)}"
 /> 
    

図8　DateSpinnerSampleView05.mxmlの出力結果

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

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

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

図9　DateSpinnerSampleView06.mxmlの出力結果

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>
    

図10　ToggleSwitchSampleView01.mxmlの出力結果

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>
    

図11　ToggleSwitchSampleView02.mxmlの出力結果。ToggleSwitch選択状態

図12　ToggleSwitchSampleView02.mxmlの出力結果。ToggleSwitch非選択状態

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

Flex 4.6 SDKの新機能後編　Callout／SplitViewNavigator
Flex 4.5 モバイルマスターシリーズ
- Flex 4.5 モバイルマスターシリーズ　第1回　Flexモバイルプロジェクトの紹介
- Flex 4.5 モバイルマスターシリーズ　第2回　画面遷移フレームワーク
- Flex 4.5 モバイルマスターシリーズ　第3回　画面遷移フレームワークデータ編
- Flex 4.5 モバイルマスターシリーズ　第4回　Flexモバイルスキンの紹介
- Flex 4.5 モバイルマスターシリーズ　第5回　Flexモバイルアイテムレンダラーの紹介
- Flex 4.5 モバイルマスターシリーズ　第6回　モバイル機能を使った開発におけるパフォーマンスの最適化
ADC MEETUP ROUND03 レポート　Flash SESSION4：What's new in Flex 4.6 SDK

Flex 4.6 SDKの新機能前編　SpinnerList／DateSpinner／ToggleSwitch

著者廣畑大雅 (taiga)氏

Content

作成日

ページツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

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

SpinnerListコンポーネント

DateSpinnerコンポーネント

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

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

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

ロケール：“ja_JP”、表示モード：日付（選択範囲を制限）

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

ToggleSwitchコンポーネント

関連記事

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Flex 4.6 SDKの新機能 前編 SpinnerList／DateSpinner／ToggleSwitch

著者 廣畑 大雅 (taiga)氏

Content

作成日

ページ ツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

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

SpinnerListコンポーネント

DateSpinnerコンポーネント

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

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

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

ロケール：“ja_JP”、表示モード：日付（選択範囲を制限）

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

ToggleSwitchコンポーネント

関連記事

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Flex 4.6 SDKの新機能前編　SpinnerList／DateSpinner／ToggleSwitch

著者廣畑大雅 (taiga)氏

ページツール