JavaFX:Using Built-in Layout Panes

Transcription

1 CS244 Advanced programming Applications JavaFX:Using Built-in Layout Panes Dr Walid M. Aly Lecture 7

2 Example of JavaFX nodes 2

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

4 4

5 Using Built-in Layout Panes JavaFX provides many types of panes for organizing nodes in a container. javafx.scene.layout.pane public ObservableList<Node> getchildren( ) Gets the list of children of this Parent 5

6 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 pages five through eight. Gap properties and padding property can be set. 6

7 FlowPane 7

8 Example: Using FlowPane public void start(stage primarystage) { // Create a pane and set its properties FlowPane pane = new FlowPane(); pane.setpadding(new Insets(11, 12, 13, 14)); pane.sethgap(5); pane.setvgap(5); // Place nodes in the pane pane.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 javafx pane.getchildren().addall(tfmi, new Label("Last Name:"),new TextField()); // Create a scene and place it in the stage Scene scene = new Scene(pane, 200, 250); primarystage.settitle("showflowpane"); // Set the stage title primarystage.setscene(scene); // Place the scene in the stage primarystage.show(); // Display the stage Run code ShowFlowPane 8

9 public final void setpadding(insets value) Sets the value of the property padding.. JavaFX classes javafx.scene.layout.region javafx.geometry.insets Insets(double top, double right, double bottom, double left) Constructs a new Insets instance with four different offsets. javafx.collections.observablelist<e> boolean addall(e... elements) A convenient method for var-arg adding of elements javafx.scene.control.textfield public final void setprefcolumncount(int value) Sets the value of the property prefcolumncount. This is used for calculating the TextField's preferred width. public final void setprompttext(java.lang.string value) Sets the value of the property prompttext. 9

10 GridPane Ø The GridPane layout pane enables you to create a flexible grid of rows and columns in which to lay out nodes Ø Nodes can be placed in any cell in the grid and can span cells as needed. Ø A grid pane is useful for creating forms or any layout that is organized in rows and columns. Ø The total number of rows/columns does not need to be specified up front as the gridpane will automatically expand/contract the grid to accommodate the content. Ø Scene size is automatically computed according to the sizes of the nodes placed inside the scene. 10

11 javafx.scene.layout.gridpane 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.gridpane public static void sethalignment(node child, HPos value) Sets the horizontal alignment for the child when contained by a gridpane javafx.geometry.hpos A set of values for describing horizontal positioning and alignment 11

12 Example: Using GridPane public void start(stage primarystage) { // Create a pane and set its properties GridPane 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 pane pane.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); (0,0) (1,0) (0,1) (1,1) (0,2) (1,2) (0,3) (1,3) // Create a scene and place it in the stage Scene scene = new Scene(pane); primarystage.settitle("showgridpane"); // Set the stage title primarystage.setscene(scene); // Place the scene in the stage primarystage.show(); // Display the stage Run code ShowGridPane 12

13 BorderPane BorderPane lays out children in top, left, right, bottom, and center positions. The top and bottom children will be resized to their preferred heights and extend the width of the border pane. The left and right children will be resized to their preferred widths and extend the length between the top and bottom nodes. the center node will be resized to fill the available space in the middle If your application does not need one of the regions, you do not need to define it and no space is allocated for it. 13

14 BorderPane Run code ShowBorderPane 14

15 javafx.scene.layout.borderpane 15

16 Example: Using BorderPane public void start(stage primarystage) { // Create a border pane BorderPane pane = new BorderPane(); // Place nodes in the pane pane.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 stage Scene scene = new Scene(pane); primarystage.settitle("showborderpane"); // Set the stage title primarystage.setscene(scene); // Place the scene in the stage primarystage.show(); // Display the stage // Define a custom pane to hold a label in the center of the pane class 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)); Run code ShowBorderPane 16

17 HBox-VBox HBox The HBox layout pane provides an easy way for arranging a series of nodes in a single row. VBox The 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 17

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

19 VBox ShowHBoxVBox 19

20 Example: Using Hbox-VBox public void start(stage primarystage) { BorderPane pane = new BorderPane(); // Place nodes in the pane pane.settop(gethbox()); pane.setleft(getvbox()); // Create a scene and place it in the stage Scene 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; ShowHBoxVBox 20

21 AnchorPane AnchorPane allows the edges of child nodes to be anchored to an offset fromthe anchor pane's edges As the window is resized, the nodes maintain their position relative to their anchor point. Nodes can be anchored to more than one position and more than one node can be anchored 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. 21

22 Forms with JavaFX CSS scene.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");

23 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);

24 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. 24

25 Example: Creating a layout Run code 25

26 Example: Creating a layout public void start(stage stage) { // Use a border pane as the root for scene BorderPane 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(); A 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, 26 additional information on the right, and a working area in the center.

27 Example: Creating a layout private HBox addhbox() { HBox hbox = new HBox(); hbox.setpadding(new Insets(15, 12, 15, 12)); hbox.setspacing(10); // Gap between nodes hbox.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; 27

28 Example: Creating a layout private VBox addvbox() { VBox vbox = new VBox(); vbox.setpadding(new Insets(10)); // Set all sides to 10 vbox.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 title VBox.setMargin(options[i], new Insets(0, 0, 0, 8)); vbox.getchildren().add(options[i]); return vbox; javafx.scene.control.hyperlink Hyperlink(String text)create a hyperlink with the specified text as its label. javafx.scene.layout.vbox public 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 28 around it.

29 Example: Creating a layout 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 1 Text category = new Text("Sales:"); category.setfont(font.font("arial", FontWeight.BOLD, 20)); grid.add(category, 1, 0); // Title in column 3, row 1 Text charttitle = new Text("Current Year"); charttitle.setfont(font.font("arial", FontWeight.BOLD, 20)); grid.add(charttitle, 2, 0); // Subtitle in columns 2-3, row 2 Text chartsubtitle = new Text("Goods and Services"); grid.add(chartsubtitle, 1, 1, 2, 1);.. 29

30 Example: Creating a layout // House icon in column 1, rows 1-2 ImageView 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 3 Text goodspercent = new Text("Goods\n80%"); GridPane.setValignment(goodsPercent, VPos.BOTTOM); grid.add(goodspercent, 0, 2); // Chart in columns 2-3, row 3 ImageView 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 3 Text servicespercent = new Text("Services\n20%"); GridPane.setValignment(servicesPercent, VPos.TOP); grid.add(servicespercent, 3, 2); // grid.setgridlinesvisible(true); return grid; 30

31 Example: Creating a layout 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 grid AnchorPane.setBottomAnchor(hb, 8.0); AnchorPane.setRightAnchor(hb, 5.0); AnchorPane.setTopAnchor(grid, 10.0); return anchorpane; 31

32 Example: Creating a layout 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 columns flow.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; 32

33 References pub-get_started.htm