How to Add Buttons and Text to Your JavaFX Project - dummies

How to Add Buttons and Text to Your JavaFX Project

By Barry Burd

As a beginning java programmer, you will want to add things to your JavaFX project. When you create a high-powered GUI program, you start by creating a window with buttons and other widgets. Then you add methods to respond to keystrokes, button clicks, and other such things.

Here, you use an XML file to describe a button and a text field:

1Open your JavaFX project.

Look in Eclipse’s Package Explorer for the new project.

2Expand the new project's branch in Eclipse's Package Explorer.

Look for the application branch, which is inside the src branch.

3Right-click (or on a Mac, control-click) the application branch. In the context menu that appears, choose File→New→Other.

The Select A Wizard dialog box appears.

4In the Select A Wizard dialog box's tree, expand the JavaFX branch. In the JavaFX branch, double-click the New FXML Document item.

An FXML File dialog box appears.

The Create a New FXML file dialog box.

5In the dialog box's Name field, type a name for your new file and then click Finish.

Name the file Root.

You type the name Root, but e(fx)clipse creates a file whose full name is Root.fxml.

This new Root.fxml file describes the layout of the buttons, text fields, and other things in your new JavaFX application.

An open file in Eclipse's Package Explorer.

6Right-click (or on a Mac, control-click) the new Root.fxml branch in Eclipse's Package Explorer. In the context menu that appears, select Open with SceneBuilder.

The Scene Builder application window appears.

The Scene Builder window contains several areas:

The middle of the Scene Builder window contains the Content panel, where you see a preview your new app. (Currently, there’s nothing in your app to see, so the Content panel is a big empty space.)

The upper-left portion of the window contains a Library panel, which houses a Containers section, a Controls section, and several other sections.

In the GUI world, things like buttons, text fields, labels, and check boxes are called controls. The Library panel’s Controls section forms a palette. To create a GUI window, you drag controls from the palette and drop them onto the Content panel.

The lower-left portion of the window contains a Document panel, which contains a Hierarchy section and a Controller section. The Hierarchy section contains an AnchorPane item.

The Hierarchy section contains a tree showing which elements of your window are inside which other elements. The Controller section helps you link the window that you design with the application’s Java code.

The rightmost portion of the window contains an Inspector panel, which contains a Properties section, a Layout section, and a Code section.

In the Properties section, you describe the features of the elements in your window. In the Code section, you name the Java methods associated with elements in your window.

Your mileage may vary! These instructions work on a preview release of Scene Builder 2.0. If you have a different version of Scene Builder, your steps might be a bit different.

7Select the AnchorPane item in the Hierarchy section.

A marker appears in the middle of the Scene Builder’s Content panel.

The Anchor pane on the Eclipse's Package Explorer

8Drag the marker in the Content panel to enlarge the AnchorPane.

The AnchorPane will enlarge.

9Find the TextField entry in the Controls section of the Library panel

Then drag a TextField control into the AnchorPage in the Content panel.

Adding a button to a JavaFX project.

10Find the Button entry in the Controls section of the Library panel.

Drag a Button control into the AnchorPage in the Content panel.

11In the main menu, select File→Save.

Doing so saves your new FXML file.

Previewing the code in an FXML file.

12Close the Scene Builder application.

When you return to the Eclipse workbench, you can see the new code in your Root.fxml file.

Double-click the Root.fxml branch in the Package Explorer to see the file’s code. If you don’t see the words TextField and Button in the code, click your mouse inside the editor window. (Clicking your mouse updates the editor to reflect changes made by Scene Builder.) If the code in the editor doesn’t seem to be indented properly, click your mouse on a blank area in the editor and press Ctrl-Shift-F.

Any time you want to format the code in Eclipse’s editor (making the code easier to read and easier to understand) press Ctrl-Shift-F.

13Edit the project's file.

Comment out the BorderPane root statement and add a Parent root statement, as shown in boldface type in Listing 20-3.

The edits in Listing 20-3 connect the application to your newly designed Root.fxml layout.

Previewing a button on a website.

14Run the project.

When you do, you see a run of your project using the Root.fxml file.