CIT-260 Lab #2: First GUI Application

What is a GUI?

In Lab #1 you created your first Java application. It was a Console Application, and it was kind of boring. Most of the programs that you run on your laptop computer, your smart phone, or your tablet are called graphical User Interface (GUI) applications. An application with a graphical user interface can be more interesting and less prone to user errors than similar Console Applications. In this lab you will create your first GUI application.

JavaFX

JavaFX is the third generation of GUI frameworks to be developed for Java. It provides a very rich set of capabilities for developing modern user interfaces. In this course we will only look at a small subset of the function that is available in JavaFX.

Two important concepts in JavaFX are the Stage and the Scene. The metaphor in this case is to a stage in a stage play, where the play may have many scenes. The stage is the top level container for your user interface. All JavaFX programs has access to one stage called the primary stage. The primary stage is supplied by the run-time system when a JavaFX program is started.

To create a JavaFX application, you will add a scene to the primary stage. The scene is the container for user interface objects such as buttons and text fields that the user will interface with in your application.

Hello World

Start NetBeans and on the menu bar select File and New Project. When the new project dialogue box comes up, select the JavaFX category and a JavaFX application for the project. NetBeans now creates a complete working JavaFX application. Click on the run button to see the application work. When you click on the button, the program displays a "Hello World" message on the Console.

All of the JavaFX programs that you will write this semester will follow the model shown in the code that NetBeans generated for you, so let's take some time and study what each line of code does. It is not critical that you understand all of the details, but you should feel like you could use this as a model to layout your own simple GUI interface. Following the package statement are the following import statements:

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

These import statements make code available to your program that has been written for you by the people who wrote the JavaFX framework. They are necessary if you want to use any of the classes built into the framework. For example, because we want to create a Scene object, we have to have access to the Scene class in JavaFX.

Now look at the line of code

public class Lab02 extends Application {

As you saw in lab #1, every Java program requires at least one class. In this case the name of the class is Lab02, and it extends Application. This means that the class Lab02 inherits all of the methods and data that are defined in the Application class that is part of the JavaFX framework. This allows us to use all of the capabilites of the Application class, while adding our own unique function.

The next two lines of code

@Override
public void start(Stage primaryStage) {

declare a method named start. This is where the initial scene is created and added to the stage. The line @override tells us that the Application class in the JavaFX framework already has a method named start, and we want the computer to use our code instead. The argument (Stage primaryStage) is the stage object that JavaFX created for us. Inside of this method we will refer to the Stage object using the name primaryStage.

The next two lines of code

Button btn = new Button();
btn.setText("Say 'Hello World'");

creates a button and places the text Say 'Hello World' on it.

The next few lines of code set up an event handler to tell the program what to do when someone clicks on the button. In this case, the program will display the text Hello World! on the console.

btn.setOnAction(new EventHandler() {
 
   @Override
   public void handle(ActionEvent event) {
      System.out.println("Hello World!");
   }
});

The next lines of code create a StackPane and add the button to the StackPane. A StackPane is what we call a layout, and it tells the program how to organize the GUI components. In the case of a StackPane, it just lays the GUI components on top of one another.

StackPane root = new StackPane();
root.getChildren().add(btn);

Now the line of code

Scene scene = new Scene(root, 300, 250);

creates the Scene object and adds the StackPane to it as its root node. The dimensions of the scene are 300 pixels wide by 250 pixels high.

Finally, the program adds a title to the Stage object, sets the scene as the current Scene on the Stage, and shows the Stage.

primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();

Your Assignment

After studying the code in this program, run the program to see what it does. Then submit your program as lab #2.

File(s) to Submit:

Place the complete project folder for this lab in a zip file and name the zip file
lab_02.zip. Submit the assignment as Lab #2 on I-Learn.

Grading Guidelines

Description Points possible

Assignment meets grading guidelines:
o The project folder has been properly submitted to I-Learn

2

Program executes correctly and meets the specifications.

3
Total 5