[Video] Java Fx Programming - Layouts

Repository

https://github.com/dmlloyd/openjdk

What Will I Learn?

Layouts inJavaFx

• HBox
• VBox
• BorderPane
• GridPane
• Column Constraints

Requirements

• IntelliJ IDEA 2017 IDE
• Basic knowlege of Java

Difficulty

• Intermediate

Description

This tutorial covers a few layouts in Java FX, these include; HBox, VBox, GridPane and BorderPane layouts as illustrated in the Image below.

[Code and Explanation]

package sample;

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{

        BorderPane root = new BorderPane(); //This creates a borderpane with name root.
Text newText = new Text("Top Text"); // This creates a text newText with content "Top text"
root.setTop(newText); //This places newText in the top section the border pane.



        Text lefttext = new Text("Left Text");
        root.setLeft(lefttext);

        VBox righttext = new VBox(10); //This creates a vertical box layout, and sets the spacing between the components to be added in it to 10.

        righttext.setPadding(new Insets(10)); // This sets the spacing between the components in the VBox and the border of the box to 10 on all sides.

        Rectangle rect = new Rectangle(20,20); //This creates a new Rectangle in the program.
        righttext.getChildren().add(rect); // This adds the rectangle to the VBox.

        Rectangle rect1 = new Rectangle(30,20);
        righttext.getChildren().add(rect1);
        root.setRight(righttext);

HBox bottom = new HBox(10); //This creates a horizontalbox layout, and sets the spacing between the components to be added in it to 10.

bottom.setPadding(new Insets(10,4,20,10)); // This sets the padding on all four sidesof the boxto different values, Top=10, Right = 4, Bottom = 20, Left = 10.
        Rectangle rectangle = new Rectangle(20,20);
        bottom.getChildren().add(rectangle);

        Rectangle rectangle1 = new Rectangle(30,20);
        bottom.getChildren().add(rectangle1);
root.setBottom(bottom);


GridPane grid = new GridPane();
grid.setPadding(new Insets(10));//the spacing between the elements and the border of the gridpane

grid.setHgap(10); //The spacing between the columns

grid.setVgap(10);// The spacing between the rows

/* Column constraints are used to set maximum, minimum and prefered size of columns in a gridpane. 
* When only one value is added in the Declaration, then it is the preferred size, but if there is more than one then it should include;
* Minimum, Prefered and maximum as seen below.
*/

        ColumnConstraints column1 = new ColumnConstraints(100);
        ColumnConstraints column2 = new ColumnConstraints(100, 200, 300);


column2.setHgrow(Priority.ALWAYS); //This automatically increases the column upon increase in the size of the window until set maximum is reached.

grid.getColumnConstraints().addAll(column1,column2);
GridPane.setHalignment(rect1, HPos.RIGHT); //This is used to set the alignment of a component to be added to the gridpane.
grid.add(rect1,1,0); // This adds the element rect1 to the first row of the second column in the grid, 0 represents the row while 1 represents the column.

root.setCenter(grid);

        Scene newScene =new Scene(root, 500, 300, Color.WHITE);

        primaryStage.setTitle("Hello World");
        primaryStage.setScene(newScene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

If Questions, kindly fdrop in the comment section.

Video Tutorial

Curriculum

• Introduction

Proof of Work Done

https://github.com/officialhord/JavaFxTutorial