JavaFX 2 Layouts: AnchorPane

Hello and welcome back to JavaFX 2 Layouts tutorial series. This is a tutorial about AnchorPane. The Anchor Pane layout pane enables you to anchor nodes to the top, bottom, left side, right side, or center of the pane. As the window is resized, the nodes maintain their position relative to their anchor point. Nodes can be anchored to more than one position and more than one node can be anchored to the same position. Below you can take a look how our program will look in the end of this tutorial. AnchorPane is a nice layout to use, because it  allows nodes to resize, in our example list should stretch as anchorpane is resized. You may also notice that when you setting up AnchorPosition, you will need to enter a double value, which represents distance from the edges.

JavaFX 2 Layout AnchorPane

If you want, you can check other  tutorials from JavaFX 2 Layouts series:

Read More

JavaFX 2 Layouts: TilePane

Hello and welcome back to JavaFX 2 Layouts tutorial series. This is a tutorial about TilePane. The TilePane layout pane places all of the nodes in a grid in which each cell, or tile, is the same size. Nodes can be laid out horizontally (in rows) or vertically (in columns). Gap properties can be set to manage the spacing between the rows and columns. The padding property can be set to manage the distance between the nodes and the edges of the pane. Below you can take a look how our example will look in the end.

Here is the code:

We could modify a little bit our example by using the prefColumns or prefRows properties to establish the preferred size of the tile pane. Below you can take a look how our example will look after using prefColumns properties.

If you want, you can check other  tutorials from JavaFX 2 Layouts series:

Read More

JavaFX 2.0 Layouts: BorderPane

Here is the sixth tutorial in JavaFX 2.0 Layout series It's about BorderPane layout. The BorderPane layout pane provides five regions: top, bottom, left, right and center. Into this regions you can place your components and other layouts.  Image 1 shows the type of layout that you can create with a border pane. The regions can be any size. If your application does not need one of the regions, you do not need to define it and no space is allocated for it.

Image 1

This will be a short tutorial, because I'll explain only positioning buttons to BorderPane regions.  More logical and better used example of BorderPane would be if you place layouts to the regions and add components to that layouts. You can check the tutorial like that by clicking on this link: "Using Built-In Layout Panes". A border pane is useful for the classic look of a tool bar at the top, a status bar at the bottom, a navigation panel on the left, additional information on the right, and a working area in the center.

Here is the code of our VBox example.



Below you can look how our program will look in the end.

BorderPane example

If you like this, and other JavaFX 2 tutorials on this blog, you can follow me on Twitter to be informed about new JavaFX tutorials.

Check other tutorials from JavaFX Layout series by clicking on the image below.

Read More

JavaFX 2.0 Layouts: StackPane

This is the fourth tutorial in  JavaFX 2.0 Layout series. It's about StackPane layout. The StackPane layout pane places all of the nodes within a single stack with each new node added on top of the previous node. This layout model provides an easy way to overlay text on a shape or image or to overlap common shapes to create a complex shape.

This will be a very short example, and as you can  look above,  this is  how our little example will look in the end. As you can see there is a label there, and a button over that label, simple like that.

Below is the code of our example.

Check other tutorials from JavaFX Layout series by clicking on the image above.

If you like this, and other JavaFX 2 tutorials on this blog, you can follow me on sites bellow to be informed about new JavaFX tutorials.

     

If you have any comments, questions, and anything like that, please feel free to  leave  a comment below, or at least if you like this tutorial you can SHARE it with your friends.

Read More

JavaFX 2.0 Layouts: FlowPane

This is the fourth tutorial in JavaFX 2.0 Layout series. It's about FlowPane layout. FlowPane lays out its children in a flow that wraps at the flowpane's boundary. 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. If the flowpane has a border and/or padding set, the content will be flowed within those insets.

If you still have problems with creating Java project for JavaFX 2.0 in Eclipse IDE, check out Getting Started with JavaFX 2.0 in Eclipse IDE.

FlowPane

In this simple example I will demonstrate how FlowPane layout works.  Above you can see how the program will look in the end of this tutorial.  Below is the code of our example.




Check other tutorials from JavaFX Layout series by clicking on the image above.

Read More

JavaFX 2.0 Layouts: GridPane

