	ブログをはじめるログイン

JavaFX ブログトップ
前の10件 | 次の10件

前置き

複数の選択肢をリスト表示して、選択しているオブジェクトを取得する時に使う。
コンボボックスと違うところは、最初から選択肢が見えている点、複数選択が可能な点などがある。
今回の例のように複数リストを作成し、選択項目がリスト間を移動するような使い方が一般的？

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <left>
        <ListView fx:id="lstLeft" prefHeight="500.0" prefWidth="300.0" BorderPane.alignment="CENTER">
            <BorderPane.margin>
            <Insets />
            </BorderPane.margin>
        </ListView>
    </left>
    <right>
        <ListView fx:id="lstRight" prefHeight="500.0" prefWidth="300.0" BorderPane.alignment="CENTER" />
    </right>
    <center>
        <FlowPane columnHalignment="CENTER" orientation="VERTICAL" prefHeight="190.0" prefWidth="52.0" vgap="20.0" BorderPane.alignment="CENTER">
            <children>
            <Button minWidth="70.0" mnemonicParsing="false" onAction="#onLeft2RightAll" text=">>" />
            <Button minWidth="70.0" mnemonicParsing="false" onAction="#onLeft2Right" text=">" />
            <Button minWidth="70.0" mnemonicParsing="false" onAction="#onRight2Left" text="<" />
            <Button minWidth="70.0" mnemonicParsing="false" onAction="#onRight2LeftAll" text="<<" />
            </children>
            <BorderPane.margin>
            <Insets bottom="100.0" left="100.0" right="100.0" top="170.0" />
            </BorderPane.margin>
        </FlowPane>
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.control.SelectionMode;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    ListView<String> lstLeft;

    @FXML
    ListView<String> lstRight;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        // 複数選択可
        lstLeft.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
        lstRight.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

        // 初期データ
        lstLeft.getItems().setAll(itemFactory());
    }

    @FXML
    private void onLeft2RightAll() {
        move(lstLeft, lstRight, true);
    }

    @FXML
    private void onLeft2Right() {
        move(lstLeft, lstRight, false);
    }

    @FXML
    private void onRight2Left() {
        move(lstRight, lstLeft, false);
    }

    @FXML
    private void onRight2LeftAll() {
        move(lstRight, lstLeft, true);
    }

    private void move(ListView<String> fromList, ListView<String> toList, boolean isAll) {
        ObservableList<String> l = fromList.getItems();
        ObservableList<String> r = toList.getItems();

        if (isAll) {
            r.addAll(l);
            l.clear();

        } else {
            ObservableList<String> selects = fromList.getSelectionModel().getSelectedItems();
            r.addAll(selects);
            l.removeAll(selects);
        }
        r.sort((o1, o2) -> o1.compareTo(o2));
    }

    private String[] itemFactory() {
        String[] items = new String[20];

        for (int i = 0; i < items.length; i++) {
            items[i] = String.format("Item%02d", i + 1);
        }
        return items;
    }
}

実行結果

2020-09-05 00:00 nice!(0) コメント(0)

前置き

表形式でデータを表示するためのコントロール。
このコントロールを使うとステップ数が爆上がりする。。。

TableViewにTableColumnをネストしたり。。。

データクラスを用意したり。。。

TableColumnにデータクラスをバインドしたり。。。

編集可能にするためにsetCellFactoryしたり。。。

セルの編集時にsetOnEditCommitで変更内容を反映させる必要があるし。。。

必要に応じてsetSelectionModeで複数行選択できるようにしたり。。。

etc...

とにかく面倒くさい。。。なのによく使うコントロール。。。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="5.0" BorderPane.alignment="CENTER">
            <children>
            <Label text="Name" />
            <ComboBox fx:id="cmbName" prefWidth="150.0" />
            <Label text="Price" />
            <TextField fx:id="txtPrice" />
            <Button fx:id="btnAdd" mnemonicParsing="false" onAction="#onAdd" text="追加" />
            <Button fx:id="btnDel" mnemonicParsing="false" onAction="#onDel" text="削除" />
            </children>
            <BorderPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
            </BorderPane.margin>
        </FlowPane>
    </top>
    <center>
        <TableView fx:id="tblItem" editable="true" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
            <columns>
            <TableColumn fx:id="colNo" prefWidth="75.0" text="No" />
            <TableColumn fx:id="colName" onEditCommit="#nameCommit" prefWidth="75.0" text="Name" />
            <TableColumn fx:id="colPrice" onEditCommit="#priceCommit" prefWidth="75.0" text="Price" />
            </columns>
        </TableView>
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.ComboBoxTableCell;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.util.converter.IntegerStringConverter;
import lombok.Data;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    ComboBox<String> cmbName;

    @FXML
    TextField txtPrice;

    @FXML
    TableView tblItem;

    @FXML
    TableColumn colNo;

    @FXML
    TableColumn colName;

    @FXML
    TableColumn colPrice;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        cmbName.getItems().addAll(itemFactory());
        cmbName.getSelectionModel().select(0);

        // ItemをTableColumnにバインドする
        colNo.setCellValueFactory(new PropertyValueFactory<>("no"));
        colName.setCellValueFactory(new PropertyValueFactory<>("name"));
        colPrice.setCellValueFactory(new PropertyValueFactory<>("price"));

        // Editableの状態(ON/OFF)によって、編集可能なフィールドを割り当てる
        colName.setCellFactory(ComboBoxTableCell.forTableColumn(itemFactory()));
        colPrice.setCellFactory(TextFieldTableCell.forTableColumn(new IntegerStringConverter()));

        // 初期データ登録
        ObservableList vals = FXCollections.observableArrayList(
                new Item(1, "Item1", 111),
                new Item(2, "Item2", 222),
                new Item(3, "Item3", 333),
                new Item(4, "Item4", 444)
        );
        tblItem.setItems(vals);
        tblItem.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
    }

    private String[] itemFactory() {
        String[] items = new String[20];

        for (int i = 0; i < items.length; i++) {
            items[i] = String.format("Item%s", i + 1);
        }
        return items;
    }

    @FXML
    private void nameCommit(TableColumn.CellEditEvent<Item, String> e) {
        e.getTableView().getItems().get(e.getTablePosition().getRow()).setName(e.getNewValue());
    }

    @FXML
    private void priceCommit(TableColumn.CellEditEvent<Item, Integer> e) {
        e.getTableView().getItems().get(e.getTablePosition().getRow()).setPrice(e.getNewValue());
    }

    @FXML
    private void onAdd() {

        // Priceが未入力、数字以外が入力された場合は何もしない
        if (txtPrice.getText().isEmpty() || txtPrice.getText().matches(".*\\D.*")) {
            return;
        }
        ObservableList<Item> items = tblItem.getItems();
        int max = 0;

        if (!items.isEmpty()) {
            max = items.stream().map(i -> i.getNo()).max(Integer::compareTo).get();
        }
        items.add(new Item(
                ++max,
                cmbName.getSelectionModel().getSelectedItem(),
                Integer.parseInt(txtPrice.getText())));
    }

    @FXML
    private void onDel() {
        ObservableList<Item> items = tblItem.getSelectionModel().getSelectedItems();
        System.out.println(items);
        tblItem.getItems().removeAll(items);
    }


    @Data
    protected class Item {
        private int no;
        private String name;
        private int price;

        public Item(int no, String name, int price) {
            this.no = no;
            this.name = name;
            this.price = price;
        }
    }
}

実行結果

2020-09-04 00:00 nice!(0) コメント(0)

前置き

一般的なチェックボックスの使い方と一緒。
今回の例のように、チェックで他のコントロールの活性/非活性を制御し、承認させたことを担保した上で、ボタンをクリックさせるなどの使い方が一般的かな？

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="5.0" BorderPane.alignment="CENTER">
            <children>
            <CheckBox fx:id="chkAccept" mnemonicParsing="false" onAction="#agree" text="契約に同意します" />
            <Button fx:id="btnSend" mnemonicParsing="false" onAction="#onSend" text="送信" />
            </children>
            <BorderPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
            </BorderPane.margin>
        </FlowPane>
    </top>
    <center>
        <TextArea fx:id="taOutput" editable="false" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    CheckBox chkAccept;

    @FXML
    Button btnSend;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        btnSend.setDisable(true);
    }

    @FXML
    private void onSend() {
        taOutput.appendText("契約に同意しました\n");
    }

    @FXML
    private void agree() {

        if (chkAccept.isSelected()) {
            btnSend.setDisable(false);

        } else {
            btnSend.setDisable(true);
        }
    }
}

