When you have multiple buttons in a VBox or a HBox you often want to size and align them equally. The default preferred width of a button is computed based on its content (which includes the text as well as possible graphics) and the default preferred size of a VBox and a HBox is based on the biggest of their children.
If you want your buttons to grow with their parent you either have to raise their max size manually or to set it to the constant Double.MAX_VALUE which forces controls to grow as big as permitted by their parent.
If you want an overview on all different layout panes in JavaFX 2.0 or if you want to know yome basic facts about them, please see my previous post Layout Panes in JavaFX 2.0.
The layout panes HBox and VBox are definitely the most basic layout containers in JavaFX 2.0. As you can already tell by their name, their purpose is to layout all their children in one horizontal row (HBox) or in one vertical column (VBox). Because they´re very easy to use and very useful regarding minor layout issues, you´ll probably use them a lot. I´ll give two examples on how you can use them. As in the other examples, first of all the code and afterwards the explanations.
HBox and VBox – Example 1
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
/**
*
* Created on: 20.03.2012
* @author Sebastian Damm
*/
public class HBoxandVBoxExample extends Application
{
@Override
public void start(Stage primaryStage) throws Exception
{
HBox hbox = new HBox(50);
hbox.setAlignment(Pos.CENTER); // default TOP_LEFT
VBox vbox1 = new VBox();
vbox1.setAlignment(Pos.BOTTOM_CENTER);
vbox1.setStyle("-fx-border-style: solid;"
+ "-fx-border-width: 1;"
+ "-fx-border-color: black");
VBox vbox2 = new VBox(10);
vbox2.setAlignment(Pos.CENTER);
vbox2.setStyle("-fx-border-style: solid;"
+ "-fx-border-width: 1;"
+ "-fx-border-color: black");
VBox vbox3 = new VBox(20);
vbox3.setAlignment(Pos.TOP_CENTER);
vbox3.setStyle("-fx-border-style: solid;"
+ "-fx-border-width: 1;"
+ "-fx-border-color: black");
for (int i = 0; i < 5; i++)
{
Button bt = new Button("Button " + (i+1));
Button bt2 = new Button("Button " + (i+1)); // unfortunately there´s no "clone" or "copy" method
Button bt3 = new Button("Button " + (i+1));
vbox1.getChildren().add(bt);
vbox2.getChildren().add(bt2);
vbox3.getChildren().add(bt3);
}
hbox.getChildren().addAll(vbox1, vbox2, vbox3);
Scene scene = new Scene(hbox, 350, 250); // the hbox is the root node
primaryStage.setTitle("HBox and VBox Example");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args)
{
Application.launch(args);
}
}
Basically we create three different VBoxes and put them into one HBox. In both classes you can define a spacing value either directly in the constructor or via the setSpacing method.
This value will be used as the gap between the individual children in the pane.
The line HBox hbox = new HBox(50); therefore creates a HBox to hold three VBoxes with a gap of 50 pixel between each of them.
We use the setAlignment method to specify, how the individual VBoxes should arrange and layout all their childen.
With setStyle you can apply custom CSS styles to any Node. I don´t want to go into much detail yet, because I´ll cover CSS styles in JavaFX 2.0 in one of my next posts, but if you´re already familiar with CSS you´ll probably already have noticed that the JavaFX 2.0 team fortunately decided to follow the CSS standards defined by W3C (http://www.w3.org) very closely.
If you´re not familiar with CSS you just need to know that theses lines of CSS create a 1px wide black border around the component. I use them here to show you the size of the individual VBoxes.
The next few lines should be pretty ordinary for you by now: We create five buttons for each VBox, put the different VBoxes into our HBox, declare a Scene object (with the HBox as root) and show our application.
Creating a graphical user interface that looks nice and that provides a good usability is a very common task in software development. Fortunately JavaFX 2.0 offers great support in that area.
What is a layout manager and why do we need them?
Layout managers are regions or areas that follow individual rules to (re)arrange and to (re)size all their children in relation to their own size. Generally, it is also possible to specify a fixed position of your components in an application window. But how should the window know what to do when you resize your application window? Should it leave the new available space blank? Should some components “vanish” if you make the window smaller? Should it resize some components? If yes, which one and how?
These questions show, why layout managers are necessary in software development.
Facts about layout managers in JavaFX 2.0
In JavaFX 2.0 layout managers are called “panes”
Every layout pane extends the Region class
To create your own layout pane, it is highly recommended to extend Region yourself
Types of layout panes in JavaFX 2.0
HBox (lays out its children in a horizontal row)
VBox (lays out its children in a single vertical column)
Border Pane (lays out its children in five different regions: Top, Right, Bottom, Left and Center)
Before talking about the example itself, I want to show you how to create a JavaFX application in NetBeans.
(If you haven´t installed JavaFX and NetBeans yet, please see my previous post Installing JavaFX 2.0 and NetBeans 7.7.1)
Click on “New Project” in the “File” menu to open the project wizard. Then choose “JavaFX->JavaFX Application” and press “Next”.
In the next dialog you can specify the name of your application and a destination folder, where it should be stored. If you have installed JavaFX correctly the “JavaFX Platform” should be specified already. Otherwise you can add the platform yourself by clicking on “Manage Platforms->Add Platform” and specifying the paths to your JavaFX installation.
Note: By default the “Create Application Class” checkbox is checked. Please uncheck it because we´ll create our own application class.
Click on “finish” to create your first JavaFX application.
Hello World in JavaFX 2.0 – Example 1
Probably every single software developer knows the famous „HelloWorld“ example as it is often used to show the syntax of a (unknown) programming language and to give a first clue, of what the language looks like.
I don´t want to break this tradition, so here are 2 different versions of a HelloWorld program in JavaFX 2.0. I´ll show the complete code first and then explain the individual parts.
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
/**
*
* Created on: 17.03.2012
* @author Sebastian Damm
*/
public class HelloJavaFX extends Application
{
@Override
public void start(Stage stage) throws Exception
{
Button bt = new Button("Print HelloWorld");
bt.setOnAction(new EventHandler<ActionEvent>()
{
@Override
public void handle(ActionEvent arg0)
{
System.out.println("HelloWorld! :)");
}
});
StackPane root = new StackPane();
Scene scene = new Scene(root, 300, 150);
root.getChildren().add(bt);
stage.setTitle("HelloWorld in JavaFX 2.0");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args)
{
Application.launch(args);
}
}
The first thing worth mentioning is that you have to extend from the Application class in order to create a working JavaFX application. This class provides several live-cycle methods and is the starting point for your application. It is an abstract class (which means, that you cannot instantiate it) with a single abstract method start, that you have to override. You are provided a stage object by the JavaFX runtime, which you can use to display your UI.
As
mentioned in my 2 introduction posts, I´ll start a series of beginner tutorials
for JavaFX 2.0.
I will
start with the obligatory “HelloWorld” example and try to cover as many as
possible beginner topics in the next few weeks. Feel free to tell me in the
comments, what you want to see.
Who are the tutorials targeted at?
People with average to good Java knowledge
People that what to learn JavaFX 2.0 but have little to no knowledge yet
I won´t
cover any Java basics, but we will start at the very beginning of JavaFX 2.0
My first blog
post will cover the most essential part => Installing JavaFX 2.0 and setting
up your development environment.
As of Java
SE 7 Update 2, Java SE includes JavaFX 2.0, so if you don´t have a version of
Java installed, go for this package. If you already have installed a
different Java SE/EE version you can also download JavaFX 2.0 stand-alone.
Here is the
download of the latest Java SE version, which is 7 Update 3:
If you want
to install Java EE as well, you can download the package with JavaSE and JavaEE. Note: It is "only" JavaSE 7 Update1, which means, that JavaFX 2.0 isn´t included. If you download this package, you´ll have to download the JavaFX 2.0 SDK separately.
So, welcome to my blog. First of all I would like to introduce myself quickly: My name is Sebastian Damm, I am 23 years old, I live in Germany and I am about to finish my apprenticeship
as a software developer. As English isn´t my native language, please excuse any spelling or grammar mistakes. Nevertheless I want to write my blog in English to make it appeal to a broader audience.
What is this blog all about?
As I am a big Java fan, the majority of posts will be about different Java technologies and news. Because I learned JavaFX 2.0 in the last few weeks, I decided, that
it´ll be a good idea to post some beginner tutorials and introductions about
JavaFX 2.0, because many people want to learn it at the moment.
So expect the
first several posts to cover some JavaFX 2.0 basics and beginner examples.
