Friday, 28 May 2010

Hello World!!

 It is almost a tradition in programming that first application you write is Hello World.  According to it here we go, our first application:

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.



Thursday, 27 May 2010

JavaFX introduction to variables

JavaFX variables are a bit different from other languages e.g. Java and C++. They are more like in PHP. You do not need declare the type of the variable. The compiler is clever enough to do it for you. So there are two ways in which you declare variables.
First of them, which allows you to declare variable that you will be able to change during the course of application:

var myVar;
var myVar = 0;

Second of them, which allows you to declare the variables that cannot be changed (something like final in Java):

def myVar;
def myVar = 0;

Above I sad that variables with def cannot be changed. It is not entirely true. JavaFX provides mechanism called binding, which allows two variables to be connected. I'll not discuss it in here. It'll be described soon in the future.

At the beginning I wrote that you do not need to declare the type of the variable. You can do it if you want. Here is the way you do it:

var myInteger: Integer;
def myInteger: Integer = 0;

In that case the myInteger is declared to hold Integer value.
Similarly to other languages JavaFX has the following data types:

If you want in depth description of them, you should consult JavaFX API:

I would point your attention to the Number type. In the current version of the language this type behaves the same as Java's Float. The other type is Duration, which stores values like:
They represent the time duration. Once again it is wise to search the API for in depth description.

The same as Java, JavaFX assigns default values to variables which haven't been initialized with a value. Number gets 0.0, String "", Integer 0 and any reference type is initialized with null.


JavaFX scripting Welcome

Hello everybody,
Recently I started learning the JavaFX scripting language, the new kid  of Sun Microsystem. I decided that I will set up this blog in which I will present concepts of JavaFX in simple way. I'll describe syntax and logic behind the language as well as post simple JavaFX applications. Each of the will be accompanied by description of what the code do. Hopefully, we all will learn something new.

So what is JavaFX you might ask. Simply saying is scripting language that allows us to build Rich Internet Applications. It provides programmers with facilities to build really fancy UI. In addition applications written in this language can be run stand-alone on the desktop, they might be run in the browser and to surprise you, in the mobile phone. You do not need to change too much as most of the processing is handled by JavaFX engine. If you wish to get more information, you should have a look in here:

You'll find many interesting information on that site. 
Anyway, that's all for now. Watch out for new posts!