Our First Programm with JavaFx and SceneBuilder

Today we are going to create our first program in JavaFx with EsceneBuilder.

We are going to create a very simple interface which allow us to save the data referring to a student, (IDentification, subject, note and retrieval mark) ,the information will be displayed in a table by clicking the save data Button.

Working with javaFX means we are going to works with model -view –controller.

Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces on computers. It divides a given application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to, and accepted from, the user. The MVC design pattern decouples these major components allowing for efficient code reuse and parallel development.
So , lets do this , first of all we need to create our new Project , we need a new JavaFx FXML Application.

You can look the full project here : https://github.com/RayRT/JavaFxApp.git


The name of my project its AplicacionAlumnos and looks like this :

This is the typical tree of a Model -view-controller Project.
For design our interface with EsceneBUilder we need to download him from here :
http://www.oracle.com/technetwork/java/javafxscenebuilder-1x-archive-2199384.html

The next step is to link EsceneBuilder with NetBens, from Tools —> Java —> JavaFx —-> file path.

 

 

 

With the view file (.fxml) we just have to change one thing to indicate the controller file , Namepackage.NamecontrollerFile.

 

And in the file with the main method we indicate the main view to load:

 

 

 

 

Now let’s click on the .fxml file, it will open with EsceneBuilder.

 

As you can see, EsceneBuilder is a really intuitive and easy-to-use program. We can create our Interface by dragging the components to the central field. We can also add different types of layouts, which as we saw with AndroidStudio, help us to organize the components .

Everything that is done in EsceneBuilder will be seen in the form of self-generated code in the .fxml file
This is how you see the code of the default project that is generated for the first time:

I would recommend to separate the files in different packages to have a clearer vision of the different components of the project.
This is my project tree, so that  how the interface looks

 

 

 

 

 

 

 

You can see this components :
TextField Dni Alumno : The id of the Student
TextField Asignatura: A Subject
TextField Nota :Student Mark of the especific Subject
TextField Recuperacion :Mark of the retrieval.
Button Guardar Nota : To save the data.
And a TableView where you can see the data
We create a new class Alumno (Student) with the required attributes in the TextFields, with its constructor and its getters and setters

 

IMPORTANT:

When we want to represent data in a Javafx table we need a specific data type for it.
That is why we use SimpleStringProperty and SimpleIntegerProperty.
As you can see the Getters and Setters vary slightly, the rest is a normal class.

Now the interesting part, the viewController .This is my code :
Let’s go by parts:
We import the necessary packages:

We have assigned an id to each element in EsceneBuilder so we need to name it in the controller :

So we name it all of them here :

We need to create two objects to indicate the restriction of values to the numerical fields (0-10 for marks, and 0-5 for retrieval). We will use them later.

We also need to create an observableList to collect the data

Time of the event methods that we assign to the components in EsceneBuilder:

This both events of type KeyEvents blocks writing when exceeding the limited number of characters:

A handleGuardarNota event of type ActionEvent save the notes entered in the textfields.

It may produce an exception so we need a try-catch block. In the case of missing data, a message will be executed:

After saving the data, the contents of the TextField will be deleted.

We have introduced some tooltips that indicate to the user the restrictions of each text field when the mouse is passed over:

 

 

 

TextFormatter has also been used to assign a range of valid values to the numeric fields.

Finally, we initialize the table:

Here we have the full code of the main controller:



Now, you can run the app:

Acerca del autor: Start2Develop

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.