Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

003 - JavaFX Tutorial - Layouts

280 views

Published on

JavaFX Tutorial Slides.
Watch the video series here:
https://www.youtube.com/watch?v=kKKtgstZ5qM&list=PLje_ti-y5EoL6PDfH3x5d8FMOpEHgHYVF

K. N. Toosi University of Technology

Published in: Software
  • Be the first to comment

  • Be the first to like this

003 - JavaFX Tutorial - Layouts

  1. 1. Brought to you by Graphical User Interface in Java Using JavaFX Layouts 1K. N. Toosi University of Technology
  2. 2. What are Layouts? • Until now, we only worked with the simplest Node container which was Pane. • It’s the simplest one, because we specified the location of our elements by hand in pixel format. • Now days, with a great needs of responsive UIs no one is going to hard code the location of UI elements. • So we need smarter node container. • A smart container decides about the location of an element automatically based on a specified behavior. K. N. Toosi University of Technology 2
  3. 3. JavaFX Containers Hierarchy: 3K. N. Toosi University of Technology Region Control SplitPane ScrollPane Accordion TabPane Pane AnchorPane BorderPane DialogPane FlowPane VBox HBox GridPane StackPane TilePane
  4. 4. BorderPane: K. N. Toosi University of Technology 4 LEFT RIGHTCENTER TOP BOTTOM
  5. 5. Demo 1: BorderPane 5K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { BorderPane root = new BorderPane(); Rectangle left = new Rectangle(100, 400, Color.BLUEVIOLET); root.setLeft(left); Rectangle right = new Rectangle(100, 400, Color.BLUEVIOLET); root.setRight(right); Rectangle center = new Rectangle(200, 200, Color.GREEN); root.setCenter(center); Rectangle top = new Rectangle(400, 100, Color.RED); root.setTop(top); Rectangle bottom = new Rectangle(400, 100, Color.RED); root.setBottom(bottom); //Alignments BorderPane.setAlignment(bottom, Pos.CENTER); //Margin BorderPane.setMargin(left, new Insets(12,12,12,12)); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); }
  6. 6. Demo 1: BorderPane 6K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { BorderPane root = new BorderPane(); Rectangle left = new Rectangle(100, 400, Color.BLUEVIOLET); root.setLeft(left); Rectangle right = new Rectangle(100, 400, Color.BLUEVIOLET); root.setRight(right); Rectangle center = new Rectangle(200, 200, Color.GREEN); root.setCenter(center); Rectangle top = new Rectangle(400, 100, Color.RED); root.setTop(top); Rectangle bottom = new Rectangle(400, 100, Color.RED); root.setBottom(bottom); //Alignments BorderPane.setAlignment(bottom, Pos.CENTER); //Margin BorderPane.setMargin(left, new Insets(12,12,12,12)); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); } Rectangle bottom = new Rectangle(400, 100, Color.RED); root.setBottom(bottom); //Alignments BorderPane.setAlignment(bottom, Pos.CENTER); //Margin BorderPane.setMargin(left, new Insets(12,12,12,12));
  7. 7. AcnchorPane: K. N. Toosi University of Technology 7 Node Node 30px AnchorPane allows the edges of child nodes to be anchored to an offset from the anchor pane's edges.
  8. 8. AcnchorPane: Constraint Type Description topAnchor double distance from the anchor pane's top insets to the child's top edge. leftAnchor double distance from the anchor pane's left insets to the child's left edge. bottomAnchor double distance from the anchor pane's bottom insets to the child's bottom edge. rightAnchor double distance from the anchor pane's right insets to the child's right edge. K. N. Toosi University of Technology 8 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.
  9. 9. Demo 2: 9K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { AnchorPane root = new AnchorPane(); Button button = new Button("You Can Click Me"); AnchorPane.setLeftAnchor(button, 30D); AnchorPane.setRightAnchor(button, 30D); AnchorPane.setTopAnchor(button, 30D); root.getChildren().add(button); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); }
  10. 10. Demo 2: 10K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { AnchorPane root = new AnchorPane(); Button button = new Button("You Can Click Me"); AnchorPane.setLeftAnchor(button, 30D); AnchorPane.setRightAnchor(button, 30D); AnchorPane.setTopAnchor(button, 30D); root.getChildren().add(button); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); } import javafx.scene.control.Button; import javafx.scene.layout.AnchorPane; … Button button = new Button("You Can Click Me"); AnchorPane.setLeftAnchor(button, 30D); AnchorPane.setRightAnchor(button, 30D); AnchorPane.setTopAnchor(button, 30D);
  11. 11. Hbox/Vbox: K. N. Toosi University of Technology 11 Node Node Node Node Node Node spacing
  12. 12. Demo 3: 12K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { BorderPane root = new BorderPane(); VBox vbox = new VBox(10); root.setLeft(vbox); for(int i=0;i<5;i++){ Rectangle rectangle = new Rectangle(40, 40); vbox.getChildren().add(rectangle); } HBox hbox = new HBox(40); root.setTop(hbox); for(int i=0;i<5;i++){ Circle circle = new Circle(20); hbox.getChildren().add(circle); } Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); }
  13. 13. Demo 3: 13K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { BorderPane root = new BorderPane(); VBox vbox = new VBox(10); root.setLeft(vbox); for(int i=0;i<5;i++){ Rectangle rectangle = new Rectangle(40, 40); vbox.getChildren().add(rectangle); } HBox hbox = new HBox(40); root.setTop(hbox); for(int i=0;i<5;i++){ Circle circle = new Circle(20); hbox.getChildren().add(circle); } Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); } VBox vbox = new VBox(10); root.setLeft(vbox); for(int i=0;i<5;i++){ Rectangle rectangle = new Rectangle(40, 40); vbox.getChildren().add(rectangle); } HBox hbox = new HBox(40); root.setTop(hbox); for(int i=0;i<5;i++){ Circle circle = new Circle(20); hbox.getChildren().add(circle); }
  14. 14. Demo 3: 14K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { BorderPane root = new BorderPane(); VBox vbox = new VBox(10); root.setLeft(vbox); for(int i=0;i<5;i++){ Rectangle rectangle = new Rectangle(40, 40); vbox.getChildren().add(rectangle); } HBox hbox = new HBox(40); hbox.setAlignment(Pos.CENTER); root.setTop(hbox); for(int i=0;i<5;i++){ Circle circle = new Circle(20); hbox.getChildren().add(circle); } Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); }
  15. 15. StackPane: K. N. Toosi University of Technology 15
  16. 16. Demo 4: 16K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { StackPane root = new StackPane(); for (int i = 0; i < 90; i += 10) { Rectangle rectangle = new Rectangle(300, 300); rectangle.setRotate(i); rectangle.setFill(Color.rgb(i+90, i / 20, i / 30)); root.getChildren().add(rectangle); } Label label = new Label("JavaFX is Awesome"); label.setFont(Font.font(24)); label.setTextFill(Color.WHITE); root.getChildren().add(label); Scene scene = new Scene(root, 600, 600); primaryStage.setScene(scene); primaryStage.show(); } You can set the alignment of components with: root.setAlignment( Pos.? );
  17. 17. Demo 4: 17K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { StackPane root = new StackPane(); for (int i = 0; i < 90; i += 10) { Rectangle rectangle = new Rectangle(300, 300); rectangle.setRotate(i); rectangle.setFill(Color.rgb(i+90, i / 20, i / 30)); root.getChildren().add(rectangle); } Label label = new Label("JavaFX is Awesome"); label.setFont(Font.font(24)); label.setTextFill(Color.WHITE); root.getChildren().add(label); Scene scene = new Scene(root, 600, 600); primaryStage.setScene(scene); primaryStage.show(); } for (int i = 0; i < 90; i += 10) { Rectangle rectangle = new Rectangle(300, 300); rectangle.setRotate(i); rectangle.setFill(Color.rgb(i+90, i / 20, i / 30)); root.getChildren().add(rectangle); }
  18. 18. Demo 4: 18K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { StackPane root = new StackPane(); for (int i = 0; i < 90; i += 10) { Rectangle rectangle = new Rectangle(300, 300); rectangle.setRotate(i); rectangle.setFill(Color.rgb(i+90, i / 20, i / 30)); root.getChildren().add(rectangle); } Label label = new Label("JavaFX is Awesome"); label.setFont(Font.font(24)); label.setTextFill(Color.WHITE); root.getChildren().add(label); Scene scene = new Scene(root, 600, 600); primaryStage.setScene(scene); primaryStage.show(); } Label label = new Label("JavaFX is Awesome"); label.setFont(Font.font(24)); label.setTextFill(Color.WHITE); root.getChildren().add(label);
  19. 19. GridPane: K. N. Toosi University of Technology 19 (0,0) (1,0) (2,0) (0,1) (1,1) (0,2) (1,2) (2,3) padding hgap vgap
  20. 20. Demo 5 (1/3): 20K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { GridPane root = new GridPane(); Scene scene = new Scene(root); root.setPadding(new Insets(10)); root.setHgap(20); root.setVgap(5); ColumnConstraints column1 = new ColumnConstraints(100); ColumnConstraints column2 = new ColumnConstraints(90, 150, Double.MAX_VALUE); column2.setHgrow(Priority.ALWAYS); root.getColumnConstraints().addAll(column1, column2); . . . . . }
  21. 21. Demo 5 (2/3): 21K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { . . . . . Label formLbl = new Label("Enter your First name and last name"); Label fNameLbl = new Label("First Name"); TextField fNameFld = new TextField(); Label lNameLbl = new Label("Last Name"); TextField lNameFld = new TextField(); Button saveButton = new Button("Save"); . . . . . }
  22. 22. Demo 5 (3/3): 22K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { . . . . . GridPane.setHalignment(formLbl, HPos.LEFT); root.add(formLbl, 0, 0,2,1); GridPane.setHalignment(fNameLbl, HPos.LEFT); root.add(fNameLbl, 0, 1); GridPane.setHalignment(lNameLbl, HPos.LEFT); root.add(lNameLbl, 0, 2); GridPane.setHalignment(fNameFld, HPos.LEFT); root.add(fNameFld, 1, 1); GridPane.setHalignment(lNameFld, HPos.LEFT); root.add(lNameFld, 1, 2); GridPane.setHalignment(saveButton, HPos.RIGHT); root.add(saveButton, 2, 3); primaryStage.setScene(scene); primaryStage.show(); }
  23. 23. FlowPane: K. N. Toosi University of Technology 23 Node2 Node4 Node3Node1 Node2 Node4 Node3 Node1 HGap VGap
  24. 24. Demo 6: 24K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { FlowPane root = new FlowPane(); root.setHgap(10); root.setVgap(30); root.setPadding(new Insets(15)); Button button1 = new Button("Button1"); root.getChildren().add(button1); Button button2 = new Button("Button2"); button2.setPrefSize(100, 100); root.getChildren().add(button2); TextField textField = new TextField("Text Field"); textField.setPrefWidth(110); root.getChildren().add(textField); Rectangle rectangle = new Rectangle(300, 200); root.getChildren().add(rectangle); Scene scene = new Scene(root, 550, 250); primaryStage.setScene(scene); primaryStage.show(); }
  25. 25. Demo 6: 25K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { FlowPane root = new FlowPane(); root.setHgap(10); root.setVgap(30); root.setPadding(new Insets(15)); Button button1 = new Button("Button1"); root.getChildren().add(button1); Button button2 = new Button("Button2"); button2.setPrefSize(100, 100); root.getChildren().add(button2); TextField textField = new TextField("Text Field"); textField.setPrefWidth(110); root.getChildren().add(textField); Rectangle rectangle = new Rectangle(300, 200); root.getChildren().add(rectangle); Scene scene = new Scene(root, 550, 250); primaryStage.setScene(scene); primaryStage.show(); } FlowPane root = new FlowPane(); root.setHgap(10); root.setVgap(30); root.setPadding(new Insets(15));
  26. 26. Demo 6: 26K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { FlowPane root = new FlowPane(Orientation.VERTICAL); root.setHgap(10); root.setVgap(30); root.setPadding(new Insets(15)); Button button1 = new Button("Button1"); root.getChildren().add(button1); Button button2 = new Button("Button2"); button2.setPrefSize(100, 100); root.getChildren().add(button2); TextField textField = new TextField("Text Field"); textField.setPrefWidth(110); root.getChildren().add(textField); Rectangle rectangle = new Rectangle(300, 200); root.getChildren().add(rectangle); Scene scene = new Scene(root, 550, 250); primaryStage.setScene(scene); primaryStage.show(); } FlowPane root = new FlowPane(Orientation.VERTICAL); root.setHgap(10); root.setVgap(30); root.setPadding(new Insets(15)); A horizontal flowpane (the default) will layout nodes in rows, wrapping at the flowpane's width. A vertical flowpane lays out nodes in columns, wrapping at the flowpane's height.
  27. 27. TilePane: K. N. Toosi University of Technology 27 Node2 Node4 Node3Node1 Node2 Node4Node3 Node1
  28. 28. Demo 7: 28K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { TilePane root = new TilePane(Orientation.HORIZONTAL); root.setHgap(10); root.setVgap(30); root.setPadding(new Insets(15)); root.setTileAlignment(Pos.TOP_CENTER); Button button1 = new Button("Button1"); root.getChildren().add(button1); Button button2 = new Button("Button2"); button2.setPrefSize(100, 100); root.getChildren().add(button2); TextField textField = new TextField("Text Field"); textField.setPrefWidth(110); root.getChildren().add(textField); Rectangle rectangle = new Rectangle(200, 200); root.getChildren().add(rectangle); Scene scene = new Scene(root, 550, 250); primaryStage.setScene(scene); primaryStage.show(); }
  29. 29. DialogPane: • We will talk about Dialogs separately. K. N. Toosi University of Technology 29
  30. 30. JavaFX Containers Hierarchy: 30K. N. Toosi University of Technology Region Control SplitPane ScrollPane Accordion TabPane Pane AnchorPane BorderPane DialogPane FlowPane VBox HBox GridPane StackPane TilePane
  31. 31. Control versus Pane: • A "Control" is a node in the scene graph which can be manipulated by the user. Controls provide additional variables and behaviors beyond those of Node to support common user interactions in a manner which is consistent and predictable for the user. • Pane is the base class for layout panes which need to expose the children list as public so that users of the subclass can freely add/remove children. K. N. Toosi University of Technology 31
  32. 32. ScrollPane: K. N. Toosi University of Technology 32 Some very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very Long Text Some very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very
  33. 33. Demo 8: 33K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { StackPane stackPane = new StackPane(); ScrollPane root = new ScrollPane(); root.setPannable(true); root.setFitToHeight(true); root.setFitToWidth(true); Rectangle rectangle = new Rectangle(900, 400); stackPane.getChildren().add(rectangle); root.setContent(stackPane); Scene scene = new Scene(root, 600, 600); primaryStage.setScene(scene); primaryStage.show(); }
  34. 34. SplitPane: K. N. Toosi University of Technology 34 RIGHTBOTTOM BOTTOM Divider Divider Position between [0.0 – 1.0]
  35. 35. Demo 9: 35K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { SplitPane root = new SplitPane(); Button button21 = new Button("Click Me21"); Button button22 = new Button("Click Me22"); VBox vBox1 = new VBox(button21,button22); Button button11 = new Button("Click Me11"); Button button12 = new Button("Click Me12"); BorderPane borderPane = new BorderPane(null, button12, null, button11, null); Button button31 = new Button("Click Me31"); Button button32 = new Button("Click Me32"); VBox vBox2 = new VBox(button31,button32); root.setDividerPositions(0.2f,0.8f); root.getItems().addAll(vBox1,borderPane,vBox2); Scene scene = new Scene(root,500,400); primaryStage.setScene(scene); primaryStage.show(); } 20% 80% 100%
  36. 36. TabPane: K. N. Toosi University of Technology 36 Tab3Tab1 Tab2 Tab Content
  37. 37. Demo 10: 37K. N. Toosi University of Technology @Override public void start(Stage primaryStage) throws Exception { TabPane root = new TabPane(); Tab tab1 = new Tab("First Tab"); tab1.setContent(new Button("Hello")); Tab tab2 = new Tab("Second Tab"); tab2.setContent(new Button("World")); root.getTabs().addAll(tab1,tab2); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.show(); }
  38. 38. Live Coding: UI Sketch to JavaFX 38K. N. Toosi University of Technology
  39. 39. Codes: • https://github.com/mhrimaz/JavaFXLayoutsDemo K. N. Toosi University of Technology 39
  40. 40. Brought to you by Happy Coding  40K. N. Toosi University of Technology

×