2020-09-03 00:00 nice!(0) コメント(0)

前置き

2～3択程度で全ての選択肢を見せておきたい場合などに使うコントロール
ポイントはToggleGroupを指定して選択肢同士を纏めておかないと、択一式にならない所くらい。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="5.0" BorderPane.alignment="CENTER">
            <children>
            <RadioButton fx:id="rdoMan" mnemonicParsing="false" selected="true" text="男性">
                <toggleGroup>
                    <ToggleGroup fx:id="grpSex" />
                </toggleGroup>
            </RadioButton>
            <RadioButton mnemonicParsing="false" text="女性" toggleGroup="$grpSex" />
            <Button fx:id="btnSend" mnemonicParsing="false" onAction="#onSend" text="送信" />
            </children>
            <BorderPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
            </BorderPane.margin>
        </FlowPane>
    </top>
    <center>
        <TextArea fx:id="taOutput" editable="false" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    RadioButton rdoMan;

    @FXML
    Button btnSend;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
    }

    @FXML
    private void onSend() {

        if (rdoMan.isSelected()) {
            taOutput.appendText("私は男性です\n");

        } else {
            taOutput.appendText("私は女性です\n");
        }
    }
}

実行結果

2020-09-02 00:00 nice!(0) コメント(0)

前置き

予め用意されている値の中から選択させる、ComboBox・ChoiceBoxコントロールの使い方を覚える。
ChoiceBoxはスクロールがないので選択肢が少ない場合、ComboBoxは選択肢が多めでスクロールが必要な場合に使用する。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="5.0" BorderPane.alignment="CENTER">
            <children>
            <ChoiceBox fx:id="chcItem" prefWidth="150.0" />
            <Button fx:id="btnSend" mnemonicParsing="false" onAction="#onSend" text="送信" />
            </children>
            <BorderPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
            </BorderPane.margin>
        </FlowPane>
    </top>
    <center>
        <TextArea fx:id="taOutput" editable="false" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.TextArea;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    ChoiceBox<String> chcItem;

    @FXML
    Button btnSend;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        chcItem.setTooltip(new Tooltip("アイテムを選択して下さい"));
        chcItem.getItems().addAll(itemFactory());
        chcItem.getSelectionModel().select(0);
    }

    private String[] itemFactory() {
        String[] items = new String[10];

        for (int i = 0; i < items.length; i++) {
            items[i] = String.format("Item%s", i + 1);
        }
        return items;
    }

    @FXML
    private void onSend() {
        taOutput.appendText(String.format("%s%n", chcItem.getSelectionModel().getSelectedItem()));
    }
}

実行結果

2020-09-01 01:00 nice!(0) コメント(0)

ボタンクリック時の処理(onAction)を追加する　 [JavaFX]

前置き

ボタンクリック時の処理は、setOnActionメソッドで直接追加する方法と、FXMLのonActionにメソッドを指定して追加する方法がある。
どちらの方法でも良いが、どちらかに統一した方がいいと思っていて、体感では、直接追加する方法はソースを追いやすくなり、 FXMLで指定する方法ではソースがスッキリするイメージ。

実装

直接指定

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    TextField txtInput;

    @FXML
    Button btnSend;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        btnSend.setText("送信");
        btnSend.setOnAction(event -> onSend(event));
    }

    private void onSend(ActionEvent e) {
        if (!txtInput.getText().isEmpty()) taOutput.appendText(String.format("%s%n", txtInput.getText()));
    }
}

FXML指定

SceneBuilderで対象のコントロールを選択して、右側のインスペクタからCodeを展開し、 On ActionにJavaで呼び出すメソッド名を指定する。
イベント発生時に、ここで指定したメソッドの処理が実行されるようになる。

Java側では@FXMLアノテーションを付与し、On Actionで指定したメソッド名でバインドする。

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="5.0" BorderPane.alignment="CENTER">
            <children>
            <TextField fx:id="txtInput" />
            <Button fx:id="btnSend" mnemonicParsing="false" onAction="#onSend" text="Button" />
            </children>
            <BorderPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
            </BorderPane.margin>
        </FlowPane>
    </top>
    <center>
        <TextArea fx:id="taOutput" editable="false" prefHeight="373.0" prefWidth="600.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    TextField txtInput;

    @FXML
    Button btnSend;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        btnSend.setText("送信");
    }

    @FXML
    private void onSend(ActionEvent e) {
        if (!txtInput.getText().isEmpty()) taOutput.appendText(String.format("%s%n", txtInput.getText()));
    }
}

実行結果

2020-08-31 12:00 nice!(0) コメント(0)

前置き

自分がSwingからJavaFXへ移行する上で、一番の動機付けになっている変更点が、XMLでレイアウトを定義できるようになった所だった。
FXMLというXML形式のファイルに、コンテナにコントロールの配置を定義する。

FXMLはSceneBuilderというツールで、コントロールをドラッグアンドドロップして配置していく要領で、簡単に作成することができる。
これをクラスローダで読み込んで、コントロールに対し必要な処理部分を定義していく流れとなり、 WEBアプリケーションを作成するのに近くなったことで、MVCライクな設計が可能となる。
ということは、設計によってはWEBアプリケーションとGUIアプリケーションの資産を相互に流用することもできる。

準備

後述の手順でSceneBuilderを準備していく。

SceneBuilderインストーラーをダウンロードする

SceneBuilderをインストールする

SceneBuilderを起動すると文字化けしている

製造元のGitHubリポジトリからSceneBuilderApp_ja.propertiesをダウンロードする

ダウンロードしたSceneBuilderApp_ja.propertiesはUTF-8で保存する(必要に応じて)

C:\Program Files\SceneBuilder\app\scenebuilder-11.0.0-all.jarの拡張子をzipに変更して解凍する

解凍後のcom\oracle\javafx\scenebuilder\app\i18n\SceneBuilderApp_ja.propertiesをダウンロードしたSceneBuilderApp_ja.propertiesで置き換える

解凍したscenebuilder-11.0.0-allをzipで圧縮しなおして拡張子をjarに戻す

SceneBuilderを起動すると文字化が解消されている

ここまでいろいろと書いているが、この方の説明の方が遥かに分かり易いのでお勧め。

実装

SceneBuilderでコンテナにコントロールを配置していく。
操作が直感的に行えるので配置に関する説明は割愛するが、ポイントだけ押さえておく。

まずはfx:idについて。
コントロール毎に識別子を指定する。これがJava側でのフィールド名となる。
コントロールを選択して、右側のインスペクタからCodeを展開しfx:idにJavaでのフィールド名を指定する。

次に、Controllerクラスを指定する。
これはFXMLとJavaクラスをバインドさせるための指定で、左側のドキュメントからコントローラを展開し、 Controller classに、パッケージを含めたクラス名を指定する。

コントローラクラスに指定されたクラスは、javafx.fxml.Initializableインタフェースをimplementsする必要がある。
これによって、@FXMLアノテーションでfx:idとフィールド名をバインドさせることができる。
また、Initializableインタフェースには、initializeという抽象メソッドが用意されており、 FXMLで定義できないコントロールの処理や設定などを、文字通り初期化することができる。

以上、SceneBuilderで作成したFXMLファイルは、リソースフォルダに保存する。
コントローラクラスからgetResourceメソッドで読み込みを想定しているので、コントローラクラスと同じパッケージを用意し、FXDemo.fxmlというファイル名で保存することにする。

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="5.0" BorderPane.alignment="CENTER">
            <children>
            <TextField fx:id="txtInput" />
            <Button fx:id="btnSend" mnemonicParsing="false" text="Button" />
            </children>
            <BorderPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
            </BorderPane.margin>
        </FlowPane>
    </top>
    <center>
        <TextArea fx:id="taOutput" editable="false" prefHeight="373.0" prefWidth="600.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    TextField txtInput;

    @FXML
    Button btnSend;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {

        // リソースフォルダの同じパッケージ内にある"FXDemo.fxml"を読み込んでコンテナをロードする
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        txtInput.setText("ここに入力する");
        btnSend.setText("送信");
        taOutput.setText("ここに出力される");
    }
}

