Flex4.6の新コンポーネントを使ってみた(その1)


11月末にリリースされたFlex4.6で追加された新コンポーネントたちを、2回に分けてご紹介したいと思います。
今回は以下の主な新コンポーネントについて、ご紹介します。

  • SpinnerList
  • DateSpinner
  • ToggleSwitch
  • 以下の2つについては、次回「その2」の方でご紹介する予定です。

  • SplitViewNavigator
  • Callout
  • SpinnerList

    SpinnerListを使えば、コンボボックスのような複数選択肢を表示できます。
    以下の図のように、1列だけでなく複数列、またiconRendererなどを使って画像を表示することも可能です。

    また、wrapElementsプロパティをtrueにすると、選択肢をループさせて表示することができます。
    ただし、表示領域に対して選択肢が充分にないと、有効になってくれないみたいです。

    <s:SpinnerListContainer width=”100%” height=”100%”>

      <s:SpinnerList width=”100%” height=”100%” dataProvider=”{arr}” wrapElements=”false”/>

    </s:SpinnerListContainer>

    DateSpinner

    DateSpinnerは日付&時刻表示に特化されたコンポーネントです。
    localプロパティに「ja_JP」を設定すると、日本語表記(2011年~)になるようです。
    その他、分を表示する際に使用する分間隔の指定や、最小・最大選択可能日付の指定が行えます。

    displayModeプロパティで、「date」「dateAndTime」「time」から表示形式が選べます(上図の並び)。

    <s:DateSpinner width=”100%” height=”100%”
    minDate=”{new Date(2011,0,1)}” maxDate=”{new Date(2011,11,31)}”
    selectedDate=”{new Date()}” displayMode=”date” locale=”jp_JP”/>

    ToggleSwitch

    ON/OFFのどちらかの選択を行うようなコンポーネントです。
    デフォルトはON/OFF表記になってますが、カスタムスキンを当てると表記を変更することも可能です。

    <s:ToggleSwitch width=”100%” height=”100%” skinClass=”skins.CustomToggleSwitchSkin” accentColor=”red” selected=”true”/>

    package skins
    {

      import spark.skins.mobile.ToggleSwitchSkin;
      public class CustomToggleSwitchSkin extends ToggleSwitchSkin
      {

        public function CustomToggleSwitchSkin()
        {

          super();
          selectedLabel = “Open”;
          unselectedLabel = “Closed”;

        }

      }

    }

    以上、新コンポーネントの内3つをご紹介しました。
    次回は、タブレット向けの新しいViewNavigator「SplitViewNavigator」と「Callout」コンポーネントについて、ご紹介したいと思います。