- LinkBar
- ToggleButtonBar
- TabBar
と三つもありますが，前回紹介したButtonBarと基本的なところは同じです。各コンポーネント独自の部分に絞って紹介したいと思います。
見た目がリンクのようになっている「LinkBar」コンポーネント
最初に「LinkBar」コンポーネントを紹介します（＊1）。LinkBarは前回紹介した「ButtonBar」と同様にNavBarを継承しています。その違いは見かけです。見た目がボタンではなくリンクのようになっているのです。だからといって動作が違うわけではありませんし，「Link」と名前が付いていますがリンクのようにWebページを開きたい場合は自分で機能を実装する必要があります。では，LinkBarのサンプルを見てみましょう（図1）。
図1：LinkBar サンプル（クリックすると別ウィンドウを表示します。ソースコードはこちら）
上から順に
1-1．配列（Array）を使用
1-2．データをサーバーから受信
1-3．縦に並べる
1-4．間隔を指定する
1-5．幅/高さを指定する
1-6．セパレーターの幅/色を指定する
1-7．セパレーターにスキンを適用する
1-8．リンクの配置を指定する
1-9．リンクにアイコンを指定する
1-10．ViewStack を連動させる
1-11．リンクの配色を変更する
1-12．クリックイベント
となります。ButtonBarと違う部分のみ説明します。
1-4/1-5．では，表題の内容とは関係無い部分に違いがあります。それは「backgroundColor」Styleを指定しているところです。ButtonBarでは「backgroundColor」Styleを指定することはできません。
1-6．では「separatorWidth」Styleでセパレーターの幅を，「separatorColor」Styleでセパレーターの色を指定しています。「direction」属性を「vertical」にした場合も「separatorWidth」Styleでセパレーターの高さを変更することができます。
1-7．では，線の代わりに「separatorSkin」Styleで指定したイメージをセパレーターに使用しています。「separatorWidth」Styleとは違いこちらは「direction」属性に応じたイメージを指定する必要があります。
1-11．は「1-10」と同じ構造で配色を変更しています。「color」Styleは何もしていない状態の文字色。「backgroundColor」StyleはLinkBar全体の背景色。「rollOverColor」Styleはマウスを重ねた時の背景色で「textRollOverColor」Styleがその時の文字色。「selectionColor」Styleは選択状態の色ではなくクリックした瞬間の背景色で，「textSelectedColor」Styleがその時の文字色。そして，「disabledColor」Styleが選択状態の文字色です（＊2）。「cornerRadius」StyleはLinkBar全体の背景の角を丸くするのではなくマウスを重ねた時の背景色の角の丸みになります。このようにButtonBarのようにスキンを設定する代わりに配色を変更することができます。
クリックされたボタンが選択状態になる「ToggleButtonBar」コンポーネント
次に「ToggleButtonBar」コンポーネントを紹介します（＊3）。ToggleButtonBarはButtonBarを継承しているだけあってほとんどButtonBarと同じですが，「Toggle」（トグル），つまりクリックされたボタンは選択状態になることができます。ただし，二つ以上のボタンが選択状態になったりはしません。では，ToggleButtonBarのサンプルを見てみましょう（図2）。
図2：ToggleButtonBarのサンプル（クリックすると別ウィンドウを表示します。ソースコードはこちら）
上から順に
1-1．配列（Array）を使用
1-2．データをサーバーから受信
1-3．縦に並べる
1-4．間隔を指定する
1-5．幅/高さを指定する
1-6．ボタンの幅/高さを指定する
1-7．ボタンの配置を指定する
1-8．ボタンにアイコンを指定する
1-9．ボタンのスタイルを指定する
1-10．ViewStack を連動させる
1-11．クリックイベント
1-12．フォーカスレクトの配色
1-13．選択状態を解除
となります。ButtonBarと違う部分のみ説明します。
1-9．は基本的にはButtonBarと同じですが，ToggleButtonBarでは選択状態のスキンを設定できます（図3）。
図3：選択状態のスキンの設定
選択状態のスキンの名前には「selected」という接頭語が付きます。また，選択状態時の文字のスタイルを「selectedButtonTextStyleName」Styleで設定することができます（図4）。
図4：選択状態時の文字のスタイル
1-12．はまた選択状態の見た目にかかわる内容ですが，「フォーカスレクト」という選択状態の周りに表示される強調線についての設定です。ただし，ここで使用している「themeColor」StyleはToggleButtonBarならではのStyleではなく，UIComponentから継承されたStyleで，選択状態の見た目だけでなくマウスを重ねた時のフォーカスレクトやクリックした瞬間のボタンのハイライトにも影響します。ニーズによっては「帯に短し，たすきに長し」ということになるかもしれません。純粋に選択状態のフォーカスレクトだけを変更するには意外に面倒なことをしなければなりません。
また，ソースを見るとおわかりになりますように「#ffffff」といった色だけでなくhaloOrange/haloBlue/haloSilver/haloGreenというFlexFramework2で用意されているカラーセットを使用することもできます。haloBlueが「themeColor」Styleの初期値になります。
1-13．では「toggleOnClick」属性を「true」にすることで，選択状態のボタンをもう一度クリックして選択状態を解除できます。初期値は「false」です。
