JavaFX | Using JavaFX UI Controls | Workgin With Separators

Separator

The Separator class that is available in the JavaFX API represents a horizontal or vertical separator line. By default, the separator is horizontal. However, you can change its orientation by using the vertical instance variable. The following code sample implements an entry-level task of creating a vertical separator that divides two buttons.

Source Code

import javafx.scene.control.Button;
import javafx.scene.control.Separator;
import javafx.scene.layout.LayoutInfo;
import javafx.scene.layout.HBox;

HBox{
    spacing: 5
    content: [
        Button {text: "Send"},
        Separator {
            vertical: true
            layoutInfo: LayoutInfo{height: 20}
        },
        Button {text: "Archive"}
    ]
}

This code produces the following output.

Note that the Separator class is an extension of the Node class. Therefore, the separator inherits all the instance variables of the Node class. You can set the separator's opacity to 0.0 and, thus, create an empty space to divide the buttons.

A separator occupies the full horizontal or vertical space allocated to it. Use the layoutInfo instance variable to set a particular width or height of the separator, as shown in the previous example. The hpos variable defines the horizontal position of the separator within the allocated space for vertical separators. The vpos variable specifies the vertical position of the separator line within the allocated space for the horizontal separator.

Take a moment to review the code of the application, where a separator divides checkboxes.

Source Code


package separatorcheckboxsample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Separator;
import javafx.scene.layout.LayoutInfo;
import javafx.scene.layout.VBox;

def months = ["March", "April", "May", "June", "July", "August"];
var vbox: VBox;

Stage {
    title: "Application title"
    scene: Scene {
        width: 150
        height: 180
        content: [
            vbox = VBox {
                spacing: 5
                content: for (month in months)
                    CheckBox { text: month }
            }
        ]
    }
}
insert Separator {
    layoutInfo: bind LayoutInfo { width:  vbox.width }
} after vbox.content[2];

This application uses the insert operator to add a Separator object after a particular element in a sequence of checkboxes. You can use this approach in your application to dynamically include separators when a UI is changed. The layoutInfo variable sets the specific width for the separator, which binds it to the width of the container with checkboxes. When compiled and run, this application renders the following controls.

Horizontal separator

Take a look at the application that renders a weather forecast.

An application that displays weather by using graphical elements and separators

The application uses both horizontal and vertical separators. The width of the horizontal separator is bound to the width of the horizontal box, which renders a three-day forecast. The height of each vertical separator is bound to the height of the same horizontal box.

Source Code

package separatorsample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.control.Separator;
import javafx.scene.control.Label;
import javafx.scene.text.Font;
import javafx.scene.image.*;
import javafx.geometry.*;

var hb: HBox;
def days = ["Friday", "Saturday", "Sunday"];
def temperature = ["16", "18", "18"];
def cloud = Image {url: "{__DIR__}cloud.jpg"};
def sun = Image {url: "{__DIR__}sun.jpg"};

Stage {
    title: "Application title"
    scene: Scene {
        width: 320
        height: 200
        content: [
            VBox {
                padding: Insets {top: 10 left: 10}
                content: [
                    Label {
                        text: "Weather Forecast"
                        font: Font {size: 20 name: "Verdana"}
                    },
                    Separator {layoutInfo: LayoutInfo {width: bind hb.width}},
                    hb = HBox { content: for (temp in temperature)
                        VBox {
                            padding: Insets {left: 10}
                            content: [
                                Label {
                                    text: days[indexof temp]
                                    font: Font {size: 16 name: "Verdana"}
                                },
                                HBox {
                                    nodeVPos: VPos.CENTER
                                    content: [
                                        ImageView {
                                            image: bind if 
                                                (temperature[indexof temp]=="16") 
                                                    cloud 
                                                else sun
                                        },
                                        Label {
                                            text: temp
                                            font: Font {size: 20}
                                        },
                                    ]
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    }
}

for (i in [0, 2]) {
    insert Separator {
        vertical: true
        layoutInfo: LayoutInfo {height: bind hb.height}
    } after hb.content [i];
};

Remember: the Separator class owns all the Node instance variables. So, you can not only experiment with the opacity to add an empty space to your user interface, but you can also apply transformations, animated transitions, or visual effects to the separator. For example, you can create a rotated separator.

Alternatively, you can control the visual appearance of the separator CSS (see Applying CSS to UI Controls).

Separator

Related Documents