This chapter is from the book
This chapter is from the book
This chapter is from the book
2.3 JavaFX Program Structure
JavaFX program structure is simple. For programmers who are used to traditionally compiled programs, programming in JavaFX will feel different. With static typing, JavaFX gives you feedback at compile time when you use types incorrectly. This greatly enhances your ability to write correct code. Furthermore, with the NetBeans IDE, you can access JavaDocs for all JavaFX types (classes) and dynamically query these class properties and functions, essentially getting feedback at edit time.
Let’s see how the Stage and Scene form the JavaFX program structure.
Stage and Scene
The Stage is the top-level container and contains the Scene. The Scene, in turn, holds nodes that make up the scene graph. Every JavaFX program that has graphical objects declares a Stage object.
Here is a top-level implementation of the scene graph for GuitarTuner from Figure 2.2 (or Figure 2.3). (We’ll look at GuitarString’s node graph shortly.)
// Stage and Scene Graph
Stage {
title: "Guitar Tuner"
Scene {
// content is sequence of SceneGraph nodes
content: [
Group {
content: [
Rectangle { ... }
Line { ... }
Line { ... }
GuitarString { ... }
GuitarString { ... }
GuitarString { ... }
GuitarString { ... }
GuitarString { ... }
GuitarString { ... }
]
} // Group
]
} // Scene
} // Stage
Object Literals
The Stage and Scene objects are instantiated with object literal expressions, or object literals. Object literals provide a declarative style of programming. Intuitively, declarative means “tell me what you want, not how to do it.” As you will see, the real declarative part of JavaFX is binding. We show why this is so powerful later in the chapter.
Object literals require an object (or class) type (such as Stage or Scene) followed by curly braces { }. Any properties you need to initialize appear inside the braces. (Stage has a title property and Scene and Group both have content properties.) Each property has a name, followed by a colon : and an initial value for the property. You separate properties with commas, line breaks, or white space. Here, for example is an object literal that initializes a Rectangle (properties x and y designate the upper-left corner origin).
Rectangle { x: 10, y: 20, height: 15, width: 150 }
The above Stage, Scene, and Group objects are defined with object literals. Note that the Scene object nests inside the Stage object. Likewise, a Group nests inside the Scene. Square brackets [ ] define a sequence of items for the content property in a Scene or Group. Here, the Scene object’s content property is a sequence of all of the top-level nodes of the Scene. In the GuitarTuner application, this is a Group node (see Figure 2.2 or Figure 2.3). The Group node likewise includes a content property with all of its subnodes (Rectangles, Lines, and a custom GuitarString). How you nest these nodes determines the structure of the scene graph.
Here’s the top-level implementation for GuitarString from its scene graph in Figure 2.2 (and Figure 2.3).
// GuitarString - defined as custom class
Group {
content: [
Rectangle { ... }
Rectangle { ... }
Rectangle { ... }
Text { ... }
]
} // Group
The GuitarString consists of a Group node whose content property defines a sequence containing three rectangles and a Text object. You’ll see how this fits into the GuitarTuner application later on.