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

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の出力結果
図4 DateSpinnerSampleView01.mxmlの出力結果

 現在の日付となる選択肢部分は青色で表示されます(時刻表示のときには適用されません)。

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

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

DateSpinnerSample/src/views/DateSpinnerSampleView02.mxml
<s:DateSpinner
displayMode = "time"
locale      = "ja_JP"
 />
図5 DateSpinnerSampleView02.mxmlの出力結果(“ja_JP”では24時間表示となります)
図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表示)
図6 DateSpinnerSampleView03.mxmlの出力結果(“en_US”ではAM/PM表示となります)

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

DateSpinnerSample/src/views/DateSpinnerSampleView04.mxml
<s:DateSpinner
displayMode = "dateAndTime"
locale      = "ja_JP"
/>
図7 DateSpinnerSampleView04.mxmlの出力結果
図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の出力結果
図8 DateSpinnerSampleView05.mxmlの出力結果

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

DateSpinnerSample/src/views/DateSpinnerSampleView06.mxml
<s:DateSpinner
displayMode    = "time"
locale         = "en_US"
minuteStepSize = "15"
 />
図9 DateSpinnerSampleView06.mxmlの出力結果
図9 DateSpinnerSampleView06.mxmlの出力結果

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

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

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング