サムネがコーヒーの記事は書きかけです。

JavaFXまとめ

SHARE

JavaFXでデスクトップアプリケーションを作成するための基本のまとめ。

アプリケーション本体

app1クラスを作成する。

このプロジェクトの場合、パッケージ名がdemoなので、一行目を追加する。

package com.example.demo;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Pos;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

import java.io.IOException;

public class app1 extends Application{
    @Override
    public void start(Stage stage) throws IOException{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        stage.setTitle("title");
        stage.setScene(new Scene(root,500,300));
        stage.show();
    }
}

コントローラ

ボタンクリックなどの動作を記述したい場合は、コントローラを使用する。

コントローラーとFXMLの連動

FXMLインスタンスのonActionプロパティに、”#+メソッド名”を指定した後、Controller.javaにて対応するメソッドを実装する。

FXML

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.Controller"
            vgap="10" hgap="10"
            alignment="center">
   <TextField fx:id="field1" GridPane.rowIndex="0"/>
   <Button GridPane.rowIndex="1" text="Label1" onAction="#onClickLabel1"/>

</GridPane>

Controller.java

package com.example.demo;

import javafx.fxml.FXML;
import javafx.scene.control.TextField;

public class Controller {
    @FXML
    private TextField field1;
    public void onClickLabel1(){
        System.out.println(field1.getText()＋”Entered.＂ );
    }
}

この例では、ボタンクリック時にテキストフィールドに入力した文字がターミナルに出力される。

複数のボタンの配置とコントローラーでの管理

二つのボタンを配置して、一つのコントローラでアクションを制御する。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.Controller"
            vgap="10" hgap="10"
            alignment="center">
   <TextField fx:id="field1" GridPane.rowIndex="0"/>
   <Button fx:id="button1" GridPane.rowIndex="1" text="Button1" onAction="#onClickButton"/>
   <Button fx:id="button2" GridPane.rowIndex="2" text="Button2" onAction="#onClickButton"/>

</GridPane>

FXMLでは２つのボタンと一つのテキストフィールドを定義する。

package com.example.demo;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;

public class Controller {
    @FXML
    private TextField field1;
    @FXML
    private Button button1;
    @FXML
    private Button button2;

    public void onClickButton(ActionEvent e){

        if (e.getSource().equals(button1)){
            System.out.println("Button1 clicked");
            System.out.println("Text = " + field1.getText());
        }else if (e.getSource().equals(button2)) {
            System.out.println("Button2 clicked");
            System.out.println("Text = " + field1.getText());
        }
        System.out.println("---------------------------");
    }
}

OnClickハンドラ

特定の条件下でボタンを有効化、無効化できる。

テキストフィールドに、onKeyReleasedプロパティを追加。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.Controller"
            vgap="10" hgap="10"
            alignment="center">
   <TextField fx:id="field1" GridPane.rowIndex="0"
      onKeyReleased="#keyReleaseHandler"/>
   <Button fx:id="button1" GridPane.rowIndex="1" text="Button1" onAction="#onClickButton"/>
</GridPane>

コントローラーに制御メソッドとイニシャライザを追加。イニシャライザは名前を正確に書かないといけない。

package com.example.demo;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;

public class Controller {
    @FXML
    private TextField field1;
    @FXML
    private Button button1;

    @FXML
    public void initialize(){
        button1.setDisable(true);
    }
    @FXML
    public void onClickButton(ActionEvent e){
        System.out.println("Button1 clicked");
        System.out.println("Text = " + field1.getText());
    }
    @FXML
    public void keyReleaseHandler(){
        String text = field1.getText();
        boolean disabled = text.isEmpty() || text.trim().isEmpty();
        button1.setDisable(disabled);
    }
}

テキストが入力されていない場合は、クリックが無効化されている。

FXML

マークアップ形式で、パーツの配置などを記述していく。

GridPane

格子状に決められた規格に沿ってパーツを配置することができる。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
    <Button text="Button1" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
    <Button text="Button2" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
    <Button text="Button3" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
    <Button text="Button4" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>

RadioButton

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
    <RadioButton GridPane.rowIndex="0" GridPane.columnIndex="0" text="option1"></RadioButton>
    <RadioButton GridPane.rowIndex="1" GridPane.columnIndex="0" text="option2"></RadioButton>
    <RadioButton GridPane.rowIndex="2" GridPane.columnIndex="0" text="option3"></RadioButton>
</GridPane>

以下のようにトグルグループを定義することで、同時選択を避けることもできる。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
    <fx:define>
        <ToggleGroup fx:id="toggleGroup1"/>
    </fx:define>
    <RadioButton GridPane.rowIndex="0" GridPane.columnIndex="0" text="option1" toggleGroup="$toggleGroup1"></RadioButton>
    <RadioButton GridPane.rowIndex="1" GridPane.columnIndex="0" text="option2" toggleGroup="$toggleGroup1"></RadioButton>
    <RadioButton GridPane.rowIndex="2" GridPane.columnIndex="0" text="option3" toggleGroup="$toggleGroup1"></RadioButton>
</GridPane>

チェックボックス

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
   <CheckBox text="Checkbox1" GridPane.rowIndex="0"></CheckBox>
</GridPane>

テキストフィールド、パスワードフィールド

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
   <TextField GridPane.rowIndex="1" />
   <PasswordField GridPane.rowIndex="2" />
</GridPane>

ComboBox

選択肢を提示するときに便利。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
   <ComboBox GridPane.rowIndex="2" GridPane.columnSpan="1">
      <items>
         <FXCollections fx:factory="observableArrayList" >
            <String fx:value = "Option 1"/>
            <String fx:value = "Option 2"/>
            <String fx:value = "Option 3"/>
            <String fx:value = "Option 4"/>
            <String fx:value = "Option 5"/>
         </FXCollections>
      </items>
      <value>
         <String fx:value="default"/>
      </value>
   </ComboBox>
</GridPane>

ChoiseBox

ComboBoxとほぼ同じ。

選んだものにチェックマークが入るかどうかの違い。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
   <ChoiceBox GridPane.rowIndex="2" GridPane.columnSpan="1">
      <items>
         <FXCollections fx:factory="observableArrayList" >
            <String fx:value = "Option 1"/>
            <String fx:value = "Option 2"/>
            <String fx:value = "Option 3"/>
            <String fx:value = "Option 4"/>
            <String fx:value = "Option 5"/>
         </FXCollections>
      </items>
      <value>
         <String fx:value="default"/>
      </value>
   </ChoiceBox>
</GridPane>

SlideBar

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
   <Slider GridPane.rowIndex="0" GridPane.columnSpan="8"  min ="0" max = "100"
           showTickLabels="true"
           showTickMarks="true"
           snapToTicks="true"
   />

</GridPane>

Spinner

細かい選択などに向いているよう。デフォルト値の設定も可能。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
   <Spinner  GridPane.rowIndex="0" min ="0" max ="100"
      editable = "true"
      initialValue="50"/>
</GridPane>

ColorPicker

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
   <ColorPicker GridPane.rowIndex="0"/>
</GridPane>

DatePicker

日付を選択できる。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.*?>
<?import java.lang.String?>
<GridPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.demo.controller1"
            vgap="10" hgap="10"
            alignment="center">
   <DatePicker GridPane.rowIndex="0"/>
</GridPane>

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

PythonでYouTubeのダウンロード 【yt-dlp】

次の記事

JavaFX FileChooserを使用してファイルを選択す…