It is possible to print the Hello World in the console, but as I mentioned before JavaFX is designed to produce quality GUI. Based on that the decision on moving straight to graphics. Below is the listing of source code:
// Imports
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.StageStyle;
Stage {
title: "Helo world"
width: 200
height: 200
scene: Scene {
fill: Color.ORANGE
content: [
Text {
layoutY: 80
layoutX: 20
fill: Color.BLACK
font: Font.font("Serif", FontWeight.BOLD, 20);
content: "HELLO WORLD"
} // Text end
] // content end
} // Scene end
} // Stage end
Let's start the description of the code. The first couple of lines starting with keyword import are responsible for importing needed library classes. There is many classes available for you in the JavaFX API. The number of them still grows as it is fairly fresh language. It is important to have JavaFX API handy while programming. You can find all needed information in there.
After the import there is Stage:
Stage {
title: "Helo world"
width: 200
height: 200
// code omitted
}
It is object of class Stage. This class provides us with the window for our application. It can have different styles. It can provide us with basic window buttons like close button or it can be completely undecorated. If you have experience in Java GUI programming, the easiest way to think about Stage is as Java's Window class. In the listing above we can see three variables:
title - which sets the title of the application in the caption bar
height - sets the height of the window in pixels
width - sets the width of window in pixels
Again, there is many variables available in Stage class that are not used in this example. Some of the will be encountered in the future. I want to draw you attention to the way we assign the values to the variables. We use the ":" sign. We use it when we deal with object literals. The above declaration is an object literal. It is similar to the constructor in Java. On the other hand we use "=" sign when we are assigning values to variables we declared in the application.
Ok, so far we've got window. Next thing we need is the surface to draw on. Class Scene provides us with the container for the graphical nodes we want to draw:
scene: Scene {
fill: Color.ORANGE
content: [
// code omitted
]
}
What we've got here is pretty simple. There is another object literal of class Scene, which is assigned to Stage's variable scene. There are two variables used:
fill - which is responsible for painting the background of the node, we used the Color class to paint the background in the orange color
content - this hold nodes which are to be painted within the scene.
As you probably noticed the variable content has a square brackets [ ]. This means that content is a sequence. Sequences are very similar to arrays in Java and C++. If you look at the JavaFX API you will notice that content is a sequence of type Node[]. Well , the question is what is Node[ ]. The Node is a father of everything. All classes subclass Node. It is the same case as Object in Java language. It ensures that every node can be stored within content variable.The [ ] denotes that the sequence is expected.
Are you following so far? It is really not difficult once you get a grasp on it. Let's move on. The only node within content is Text node:
Text {
layoutY: 80
layoutX: 20
fill: Color.BLACK
font: Font.font("Serif", FontWeight.BOLD, 20);
content: "HELLO WORLD"
}
This object allows us to paint text on the scene. In here we have couple of variables:
layoutY - y coordinate of the place where the drawing should begin
layoutX - x coordinate of the place where the drawing should begin
fill - responsible for the colour of the text
font - sets the font of the text. In here we used the Font.font() syntax. I specifies the family of the font ot be used, its style and the size.
content - which is the text we want to be displayed
There is many more variables available in every of the mentioned class. If you want to know more please refer to the language API.
One more note. We specified the height and width of the Stage to be 200px. The Scene can also have this values assigned. Remember that the variables should be greater for Stage as it holds caption bar and borders of the window. It is a good practice to set these variables only for Scene, therefore forcing JVM to calculate the values for height and weight of the Stage.
Enjoy!
Cheers
No comments:
Post a Comment