イントロダクション
以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思いチュートリアルをやってみようとなりました。
今回はラジオボタンの表示をやります。
チュートリアル
ここのページを、戦国Xサラの要領でガンガン斬り伏せながらやっていきます。
<チュートリアル>
- ラベル
- ボタン
- ラジオ・ボタン
- トグル・ボタン
- チェック・ボックス
- 選択ボックス
- テキスト・フィールド
- パスワード・フィールド
- スクロール・バー
- スクロール・ペイン
- リスト・ビュー
- 表ビュー
- ツリー・ビュー
- ツリー表ビュー
- コンボ・ボックス
- セパレータ
- スライダ
- 進行状況バーと進行状況インジケータ
- ハイパーリンク
- ツールチップ
- HTMLエディタ
- タイトル付きペインとアコーディオン
- メニュー
- カラー・ピッカー
- 日付ピッカー
- ページ区切りコントロール
- ファイル・チューザ
- UIコントロールのカスタマイズ
- 埋込みプラットフォームのUIコントロール
基本のコード(ちょっとダメなコード)
public class Lv4_ToggleButton extends Application { /** * このメソッドは、Applicationクラス(JavaFXのフレームワーク部品) * のメソッドをオーバーライドする。 * {@link Application#launch(String...)}から呼び出される。 */ @Override public void start(Stage primaryStage) throws Exception { // チュートリアルの乗っていない部分 Group group = new Group(); // トグルグループ ToggleGroup toggleGroup = new ToggleGroup(); ToggleButton tb1 = new ToggleButton("Minor"); tb1.setToggleGroup(toggleGroup); ToggleButton tb2 = new ToggleButton("Major"); tb2.setToggleGroup(toggleGroup); // Image image = new Image(getClass().getResourceAsStream("icon.png")); ToggleButton tb3 = new ToggleButton ("Critical"); tb3.setToggleGroup(toggleGroup); // // 横のレイアウト // HBox lineLayout = new HBox(); // lineLayout.getChildren().addAll(tb1, tb2, tb3); // Groupを追加する group.getChildren().addAll(tb1, tb2, tb3); // チュートリアルでは省略されている Scene scene = new Scene(group, 300, 300); primaryStage.setScene(scene); primaryStage.setTitle("チュートリアル4"); primaryStage.show(); } /** * メインメソッド。 * Apllicationクラスのlaunchメソッドを呼び出す。 * * @param args プログラム引数 */ public static void main(String[] args) { launch(args); } }
前回と同様に、ダメな原因は表示結果にあります。
トグルボタンが重なっています。。。なので、下の様に「横のレイアウト」を追加します。
// 横のレイアウト HBox lineLayout = new HBox(); lineLayout.getChildren().addAll(tb1, tb2, tb3); // Groupを追加する group.getChildren().addAll(lineLayout);
こんな感じで表示されます。「横のレイアウト」の存在意義が少し見えてきたかと思いますがいかがでしょうか?
そして、下の部分に色をつけた四角(Rect)を設定し、簡単なアクション(イベント処理)を追加します。
@Override public void start(Stage primaryStage) throws Exception { // チュートリアルの乗っていない部分 Group group = new Group(); // トグルグループ ToggleGroup toggleGroup = new ToggleGroup(); ToggleButton tb1 = new ToggleButton("Minor"); tb1.setToggleGroup(toggleGroup); ToggleButton tb2 = new ToggleButton("Major"); tb2.setToggleGroup(toggleGroup); ToggleButton tb3 = new ToggleButton ("Critical"); tb3.setToggleGroup(toggleGroup); // ユーザーデータを追加 tb1.setUserData(Color.LIGHTGREEN); tb2.setUserData(Color.LIGHTBLUE); tb3.setUserData(Color.SALMON); // 四角の領域 Rectangle rect = new Rectangle(); rect.setHeight(50); rect.setFill(Color.WHITE); rect.setStroke(Color.DARKGRAY); rect.setStrokeWidth(2); rect.setArcHeight(10); rect.setArcWidth(10); // 横のレイアウト HBox lineLayout = new HBox(); lineLayout.getChildren().addAll(tb1, tb2, tb3); // 縦のレイアウト VBox vbox = new VBox(); vbox.getChildren().add(lineLayout); vbox.getChildren().add(rect); // トグルボタンのイベント処理 toggleGroup.selectedToggleProperty().addListener( (ObservableValue<? extends Toggle> ov, Toggle oldToggle, Toggle newToggle) -> { System.out.println(lineLayout.getWidth()); rect.setWidth(lineLayout.getWidth()); if (newToggle == null) { System.out.println("null: "); rect.setFill(Color.WHITE); } else { System.out.println("!= null: "); rect.setFill((Color) toggleGroup.getSelectedToggle().getUserData()); } }); // Groupを追加する group.getChildren().addAll(vbox); // チュートリアルでは省略されている Scene scene = new Scene(group, 300, 300); // ここでサイズを指定する vbox.setPrefWidth(scene.getWidth()); rect.setWidth(scene.getWidth()); rect.setHeight(scene.getHeight()); primaryStage.setScene(scene); primaryStage.setTitle("チュートリアル4"); primaryStage.show(); }
画面の上部にある「トグルボタン」が3つあります、
// トグルグループ ToggleGroup toggleGroup = new ToggleGroup(); ToggleButton tb1 = new ToggleButton("Minor"); tb1.setToggleGroup(toggleGroup); ToggleButton tb2 = new ToggleButton("Major"); tb2.setToggleGroup(toggleGroup); ToggleButton tb3 = new ToggleButton ("Critical"); tb3.setToggleGroup(toggleGroup);
このボタンに「UserDdata」を設定して置き、
// ユーザーデータを追加 tb1.setUserData(Color.LIGHTGREEN); tb2.setUserData(Color.LIGHTBLUE); tb3.setUserData(Color.SALMON);
初期表示の四角(Rect)を表示します。(色は白なので表示結果がよく分かりません。。。すんません。。。)
// 四角の領域 Rectangle rect = new Rectangle(); rect.setHeight(50); rect.setFill(Color.WHITE); rect.setStroke(Color.DARKGRAY); rect.setStrokeWidth(2); rect.setArcHeight(10); rect.setArcWidth(10);
トグルボタンが押下されたときに「UserData」を取得して何色の四角「Rect」に値設定しています。
// トグルボタンのイベント処理 toggleGroup.selectedToggleProperty().addListener( (ObservableValue<? extends Toggle> ov, Toggle oldToggle, Toggle newToggle) -> { System.out.println(lineLayout.getWidth()); rect.setWidth(lineLayout.getWidth()); if (newToggle == null) { System.out.println("null: "); rect.setFill(Color.WHITE); } else { System.out.println("!= null: "); rect.setFill((Color) toggleGroup.getSelectedToggle().getUserData()); } });
ちょっと長いので分解して内容を記載します。トグルグループに選択時のイベントを追加します。〜Propertyで設定できる様です。
toggleGroup.selectedToggleProperty().addListener(
そして、イベントの処理内容を記載します。
(ObservableValue<? extends Toggle> ov, Toggle oldToggle, Toggle newToggle) -> { ... }
引数が3つあります。「ObservableValue<? extends Toggle>」と「Toggle1」「Toggle2」です、これを受けて(引数にして)以下のイベント処理を実装しています。
System.out.println(lineLayout.getWidth()); rect.setWidth(lineLayout.getWidth()); if (newToggle == null) { System.out.println("null: "); rect.setFill(Color.WHITE); } else { System.out.println("!= null: "); rect.setFill((Color) toggleGroup.getSelectedToggle().getUserData()); }
新しいトグルが「Null」の場合は四角(Rect)の色を白、それ以外は「UserData」で指定した色を表示。
上記の様に実装しています。