今回は、FXMLでは定義していない初期値やボタン名を、initializeメソッドで変更してみた。

実行結果

2020-08-30 12:00 nice!(0) コメント(0)

TabPane　[JavaFX]

説明

タブの選択によってコンテンツを切り替える。

実装

TabPaneDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TabPaneDemo extends Application {

    private static final double X_SIZE = 800;
    private static final double Y_SIZE = 500;

    @Override
    public void start(Stage stage) {
        TabPane pane = new TabPane();
        pane.setPrefSize(X_SIZE, Y_SIZE);

        Tab tab1 = new Tab();
        Tab tab2 = new Tab();
        Tab tab3 = new Tab();
        Tab[] tabs = new Tab[]{tab1, tab2, tab3,};

        tab1.setText("VBox");
        tab2.setText("FlowPane");
        tab3.setText("FlowPane_VERTICAL");

        VBox vbox = new VBox();
        vbox.setSpacing(10); // コントロール同士のスペースを確保

        FlowPane flowOfVertical = new FlowPane(Orientation.VERTICAL);
        flowOfVertical.setVgap(10); // コントロール同士のスペースを確保(垂直方向)

        tab1.setContent(addButtons(vbox));
        tab2.setContent(addButtons(new FlowPane()));
        tab3.setContent(addButtons(flowOfVertical));
        pane.getTabs().setAll(tab1, tab2, tab3);

        stage.setScene(new Scene(pane));
        stage.setTitle("TabPaneDemo");
        stage.show();
    }

    private Pane addButtons(Pane pane) {
        pane.setPadding(new Insets(30, 30, 30, 30));

        for (int i = 0; i < 10; i++) {
            pane.getChildren().add(new Button(String.format("Button%s", i + 1)));
        }
        return pane;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

実行結果

2020-08-27 12:00 nice!(0) コメント(0)

HBox・VBox　[JavaFX]

説明

コントロールを追加順で水平・垂直方向に配置する。
FlowPaneとは違い、ウィンドウ幅のオーバーフロー分の折り返しはない。

実装

HBoxDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class HBoxDemo extends Application {

    private static final double X_SIZE = 800;
    private static final double Y_SIZE = 500;

    @Override
    public void start(Stage stage) {
        HBox pane = new HBox();
        // VBox pane = new VBox(); // 垂直方向の場合
        pane.setPrefSize(X_SIZE, Y_SIZE);

        for (int i = 0; i < 10; i++) {
            pane.getChildren().add(new Button(String.format("Button%d", i + 1)));
        }
        stage.setScene(new Scene(pane));
        stage.setTitle("HBoxDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

実行結果

ウィンドウ幅を縮めると、ウィンドウサイズに応じてコントロールのサイズが動的に変わり、配置は保たれる。

2020-08-26 12:00 nice!(0) コメント(0)

FlowPane　[JavaFX]

説明

コントロールを追加順に配置する。
文字通り、コントロールを流し込んでいくイメージ。
ウィンドウ幅のオーバーフロー分は、折り返して再配置される。

実装

FlowPaneDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class FlowPaneDemo extends Application {

    private static final double X_SIZE = 800;
    private static final double Y_SIZE = 500;

    @Override
    public void start(Stage stage) {
        FlowPane pane = new FlowPane();
        // FlowPane pane = new FlowPane(Orientation.VERTICAL); // 垂直方向のFlowPaneの場合
        pane.setPrefSize(X_SIZE, Y_SIZE);

        for (int i = 0; i < 10; i++) {
            pane.getChildren().add(new Button(String.format("Button%d", i + 1)));
        }
        stage.setTitle("FlowPaneDemo");
        Scene scene = new Scene(pane);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}