コントロール その 1

Label

ラベルは使用頻度では一番多いかもしれないですね。文字列を表示するコントロールです。

javafx.scene.text.Text というクラスもあるのですが、こちらは本当に文字列だけです。それに対し、Label クラスはアイコンも使用することができます。

まずは単純な文字列。

    Label label = new Label("Label");
    root.getChildren().add(label);

ラベルで表示している文字列の取得は getText メソッド、文字列の設定は setText メソッドでできます。

では、次にアイコンをつけてみましょう。

Swing ではアイコンは Icon クラスで表していましたが、JavaFX では Node クラスです。なので、何でもありです。

    Label label1 = new Label("Label 1",
                             new Rectangle(2, 2, 6, 6));
    root.getChildren().add(label1);

    Label label2 = new Label("Label 2",
                             new ImageView(new Image("src/bullet.png")));
    root.getChildren().add(label2);

アイコンはコンストラクタの第 2 引数で指定します。後から指定するには、setGraphic メソッドを使用します。ここでは、アイコンとして四角と、イメージをロードして使用しました。

Button

使用頻度ではボタンも多いですね。Button クラスは JButton クラスとほとんど使い方は同じです。

まずは、テキストだけのボタンです。

    Button button = new Button("Button");
    button.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            System.out.println("Button is clicked.");
        }            
    });
    root.getChildren().add(button);

ボタンに表示するテキストは setText メソッドでも設定できます。

イベントについては、また別の機会に詳しく書こうと思っていますが、Swing のようにイベントの種類ごとにリスナがあるのではなく、すべて EventHandler クラスで扱います。イベントの種類はジェネリクスで指定します。

これを実行すると、下図のようになります。

次にアイコンつきのボタンです。

Button クラスのアイコンも Node クラスです。なので、何でもありです。

    Button button1 = new Button("Button1", 
                                new Rectangle(2, 2, 6, 6));
    root.getChildren().add(button1);

    Button button2 = new Button("Button2", 
                                new ImageView(new Image("src/bullet.png")));
    root.getChildren().add(button2);
        
    Button button3 = new Button("Button3",
                                new RadioButton("RadioButton"));
    root.getChildren().add(button3);

ここでは、ボタンを 3 つ並べています。四角とイメージは Label の時と同じです。最後は、ボタンの中にラジオボタンが入ります。

こんなんでもありなのです。

実行すると、こうなります。

なんか不思議な感じですよね。でも、ちゃんと動作します。ラジオボタンもちゃんとチェックできます。

TextField

続いて、TextField です。

Swing の JTextField クラスだとコンストラクタにはカラム数を指定しますが、TextField クラスでは setPrefColumnCount メソッドで指定します。

    TextField field = new TextField("TextField");
    field.setPrefColumnCount(20);
    root.getChildren().add(field);

実行してみましょう。

TextField に入力された文字列を取得するには、getText メソッドを使用します。

ちなみに、JavaFX はまだフォント周りのバグが結構残っていて、JavaFX 2.0 だと日本語を入力するとカーソルがずれるというバグがあります。

Windows 版の JavaFX 2.1 だと直っているのですが、Linux 版はまだバグったままです。

Linux 版で日本語を入力するとこうなります。

Linux 版の品質はまだまだといったところでしょう。

さて、3 つのコントロールができたので、3 つを組み合わせてみましょう。

ボタンをクリックしたら、テキストフィールドに入力した文字列をラベルにセットするというサンプルです。

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ControlsDemo extends Application {
    private TextField field;
    private Label label;
    
    @Override
    public void start(Stage stage) {
        stage.setTitle("Control Demo");
     
        VBox root = new VBox(10);
        root.setAlignment(Pos.CENTER);

        Scene scene = new Scene(root, 340, 120);
        stage.setScene(scene);

        HBox hbox = new HBox(10);
        hbox.setAlignment(Pos.CENTER);
        root.getChildren().add(hbox);

        field = new TextField();
        field.setPrefColumnCount(20);
        hbox.getChildren().add(field);

        Button button = new Button("Update");
        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                // テキストフィールドの文字列をラベルにセットする
                String text = field.getText();
                label.setText(text);
            }            
        });
        hbox.getChildren().add(button);
        
        label = new Label();
        root.getChildren().add(label);
        
        // ステージの表示
        stage.show();
    }

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

レイアウトの部分はあまり見ないでおいて、コントロールの部分だけ見てください。

ボタンがクリックされたら、TextField.getText メソッドで文字列を取得し、Label.setText でセットしているだけです。

実行すると...

テキストフィールドに入力して、ボタンをクリックします。

次回はまた違うコントロールを使ってみましょう。