[Flex4] NumericStepperのプロパティ

[Flex4] NumericStepperのプロパティ


spark.components.Spinnerというクラスを継承して作られた
NumericStepper。その名前の通り数値を上下ボタンで変更できる機能。
意外に便利だが、プロパティを間違えると思わぬ罠に嵌る機能です。
また、最大値を変化量の倍数にしないと動き的に見ていておかしい感じになるので注意です。


継承関係


主要部分だけ NumericStepper => Spinner => Range
つまり、わからないところがあればSpinnerを見ればいいし、SpinnerでわからなければRangeを見ればいいのです。


Package : spark.components.NumericStepper


概要は上記の通り。サンプルはFlex4のリファレンスであるここを見るといいです。


このページの末尾にあるサンプルをみると数値の動きが1.5 => 3.0 => 4.5 => 6.0 => 7.5 => 9.0 => 10.0 => 0.0と変化していきます。
これはこのサンプルのカウントの上がり幅が1.5だからなんだけれども、spinnerクラスのデフォルトが最小値0, 最大値10で設定されているため、上がり幅よりも最大値が優先されるため、9.0の次が10.0になってしまっている。
まぁ当たり前の制御なんだけれども、エンドユーザにとっては?な動きになりそう。


9.0の次を10.5にしたければ、最大値を10.5に設定しておけばいいといえばいい話なんだけれどもね...


NumericStepperのパラメータ


maximum:Number ... 数値の最大値(デフォルト10)


minimum:Number ... 数値の最小値(デフォルト0)


value:Number ... 数値の初期値(デフォルト0)


stepSize:Number ... 数値の変化量を指定します


snapInterval:Number ... 有効な値を指定します(後述)


allowValueWrap:Boolean ... 数値が最大値又は最小値に達したときの制御方法(デフォルトfalse)

trueを指定すると最大値の次は最小値に変化するようになります。
falseを指定すると最大値・最小値に達した場合は数値が変化しなくなります。
上記サンプルはこの指定がtrueになっているため、10の次が0になるように動作しています。


発生するイベント


Changeイベントが数値が変化するたびに発生します。
その為、下記のようにEventListenerを登録するとChangeイベントごとに
実行するメソッドを指定できます。


hoge.addEventListener(Event.CHANGE, numericStepperChanged);


snapIntervalに関して


特に意図がなければ、ここの値はかならずstepSizeと合わせるようにしてください。
例えば、stepSizeを1.1にしてsnapIntervalを0に指定した場合、3.3と表示して欲しいところは
[3.3000000000000003]となります。
また、7.7にしたいところは7.6999999になります。
2進数の世界では常識ですかね...
なんだろ、このプロパティいるのかな...?


その他使い方について


maximum, minimumなどの上に書いたプロパティは必ず指定したほうが
後で見る人にとってもわかりやすいと思います。
デフォルト値なんて覚えてられないしねー


サンプル


初期値5.5で1.1ごと変化します。最大値は11で最小値は0です。最大値・最小値より変化させようとするとそれぞれ最小値・最大値に値が変化します。
※ほとんど丸パクリです。



<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Panel title="Spark NumericStepper Control Example"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<s:VGroup left="10" right="10" top="10" bottom="10">
<s:NumericStepper id="myNS" width="55" value="5.5" stepSize="1.1"
snapInterval="1.1" maximum="11" minimum="0" allowValueWrap="true"/>
<!-- Label that displays the current value of the Spark NumericStepper -->
<s:Label color="purple" text="Current value = {myNS.value}"/>
</s:VGroup>
</s:Panel>

</s:Application>
スポンサーサイト

[Flex4]はじめました。やっと...[インストール編]

[Flex4]はじめました。やっと...


Flash Develop 3.1.1 RTMが先月にリリースされていましたが、
記事を見ているとFlex4にも対応とか書いてありましたので、重い腰があがってしまいました。
FlashDevelop 3.1.1 RTMがインストールされている前提で進めていきます。


Flex4のインストール


1. Flex4 DownloadよりAdobe Flex SDKをダウンロードします。


2. 解凍してフォルダ名変更して[C:\Program Files\flex_sdk_4]な感じに設置しました。
Vistaとか7だとc直下のほうがいいのかな?


3. 一応Path通しておきます。やり方わからなかったらGoogleにでも聞いてみてください。
ひだりうざい


4. FlashDevelopを起動します。


5. [F10]キーを押下します。または[ツール] => [環境設定]


6. 左ペイン[AS3Content] => [Flex SDK Location]に先程設置したFlex4 SDKのパスを指定します
こんな感じ => [C:\Program Files\flex_sdk_4]


7. 一応再起動しておきます


おしまい。


適当Flex4アプリを作成してコンパイル・実行してみる


[プロジェクト] => [新規プロジェクト] => [Flex 4 Project]と選択します。


[名前]を適当に入力し、[場所]を確認して[OK]を押下します。


以下のようなソースが自動生成されます。



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

</s:Application>

とりあえず名前空間の変化にびっくりした!


以下のように変更してみましょう



<?xml version="1.0"?>
<!-- Simple example to demonstrate the Spark Button control -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
<![CDATA[
import flash.events.Event;

// Event handler function to print a message
// describing the selected Spark Button control.
private function printMessage(event:Event):void {
message.text += event.target.label + " pressed" + "\n";
}

]]>
</fx:Script>

<s:Panel title="Spark Button Control Example"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<s:VGroup left="10" right="10" top="10" bottom="10">
<s:VGroup width="100%">
<s:Button label="Default Button" click="printMessage(event);"/>
<s:Button label="autoRepeat Button" buttonDown="printMessage(event);"
autoRepeat="true"/>
<s:Button label="Disabled Button" enabled="false"
click="printMessage(event);"/>
</s:VGroup>
<s:TextArea x="80" y="0" id="message" height="100%" width="100%"
color="#0000FF"/>
</s:VGroup>
</s:Panel>

</s:Application>

うん。ただのAPIリファレンスにのっていたサンプルなんですよ。


[F5]キー又は[プロジェクト] => [プロジェクトをテスト]で実行されるか確認します。
なお、Flex4はFlash Player10以降がインストールされている必要があります。


こちらから完成例?をみることができます。デフォルトデザインが非常に綺麗になっていますね。
sample.swf


おまけ


ご存知のとおり、FlashDevelop 3.1からはDebugツールの標準組み込みや日本語化がされています。


日本語化


日本語化は[ツール] => [環境設定] => 左ペイン[FlashDevelop]を選択
一番下にスクロールして、[Selected Locale]から[ja_JP]を選択して、再起動すれば日本語化されます。


デバックツールは日本語化されないようですが...


デバックツール


デバックツールの使い方は[行番号]の横をマウスでクリックするだけです。
1回選択でブレイクポイント作成、2回目の選択でブレイクポイントの無効化、3回目で削除です。
なお、[表示] => [Local Variables]でローカル変数等の値を表示することが出来ます。


行番号


[ツール] => [環境設定] => 左ペイン[FlashDevelop]
[Display | 表示]内の[View Line Numbers]を[True]にします。
これはいじってなければデフォルトでtureのはず。


Flash Builder 4だとUnitテストができるようになっているみたいなので、
こちらはすごく魅力的ですね...
FlashDevelopにつかないかしら...


Sparkアーキテクチャー


Flex4からは新たにSparkアーキテクチャーが使えるようになりました。
これは、HTMLっぽくてすごく使いやすいかなと思います。
上記の例はspark.componentsというパッケージを利用しました。
勿論Flex 3で利用していたmxアーキテクチャーも使用できます。
mxアーキテクチャーではvboxとかを利用していましたが、
これと同等の機能としてVGroupとなったりと若干名称が変わっているようです。


外部リソースとの連携などもやりやすくなっているらしいので、(これは使うときにUnitテストが欲しいなーとか思っちゃいますが...)次回以降そこらへんを触ってみようかなと思います。


追記


<を文字参照にし忘れていましたのでいまさらながら修正。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。