To fully take advantage of the power of JavaFX 1.2, Stephen Chin just released the WidgetFX 1.2 API beta version. There is even a widget contest running until the end of July. [Update: Steve had released the WidgetFX 1.2 version on June 29. ]

Just before the JavaOne 2009, Jim Weaver asked me to write a widget for my JavaFX Pac-man game. The WidgetFX API was quite simple to use, so I finished it pretty soon. The game widget later got demo-ed on Jim and Steve’s JavaOne sessions. There was a small problem of the pac-man widget: it run relatively slow due to the performance issue of JavaFX 1.1. Since JavaFX 1.2 and WidgetFX 1.2 are ready now, I am modifying the code to see the improvement on performance.

First, the JavaFX code of the Pac-Man game needs to be modified a little bit for JavaFX 1.2. Since multi inheritance is gone, we need to use mixin classes now. You can refer to my articles on insideRIA.com for details of the code. Changes for JavaFX 1.2 were given on comments of Article 4 by Patrick Webster. I also added in a pausing key(”P” button) handling for the game. I compiled the game into a pacman.jar file.

The next step is to write the widget. Actually, the code is quite simple if you do not have stuffs like configuartion etc. Let’s look at the code below:

/*
 * PacManWidget.fx
 * http://www.javafxgame.com
 */

package pacmanwidget;

import org.widgetfx.Widget;

/**
 * @author Henry Zhang
 */

def defaultWidth = 528.0;
def defaultHeight = 576.0;

def maze =  pacman.Maze {};

var widget:Widget = Widget {
    width: defaultWidth
    height: defaultHeight
    aspectRatio: defaultWidth / defaultHeight
    content: maze
    resizable: false

    onDock: function():Void {
       maze.pauseGame();
    }
}

return widget;

In the standalone game, an instance of the Maze class was put into the content variable of a Stage. Now, instead of putting it into a Stage, we add it into a Widget. To do this, we can just set the content variable of a Widget instance. Other attributes of the Widget class are quite straightforward, mostly for resizing purposes. The next thing is to write a onDock() function to pause the game when the widget gets docked. The game can be resumed after pressing the “p” button when it is undocked.

The last thing is to deploy it on a web server. We need a JNLP file. Be sure to write the jnlp file of the JavaFX 1.2 style. Netbeans can generate the JNLP file which we can modify for deployment. I listed below part of my jnlp file. Besides the widget code PacManWidget.jar, there are supporting jar files( pacman.jar and WidgetFX-API.jar) under the /lib folder as well. Notice that there is a bug in the generated JNLP file by NetBeans 6.5.1: the <update> tag is missing a slash(/) at the end of the tag.

 . . . . . .
 <resources>
     <j2se version="1.5+" />
     <extension name="JavaFX Runtime"
        href="http://dl.javafx.com/1.2/javafx-rt.jnlp"/>
     <jar href="PacManWidget.jar" main="true"/>
     <jar href="lib/pacman.jar"/>
     <jar href="lib/WidgetFX-API.jar"/>
 </resources>
 <application-desc main-class="com.sun.javafx.runtime.main.Main">
    <argument>MainJavaFXScript=pacmanwidget.PacManWidget</argument>
 </application-desc>
 <update check="background" />
 . . . . . .

Now, you can click on the below button to start the Pac-man widget for JavaFX 1.2. Enjoy!

Pac-Man Widget 1.2

During the weekend, JavaFX expert Jim Weaver had laid a challenge on me to create a WidgetFX widget of the Pac-Man Game, a JavaFX demo game that I introduced in insiderRIA.com. The author of WidgetFX, Stephen Chin even offered to show it in JavaOne if I can finished in time(before June 2-3). With about one week to go, I think it is interesting and fun to give it a try. I will keep track of my progress in this post. I have installed the WidgetFX package before, but to get a clean start, I re-downloaded the source code from Widgetfx.org. Here is my progress: (updated continuously) May 24: Downloaded source code from http://code.google.com/p/widgetfx/downloads/list. Clicked on the Launch Dock link on the front page of widgetfx.org and it run successfully on my computer(Windows XP, with JDK 1.6U13). Read some document from project home. Try to look at some WidgetFX samples, but couldn’t find most of the source code. Anyway, it is not bad for the first day. May 25: Got Steve’s response with a tutorial on Calendar widget. This tutorial is quite helpful. From that example, I learnt that the widget container is fundamentally a Stage Class. That’s great! We can put everything into an instance of Group and then put the Group into the Widget class. Because in my Pac-Man Game, I only have a Maze instance in the Stage class, this becomes quite simple now. I quickly modified the Calendar example and put my Maze instance into the Widget. After adjusting the width and height, it was just simply working! (see the image on the left) Further testing showed that I needed to write some code to handle the docking and resizing events. I will read some more documents and find out more details tomorrow.

May 26:

Steve provided some useful hints on how to deal with the resizing of the widget. It looks like the WidgetFX API is quite intelligent on resizing the window. What I need to do is to define default width/height and aspectRatio and everything else will be taken care of. I modified my original Pac-Man code to allow the game to be paused. Now the game is fully working as a widget. When it is docked, the game will be automatically paused. When it is undocked, it zooms to its original size and the player can press ‘P’ button to continue playing. Click on the below button to see how the Pac-Man widget looks like:

Pac-Man Widget (JavaFX 1.1)


or try widget for WidgetFX 1.2 version

Pac-Man Widget 1.2


Some issues remains: the game is kind of slow on my laptop(single core, 1.6Ghz Intel, WinXP). I am checking with Steve to see if he has any suggestions.