Here is the third tutorial in JavaFX 2.0 Layout series. It's about GridPane layout. GridPane lays out its children within a flexible grid of rows and columns. If a border and/or padding is set, then its content will be layed out within those insets. A grid pane is useful for creating forms or any layout that is organized in rows and columns.  In this example our goal is to demonstrate how GridPane works, so I will create simple application with 20 buttons, to show and demonstrate it. I will use 2D arrays for creating buttons, because creating manually a large amount of buttons its pretty boring.

GridPane

If you still have problems with creating Java project for JavaFX 2.0 in Eclipse IDE, click on the image below.

Here is the code of our GridPane example.


First we create an instance of a GridPane. Here we have 2D array of buttons with value of 5,5. These numbers are representing number of columns and rows.




Now here we have two for loops used for creating 2D array of buttons with columns and rows values i,j. Also here we set  preferred  size of buttons. First number indicates prefWidth - the override value for preferred width and second number indicates prefHeight - the override value for preferred height. 




And at the end we are adding that buttons to gridPane, and here we come to the most important thing to realize about how GridPane works, is to know what are column and row. Column is a vertical line and row is a horizontal line.


Also we could modify a little bit our example by adding padding and horizontal and vertical gap. Here is the code bellow, and image how that modification would look.

Read More

JavaFX 2.0 Layouts: VBox

Here is the second tutorial in JavaFX 2.0 Layout series. It's about Vertical Box (VBox) layout. VBox lays out its children in a single vertical column. If the vbox has a border and/or padding set, then the contents will be layed out within those insets.


Follow  these  steps for creating the project or check Getting Started with JavaFX 2.0 in Eclipse IDE:

• Open Eclipse IDE
• Create a new Project and specify name VBoxTest
• Create class with name VBoxMain
• Add jfxrt.jar file 
• Copy the code of our  application below

VBox

Above you can see how the program will look in the end of this tutorial. As you can see it's pretty simple, with only one label and four buttons. Because our goal isn't to create any action or anything like that (for now), but the goal is to understand how VBox layout works. 


Here is the code of our VBox example.


First we create an instance of a VBox. The padding is the top, right, bottom, and left spacing around the region's content in pixels. The amount of horizontal space between each child in the hbox.


Here we create the label and set text. Add a label to VBox and set font bold Amble CN with size 24.


Here we have an example how create a button and add it to VBox, in this case button4. You will need to do this step for all of the buttons. Also here I am adding VBox layout to the Scene, and setting the Scene to primary stage, and showing that primary stage.

Check other tutorials from JavaFX Layout series by clicking on the image above.

Read More

JavaFX 2.0 Layouts: HBox

This is the first tutorial in JavaFX 2.0 Layouts series and this topic provides an overview and a simple example of HBox JavaFX 2.0 layout. HBox lays out its children in a single horizontal row. If the HBox has a border and/or padding set, then the contents will be layed out within those insets.

 Our simple HBox example will contain 4 buttons without any functionality to keep it simple, because goal is to understand how HBox layout works. Here you can look how our example will look at the end.

HBox

Before we start coding we need to do following steps:

1. Open Eclipse IDE
2. Create a new Java Project and specify name HBoxTest
3. Add jfxrt.jar from  Project -> Properties -> Java Build Path -> Libraries -> Add External Jars
4. Create class inside this project with name HBoxMain

If you still have problem with that take a look at Getting Started with JavaFX 2.0 in Eclipse IDE.

Here is code for HBox example.

   //HBox
    HBox hb = new HBox();
    hb.setPadding(new Insets(15, 12, 15, 12));
    hb.setSpacing(10);

First we create an instance of a HBox. The padding is the top, right, bottom, and left spacing around the region's content in pixels. The amount of horizontal space between each child in the hbox.

   
 //Buttons
 Button btn1 = new Button();
 btn1.setText("Button1");
 hb.getChildren().add(btn1);

Here we create button and set text, and add it to HBox layout. Repeat this step for all of buttons.

And at the end we need to add HBox layout to the Scene, and set the scene to primary stage, and show that primary stage.

   
 //Adding HBox to the scene
 Scene scene = new Scene(hb);
 primaryStage.setScene(scene);
 primaryStage.show();

If you have any comments, questions, and anything like that, please feel free to a leave comment below.

Check other tutorial from JavaFX 2 Layout series by clicking on the image above.


If you like this, and other JavaFX 2 tutorials on this blog, you can follow me on Twitter to be informed about new JavaFX tutorials.

Read More