【Flex】HSliderの実装ノウハウ(ActionScript版)

2010年2月14日

今回は、Flexのバーコントロールとしてよく使われるHSliderクラスの実装ノウハウについて 記述したいと思います。

mxml版は至るところで紹介されていますので、 PhactoryではActionScript中心の実装例を使って説明していきたいと思います。 


まず、HSliderについですが、以下のようなコントロールを生成するクラスです。

詳細な実装例は、上記swfファイルを右クリックして「ソースを表示」を選択して頂ければ 閲覧可能ですので、ここではHSlider生成時のポイントだけを説明します。


パッケージの最小値・最大値は、minimum, maximum属性に浮動小数点(Numberクラス)として代入します。
ポインタの初期値はvalueです。
バーのメモリの間隔はtickIntervalで定義します。ここでは0.1と定義していますので、0から1まで10カ所に メモリが描画されています。


ポインタを任意の位置に動かすのではなく、ある間隔でしか動かせないようにするには snapIntervalを定義します。ここでは、0.2と定義していますので、0.2間隔でしかポインタを移動できません。


その他、change属性にて、バーの値が変更になったときに呼び出されるハンドラを定義することができます。 


また、本実装では使用していませんがliveDraggingをtrueと定義(デフォルトではfalse)すると、 ポインタをドラッグ中でもその変化した値がchangeイベントとして生成されますので、 ハンドラを定義する際は、ポインタの値変更決定後に実行するのか変更の間実行し続けるのかを 考えてliveDraggingを定義されると良いと思います。