SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

Flex 4.6 SDKの「SpinnerList」「DateSpinner」「ToggleSwitch」でできること

原題:Flex 4.6 SDKの新機能 前編 SpinnerList/DateSpinner/ToggleSwitch

  • X ポスト
  • このエントリーをはてなブックマークに追加

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>
図1 SpinnerListSampleView01.mxmlの出力結果
図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の出力結果
図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の出力結果
図3 SpinnerListSampleView03.mxmlの出力結果

次のページ
DateSpinnerコンポーネント

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

廣畑 大雅 (taiga)(ヒロハタ タイガ)

taiga.jpフリーランスの Web ディレクター/デザイナー。 Flash コンテンツ、Flex アプリケーションの設計/開発を中心に活動中。 Adobe 公式ユーザグループ F-site にも懇親会専用スタッフとして活動する。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6434 2013/01/15 17:39

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング