JavaFX Layout Management

JavaFX: Layout Panes

 

 

§  layout panes are powerful elements of JavaFX

§  layout pane manages the precise placement of visual elements (components) on the screen.

§  layout can change when the pane is resized

§  Each of these layouts inherits

o   Pane – base class.

o   Region – provides foundational support for controls and layouts.

 

Types:

§  FlowPane.

§  HBox and VBox

§  GridPane

§  StackPane

§  BorderPane

 

FlowPane

§  FlowPane lays out content line by line, with lines wrapping as needed.

§  By default, a horizontal flow is used, but it is possible to specify a vertical flow.

§  wrap length feature – specify the preferred length (len) at which the next element will be wrapped to the next line.

          final void setPrefWrapLength(double len)

 

HBox and VBox

§  Two simple but effective layout panes are HBox and VBox.

§  HBox organizes its contents into a horizontal line.

§  VBox lays out its contents in a vertical column.

§  A principal advantage of HBox and VBox is that their contents will not be reorganized when the pane’s size is changed.

§  Thus, the contents will not reflow as they do in a FlowPane,

 

Constructors

§  Default constructor

§  HBox(double hGap)

§  VBox(double vGap)

Here, hGap specifies the horizontal space between elements and vGap specifies the vertical gap. When the default constructor is used, the gap is zero in both cases.

// JavaFX Controls

// Layout management

// Flow layout, HBox and VBox

 

import javafx.application.*;

import javafx.scene.*;

import javafx.stage.*;

import javafx.event.*;

import javafx.scene.layout.*;

import javafx.scene.control.*;

import javafx.scene.input.*;

import javafx.geometry.*;

 

public class JfxChk extends Application

{

   public static void main(String []args)

   {

        launch(args);    

   }

  

   public void init(){}

   public void stop(){}

  

   public void start(Stage myStage)

   {

        myStage.setTitle("Layout Demo");

       

        FlowPane fp = new FlowPane(Orientation.VERTICAL, 25, 35);

        fp.setAlignment(Pos.CENTER);

       

        HBox hb = new HBox(25);

        VBox vb = new VBox(25);

       

        Label L1 = new Label("Layout Management");

       

        Separator sp1 = new Separator();

        Separator sp2 = new Separator();

        sp1.setPrefWidth(200);

        sp2.setPrefWidth(200);

       

 

        RadioButton rb1 = new RadioButton("IT");

        RadioButton rb2 = new RadioButton("CSE");

        RadioButton rb3 = new RadioButton("OTHER");

       

        Button B1 = new Button("Clear");

        Button B2 = new Button("Submit");

        B1.setMinWidth(75);

        B2.setMinWidth(75);

       

        vb.getChildren().addAll(rb1,rb2,rb3);

        hb.getChildren().addAll(B1,B2);

       

        fp.getChildren().addAll(L1, sp1, vb, sp2, hb);

       

        Scene myScene = new Scene(fp, 300, 400);

        myStage.setScene(myScene);

        myStage.show();

   }

}

 

 

BorderPane

One of the more popular layouts is BorderPane. It implements a layout style that defines five locations to which an item can be added. The first is the center. The other four are the sides (i.e., borders): top, bottom, left, and right. BorderPane is quite useful when you want to organize a window that has a header and footer, content, and various controls on the left and/or right.

BorderPane defines three constructors. The first is the default constructor. When using the default constructor, you can assign a node to a location by use of the following methods:

final void setCenter(Node item)

final void setTop(Node item)

final void setBottom(Node item)

final void setLeft(Node item)

final void setRight(Node item)

In all cases, the node to add is specified by item.

 

The other two BorderPane constructors are shown here:

BorderPane(Node centerPos)

BorderPane(Node centerPos, Node topPos, Node rightPos, Node bottomPos, Node leftPos)

 

Other features

1.    set the alignment used in a location by calling the static method setAlignment( ),

     static void setAlignment(Node what, Pos how)

§  what specifies the element being aligned

§  how specifies the alignment constants, such as Pos.CENTER, Pos.BOTTOM_RIGHT, Pos.TOP_LEFT etc.

2.    set the margins around a node. The margins provide a gap between the edges of the node and the edges of a border position, thus preventing the two from crashing. – static method setMargin( ), shown next:

              static void setMargin(Node what, Insets margin)

§  what specifies the node for which the margin specified by margin is set.

 

 

 

 

 

// JavaFX Controls

// Layout management – Border layout

 

import javafx.application.*;

import javafx.scene.*;

import javafx.stage.*;

import javafx.event.*;

import javafx.scene.layout.*;

import javafx.scene.control.*;

import javafx.scene.input.*;

import javafx.geometry.*;

 

public class JfxChk extends Application

{

   public static void main(String []args)

   {

        launch(args);    

   }

  

   public void init(){}

   public void stop(){}

  

   public void start(Stage myStage)

   {

        myStage.setTitle("Layout Demo");

       

        BorderPane bp = new BorderPane();

       

        Button B1 = new Button("Top");

        Button B2 = new Button("Right");

        Button B3 = new Button("Bottom");

        Button B4 = new Button("Left");

       

        VBox vb = new VBox(25);    

        vb.setAlignment(Pos.CENTER);

        Label L1 = new Label("BorderPane Demo.");

        Label L2 = new Label("Center field.");

        vb.getChildren().addAll(L1, L2);

       

       

        BorderPane.setAlignment(B1,Pos.TOP_CENTER);

        BorderPane.setAlignment(B2,Pos.CENTER_RIGHT);

        BorderPane.setAlignment(B3,Pos.BOTTOM_CENTER);

        BorderPane.setAlignment(B4,Pos.CENTER_LEFT);

       

        bp.setTop(B1);

        bp.setRight(B2);

        bp.setBottom(B3);

        bp.setLeft(B4);

        bp.setCenter(vb);

       

        B1.setOnAction(new EventHandler<ActionEvent>(){

             public void handle(ActionEvent ae)

             {

                 L2.setText(B1.getText()+" button clicked.");

             }

        });

       

        B2.setOnAction(new EventHandler<ActionEvent>(){

             public void handle(ActionEvent ae)

             {

                 L2.setText(B2.getText()+" button clicked.");

             }

        });

       

        B3.setOnAction(new EventHandler<ActionEvent>(){

             public void handle(ActionEvent ae)

             {

                 L2.setText(B3.getText()+" button clicked.");

             }

        });

       

        B4.setOnAction(new EventHandler<ActionEvent>(){

             public void handle(ActionEvent ae)

             {

                 L2.setText(B4.getText()+" button clicked.");

             }

        });

       

       

        Scene myScene = new Scene(bp, 300, 200);

        myStage.setScene(myScene);

        myStage.show();

   }

}

 

 

StackPane

Stack Pane – layout is based on the Z-order, with one node placed on top of another, in a stack-like fashion. This layout can be very useful when you want to overlay one control with another.

Stack Pane provides two constructors – default constructor and constructor with a list of child nodes. The alignment of each node in a Stack Pane can be set using the static setAlignment( ) method.

 

// JavaFX Controls

// Layout management – StackPane

 

import javafx.application.*;

import javafx.scene.*;

import javafx.stage.*;

import javafx.event.*;

import javafx.scene.layout.*;

import javafx.scene.control.*;

import javafx.scene.input.*;

import javafx.geometry.*;

 

public class JfxChk extends Application

{

   public static void main(String []args)

   {

        launch(args);    

   }

  

   public void init(){}

   public void stop(){}

  

   public void start(Stage myStage)

   {

        myStage.setTitle("Layout Demo");

  

        StackPane sp = new StackPane();

        sp.setAlignment(Pos.CENTER);

            

        Button B1 = new Button("Bottom");

        Button B2 = new Button("Middle");

        Button B3 = new Button("Top");

       

        B1.setPrefSize(200,200);

        B2.setPrefSize(150,150);

        B3.setPrefSize(100,100);

            

        sp.getChildren().addAll(B1,B2,B3);

       

        Scene myScene = new Scene(sp, 350, 350);

        myStage.setScene(myScene);

        myStage.show();

   }

}

 

 

     

GridPane

§  GridPane is used to display controls using a row/column format.

§  can specify the row and column indices in which a control is to be placed.

§  Thus, GridPane gives a way to position controls at specific locations within a two-dimensional grid.

 

§  GridPane provides only the default constructor.

§  The location at which a child node is added to the grid is specified by setting its row and column indices.

     static void setConstraints(Node what, int column, int row)

o   Here, what is the node affected and column, row specifies its location in the grid.

 

§  The row and column can also be specified individually by use of the setRowIndex( ) and setColumnIndex( ).

 

§  Another way to specify the row and column position

     void add(Node child, int column, int row)

o   the row and column position is set on child when it is added to the GridPane.

 

§  the vertical or horizontal gap can be set around a control by use of the setVgap() and setHgap() methods, respectively.

     final void setVgap(double gap)

     final void setHgap(double gap)

§  setPadding( ) is used set the padding within the pane.

 

§  Other features

o   When a grid is enlarged past its preferred dimensions, it is possible to set the priority that a row or column will receive with regard to its new size. This is done by use of the setVgrow( ) and setHgrow( ) methods.

o   setColumnSpan( ) or setRowSpan( ) can be used when a control spans more than one column or row.

o   setGridLinesVisible( ) can be used to display the grid lines

 

 

// JavaFX Application - Factorial Calculator

// Layout management - GridPane

 

import javafx.application.*;

import javafx.scene.*;

import javafx.stage.*;

import javafx.event.*;

import javafx.scene.layout.*;

import javafx.scene.control.*;

import javafx.scene.input.*;

import javafx.scene.text.*;

import javafx.geometry.*;

 

public class JfxChk extends Application

{

   public static void main(String []args)

   {

        launch(args);    

   }

  

   public void init(){}

   public void stop(){}

  

   public void start(Stage myStage)

   {

        myStage.setTitle("JavaFX Application");

  

        GridPane gp = new GridPane();

        gp.setHgap(50);

        gp.setVgap(50);

        gp.setPadding(new Insets(50,50,50,50));

       

        Label L1 = new Label("Enter Name : ");

        Label L2 = new Label("Message : ");

       

        TextField tf1 = new TextField();

        tf1.setPrefColumnCount(15);

        TextField tf2 = new TextField();

        tf1.setPrefColumnCount(15);

       

        Button B1 = new Button("Hello");

        Button B2 = new Button("Welcome");

                

        gp.add(L1,0,0);

        gp.add(L2,0,1);

       

        gp.add(tf1,1,0);

        gp.add(tf2,1,1);

       

        gp.add(B1,0,2);

        gp.add(B2,1,2);

       

        B1.setOnAction(new EventHandler<ActionEvent>()

        {

             public void handle(ActionEvent ae)

             {

                 tf2.setText(B1.getText()+" "+tf1.getText());

             }            

        });

       

        B2.setOnAction(new EventHandler<ActionEvent>()

        {

             public void handle(ActionEvent ae)

             {

                 tf2.setText(B2.getText()+" "+tf1.getText());

             }            

        });

       

        Scene myScene = new Scene(gp, 400, 250);

       

        myStage.setScene(myScene);

        myStage.show();

   }

}