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

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

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.

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 windows is filled with white as white is the default fill color for a scene. The scene is placed on top of the window.

---

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 the window, radius, fill, stroke color, 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} ]

 

---

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 a 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
      } //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 to 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 size of the rectangle is 250 pixels 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.

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

To switch the order of the objects, add the rectangle to the scene before 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.

---

As this lesson shows, the declarative syntax simplifies the creation of graphics and makes the code easy to read and maintain. The order of the elements you declare in the code matches the order in which they appear in the application.