Wednesday, 8 September 2010

How to centre nodes using Stack??

Hi guys,
Hope that your experience with Java FX is growing... Today I’m going to describe another way of centering  nodes in a container or Scene. This time I’ll describe the use of Stack using simple example. Stack class allows us to stack nodes on top of each other. It would be good if at this point you consult JavaFX API in order to better understand the example below. Here is the link:

Let’s begin with example. The outcome of the program looks as follows:

As you can or not see it consists of two elements. First one is Java FX text and second is the address of this very blog, positioned on top of the first element. It suggests that the Stack positions the nodes in back-to-front manner.

Now let’s look what happens when we resize the window:

The elements are still positioned in the centre and on top of each other. Have a look at the source code:
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.Stack;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.paint.Color;
import javafx.scene.effect.DropShadow;

Stage {
    title: "Centering nodes - Stack"
    var scene: Scene;

    scene: scene = Scene {
        width: 500
        height: 200
        content: Stack {
           width: bind scene.width
           height: bind scene.height
           content: [
              Text {
                  font: Font.font(null, FontWeight.BOLD, 96)
                  fill: Color.LIGHTGREY
                  content: "JAVA FX"
              } // end Text

              Text {
                  font: Font.font(null, FontWeight.BOLD, 25)
                  fill: Color.LIGHTBLUE
                  effect: DropShadow {
                      color: Color.BLUE
                      radius: 5
                  } // end DropShadow
                  content: ""
              } // end Text
           ] // end Stact content
        } // end Stack
    } // end Scene
} // end Stage

As you can see from the source code the object literal for Stack class is as follows:

Stack {
           width: bind scene.width
           height: bind scene.height
           content: [
                ....CODE OMMITED.....

There is nothing unusual about the code, so how the magic happens?? It is simple, Stack has two variables called nodeVPos and nodeHPos which are set to CENTER by default. Lets modify the code above and include the following:

Stack {
           width: bind scene.width
           height: bind scene.height
           nodeVPos: VPos.BOTTOM
           nodeHPos: HPos.RIGHT
           content: [
                ....CODE OMMITED.....

The outcome would be:

In order for the code to work the following libraries must be included:
import javafx.geometry.HPos;
import javafx.geometry.VPos;

I will not describe those at the moment, but you are free to explore them yourselfJ

The order in which the nodes are going to appear is dependent on how they are coded. The first one in the content variable of Stack will be displayed on the bottom. The rest will be displayed on top of the ones that are before them in content. Hope it made some sense;)
The width and height of the Stack is also bound to the scene. It is done so, because we want the Stack to resize with the window and keep the items in the correct position. You can set the variables to other values in order to position the stack whenever you want in the program

I used some effect with the second Text node in order to display the shadow. The class I used is DropShadow. It is one of many effects provided by JavaFX. I will not describe it in this post as I thing it is easy to understand. However, I would really advise you to explore the effect package of JavaFX. If you decide to do so, check the link below to JavaFX API:

I hope you will make use of the information above. If not, you can always ask?

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Java developer learn from Java Training in Chennai. or learn thru Java Online Training from India . Nowadays Java has tons of job opportunities on various vertical industry.