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 ポスト
  • このエントリーをはてなブックマークに追加

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の出力結果
図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選択状態)
図11 ToggleSwitchSampleView02.mxmlの出力結果(ToggleSwitch選択状態)
図12 ToggleSwitchSampleView02.mxmlの出力結果(ToggleSwitch非選択状態)
図12 ToggleSwitchSampleView02.mxmlの出力結果(ToggleSwitch非選択状態)

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

関連記事

こちらもおすすめ!Flex 4.5 参考情報

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング