JavaFX-UIコントロール

すべてのユーザーインターフェイスは、次の3つの主要な側面を考慮します-

* UI要素*-これらは、ユーザーが最終的に表示および操作するコア視覚要素です。 JavaFXは、基本から複雑までさまざまな、広く使用されている一般的な要素の膨大なリストを提供します。これについては、このチュートリアルで説明します。
レイアウト-UI要素を画面上で整理する方法を定義し、GUI（グラフィカルユーザーインターフェイス）に最終的なルックアンドフィールを提供します。この部分については、レイアウトの章で説明します。
動作-これらは、ユーザーがUI要素と対話するときに発生するイベントです。この部分については、イベント処理の章で説明します。

JavaFXは、パッケージ javafx.scene.control でいくつかのクラスを提供します。さまざまなGUIコンポーネント（コントロール）を作成するために、JavaFXは日付ピッカー、ボタンテキストフィールドなどのいくつかのコントロールをサポートしています。

各コントロールはクラスで表されます。それぞれのクラスをインスタンス化して、コントロールを作成できます。

以下は、GUIがJavaFXを使用して設計されている間に一般的に使用されるコントロールのリストです。

S.No	Control & Description
1	Label Labelオブジェクトは、テキストを配置するためのコンポーネントです。
2	Button このクラスはラベル付きボタンを作成します。
3	ColorPicker ColorPickerは、ユーザーが色を操作および選択できるように設計されたコントロールのペインを提供します。
4	CheckBox CheckBoxは、オン（true）またはオフ（false）状態にできるグラフィカルコンポーネントです。
5	RadioButton RadioButtonクラスはグラフィカルコンポーネントであり、グループ内でON（真）またはOFF（偽）状態になります。
6	ListView ListViewコンポーネントは、テキストアイテムのスクロールリストをユーザーに提示します。
7	TextField TextFieldオブジェクトは、1行のテキストの編集を可能にするテキストコンポーネントです。
8	PasswordField PasswordFieldオブジェクトは、パスワード入力専用のテキストコンポーネントです。
9	Scrollbar Scrollbarコントロールは、ユーザーが値の範囲から選択できるようにするためのスクロールバーコンポーネントを表します。
10	FileChooser FileChooserコントロールは、ユーザーがファイルを選択できるダイアログウィンドウを表します。
11	ProgressBar タスクが完了に向かって進行すると、進行状況バーにタスクの完了率が表示されます。
12	Slider スライダーを使用すると、ユーザーは制限された間隔内でノブをスライドさせることでグラフィカルに値を選択できます。

例

次のプログラムは、JavaFXでログインページを表示する例です。ここでは、コントロール label、text field、password field および button を使用しています。

このコードを LoginPage.java という名前のファイルに保存します。

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;

