Getting started with JavaFX with an app that can calculate the alcohol content when strong zero is divided by a bite

This article is the 5th day article of Mikatus Advent Calendar 2019.

Introduction

Do you like alcohol? I love liquor and __maybe liquor also likes me __ [^ 1]. [^ 1]: There is a possibility of unrequited love. 　　 Recently, various canned chu-hi have been released, and as soon as I go home every day, I have a drink, and if I just drink, I fall asleep.

However, the number of canned chu-hi these days has increased by 9% or more, including __a certain strong __. I tend to buy something with a high alcohol content, but when I think about my health problems, I tremble and I can't sleep without drinking alcohol.

Under such circumstances, my colleagues at work said __ "It's OK if you divide it by a little bit" [^ 2] __, and I was impressed with the idea, and what is the alcohol content when you divide alcohol with alcohol? ?? So I made a desktop application to calculate with JavaFX.

[^ 2]: I don't know what's okay.

What is JavaFX

Quoted from Wikipedia below

JavaFX is a rich internet application (RIA) GUI library that runs on a Java virtual machine. It is installed as standard in Java SE 7 Update 2 or later. Unlike Swing, the design is described using XML and CSS called FXML.

Roughly speaking, it feels like a successor to Swing. Swing had to write the UI entirely in Java, which was quite hellish, but in JavaFX, the design was extracted into a file called FXML, so it seems that the UI is not written in Java.

Environment construction & project creation

I referred to this article. [For super beginners] JavaFX super introduction The description of the project structure and Main class has been completely copied.

Scene Builder is quite convenient, and the UI construction is finished by dragging and dropping parts. It is like this.

One caveat is that JavaSE11 has lost the free version of Oracle JDK and I think most people are using OpenJDK, but __OpenJDK does not include JavaFX __. This time it was troublesome to deal with, so I chose Java 8 when creating a project in Eclipse.

By the way, there seems to be a way to deal with it. Running JavaFX with OpenJFX + OpenJDK [Introducing JavaFX to OpenJDK 11] (https://blogs.osdn.jp/2018/11/12/merge-openjfx.html)

Associate FXML with Controller

When you create a UI in Scene Builder and save it, it will be saved as an FXML file. Click here for the FXML file created this time

Untitled.fxml

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.Pane?>


<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TextField layoutX="69.0" layoutY="98.0" />
      <TextField layoutX="300.0" layoutY="98.0" />
      <TextField layoutX="69.0" layoutY="201.0" />
      <TextField layoutX="300.0" layoutY="201.0" />
      <Button layoutX="503.0" layoutY="201.0" mnemonicParsing="false" text="calculate" />
      <Label layoutX="33.0" layoutY="103.0" text="1." />
      <Label layoutX="33.0" layoutY="206.0" text="2." />
      <Label layoutX="240.0" layoutY="103.0" text="ml" />
      <Label layoutX="240.0" layoutY="206.0" text="ml" />
      <Label layoutX="471.0" layoutY="103.0" text="\%" />
      <Label layoutX="471.0" layoutY="206.0" text="\%" />
      <Label layoutX="100.0" layoutY="285.0" prefHeight="48.0" prefWidth="401.0" />
   </children>
</Pane>

What I really want to do is that when the button to calculate is pressed, the values entered in the four forms are acquired and calculated, so the button press and the values entered in the four forms are used as Java Controllers. We will modify the fxml file so that it will be accepted by the class.

And here is the finished product

Main.fxml

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.Pane?>


<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controller.AlcoholController">
   <children>
      <TextField layoutX="69.0" layoutY="98.0" fx:id="amountFst" />
      <TextField layoutX="300.0" layoutY="98.0" fx:id="alcoholFst" />
      <TextField layoutX="69.0" layoutY="201.0" fx:id="amountSec" />
      <TextField layoutX="300.0" layoutY="201.0" fx:id="alcoholSec" />
      <Button layoutX="503.0" layoutY="201.0" mnemonicParsing="false" text="calculate" fx:id="button" onAction="#onClick" />
      <Label layoutX="33.0" layoutY="103.0" text="1." />
      <Label layoutX="33.0" layoutY="206.0" text="2." />
      <Label layoutX="240.0" layoutY="103.0" text="ml" />
      <Label layoutX="240.0" layoutY="206.0" text="ml" />
      <Label layoutX="471.0" layoutY="103.0" text="\%" />
      <Label layoutX="471.0" layoutY="206.0" text="\%" />
      <Label layoutX="100.0" layoutY="285.0" prefHeight="48.0" prefWidth="401.0" fx:id="result" />
   </children>
</Pane>

You can see that the tags starting with fx: have been added. First, describe the Controller associated with the FXML file with fx: controller in the description part of the largest panel. TextField will be given fx: id. This will later be associated with the Controller variable. For Button, define ʻonClick with ʻonAction. Now when the button is pressed, a method called onClick should start working.

Create a Controller according to the above FXML.

AlcoholController.java

package controller;

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

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

public class AlcoholController implements Initializable {

	@FXML
	private TextField amountFst;

	@FXML
	private TextField alcoholFst;

	@FXML
	private TextField amountSec;

	@FXML
	private TextField alcoholSec;

	@FXML
	private Button button;

	@FXML
	private Label result;

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

	}

	@FXML
	public void onClick(ActionEvent event) {

	}

}

It is like this. By adding @FXML, it seems to be linked with the FXML file defined earlier.

After that, write a simple calculation on onClick and it is completed. This is the alcohol content when a long can of 9% alcohol is divided by a bite. You can see that it is a very healthy number __.

After that, if you export it with an executable jar from Eclipse, it will be a great application.

Finally

I have written Swing, but it was much easier than Swing because Scene Builder was quite convenient. The Java code itself is refreshing and easy to read, and I could read it at all even if I skipped for a few days and the days were empty.

The source I wrote this time is posted on Github, so please refer to it if you like. https://github.com/SomeyaHotaka/AlcoholCalc

With this app I want to lead a healthy life. See you again.