Deprecated: Assigning the return value of new by reference is deprecated in /home/dieajax/public_html/wordpress/wp-includes/cache.php on line 36

Deprecated: Assigning the return value of new by reference is deprecated in /home/dieajax/public_html/wordpress/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/dieajax/public_html/wordpress/wp-includes/theme.php on line 507
10 Minute Tutorial - JavaFX: Hello World : Die, AJAX!

10 Minute Tutorial - JavaFX: Hello World

Over the past couple of months, I wrote a number of Microsoft Silverlight tutorials both to learn Silverlight and help other developers ramp up their Silverlight skills quickly. Now however, I’ll turn my attention to one of Silverlight’s competitors: JavaFX. If you read the JavaFX section of my introductory post, you already know that Sun has taken a very different approach than Microsoft in implementing a framework for developing easily deployed, highly-interactive, “rich” applications. So, I want to jump right in and create an application that will have everyone hanging on the edge of their seat with enthusiasm (or rolling their eyes and groaning in almost physical pain): Hello World.

Prerequisites

QuickStart

If you want to see the result of this tutorial and you have installed all the prerequisites, then please download the ZIP file below, unzip it, open, edit compile.bat to match your directory structure and then run the compile.bat file.

You can find a screen shot of the running application, here.

Lesson

Step 1: Create the code

Similar to XAML, JavaFX’s main value lies in its ability to ease object initialization and event wiring. However, rather than use XML, Sun decided to create a language that looks like a long, lost cousin of Java itself. With this being my first JavaFX tutorial, I’ll take my time in building the sample code so I can provide some additional detail about the language as I go.

First, create a file named HelloWorld.fx. In it, import and declare a simple Stage object, like so:


import javafx.stage.Stage;
 
Stage {
 
}

Believe it or not, this is a complete JavaFX application. Undoubtedly, if you’ve programmed any Java at all, that import statement should look mighty familiar. :) As you would expect, the import statement makes other classes available for use in your application.

This application consists of nothing but a Stage object. According to the documentation, the Stage class contains all other “scene” content. In this context, the word “scene” references the concept of a “scene graph“. This comes directly out of Sun’s Project Scene Graph initiative. As a matter of fact, you can partially think of JavaFX as an easy way to initialize a scene graph for display. If you don’t know much about scene graphs, that’s okay. For now, just think of it as a hierarchy of objects or “nodes” (like a tree).

Step 2: Add attributes

Now, let’s assign some values to the attributes of this Stage:


import javafx.stage.Stage;
 
Stage {
  title: "Die, Ajax! - Hello World"
  width: 250
  height: 50
}

Every object can declare multiple instance variables, just like a regular Java object. In the code above, the “title”, “width”, “height” and “visible” variables get set using JavaFX’s name: value syntax.

Step 3: Add content

To make things interesting, let’s add text to the inside of our Stage:


import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
 
Stage {
  title: "Die, Ajax! - Hello World"
  width: 250
  height: 50
  scene: Scene {
          content: [
      Text {
        content: "Hello World!"
        x:0
        y:12
        font: Font {
          name: "Sans Serif"
          size: 12
        }
      }
          ]
  }
}

Using the same name value concept, we assign the attribute “scene” to a new instance of the Scene class. Note the lack of the “new” keyword. JavaFX knows, purely based off syntax, that it needs to create a new Scene object. Digging deeper, we fill the “content” attribute, an array, with a new instance of the Text class. The attributes set on the Text object shouldn’t require too much explanation. Interestingly though, I had to set the y-coordinate to 12 or the title bar would overlap part of my text. Needless to say, as a Windows programmer used to operating within the client area of a window, this took me by surprise :).

Also, note how easy hierarchical assignment is. No nasty add() calls cluttering the code. UI declaration happens quickly and remains relatively legible…all without paying the angle bracket tax. ;)

Since, I’m running out of places to shove “Hello World” into this application, let’s move on to compiling it.

Step 4: Compile it

When I first started researching JavaFX, all the tutorials I read leaned heavily on Netbeans to handle the compilation and exection of JavaFX applications. While I love NetBeans, I dodn’t want to install it just to get a taste of JavaFX. So, for my JavaFX tutorials, I will do all compiling from the command line. However, I should note that, as of right now, most articles highly recommend using an IDE like NetBeans to work with JavaFX.

That said…let’s get to typing. ;)

The JavaFX SDK installed a JavaFX complier for us called “javafxc”. It works similarly to the Java Compiler, “javac”, that we all know and love. Thus, we can compile the application like so (assuming you have JavaFX installed in its default directory):


"C:\Program Files\JavaFX\javafx-sdk1.0\bin\javafxc.exe" HelloWorld.fx

I wrote out the full default installation path to javafxc in my example, but you can assign a path variable making this unnecessary. Check the JavaFX SDK README file for more.

Step 5: Run it!

You can run JavaFX applications as applets, through Java Webstart or as desktop applications. Due to its simplicity, we’ll run this application as a desktop application, for now.

Similar to executing Java applications with “java” command, we use the “javafx” command to run a JavaFX application on the desktop:


"C:\Program Files\JavaFX\javafx-sdk1.0\bin\javafx.exe" HelloWorld

When you run it, you should see a window displaying “Hello World!”.

Conclusion

While playing around with JavaFX, I found myself experiencing a sort of Swing-deja vu, but with one small twist: it was kinda fun. Tedious method calling and instantiation get replaced with declarative initialization and event wiring all packaged in an easy to read scripting language. As you’ll see in future posts, easing the initialization of a few UI objects barely scratches the surface of what JavaFX can do. But for now, experiment with creating more complex UIs by expanding on the code I wrote above. Try not to have too much fun…and I really mean that :) …for old Java UI developers like me, this is the stuff dreams are made of.

Share and Enjoy:
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • Reddit
  • del.icio.us
Related Posts:
4 JavaFX tutorials for beginners
And, he’s back!
Birds of a Feather: Silverlight, Flex and JavaFX
About

Comments

Comments are closed.