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: "www.javafxscripting.blogspot.com"
} // 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?
Cheers
No comments:
Post a Comment