import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class LoginPage extends Application {
   @Override
   public void start(Stage stage) {
     //creating label email
      Text text1 = new Text("Email");

     //creating label password
      Text text2 = new Text("Password");

     //Creating Text Filed for email
      TextField textField1 = new TextField();

     //Creating Text Filed for password
      PasswordField textField2 = new PasswordField();

     //Creating Buttons
      Button button1 = new Button("Submit");
      Button button2 = new Button("Clear");

     //Creating a Grid Pane
      GridPane gridPane = new GridPane();

     //Setting size for the pane
      gridPane.setMinSize(400, 200);

     //Setting the padding
      gridPane.setPadding(new Insets(10, 10, 10, 10));

     //Setting the vertical and horizontal gaps between the columns
      gridPane.setVgap(5);
      gridPane.setHgap(5);

     //Setting the Grid alignment
      gridPane.setAlignment(Pos.CENTER);

     //Arranging all the nodes in the grid
      gridPane.add(text1, 0, 0);
      gridPane.add(textField1, 1, 0);
      gridPane.add(text2, 0, 1);
      gridPane.add(textField2, 1, 1);
      gridPane.add(button1, 0, 2);
      gridPane.add(button2, 1, 2);

     //Styling nodes
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

      text1.setStyle("-fx-font: normal bold 20px 'serif' ");
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");
      gridPane.setStyle("-fx-background-color: BEIGE;");

     //Creating a scene object
      Scene scene = new Scene(gridPane);

     //Setting title to the Stage
      stage.setTitle("CSS Example");

     //Adding scene to the stage
      stage.setScene(scene);

     //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。

javac LoginPage.java
java LoginPage

実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。

CSSの例

次のプログラムは、* Date Picker、Radio Button、Toggle Button、Check Box、List View、Choice ListなどのJavaFXのコントロールを示す登録フォームの例です。

このコードを Registration.java という名前のファイルに保存します。

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

import javafx.geometry.Insets;
import javafx.geometry.Pos;

import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.DatePicker;
import javafx.scene.control.ListView;
import javafx.scene.control.RadioButton;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.control.ToggleButton;
import javafx.stage.Stage;

public class Registration extends Application {
   @Override
   public void start(Stage stage) {
     //Label for name
      Text nameLabel = new Text("Name");

     //Text field for name
      TextField nameText = new TextField();

     //Label for date of birth
      Text dobLabel = new Text("Date of birth");

     //date picker to choose date
      DatePicker datePicker = new DatePicker();

     //Label for gender
      Text genderLabel = new Text("gender");

     //Toggle group of radio buttons
      ToggleGroup groupGender = new ToggleGroup();
      RadioButton maleRadio = new RadioButton("male");
      maleRadio.setToggleGroup(groupGender);
      RadioButton femaleRadio = new RadioButton("female");
      femaleRadio.setToggleGroup(groupGender);

     //Label for reservation
      Text reservationLabel = new Text("Reservation");

     //Toggle button for reservation
      ToggleButton Reservation = new ToggleButton();
      ToggleButton yes = new ToggleButton("Yes");
      ToggleButton no = new ToggleButton("No");
      ToggleGroup groupReservation = new ToggleGroup();
      yes.setToggleGroup(groupReservation);
      no.setToggleGroup(groupReservation);

     //Label for technologies known
      Text technologiesLabel = new Text("Technologies Known");

     //check box for education
      CheckBox javaCheckBox = new CheckBox("Java");
      javaCheckBox.setIndeterminate(false);

     //check box for education
      CheckBox dotnetCheckBox = new CheckBox("DotNet");
      javaCheckBox.setIndeterminate(false);

     //Label for education
      Text educationLabel = new Text("Educational qualification");

     //list View for educational qualification
      ObservableList<String> names = FXCollections.observableArrayList(
         "Engineering", "MCA", "MBA", "Graduation", "MTECH", "Mphil", "Phd");
      ListView<String> educationListView = new ListView<String>(names);

     //Label for location
      Text locationLabel = new Text("location");

     //Choice box for location
      ChoiceBox locationchoiceBox = new ChoiceBox();
      locationchoiceBox.getItems().addAll
         ("Hyderabad", "Chennai", "Delhi", "Mumbai", "Vishakhapatnam");

     //Label for register
      Button buttonRegister = new Button("Register");

     //Creating a Grid Pane
      GridPane gridPane = new GridPane();

     //Setting size for the pane
      gridPane.setMinSize(500, 500);

     //Setting the padding
      gridPane.setPadding(new Insets(10, 10, 10, 10));

     //Setting the vertical and horizontal gaps between the columns
      gridPane.setVgap(5);
      gridPane.setHgap(5);

     //Setting the Grid alignment
      gridPane.setAlignment(Pos.CENTER);

     //Arranging all the nodes in the grid
      gridPane.add(nameLabel, 0, 0);
      gridPane.add(nameText, 1, 0);

      gridPane.add(dobLabel, 0, 1);
      gridPane.add(datePicker, 1, 1);

      gridPane.add(genderLabel, 0, 2);
      gridPane.add(maleRadio, 1, 2);
      gridPane.add(femaleRadio, 2, 2);
      gridPane.add(reservationLabel, 0, 3);
      gridPane.add(yes, 1, 3);
      gridPane.add(no, 2, 3);

      gridPane.add(technologiesLabel, 0, 4);
      gridPane.add(javaCheckBox, 1, 4);
      gridPane.add(dotnetCheckBox, 2, 4);

      gridPane.add(educationLabel, 0, 5);
      gridPane.add(educationListView, 1, 5);

      gridPane.add(locationLabel, 0, 6);
      gridPane.add(locationchoiceBox, 1, 6);

      gridPane.add(buttonRegister, 2, 8);

     //Styling nodes
      buttonRegister.setStyle(
         "-fx-background-color: darkslateblue; -fx-textfill: white;");

      nameLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      dobLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      genderLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      reservationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      technologiesLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      educationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      locationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

     //Setting the back ground color
      gridPane.setStyle("-fx-background-color: BEIGE;");

     //Creating a scene object
      Scene scene = new Scene(gridPane);

     //Setting title to the Stage
      stage.setTitle("Registration Form");

     //Adding scene to the stage
      stage.setScene(scene);

     //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。

javac Registration.java
java Registration

実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。

登録フォーム

Javafx-ui-controls

JavaFX-UIコントロール

例