20th back to javafx2.0 split line Separator

Original address http://download.oracle.com/javafx/2.0/ui_controls/separator.htm

 

 

In javafx APIThe separator class presents a horizontal or vertical separator. It is used to separate the elements of user interfaces in an application and does not provide any behavior. However, it can also be beautified, applied for effect, or even animated. The default separator is horizontal and can be used.The setorientation method changes its direction.

Create a separator

The code block in example 14-1 creates a horizontal vertical separator.

 

Example 14-1 vertical and horizontal Separators

//Horizontal separatorSeparator separator1 = new Separator();//Vertical separatorSeparator separator2 = new Separator();separator2.setOrientation(Orientation.VERTICAL);

 

SeparatorClass inheritedNode class, so the separation line inherits All constants and variables of the node class.

Generally, separators are used to separate UI controls into groups. Study the code in example 14-2, which separates the spring month from the summer

 

Example 14-2 using a separator between checkbox categories

final String[] names = new String[]{"March", "April", "May",    "June", "July", "August"};final CheckBox[] cbs = new CheckBox[names.length];final Separator separator = new Separator();final VBox vbox = new VBox();for (int i = 0; i < names.length; i++) {    cbs[i] = new CheckBox(names[i]);}                        separator.setMaxWidth(40);separator.setAlignment(Pos.CENTER_LEFT);vbox.getChildren().addAll(cbs);vbox.setSpacing(5);vbox.getChildren().add(3, separator);

 

For the running effect, see Figure 14-1.

Figure 14-1 checkboxes and a separator

Description of "Figure 14-1 checkboxes and a separator"

The separator occupies all horizontal or vertical spaces allocated to it.The setmaxwidth method is used to specify a specific width, setValignmentMethod specifies the vertical position of the separator in the layout space allocated by the splitter. Similarly, you can usesetHalignmentMethod to set its horizontal position.

In Example 14-2,The separator is added using a dedicated method (index,
Node) is added to the vertical box. You can use this method to include separators after creating the ui or dynamically changing the UI.

Add a separator for the UI

As mentioned above, the separation line can group the UI control. You can use them to build user interfaces, as shown below in Figure 14-2.

 

Figure 14-2 structuring weather forecast data with Separators

Description of "Figure 14-2 structuring weather forecast data with separators" in Figure 14-2, the effect is that the separator is used for separation. Label and  Imageview object. Study the following codeExample
14-3.

Example 14-3 using separators in a weather forecast Application

import javafx.application.Application;import javafx.geometry.Insets;import javafx.geometry.Orientation;import javafx.geometry.VPos;import javafx.scene.Group;import javafx.scene.Scene;import javafx.scene.control.*;import javafx.scene.image.Image;import javafx.scene.image.ImageView;import javafx.scene.layout.GridPane;import javafx.scene.text.Font;import javafx.stage.Stage; public class Main extends Application {     Label caption = new Label("Weather Forecast");    Label friday = new Label("Friday");    Label saturday = new Label("Saturday");    Label sunday = new Label("Sunday");     @Override    public void start(Stage stage) {        Group root = new Group();        Scene scene = new Scene(root, 500, 300);        stage.setScene(scene);        stage.setTitle("Separator Sample");         GridPane grid = new GridPane();        grid.setPadding(new Insets(10, 10, 10, 10));        grid.setVgap(2);        grid.setHgap(5);         scene.setRoot(grid);         Image cloudImage = new Image(getClass().getResourceAsStream("cloud.jpg"));        Image sunImage = new Image(getClass().getResourceAsStream("sun.jpg"));         caption.setFont(Font.font("Verdana", 20));        GridPane.setConstraints(caption, 0, 0);        GridPane.setColumnSpan(caption, 8);        grid.getChildren().add(caption);         final Separator sepHor = new Separator();        sepHor.setValignment(VPos.CENTER);        GridPane.setConstraints(sepHor, 0, 1);        GridPane.setColumnSpan(sepHor, 7);        grid.getChildren().add(sepHor);         friday.setFont(Font.font("Verdana", 18));        GridPane.setConstraints(friday, 0, 2);        GridPane.setColumnSpan(friday, 2);        grid.getChildren().add(friday);         final Separator sepVert1 = new Separator();        sepVert1.setOrientation(Orientation.VERTICAL);        sepVert1.setValignment(VPos.CENTER);        sepVert1.setPrefHeight(80);        GridPane.setConstraints(sepVert1, 2, 2);        GridPane.setRowSpan(sepVert1, 2);        grid.getChildren().add(sepVert1);         saturday.setFont(Font.font("Verdana", 18));        GridPane.setConstraints(saturday, 3, 2);        GridPane.setColumnSpan(saturday, 2);        grid.getChildren().add(saturday);         final Separator sepVert2 = new Separator();        sepVert2.setOrientation(Orientation.VERTICAL);        sepVert2.setValignment(VPos.CENTER);        sepVert2.setPrefHeight(80);        GridPane.setConstraints(sepVert2, 5, 2);        GridPane.setRowSpan(sepVert2, 2);        grid.getChildren().add(sepVert2);         sunday.setFont(Font.font("Verdana", 18));        GridPane.setConstraints(sunday, 6, 2);        GridPane.setColumnSpan(sunday, 2);        grid.getChildren().add(sunday);         final ImageView cloud = new ImageView(cloudImage);        GridPane.setConstraints(cloud, 0, 3);        grid.getChildren().add(cloud);         final Label t1 = new Label("16");        t1.setFont(Font.font("Verdana", 20));        GridPane.setConstraints(t1, 1, 3);        grid.getChildren().add(t1);         final ImageView sun1 = new ImageView(sunImage);        GridPane.setConstraints(sun1, 3, 3);        grid.getChildren().add(sun1);         final Label t2 = new Label("18");        t2.setFont(Font.font("Verdana", 20));        GridPane.setConstraints(t2, 4, 3);        grid.getChildren().add(t2);         final ImageView sun2 = new ImageView(sunImage);        GridPane.setConstraints(sun2, 6, 3);        grid.getChildren().add(sun2);         final Label t3 = new Label("20");        t3.setFont(Font.font("Verdana", 20));        GridPane.setConstraints(t3, 7, 3);        grid.getChildren().add(t3);         stage.show();    }    public static void main(String[] args) {        launch(args);    }}

The application uses horizontal and vertical separation lines, andThe gridpane container contains rows and columns.You can also set the priority length for the separator line (the width of the horizontal separator line and the height of the vertical separator line) so that the interface size can be dynamically scaled when it changes.It can be a separator.Apply CSS to the object to change the visual appearance of the separator line.

Beautify Separator

To implement the same effect for the separation lines in example 14-3, you can create a cssfile (for example, controlstyle.css) and save it in the same package of the application main class. Example
14-4 is some CSS classes that can be added to the controlstyle file.

Example 14-4 using CSS classes to style Separators

/*controlStyle.css */ .separator{    -fx-background-color: #e79423;    -fx-background-radius: 2;}

AvailableSceneClassgetStylesheetsMethod To apply the separator line style, see Example
14-5.

Example 14-5 enabling style sheets in a javafx Application

scene.getStylesheets().add("separatorsample/controlStyle.css");

Figure 14-3 shows the effect of separation line when the application is modified.

Figure 14-3 styled Separators

Description of "Figure 14-3 styled separators"