Building GUI Applications With JavaFX

Lesson 2: Using Declarative Syntax

As you have already read in Learning the JavaFX Script Programming Language, JavaFX Script uses a declarative approach to programming. Declaring is convenient when you create an application's UI because the structure of declared objects in the code reflects the visual structure of the scene graph, and this reinforcement enables you to understand and maintain the code easily. For more information about the scene graph, see Presenting UI Objects in a Graphical Scene. To help you understand this approach, in this lesson you will follow a step-by-step process to create a sample JavaFX Script application that renders a circle, and a rounded rectangle on the top of the circle. Both objects are placed in a window titled "Declaring Is Easy!"

The application is created by using the common profile API and can be run both on mobile devices and in desktop applications. If you want to learn more about the desktop platform API, refer to the JavaFX API and to the following chapters of the GUI tutorial.

The following window is displayed when you run the application.

Figure 1: Running the Application

Adding Necessary Imports

By using the following steps, you will learn how to use declarative statements as you build the application. Create a file with an .fx extension, for example, Declaring.fx. Avoid using file names that match the names of existing classes, instance variables, or reserved words because this type of meaning leads to errors during compilation. For more information about existing classes, variables, and reserved words, see JavaFX Script API and Learning the JavaFX Script Programming Language.

Add imports to the .fx file to ensure that the application can access the necessary classes.

import javafx.stage.Stage; //required to render //a window import javafx.scene.Scene; //required to display //a circle and rectangle //in a window import javafx.scene.shape.Rectangle; //required to //render the rectangle import javafx.scene.paint.Color; //required to fill and stroke //the rectangle and //circle with color import javafx.scene.shape.Circle; //required to render the circle

Creating an Application Window

To display the graphics, first create a window.

---

Note: For the mobile version of the application, this step is required to define the scene.

---

Specify the Stage object literal and the title variable. Stage is required to render any object.

Stage { title: "Declaring Is Easy!" }

The word to the left of the colon: title is called an instance variable. Refer to the Stage documentation for a complete list of available variables. The title puts the "Declaring Is Easy" phrase on the top border of the window in case you run the example on the desktop platform. For more information about object literals, classes, and instance variables in the JavaFX Script programming language, see Writing Scripts and Using Objects in Learning the JavaFX Script Programming Language.

Setting the Scene

Within the stage, you set the scene to hold Node objects, such as a circle or a rectangle. Create a Scene by using the following code:

Stage { ... scene: Scene { width: 300 height: 250 content: [ ] } }

The scene is a root area where you place objects of the node type. Many different kinds of nodes can be placed in a scene, such as graphical objects, text, and GUI components. For more information about nodes and Scene class, see the Presenting UI Objects in a Graphical Scene lesson and JavaFX Script API.

The scene has a content variable that is used to hold the nodes. Its width and height variables are used to specify the dimensions of the scene in pixels. This step is required only for the desktop version of the example to specify the dimensions of the application window.

When you run the code you have defined so far, you see the following window.

Figure 2: Window With the Scene

---

Note: The content of the window becomes filled with white because white is the default fill color for a scene. The scene is placed on top of the window.

---

Creating a Circle

Now you are ready to create a circle. To declare a circle within the content, use this code:

content: [ Circle { centerX: 150 centerY: 120 radius: 80 fill: Color.MAROON stroke: Color.INDIANRED strokeWidth: 10.0 } ]

This code uses a Circle object literal to create an instance of the Circle class. Circle has five instance variables that define its state, including the X and Y position on a window, radius, fill and stroke colors, and stroke width. As a result, this code creates a circle with a radius of 80, positioned with its center at 150,120, filled with maroon, and stroked with Indian red. For more information about the Circle class, see the JavaFX Script API.

Figure 3: A circle on the scene

---

Note: In the JavaFX Script programming language, by convention you specify one instance variable per line, as shown in the preceding example. However, to optimize the code you can specify all the variables in a single line without changing the essence of code, for example:

content: [ Circle {centerX: 150 centerY: 120 radius: 80 stroke: Color.INDIANRED strokeWidth: 10.0} ]

You can also use commas to separate the instance variables and make the code more readable:

content: [ Circle {centerX: 150, centerY: 120, radius: 80, stroke: Color.INDIANRED, strokeWidth: 10.0} ]

---

Creating a Rectangle

You can declare a rectangle on the top of the circle and set its style by using the following code. When adding a new object to the scene, ensure that the elements of the content sequence are separated by comma.

content: [ Circle {...}, Rectangle { x: 25, y: 80 width: 250, height: 80 arcWidth: 20 arcHeight: 20 fill: Color.web("#6699ff") stroke: Color.web("#003399") strokeWidth: 5.0 opacity: 0.5 } //Rectangle ]

The x and y instance variables specify the pixel location of the rectangle, arcWidth and arcHeight define the roundness of corners, and the fill variable defines the color that fills the rectangle.

---

Note: In the preceding code sample, you explicitly declare the fill color by using the hexadecimal web color notation, in contrast with declaring the color of the circle by using the color constant available in the Color class. Both approaches are acceptable for specifying colors of graphical objects.

---

The stroke and strokeWidth variables define the color and width of the rectangle outline. This code creates a rectangle positioned with the upper left corner at 25,80. The rectangle has the size of 250 by 80 pixels and a corner roundness of 20. For more information about the Rectangle class, see the JavaFX Script API. The following graphic illustrates the application window in this step.

Running the Example

Now you are ready to run the whole example. The following is the complete code of the application:

import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; Stage { title: "Declaring Is Easy!" scene: Scene { width: 300 height: 250 content: [ Circle { centerX: 150 centerY: 120 radius: 80 fill: Color.MAROON stroke: Color.INDIANRED strokeWidth: 10.0 }, //Circle Rectangle { x: 25, y: 80 width: 250, height: 80 arcWidth: 20 arcHeight: 20 fill: Color.web("#6699ff") stroke: Color.web("#003399") strokeWidth: 5.0 } //Rectangle ] //Content } //Scene } //Stage

The following window appears when you run the code.

Figure 4: Running the Code

Changing the Code and Running the Example

To switch the order of the objects, add the rectangle to the scene after the circle. Switch the order of the objects by using the following code:

import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; Stage { title: "Declaring Is Easy!" scene: Scene { width: 300 height: 250 content: [ Rectangle { x: 25, y: 80 width: 250, height: 80 arcWidth: 20 arcHeight: 20 fill: Color.web("#6699ff") stroke: Color.web("#003399") strokeWidth: 5.0 }, //Rectangle Circle { centerX: 150 centerY: 120 radius: 80 fill: Color.MAROON stroke: Color.INDIANRED strokeWidth: 10.0 } //Circle ] //Content } //Scene } //Stage

Compile and run the application.

The circle is now on top of the rectangle.

Figure 5: Switched Order of Objects

---

Note: You can use layout approaches supported by the JavaFX Script programming language to simplify the layout of objects. For more information about layout approaches, see Laying Out GUI Elements.

---

Conclusion