ドキュメント



JavaFX: JavaFX UIコンポーネントの操作

7 選択ボックス

この章では、複数のオプションからの迅速な選択をサポートするUIコントロールである選択ボックスについて説明します。

ChoiceBoxクラスを使用して、JavaFXアプリケーションに選択ボックスを追加します。この単純な実装を図7-1に示します。

図7-1 3つの項目のある選択ボックスの作成

図7-1の説明が続きます
「図7-1 3つの項目のある選択ボックスの作成」の説明

選択ボックスの作成

例7-1 では、3つの項目のある選択ボックスを作成します。

例7-1 選択ボックスの作成

ChoiceBox cb = new ChoiceBox(FXCollections.observableArrayList(
    "First", "Second", "Third")
);

例7-1 に、ChoiceBoxクラスのコンストラクタ内に作成され、生成される項目のリストを示します。リスト項目は監視可能な配列を使用して指定します。または、例7-2のように、setItemsメソッドを使用して、クラスの空のコンストラクタを使用してリスト項目を設定できます。

例7-2 テキスト要素とセパレータのある選択ボックス

ChoiceBox cb = new ChoiceBox();
cb.setItems(FXCollections.observableArrayList(
    "New Document", "Open ", 
    new Separator(), "Save", "Save as")
);

選択ボックスには、テキスト要素のみではなく、その他のオブジェクトも含まれることに注意してください。Separatorコントロールは、例7-2では項目の区切りに使用されています。このコード・フラグメントは、アプリケーションに統合したときに、図7-2に示す出力を生成します。

図7-2 選択ボックスを使用して作成したメニュー

図7-2の説明が続きます
「図7-2 選択ボックスを使用して作成したメニュー」の説明

実際のアプリケーションでは、選択ボックスは複数選択のリストのビルドに使用されます。

選択ボックスの動作の設定

図7-3に示すアプリケーションは、5つのオプションのある複数選択ボックスを提供します。特定の言語を選択すると、対応する応答が表示されます。

図7-3 複数選択リスト

図7-3の説明が続きます
「図7-3 複数選択リスト」の説明

図7-4は、選択ボックスから選択された項目が、どの応答を表示するかを定義するコード・フラグメントを示します。

図7-4 選択ボックス項目の選択

コード・フラグメント
「図7-4 選択ボックス項目の選択」の説明

ChangeListener<Number>オブジェクトは、getSelectionModelメソッドとselectedIndexPropertyメソッドを連続コールして選択された、現時点の項目の索引を検出します。getSelectionModelメソッドは選択された項目を返し、selectedIndexPropertyメソッドはcb選択ボックスのSELECTED_INDEXプロパティを返します。その結果、索引としての整数値が、応答の配列の要素を定義し、ラベルのStringテキスト値を指定します。たとえば、ユーザーがスペイン語に対応する2番目の項目を選択すると、SELECTED_INDEXが1になり、応答の配列から「Hola」が選択されます。このため、ラベルには「Hola」と表示されます。

ChoiceBoxコントロールには、ツールチップを割り当てるとより多くの情報を含められます。ツールチップはjavafx.scene.controlパッケージで提供されているUIコントロールです。ツールチップはどのJavaFX UIコントロールにも適用できます。

ツールチップの適用

Tooltipクラスは、例7-3に示すとおり、setTooltipメソッドをコールすることによって、選択ボックス(またはその他のコントロール)に簡単に適用できる、事前作成されたツールチップを提供します。

例7-3 選択ボックスへのツールチップの追加

cb.setTooltip(new Tooltip("Select the language"));

通常、ユーザーがTooltipクラスのコンストラクタ内でツールチップのテキストを定義します。ただし、アプリケーションのロジックで、テキストをUIによって動的に設定する必要がある場合、空のコンストラクタを使用してツールチップを適用し、次にsetTextメソッドを使用してテキストを割り当てることができます。

ツールチップがcb選択ボックスに適用された後、ユーザーがその選択ボックスにカーソルをあわせると、図7-5に示すイメージが表示されます。

図7-5 ツールチップが適用された選択ボックス

ツールチップのある選択ボックス
「図7-5 ツールチップが適用された選択ボックス」の説明

アプリケーションをさらに拡張するため、CSSプロパティで選択ボックスのスタイルを設定するか、視覚効果や変換を適用できます。

関連APIドキュメント

ウィンドウを閉じる

目次

JavaFX: JavaFX UIコンポーネントの操作

展開 | 縮小