CIT-260 Lab #3: GridPanes and TextFields

GridPanes

In Lab #2 you used a StackPane to layout the user interface. A StackPane just puts each new component on top of theprevious one. In thi lab you will use a Gridpane to layout the components. A GridPane defines a two dimensional grid. Components are placed on the grid using the row and column number on the grid where you want to place the component.

When defining a GridPane, you normally define the alignment of components on the grid, define the spacing between components, and specify the border that you want around the grid. These values are shown in the following figure.

gridpane

To begin, create a new JavaFX application. Be sure that you have the following import statements in your code:

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.geometry.*;

Then write the following code to begin the start method:

   @Override
   public void start(Stage primaryStage)
   {
      primaryStage.setTitle("Lab #2");

Add the following statements to set up the GridPane and add it to the Scene:

      // set up the GridPane
      GridPane grid = new GridPane();
      grid.setAlignment(Pos.CENTER);
      grid.setHgap(10);
      grid.setVgap(10);
      grid.setPadding(new Insets(25, 25, 25, 25));
      Scene scene1 = new Scene(grid, 300, 275);

Now we want to add our comonents to the GridPane. When we are done we want the user interface to look something like this:

interface

Labels

A Label displays a text string on the user interface. In this interface we have two labels, one that says "Enter your age:", and one that says "Your age doubled". We are going to place the first label in column 0 and row 0. The code looks like this:

      Label labelOne = new Label("Enter your age: ");
      grid.add(labelOne, 0, 0);

The second label will go in column 0, row 1. The code looks like this:

      Label label2 = new Label("Your age doubled: ");
      grid.add(label2, 0, 1);

TextFields

A TextField creates a rectangular box into which the user can type text. We need two TextFields, one where the user enters their age, and the second where our program will display the value of age when it is doubled. The first TextField will go in colum 1, row 0. We will make the TextField big enough to hold three characters. The code looks like this:

      TextField inputField = new TextField();
      inputField.setPrefColumnCount(3);
      grid.add(inputField, 1, 0);

The second TextField will go in colum 1, row 1. The code looks like this:

      TextField outputField = new TextField();
      outputField.setPrefColumnCount(3);
      grid.add(outputField, 1, 1);

Now we will add a Button to the interface. When the button is clicked, we want the program to read the input typed into the first TextField, double it, and write out the doubled value into the second TextField. The button will go in column 0, row 2. The button is created like this:

      Button btn = new Button("Double It");
      grid.add(btn, 0, 2);

Ading the Event Handler

Now we need to add the event handler for the button. The code looks like this:

      btn.setOnAction(new EventHandler()
      {
         @Override
         public void handle(ActionEvent e)
         {
            String ageString = inputField.getText();
            int age = Integer.parseInt(ageString);
            age *= 2;
            outputField.setText(String.format("%3d", age));
         }
      });

The getText() method gets the text string out of the TextField. The method Integer.parseInt(ageString) converts the text string into an integer so that we can do arithmetic on it. The line

   outputField.setText(String.format("%3d", age));

Formats the output into a string and sets the string into the output TextField. Finally add the code to display the scene:

      primaryStage.setScene(scene1);
      primaryStage.show();

Your Assignment

After entering all of this code into NetBeans, compile your program and test it. As long as you enter a valid integer value for your age, the program should work correctly. Once you are satisfied that your program works, submit it as lab #3.

File(s) to Submit:

Place the complete project folder for this lab in a zip file and name the zip file
lab_03.zip. Submit the assignment as Lab #3 on ILearn.

Grading Guidelines

Description Points possible

Assignment meets grading guidelines:
o The project folder has been properly submitted to ILearn

2

Program executes correctly and meets the specifications.

3
Total 5