First JavaFX ~ Easy introduction Hello world GUI creation ~
Do you do it in the summer? Advent Calendar Part 5
Introduction
Thank you for reading this article. In this article, the author of a chick programmer who has been using JavaFX for about half a year described the introduction of JavaFX and SceneBuilder and the creation of Hello Work. Articles written by someone in the past may be easier to understand, so I hope you can read them as a reference only.
Introduction
As a premise, please install Eclipse by yourself.
The author's environment is as follows. -macOS Sierra 10.12.6 -Eclipse Oxygen 4.7.3a
The items to be introduced this time are as follows. -e (fx) clipse: Plugin for developing FX in Eclipse -Scene Builder: FX GUI can be created with GUI (Is it better to actually try it than words)
Let's actually do it.
Introduction of e (fx) clipse
Open Eclipse and select "Help-> Install New Software" from the status bar at the top of the screen.
From the drop-down list labeled "Work with", select the item labeled "Oxygen-http://download.eclipse.org/releases/oxygen".
After reading for a while, the center table will be updated, so enter "fx" where "Filter Input" is written.
After reloading, the section that says "e (fx) clipse --IDE" will appear under the general tools. Select it and select "Next>" at the bottom of the window.
If you select "Next>" and proceed, the terms of use confirmation screen will appear. After agreeing, select "Finish" to start the installation.
Let's restart Eclipse once the installation is completed.
Introduction of Scene Builder
Download Scene Builder from the Oracle website.
Go to the here link and under Download "Scene Builder Binaries (1.x, 2.0) ) (Archives) ”.
From "JavaFX Scene Builder 2.0 Related Downloads" at the bottom of the destination page, after agreeing to the terms of use (Accept License Agreement), download the compressed file suitable for your OS. (In my case javafx_scenebuilder-2_0-macosx-universal.dmg)
Open the downloaded file and install the application inside. 
For macOS, drag and drop the icon on the left to Applications on the right.
Linkage between Eclipse and Scene Builder
In Eclipse, open Preferences. Select the JavaFX item and enter the Scene Builder path you just introduced in the text box next to the Scene Builder executable. It is easy and reliable to select the application file directly from "Browse". After entering the path, close the window from "Apply and Close" at the bottom right.
This completes the preparation for introduction. thank you for your hard work.
Actually make a program
This time, I would like to create a GUI application that has a text box for entering a name and a message "Hello ○○ !!" appears when the button is pressed after entering the name.
Project creation
From Eclipse, select New and select "JavaFX Project" from the JavaFX section. Let's name this project "Hello FX".
After entering the project name, select "Next>" at the bottom twice.
After transitioning to the window shown above, change the language section from the drop-down list to "FXML".
The route type is the part to select the base Pane, this time select "javafx.scene.layout.AnchorPane".
Change the file name and controller name from Sample to Form and SampleController to FormController.
When the steps up to this point are completed and you see the figure below, select "Finish" to create the project.
Operation in Scene Builder
Right-click Form.fxml in the application package in the created project and select Open in Scene Builder.
Scene Builder will start up and you will see a screen like the one below.
Make the Anchor Pane you set earlier visible.
Select Anchor Pane at the bottom left of the screen, and then select Layout at the right of the screen.
Change both the Pref width and Pref Height terms to 400. Then, a square will appear in the center of the screen.
Parts placement
Next, place a text field for entering a name. From the list of Contorolls on the left side of the screen, drag and drop "Text Field" to the Anchor Pane in the center of the screen at the desired position. As an example, I placed the text field so that the right edge is in the center.
Next, arrange the buttons. As with the text field, drag and drop the "Button" in Controlls. I placed it so that it sticks to the right edge of the text field.
Next, place the character output part. As before, drag and drop the "Label" in Controlls. Since the size immediately after placement is a little small, change the size in the same way as when Anchor Pane appeared. Select the placed Label and change the Pref Width to 370 and Pref Height to 40 from the Layout on the right side of the screen. After that, please adjust the arrangement as it becomes larger.
Up to this point, you should see the figure below.
Let's overwrite and save (command + s) once around here. The changes in Scene Builder are linked to Form.fxml in the project, and if you open Form.fxml in Eclipse, you can see the code such as TextField and Label.
Link with FormContraller.java
Prepare to operate the TextField etc. placed in the previous section in the actual java program.
First, as an operation common to TextField, Button, and Label, after selecting each, enter "fx: id" from the Code on the right side of the screen.
fx: id acts like an identifier for later operation with FormController.
It is recommended that the first letter start with a lowercase letter, such as a variable declaration.
This time, let's set each fx: id as follows.
-TextField「field_Name」
-Button「button_Enter」
-Label「label_Output」
If you set fx: id, you will get a yellow warning in Scene Builder. Simply put, the content is "There is no object corresponding to fx: id in FormController!", And don't worry, it will disappear by the operation described later.
Next, perform the operation to create the "when the button is clicked" method only for Button.
Enter the item "On Acction" under fx: id of Button like fx: id.
This time, let's say "onButtonClicked".
This is the end of the operation in Scene Builder. Let's overwrite and save and return to Eclipse.
Operation in Eclipse
Select FormController.java and enter as below.
FormController.java
package application;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
public class FormController {
@FXML private TextField field_Name;
@FXML private Button button_Enter;
@FXML private Label label_Output;
@FXML public void onButtonClicked() {
label_Output.setText("Hello "+ field_Name.getText()+ " !!");
}
}
When declaring the part linked in SceneBuilder (and Form.fxml), add @FXML. Make sure that each object name is the same as the one entered with fx: id. Similarly, the method name should be the same as the one entered in On Action of Code of Button.
The content of this method is to extract the characters in the text field and update the Label to "Hello ○○ !!" when the button is pressed.
After filling out the FormController, run Main.java and you will see a square window.
Enter a name in the text field and press the button to output "Hello ○○ !!". 
This completes the Hello World GUI in JavaFX for the time being.
It's been a long time, but thank you for reading.
Prepare a little
It's said that it's completed above, but it's a bonus to add a little operation to improve the appearance.
This time,
- Delete "Label" immediately after starting Label
- Set the button "Button" to "Enter"
- Change the font size of Label I will do three things.
Let's open Form.fxml in Eclipse. For "Label" in 1., just change text = "Label" in \
Regarding 3., this is done with Scene Builder. Right-click Form.fxml from Eclipse Package Explorer and execute "Open with Scene Builder".
Select Label at the bottom left of the Scene Builder screen, and then select "Font" in Properties on the right side of the screen. You can set the font size in the size section of the window that appears. Around 24 is recommended for this program.
By the way, in Family in this Font section, you can change to any font.
After making the above changes, try running Main.java again and you should see something like the figure below.
in conclusion
This time, as the title suggests, we introduced JavaFX and created a simple Hello Work GUI. Since this is my first time writing an article, there may be some parts that are difficult to read or misleading descriptions. In that case, I would appreciate it if you could point out in the comments. Again, please note that this article is ** for reference only ** and is not perfect.
Thank you for reading this far.
Recommended Posts