JavaFX layout managers part I - HBox and VBox

After long absence from here I'm back again. This time I would like to talk about layout managers available in JavaFX. For starters, for those not familiar with layout managers, layout manager is responsible for laying out components of GUI in specified fashion. There are many of them available in JavaFX and each of them organises the content in different manner. In this post will describe HBox and VBox, which are very simple end basic. Even though they are very powerful tool in building layout of the application.


Lets start with HBox. This layout manager places the nodes on HORIZONTAL MANNER. Please take a minut consulting the API page for HBox, this will make it easier to understand the following example.
Link to API page: http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene.layout/javafx.scene.layout.HBox.html


As you saw, hopefully, in the API layout manager reside in javafx.scene.layout.* package. Do not forget to import it otherwise your application will not compile and you'll get an error.


Ok, now we are ready to see an example:

Code:


Stage {
    title: "HBox example"
    scene: Scene {
        width: 200
        height: 200
        content: HBox{
            padding: Insets { top: 20 bottom: 20 left: 20 right: 20 }
            spacing: 20
            content: [
                Text { content: "one" },
                Text { content: "two" },
                Text { content: "three"}
             ]
        } // HBox finish
    } // Scene finish
} // Stage finish


No a bit of explanation. As you can see from the code above the HBox has several variables that can be initialized in object literal, while creating an object of this class. The ones that are visible are:


padding - adds padding to the HBox. In the code above another class Insets is used that specifies the padding  at the top, bottom, left and right of the HBox instance


spacing - specifies the distance by which elements will be separated


content - contains the nodes to be positioned


There are many more available:

hpos - lets you specify the horizontal position of all nodes in a row, by default set to HPox.LEFT
vpos - same as above but in vertical manner, by default set to VPos.TOP
nodeVPos -  lets you specify the vertical position of the node, by default set to VPos.TOP
nodeHPos -  lets you specify the horizontal position of the node, by default set to HPox.LEFT




VBox is very simillar to HBox. In essence it contains exactly the same variables as HBox. Therefore slight change in code:


Stage {
    title: "HBox example"
    scene: Scene {
        width: 200
        height: 200
        content: VBox{
            padding: Insets { top: 20 bottom: 20 left: 20 right: 20 }
            spacing: 20
            content: [
                Text { content: "one" },
                Text { content: "two" },
                Text { content: "three"}
             ]
        } // VBox finish
    } // Scene finish
} // Stage finish


Will produce the following:

As you can see the HBox an VBox are very simple to use, but while combined can make powerful GUI. Of course there are many more which will be discussed in part I and part II.

That's all for now.

Cheers