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

Painting the Scene’s Background

The Scene class has a fill property whose type is javafx.scene.paint.Paint. Looking at the JavaFX API will reveal that the known subclasses of Paint are Color, LinearGradient, and RadialGradient. Therefore, a Scene’s background may be filled with solid colors and gradients. If you don’t set the fill property of the Scene, the default color (white) will be used.

■ Tip One of the Color constants is Color.TRANSPARENT, so you may make the Scene’s background completely transparent if desired. In fact, the reason that the Scene behind the rounded-cornered rectangle in the StageCoach screenshot in Figure 2-5 isn’t white is that its fill property is set to Color.TRANSPARENT. (See Listing 2-1 again.)

To set the fill property in the OnTheScene example, instead of using one of the constants in the Color class (such as Color.BLUE), we’re using an RGB formula to create the color. Take a look at the javafx.scene.paint.Color class in the JavaFX API docs and scroll down past the constants such as ALICEBLUE and WHITESMOKE to see the constructors and methods. We’re using a constructor of the Color class, setting the fill property to it, as shown in the following snippet from Listing 2-2.

tmpA-64_thumb[2]


As you move the Slider, to which the fillVals property is bound, each of the arguments to the Color() constructor are set to a value from 0 to 255, as indicated in the following code snippet from Listing 2-2.

tmpA-65_thumb[2]

Populating the Scene with Nodes

We’ve also discussed that some nodes (such as Group and VBox) can contain other nodes. These capabilities enable you to construct complex scene graphs containing nodes. In the current example, the root property of the Scene contains a Flow layout container, which causes its contents to flow either vertically or horizontally, wrapping as necessary. The Flow container in our example contains an HBox (which contains a Slider and a ChoiceBox) and several other nodes (instances of Text, Hyperlink, and RadioButton classes).

Finding a Scene Node by ID

Each node in a Scene can be assigned an ID in the id property of the node. For example, in the following snippet from Listing 2-2, the id property of a Text node is assigned the String "sceneHeightText". When the action event handler in the Hyperlink control is called, the lookup() method of the Scene instance is used to obtain a reference to the node whose id is "sceneHeightText". The event handler then prints the content of the Text node to the console.

■ Note The Hyperlink control is essentially a button that has the appearance of hyperlink text. It has an action event handler in which you could place code that opens a browser page or any other desired functionality.

tmpA-66_thumb[2]

 

 

 

tmpA-67_thumb[2]

A close examination of the action event handler reveals that the lookup() method returns a Node, but the actual type of object returned in this snippet is a Text object. Because we need to access a property of the Text class (text) that isn’t in the Node class, it is necessary to coerce the compiler into trusting that at runtime the object will be an instance of the Text class.

Accessing the Stage from the Scene

To obtain a reference to the Stage instance from the Scene, we use a property in the Scene class named window. The accessor method for this property appears in the following snippet from Listing 2-2 to get the x and y co-ordinates of the Stage on the screen.

tmpA-68_thumb[2]

Inserting a Node into the Scene’s Content Sequence

Sometimes it is useful to add a node dynamically to the children of a UI container class. The code snippet shown below from Listing 2-2 demonstrates how this may be accomplished by dynamically adding a Text node to the children of the FlowPane instance:

tmpA-69_thumb[2]

This particular Text node is the one at the top of the Scene shown in Figures 2-6 and 2-7, in which the value of the Scene’s fill property is displayed. Note that in this example the managed property of the addedTextRef instance is set to false, so its position isn’t governed by the FlowPane.

CSS Styling the Nodes in a Scene

A very powerful aspect of JavaFX is the ability to use CSS to style the nodes in a Scene dynamically. You used this capability in Step 6 of the previous exercise when you clicked the changeOfScene.css button to change the appearance of the UI from what you saw in Figure 2-6 to what was shown in Figure 2-7. Also, in Step 7 of the exercise, the appearance of the UI changed back to what was shown in Figure 2-6 when you clicked the onTheScene.css radio button. The relevant code snippet from Listing 2-2 is shown here:

tmpA-70_thumb[2]

In this snippet, the stylesheets property of the Scene is initialized to the location of the onTheScene.css file, which in this case is the same directory as the OnTheSceneMain class. Also shown in the snippet is the assignment of the CSS files to the Scene as the appropriate buttons are clicked. Take a look at Listing 2-3 to see the style sheet that corresponds to the screenshot in Figure 2-6.

Some of the CSS selectors in this style sheet represent the nodes whose id property is either "stageX" or "stageY". There is also a selector in this style sheet that represents nodes whose styleClass property is "emphasized-text". In addition, there is a selector in this style sheet that maps to the ChoiceBox UI control by substituting the camel-case name of the control to a lowercase hyphenated name (choice-box). The properties in this style sheet begin with "-fx-", and correspond to the type of node with which they are associated. The values in this style sheet (such as black, italic, and 14pt) are expressed as standard CSS values.

Listing2-3. onTheScene.css

 onTheScene.css

 

 

 

 onTheScene.css

Listing 2-4 is the style sheet that corresponds to the screenshot in Figure 2-7. For more information on CSS style sheets, see the Resources section at the end of this topic.

Listing2-4. changeOfScene.css

 changeOfScene.css

Now that you’ve had some experience with using the Stage and Scene classes, several of the Node subclasses, and CSS styling, we show you how to handle events that can occur when your JavaFX program is running.

Next post:

Previous post: