javafx:using built-in layout panes

Dr Walid M. Aly

CS244 Advanced programming Applications

Lecture7

JavaFX:Using Built-in Layout Panes

10:34

Example of JavaFX nodes

2http://docs.oracle.com/javafx/2/ui_controls/overview.htm#

10:34

Shapes

3

JavaFX provides many shape classes for drawing texts, lines, circles, rectangles, ellipses, arcs, polygons, and polylines.

10:344

10:34

Using Built-in Layout PanesJavaFX provides many types of panes for organizing nodes in a container.

5

javafx.scene.layout.Panepublic ObservableList<Node> getChildren( )Gets the list of children of this Parent

10:34

FlowPane✦ The nodes within a FlowPane layout pane are laid out

consecutively and wrap at the boundary set for the pane.✦ Nodes can flow vertically (in columns) or horizontally (in rows).✦ Figure shows a sample horizontal flow pane using numbered

icons.✦ By contrast, in a vertical flow pane, column one would contain

pages one through four and column two would contain pagesfive through eight.

✦ Gap properties and padding property can be set.

6

10:34

FlowPane

7

10:34

Example: Using FlowPane

8

public void start(Stage primaryStage) {// Create a pane and set its propertiesFlowPane pane = new FlowPane();pane.setPadding(new Insets(11, 12, 13, 14));pane.setHgap(5);pane.setVgap(5);

// Place nodes in the panepane.getChildren().addAll(new Label("First Name:"),new TextField(), new Label("MI:"));TextField tfMi = new TextField();tfMi.setPrefColumnCount(1);//if not set will be chosen by javafxpane.getChildren().addAll(tfMi, new Label("Last Name:"),new TextField());

// Create a scene and place it in the stageScene scene = new Scene(pane, 200, 250);primaryStage.setTitle("ShowFlowPane"); // Set the stage titleprimaryStage.setScene(scene); // Place the scene in the stageprimaryStage.show(); // Display the stage

}

ShowFlowPaneRun code

10:349

javafx.scene.layout.Regionpublic final void setPadding(Insets value)Sets the value of the property padding..

javafx.collections.ObservableList<E>boolean addAll(E... elements)A convenient method for var-arg adding of elements

javafx.scene.control.TextFieldpublic final void setPrefColumnCount(int value)Sets the value of the property prefColumnCount. This is used for calculating the TextField'spreferred width.public final void setPromptText(java.lang.String value)Sets the value of the property promptText.

JavaFX classes

javafx.geometry.InsetsInsets(double top, double right, double bottom, double left)Constructs a new Insets instance with four different offsets.

10:34

GridPane

10

Ø The GridPane layout pane enables you tocreate a flexible grid of rows and columns inwhich to lay out nodes

Ø Nodes can be placed in any cell in the gridand can span cells as needed.

Ø A grid pane is useful for creating forms orany layout that is organized in rows andcolumns.

Ø The total number of rows/columns does notneed to be specified up front as the gridpanewill automatically expand/contract the grid toaccommodate the content.

Ø Scene size is automatically computedaccording to the sizes of the nodes placedinside the scene.

10:34

javafx.scene.layout.GridPane

11

public GridPane()Creates a GridPane layout with hgap/vgap = 0 and TOP_LEFT alignment.public void add(Node child, int columnIndex, int rowIndex)Adds a child to the gridpane at the specified column,row position

public void add(Node child, int columnIndex, int rowIndex, int colspan, int rowspan)javafx.scene.layout.GridPanepublic static void setHalignment(Node child, HPos value)Sets the horizontal alignment for the child when contained by a gridpane

javafx.geometry.HPosA set of values for describing horizontal positioning and alignment

10:34

Example: Using GridPane

12

public void start(Stage primaryStage) {// Create a pane and set its propertiesGridPane pane = new GridPane();pane.setPadding(new Insets(11.5, 12.5, 13.5, 14.5));pane.setHgap(5.5);pane.setVgap(5.5);

// Place nodes in the panepane.add(new Label("First Name:"), 0, 0);pane.add(new TextField(), 1, 0);pane.add(new Label("MI:"), 0, 1);pane.add(new TextField(), 1, 1);pane.add(new Label("Last Name:"), 0, 2);pane.add(new TextField(), 1, 2);Button btAdd = new Button("Add Name");pane.add(btAdd, 1, 3);GridPane.setHalignment(btAdd, HPos.RIGHT);

// Create a scene and place it in the stageScene scene = new Scene(pane);primaryStage.setTitle("ShowGridPane"); // Set the stage titleprimaryStage.setScene(scene); // Place the scene in the stageprimaryStage.show(); // Display the stage

}

(0,0) (1,0)(0,1) (1,1)(0,2) (1,2)(0,3) (1,3)

ShowGridPaneRun code

10:34

BorderPane

13

§ BorderPane lays out children in top, left,right, bottom, and center positions.

§ The top and bottom children will beresized to their preferred heights andextend the width of the border pane.

§ The left and right children will beresized to their preferred widths andextend the length between the top andbottom nodes.

§ the center node will be resized to fill theavailable space in the middle

§ If your application does not need one ofthe regions, you do not need to define itand no space is allocated for it.

10:34

BorderPane

14

ShowBorderPaneRun code

10:34

javafx.scene.layout.BorderPane

15

10:3416

public void start(Stage primaryStage) {// Create a border pane BorderPane pane = new BorderPane();

// Place nodes in the panepane.setTop(new CustomPane("Top")); pane.setRight(new CustomPane("Right"));pane.setBottom(new CustomPane("Bottom"));pane.setLeft(new CustomPane("Left"));pane.setCenter(new CustomPane("Center"));

// Create a scene and place it in the stageScene scene = new Scene(pane);primaryStage.setTitle("ShowBorderPane"); // Set the stage titleprimaryStage.setScene(scene); // Place the scene in the stageprimaryStage.show(); // Display the stage

}} // Define a custom pane to hold a label in the center of the paneclass CustomPane extends StackPane {public CustomPane(String title) {getChildren().add(new Label(title));setStyle("-fx-border-color: red");setPadding(new Insets(11.5, 12.5, 13.5, 14.5));

}

16

ShowBorderPane

Example: Using BorderPane

Run code

10:34

HBox-VBoxHBoxThe HBox layout pane provides an easy way for arranging a series of nodes in a single row.

17

VBoxThe VBox layout pane is similar to the HBox layout pane, except that the nodes are arranged in a single column.

The padding property can be set to manage the distance between the nodes and the edges of theVBox pane

10:34

HBox

18

public HBox(Node... children)Creates an HBox layout with spacing = 0.Parameters:children - The initial set of children for this pane.

10:34

VBox

19

ShowHBoxVBox

10:34

Example: Using Hbox-VBox

20

ShowHBoxVBox

public void start(Stage primaryStage) {BorderPane pane = new BorderPane();

// Place nodes in the panepane.setTop(getHBox()); pane.setLeft(getVBox());

// Create a scene and place it in the stageScene scene = new Scene(pane);primaryStage.setTitle("ShowHBoxVBox"); primaryStage.setScene(scene);

primaryStage.show(); }private HBox getHBox() {HBox hBox = new HBox(15);hBox.setPadding(new Insets(15, 15, 15, 15));hBox.setStyle("-fx-background-color: gold");hBox.getChildren().add(new Button("Computer Science"));hBox.getChildren().add(new Button("Chemistry"));ImageView imageView = new ImageView(new Image("image/us.gif"));hBox.getChildren().add(imageView);return hBox;}private VBox getVBox() {VBox vBox = new VBox(15);vBox.setPadding(new Insets(15, 5, 5, 5));vBox.getChildren().add(new Label("Courses"));

Label[] courses = {new Label("CSCI 1301"), new Label("CSCI 1302"), new Label("CSCI 2410"), new Label("CSCI 3720")};

for (Label course: courses) {VBox.setMargin(course, new Insets(0, 0, 0, 15));vBox.getChildren().add(course);}return vBox; } }

10:34

AnchorPane

21

§ AnchorPane allows the edges of child nodes to beanchored to an offset from the anchor pane's edges

§ As the window is resized, the nodes maintaintheir position relative to their anchor point.

§ Nodes can be anchored to more than oneposition and more than one node can beanchored to the same position

static void setBottomAnchor(Node child, Double value)Sets the bottom anchor for the child when contained by an anchor pane.static void setLeftAnchor(Node child, Double value)Sets the left anchor for the child when contained by an anchor pane.static void setRightAnchor(Node child, Double value)Sets the right anchor for the child when contained by an anchor pane.static void setTopAnchor(Node child, Double value)Sets the top anchor for the child when contained by an anchor pane.

10:34

Forms with JavaFX CSSscene.getStylesheets().add(Login.class.getResource("Login.css").toExternalForm());

……………Text scenetitle = new Text("Welcome");

scenetitle.setId("welcome-text");

…………………….final Text actiontarget = new Text();

grid.add(actiontarget, 1, 6);actiontarget.setId("actiontarget");

10:34

Forms with JavaFX CSS……….root {

display: block;}

.root {-fx-background-image: url("background.jpg");

}

.label {-fx-font-size: 12px;-fx-font-weight: bold;-fx-text-fill: #333333;-fx-effect: dropshadow( gaussian ,

rgba(255,255,255,0.5) , 0,0,0,1 );}

#welcome-text {-fx-font-size: 32px;-fx-font-family: "Arial Black";-fx-fill: #818181;-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) ,

6, 0.0 , 0 , 2 );}

#actiontarget {-fx-fill: FIREBRICK;-fx-font-weight: bold;-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );

}

.button {-fx-text-fill: white;-fx-font-family: "Arial Narrow";-fx-font-weight: bold;-fx-background-color: linear-gradient(#61a2b1, #2A5058);-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );

}

.button:hover {-fx-background-color: linear-gradient(#2A5058, #61a2b1);

10:3424

• Margin is applied to the outside of you element hence effecting how far your element is away from other elements.

• Padding is applied to the inside of your element hence effecting how far your element's content is away from the border.

10:34

Example: Creating a layout

25Run code

10:34

Example: Creating a layout…

26A border pane is useful for the classic look of a tool bar at the top, a status bar at the bottom, a navigation panel on the left, additional information on the right, and a working area in the center.

public void start(Stage stage) {

// Use a border pane as the root for sceneBorderPane border = new BorderPane();

HBox hbox = addHBox();

border.setTop(hbox);border.setLeft(addVBox());

border.setRight(addFlowPane());border.setCenter(addAnchorPane(addGridPane()));

Scene scene = new Scene(border);stage.setScene(scene);stage.setTitle("Layout Sample");stage.show();

}

10:3427

private HBox addHBox() {

HBox hbox = new HBox();hbox.setPadding(new Insets(15, 12, 15, 12));hbox.setSpacing(10); // Gap between nodeshbox.setStyle("-fx-background-color: #336699;");

Button buttonCurrent = new Button("Current");buttonCurrent.setPrefSize(100, 20);

Button buttonProjected = new Button("Projected");buttonProjected.setPrefSize(100, 20);

hbox.getChildren().addAll(buttonCurrent, buttonProjected);

return hbox;}


10:3428

private VBox addVBox() {

VBox vbox = new VBox();vbox.setPadding(new Insets(10)); // Set all sides to 10vbox.setSpacing(8); // Gap between nodes

Text title = new Text("Data");title.setFont(Font.font("Arial", FontWeight.BOLD, 14));vbox.getChildren().add(title);

Hyperlink options[] = new Hyperlink[] {new Hyperlink("Sales"),new Hyperlink("Marketing"),new Hyperlink("Distribution"),new Hyperlink("Costs")};

for (int i=0; i<4; i++) {// Add offset to left side to indent from titleVBox.setMargin(options[i], new Insets(0, 0, 0, 8));vbox.getChildren().add(options[i]);

}

return vbox;}

javafx.scene.layout.VBoxpublic static void setMargin(Node child, Insets value)Sets the margin for the child when contained by a vbox. If set, the vbox will layout the child so that it has the margin space around it.

javafx.scene.control.HyperlinkHyperlink(String text)Create a hyperlink with the specified text as its label.


10:3429

private GridPane addGridPane() {

GridPane grid = new GridPane();grid.setHgap(10);grid.setVgap(10);grid.setPadding(new Insets(0, 10, 0, 10));

// Category in column 2, row 1Text category = new Text("Sales:");category.setFont(Font.font("Arial", FontWeight.BOLD, 20));grid.add(category, 1, 0);

// Title in column 3, row 1Text chartTitle = new Text("Current Year");chartTitle.setFont(Font.font("Arial", FontWeight.BOLD, 20));grid.add(chartTitle, 2, 0);

// Subtitle in columns 2-3, row 2Text chartSubtitle = new Text("Goods and Services");grid.add(chartSubtitle, 1, 1, 2, 1);………………………………………………………………………………..


10:3430

// House icon in column 1, rows 1-2ImageView imageHouse = new ImageView(

new Image(LayoutSample.class.getResourceAsStream("graphics/house.png")));grid.add(imageHouse, 0, 0, 1, 2);

// Left label in column 1 (bottom), row 3Text goodsPercent = new Text("Goods\n80%");GridPane.setValignment(goodsPercent, VPos.BOTTOM);grid.add(goodsPercent, 0, 2);

// Chart in columns 2-3, row 3ImageView imageChart = new ImageView(

new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));

grid.add(imageChart, 1, 2, 2, 1);

// Right label in column 4 (top), row 3Text servicesPercent = new Text("Services\n20%");GridPane.setValignment(servicesPercent, VPos.TOP);grid.add(servicesPercent, 3, 2);

// grid.setGridLinesVisible(true);return grid;

}


10:3431

public AnchorPane addAnchorPane(GridPane grid) { AnchorPane anchorpane = new AnchorPane(); Button buttonSave = new Button("Save"); Button buttonCancel = new Button("Cancel"); HBox hb = new HBox();hb.setPadding(new Insets(0, 10, 10, 10)); hb.setSpacing(10); hb.getChildren().addAll(buttonSave, buttonCancel); anchorpane.getChildren().addAll(grid,hb); // Add gridAnchorPane.setBottomAnchor(hb, 8.0); AnchorPane.setRightAnchor(hb, 5.0);AnchorPane.setTopAnchor(grid, 10.0); return anchorpane; }


10:3432

private FlowPane addFlowPane() {FlowPane flow = new FlowPane();flow.setPadding(new Insets(5, 0, 5, 0));flow.setVgap(4);flow.setHgap(4);flow.setPrefWrapLength(170); // preferred width allows for two columnsflow.setStyle("-fx-background-color: DAE6F3;");

ImageView pages[] = new ImageView[8];for (int i=0; i<8; i++) {

pages[i] = new ImageView(new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+(i+1)+".png")));

flow.getChildren().add(pages[i]);}return flow;

}


10:34

References

✦ http://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm

✦ http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm

✦ http://zetcode.com/gui/javafx/

33

javafx:using built-in layout panes

Documents