今回取り上げるコンポーネント

  1. ボタン【Button】
  2. チェックボックス【CheckBox】
  3. ラジオボタン【RadioButton】

本記事中のサンプルを表示するには最新のFlashPlayer9が必要です(本稿執筆時点では【9,0,28,0】が最新)。こちらから最新のFlashPlayer9をインストールしてください。また,インストール後はブラウザの再起動が必要です。インストールされているFlashPlayerのバージョンを確認するにはこちら

 前回に引き続いて,Flexが備えるMXMLコンポーネントを紹介していきましょう。今回はボタン,チェックボックス,ラジオボタンです。ただし,チェックボックスとラジオボタンはボタンを拡張して作られていますので,ボタンについて使い方を理解できればあと二つは簡単です。

ボタン【Button】

 HTMLでもおなじみの「ボタン」。Flex2のButtonコンポーネント*1はHTML以上に様々なことが可能です。

 では,実際にサンプルを見てみましょう(図1)。

図1:【Button】サンプル(クリックすると別ウィンドウで表示します。ソースはこちら

 上から順に
1-1.ノーマルのボタン
1-2.ボタンのラベルのStyle
1-3.ボタンの背景のStyle
1-4.ボタンの強調表示
1-5.ボタンサイズの自動調整
1-6.ラベルの省略表示
1-7.イベントを送出し続ける「autoRepeat」属性
1-8.ボタンダウンの見た目を維持する「stickyHighlighting」属性
1-9.トグルボタン
1-10.アイコン付きボタン
1-11.アイコンとラベルの配置
1-12.PNGファイルを使って見た目を変える
1-13.SWFファイルを使って見た目を変える
1-14.見た目を変えるために使用するファイルの違い
のようになります。

 1-1.は,Buttonコンポーネントの「label」属性を指定しただけです。

 1-2.は,「label」属性で指定した文字列のStyleを設定しています。上から順に,文字色を指定する「color」属性,マウス・カーソルを合わせたときの文字色を指定する「textRollOverColor」属性,文字の大きさを指定する「fontSize」属性,太字/ノーマルを指定する「fontWeight」属性,斜体/ノーマルを指定する「fontStyle」属性,下線有り/無しを指定する「textDecoration」属性。

 「textRollOverColor」属性以外は前回紹介したLabelコンポーネント*2やTextコンポーネント*3と同じです。なぜなら,Buttonコンポーネントでもクラス内部でUITextFieldコンポーネント*4を使用しているからです。

 1-3.は,ボタンの背景のStyleを設定しています。「fillColors」属性(上)で"塗り"を指定しています。指定している[#ffffff, #0000ff]は配列を表しており,配列の各要素に指定しているのはHTMLでもおなじみのシャープ記号付きのRGBカラー値です。また,HTMLと同様に「white」や「red」といったVGAカラー名も使用できますが,デフォルトで使用できるVGAカラー名はごくわずかです*5

 この二つの色がボタンにどのように作用するかというと,配列の1番目の色は"塗りの色"ですが,若干上段から下段にかけたグラデーションになっています。配列の2番目の色は"線形グラデーションの色"で下段から上段にかけたグラデーション用の色です。

 「fillAlphas」属性(下)も同様に配列を指定しますが,設定する値はアルファ値(透明度)です。アルファ値は"1"から"0"までの値を設定することが可能で"0"になると透明になります。配列の1番目は"塗りの色"用のアルファ値で,2番目は"線形グラデーションの色"用のアルファ値になります。これらの2色の値が設定可能なのは立体的に見せるためのようです。

 1-4.は,ボタンの境界線(ボーダー)を太くすることで強調表示をしています。マウスを合わせたときやボタンを押したときの境界線はノーマルのボタンと同じです。

 1-5.は,フォント・サイズを大きくしたときにボタンの幅や高さが自動的に調整されることを示しています。

 1-6.は,ボタンの幅(width)を固定し,かつ,「label」属性に指定した文字列が表示しきれない場合は"..."で省略表示されることを示しています。これは前回のLabelコンポーネントと同様の動作で,マウス・カーソルを合わせるとToolTipに「label」属性で指定した文字列がすべて表示されます。

 1-7.はちょっと現段階では難しいので以下の説明は軽く流していただいてかまいません。ボタンを押した瞬間(例えば,マウスの左ボタンを押してまだ放していない状態)には「buttonDown」というイベントが発生します。この「autoRepeat」属性を"true"にするとマウスの左ボタンを押している間,一定の間隔で「buttonDown」イベントが発生し続けます。"一定の間隔"というのは「repeatInterval」属性で"ミリ秒"単位で指定できます。また,"押し続けられた"という状態を時間的に判定するのが「repeatDelay」属性です。

 つまり,最初に「buttonDown」イベントが発生してから「repeatDelay」属性で指定した時間(ミリ秒)の間,マウスを押し続けないと次の「buttonDown」イベントは発生しません。試しに"autoRepeat = true"のボタンを押し続けてみてください(repeatDelay = "500",repeatInterval = "800")。「buttonDown」イベントが発生するたびにテキスト・エリアにログが出力されます(「クリア」ボタンを押すとログが消去されます)。逆に,"autoRepeat = false"のボタンを押し続けても1度しかイベントは発生しません。

 この属性の用途ですが,例えばスクロールバーのトップ(またはボトム)にあるボタンを押し続けるとスクロールが移動します。つまり,「buttonDown」イベントが発生するたびにスクロールを移動させるわけです。「repeatInterval」属性の値を小さくするとその単位時間当たりのイベント発生数が多くなり,早くスクロールし,逆に大きくすると単位時間当たりのイベント数が少なくなりゆっくりスクロールします。

 1-8.は,「stickyHighlighting」というちょっと特殊な属性です。その挙動は,ボタンをドラッグしてボタン外にマウス・カーソルを移動してもボタンの見た目(スキン)がボタンを押した状態のまま維持させる属性です。例えば,データ・グリッドのヘッダーをドラッグして別の列に移動するときドラッグされたヘッダーは元の列で押された状態の見た目を維持しています。これはもともとどの列を移動させているのかを知るためです。

 1-9.は,ちょっと見た目が大きく変わらないのでわかり難いかもしれませんが,トグルボタンです。トグルボタンというのはクリックされるたびに"選択された状態"と"選択されていない状態"に変化します。これはチェックボックスやラジオボタンをイメージしていただくとわかりやすいと思います。"選択された状態"では「selectedUpSkin,selectedOverSkin,selectedDownSkin,selectedDisabledSkin」が見た目として使用されます。

 1-10.は,「icon」属性に指定したPNGファイルをボタン内に表示しています。「Embed」シンタックスを使用してPNGファイルをSWFファイル内に埋め込んでいます*6。"埋め込む"というのはコンパイル後に生成されるSWFファイルに画像データ(ここではPNGファイル)を取り込むということです。取り込む方法が圧縮しているのか,そうでないのかわからないのですが,取り込む画像データの大きさに比例してSWFファイル・サイズが大きくなることは確かなので注意する必要があります。

 1-11.は,「icon」属性で指定した画像と「label」属性で指定した文字列の配置方法を示したものです。配置指定がない場合,画像は左側に表示され,「labelPlacement」属性を指定した場合は,icon画像を基点とした位置に「label」属性の文字列が表示されます。

 1-12.は,いわゆる"スキン"をカスタマイズしています。スキンというのはビジュアルを有したコンポーネントの見た目のことです*7。スキンはプログラムで"描画"することもできますがサンプルのように画像データを"表示"することもできます。オーサリングソフトのFlashでボタンを作成したことがある方はすぐにわかると思います。また,Flex2では埋め込みイメージのScale-9フォーマットをサポートします。

 「downSkin」属性というのはボタンを押した瞬間の見た目で,「overSkin」属性というのはマウス・カーソルを合わせたときの見た目で,「upSkin」属性というのはマウスがボタン外にあり,かつ,選択されていない(トグルボタンの場合)状態の見た目です。同様に「disabledSkin」属性というのがあり,これはボタンの「enabled」属性が"false"状態(=ボタンが無効状態)の見た目です。

 1-13.は,「1-12」と同じようにスキンをカスタマイズしていますが,スキン用画像データとしてFlash 8で作成したSWFファイルを使用しています。PNGファイルを埋め込む場合と「Embed」のシンタックスが違います。「source」パラメータにSWFファイルのパスを指定し,「symbol」パラメータにFlash 8で指定したシンボル名を指定しています(今回はFlash 8でのスキン作成方法や名称の説明は省略させていただきます)。BtoB用アプリケーションではFlex2の標準の見た目でも大丈夫かもしれませんが,BtoC用アプリケーションではこのようなカスタムスキンは重要になると思います。

 1-14.はちょっと本筋から離れるのですが,取り込む画像データの特性を極端な例で示しています。上はPNGファイル=ラスター画像*8をスキンとして使用し,下はSWFファイル=ベクター画像*9をスキンとして利用しています*10。どちらの画像も元ネタサイズは縦横20pxで,サンプルでは100pxに拡大して表示しています。見ての通りラスター画像を拡大するといわゆる"ギザ"が現れてしまっています。それに対して,下のベクター画像は滑らかです。このように取り込む元の画像データの形式によってギザが発生することがあるということを知っておいてください*11

2.チェックボックス【CheckBox】

 CheckBoxコンポーネント*12はButtonコンポーネントを拡張しており,クラスとしてはほとんど違いがありません。

 図1で示した中での違いとして

  • 常に「toggle」属性が"true"(「toggle」属性が無い)
  • 「icon」属性が無い
  • スキンを変えるときは「downIcon,overIcon,upIcon,disabledIcon,selectedDownIcon,selectedOverIcon,selectedUpIcon,selectedDisabledIcon」に画像データを指定する
などがあります。

 CheckBoxコンポーネントのサンプルは次の通りです(図2)。

図2:【CheckBox】サンプル(クリックすると別ウィンドウで表示します。ソースはこちら

3.ラジオボタン【RadioButton】

 RadioButtonコンポーネント*13はCheckBoxコンポーネントと同様にButtonコンポーネントを拡張しています。違いは
  • 常に「toggle」属性が"true"(「toggle」属性が無い)
  • 「icon」属性が無い
  • スキンを変えるときは「downIcon,overIcon,upIcon,disabledIcon,selectedDownIcon,selectedOverIcon,selectedUpIcon,selectedDisabledIcon」に画像データを指定する
などがあります。

 ただ,RadioButtonはご存じの通り複数の選択肢の中から一つを選択するためのコンポーネントです。この"複数の選択肢"をグループ化するためにRadioButtonGroupコンポーネント*14が別に存在します。RadioButtonの「groupName」属性にRadioButtonGroup名を指定することでRadioButtonをグループ分けすることが可能です。

 また,Flex2のRadioButtonはHTMLの「input type="radio"」タグのように選択肢のラベルと実値を別々に指定することが可能です。これはRadioButtonの「value」属性に実値をセットすることで実現できます(サンプルの一番下)。これで選択されたRadioButtonの「value」値はRadioButtonGroupの「selectedValue」属性にセットされます(「value」属性を指定しなかった場合は「label」属性の値がセットされます)。

 では,実際にサンプルを見てみましょう(図3)。

図3:【RadioButton】サンプル(クリックすると別ウィンドウで表示します。ソースはこちら