Making a Scene (Creating a User Interface in JavaFX) Part 1

Continuing on with our theater metaphor for creating JavaFX applications, we now discuss putting a Scene on the Stage. The Scene, as you recall, is the place in which the actors and props (nodes) visually interact with each other and the audience (the users of your program).

Using the Scene Class: The OnTheScene Example

As with the Stage class, we’re going to use a contrived example application whose purpose is to demonstrate and teach the details of the available capabilities in the Scene class. See Figure 2-6 for a screenshot of the OnTheScene program.

The OnTheScene program when first invoked

Figure 2-6. The OnTheScene program when first invoked

Go ahead and run the OnTheScene program, putting it through its paces as instructed in the following exercise. We follow up with a walkthrough of the code so that you can associate the behavior with the code behind it.

EXAMINING THE BEHAVIOR OF THE ONTHESCENE PROGRAM

When the OnTheScene program starts, its appearance should be similar to the screenshot in Figure 2-6. To fully examine its behavior, perform the following steps. Note that the property and method names on the UI correspond to the property and methods in the Scene, Stage, and Cursor classes, as well as CSS (Cascading Style Sheets) file names.


1. Drag the application around, noticing that although the Stage x and y values are relative to the screen, the Scene’s x and y values are relative to the upper-left corner of the exterior of the Stage (including decorations). Similarly, the width and height of the Scene are the dimensions of the interior of the Stage (which doesn’t include decorations). As noted earlier, it is best to set the Scene width and height explicitly (or let it be set implicitly by assuming the size of the contained nodes), rather than setting the width and height of a decorated Stage.

2. Resize the program’s window and observe that the width and height values change to reflect the width and height of the Scene. Also notice that the position of much of the content in the scene changes as you change the height of the window.

3. Click the lookup() hyperlink and notice that the string "Scene height: XXX.X" prints in the console, where XXX.X is the Scene’s height.

4. Hover the mouse over the choice box dropdown and notice that it becomes slightly larger. Click the choice box and choose a cursor style in the list, noticing that the cursor changes to that style. Be careful with choosing NONE, as the cursor may disappear, and you’ll need to use the keyboard (or psychic powers while moving the mouse) to make it visible.

5. Drag the slider on the left, noticing that the fill color of the Scene changes and that the string at the top of the Scene reflects the red-green-blue (RGB) and opacity values of the current fill color.

6. Notice the appearance and content of the text on the Scene. Then click the changeOfScene.css button, noticing that the color and font and content characteristics for some of the text on the Scene changes as shown in the screenshot in Figure 2-7.

The OnTheScene program with the changeOfScene CSS style sheet applied

Figure 2-7. The OnTheScene program with the changeOfScene CSS style sheet applied

7. Click the OnTheScene.css button, noticing that the color and font characteristics return to their previous state.

Now that you’ve explored this example program that demonstrates features of the Scene, let’s walk through the code!

Understanding the OnTheScene Program

Take a look at the code for the OnTheScene program in Listing 2-2, and after that we point out new and relevant concepts.

Listing2-2. OnTheSceneMain.fx

OnTheSceneMain.fx

 

 

 

OnTheSceneMain.fx

 

 

 

OnTheSceneMain.fx

 

 

 

 

 

OnTheSceneMain.fx

 

 

 

 

OnTheSceneMain.fx

Setting the Cursor for the Scene

The cursor can be set for a given node and/or for the entire scene. To do the latter, set the cursor property of the Scene instance to one of the constant values in the Cursor class, as shown in the following snippet from Listing 2-2.

tmpA-63_thumb

These cursor values can be seen by looking at the javafx.scene.Cursor class in the JavaFX API docs; we’ve created a collection of these constants in Listing 2-2.

Next post:

Previous post: