- JavaFX Tutorial
- JavaFX - Home
- JavaFX - Overview
- JavaFX Installation and Architecture
- JavaFX - Installation Using Netbeans
- JavaFX - Installation Using Eclipse
- JavaFX - Installation using Visual Studio Code
- JavaFX - Architecture
- JavaFX - Application
- JavaFX 2D Shapes
- JavaFX - 2D Shapes
- JavaFX - Drawing a Line
- JavaFX - Drawing a Rectangle
- JavaFX - Drawing a Rounded Rectangle
- JavaFX - Drawing a Circle
- JavaFX - Drawing an Ellipse
- JavaFX - Drawing a Polygon
- JavaFX - Drawing a Polyline
- JavaFX - Drawing a Cubic Curve
- JavaFX - Drawing a Quad Curve
- JavaFX - Drawing an Arc
- JavaFX - Drawing an SVGPath
- JavaFX Properties of 2D Objects
- JavaFX - Stroke Type Property
- JavaFX - Stroke Width Property
- JavaFX - Stroke Fill Property
- JavaFX - Stroke Property
- JavaFX - Stroke Line Join Property
- JavaFX - Stroke Miter Limit Property
- JavaFX - Stroke Line Cap Property
- JavaFX - Smooth Property
- Operations on 2D Objects
- JavaFX - 2D Shapes Operations
- JavaFX - Union Operation
- JavaFX - Intersection Operation
- JavaFX - Subtraction Operation
- JavaFX Color and Texture
- JavaFX - Colors
- JavaFX Text
- JavaFX - Text
- JavaFX Effects
- JavaFX - Effects
- JavaFX Transformations
- JavaFX - Transformations
- JavaFX Animations
- JavaFX - Animations
- JavaFX Images
- JavaFX - Images
- JavaFX 3D Shapes
- JavaFX - 3D Shapes
- JavaFX - Creating a Box
- JavaFX - Creating a Cylinder
- JavaFX - Creating a Sphere
- Properties of 3D Objects
- JavaFX - Cull Face Property
- JavaFX - Drawing Modes Property
- JavaFX - Material Property
- JavaFX Event Handling
- JavaFX - Event Handling
- JavaFX - Using Convenience Methods
- JavaFX - Event Filters
- JavaFX - Event Handlers
- JavaFX UI Controls
- JavaFX - UI Controls
- JavaFX - ListView
- JavaFX - Accordion
- JavaFX - ButtonBar
- JavaFX - ChoiceBox
- JavaFX - HTMLEditor
- JavaFX - MenuBar
- JavaFX - Pagination
- JavaFX - ProgressIndicator
- JavaFX - ScrollPane
- JavaFX - Separator
- JavaFX - Slider
- JavaFX - Spinner
- JavaFX - SplitPane
- JavaFX - TableView
- JavaFX - TabPane
- JavaFX - ToolBar
- JavaFX - TreeView
- JavaFX - Label
- JavaFX - CheckBox
- JavaFX - RadioButton
- JavaFX - TextField
- JavaFX - PasswordField
- JavaFX - FileChooser
- JavaFX - Hyperlink
- JavaFX - Tooltip
- JavaFX - Alert
- JavaFX - DatePicker
- JavaFX - TextArea
- JavaFX Charts
- JavaFX - Charts
- JavaFX - Creating Pie Chart
- JavaFX - Creating Line Chart
- JavaFX - Creating Area Chart
- JavaFX - Creating Bar Chart
- JavaFX - Creating Bubble Chart
- JavaFX - Creating Scatter Chart
- JavaFX - Creating Stacked Area Chart
- JavaFX - Creating Stacked Bar Chart
- JavaFX Layout Panes
- JavaFX - Layout Panes
- JavaFX - HBox Layout
- JavaFX - VBox Layout
- JavaFX - BorderPane Layout
- JavaFX - StackPane Layout
- JavaFX - TextFlow Layout
- JavaFX - AnchorPane Layout
- JavaFX - TilePane Layout
- JavaFX - GridPane Layout
- JavaFX - FlowPane Layout
- JavaFX CSS
- JavaFX - CSS
- Media with JavaFX
- JavaFX - Playing Video
- JavaFX Useful Resources
- JavaFX - Quick Guide
- JavaFX - Useful Resources
- JavaFX - Discussion
JavaFX - HBox Layout
HBox Layout in JavaFX
HBox, also referred to as Horizontal Box, is a layout pane that arranges all the nodes of a JavaFX application in a single horizontal row. The HBox layout pane is represented by a class named HBox of the package javafx.scene.layout. Instantiate this class to create an HBox layout. Constructors of HBox class is as follows −
HBox() − It is the default constructor that constructs an HBox layout with 0 spacing.
HBox(double spacingVal) − It constructs a new HBox layout with the specified spacing between nodes.
HBox(double spacingVal, Node nodes) − This parameterized constructor of HBox class accepts children nodes as well as spacing between them and creates a new HBox layout with the specified components.
HBox(Node nodes) − It creates an HBox layout with specified children nodes and 0 spacing.
In the below snapshot, we can see the UI components inside the red box are placed within a horizontal layout −
The HBox class has the following properties −
alignment − This property represents the alignment of the nodes in the bounds of the HBox. We can set value to this property using the setter method setAlignment().
fillHeight − This property is of Boolean type and on setting this to true, the resizable nodes in the HBox are resized to the height of the HBox. We can set value to this property using the setter method setFillHeight().
spacing − This property is of double type and it represents the space between the children of the HBox. We can set value to this property using the setter method setSpacing().
padding − It represents the space between the border of HBox and its child nodes. We can set value to this property using the setter method setPadding() which accepts Insets constructor as a parameter value.
In addition to these, HBox class also provides a couple of methods, which are as follows −
S.No | methods & Description |
---|---|
1 | setHgrow()
Sets the horizontal grow priority for the child when contained by an HBox. This method accepts a node and a priority value. The possible priority value could be Policy.ALWAYS, Policy.SOMETIMES and Policy.NEVER. |
2 | setMargin()
Using this method, you can set margins to the HBox. This method accepts a node and an object of the Insets class (A set of inside offsets for the 4 side of a rectangular area). |
Example
The following program is an example of the HBox layout. Here, we are inserting a text field and two buttons named as play and stop. Save this JavaFX code in a file with the name HBoxExample.java.
import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.TextField; import javafx.stage.Stage; import javafx.scene.layout.HBox; public class HBoxExample extends Application { @Override public void start(Stage stage) { //creating a text field TextField textField = new TextField(); //Creating the play button Button playButton = new Button("Play"); //Creating the stop button Button stopButton = new Button("stop"); //Instantiating the HBox class HBox hbox = new HBox(); //Setting the space between the nodes of a HBox pane hbox.setSpacing(10); //Adding all the nodes to the HBox hbox.getChildren().addAll(textField, playButton, stopButton); //Setting the margin to the nodes hbox.setMargin(textField, new Insets(20, 20, 20, 20)); hbox.setMargin(playButton, new Insets(20, 20, 20, 20)); hbox.setMargin(stopButton, new Insets(20, 20, 20, 20)); //Creating a scene object Scene scene = new Scene(hbox, 400, 300); //Setting title to the Stage stage.setTitle("Hbox Example in JavaFX"); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } }
Compile and execute the saved java file from the command prompt using the following commands.
javac --module-path %PATH_TO_FX% --add-modules javafx.controls HBoxExample.java java --module-path %PATH_TO_FX% --add-modules javafx.controls HBoxExample
Output
On executing, the above program generates a JavaFX window as shown below.
Example
In the following example, we are going to use the parameterized constructor of the HBox class to create a horizontal layout. Save this JavaFX code in a file with the name HBoxExample.java.
import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.TextField; import javafx.stage.Stage; import javafx.scene.layout.HBox; public class HBoxExample extends Application { @Override public void start(Stage stage) { //creating a text field TextField textField = new TextField(); //Creating the play button Button playButton = new Button("Play"); //Creating the stop button Button stopButton = new Button("stop"); //Instantiating the HBox class HBox box = new HBox(10, textField, playButton, stopButton); box.setAlignment( Pos.CENTER); //Creating a scene object Scene scene = new Scene(box, 400, 300); //Setting title to the Stage stage.setTitle("Hbox Example in JavaFX"); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } }
Compile and execute the saved java file from the command prompt using the following commands.
javac --module-path %PATH_TO_FX% --add-modules javafx.controls HBoxExample.java java --module-path %PATH_TO_FX% --add-modules javafx.controls HBoxExample
Output
On executing, the above program generates the following output.