All the Interesting Things

This is a personal web log. All information posted here does not represent my employer. I do not speak for my employer.
Monday Aug 31, 2009

End-to-End Example of JavaFX Multi-user Online Application

JavaFX is an important client side technology. The term "RIA" contains two essential things: 'R' for "Rich" and 'I' for "Internet". This means a typical JavaFX application has a rich client and can utilize internet resources. To fully demostrate how a complete JavaFX application is built, I created a demo program. It is called 'Wish Tree' which allows people to share wishes on a tree. Every wish is denoted by a colorful lucky star hanging on the tree. To make an online wish, just click on anywhere on the tree and enter your wish. People can click on an exsiting star to view the wish. The wisher can update his/her wish as well. If multiple users are running the application, they see the same tree and wishes(stars). You can click on the below screenshot to start the demo application:

click to start wish tree online program

The architecture of this application is delineated in the below figure. At first, the JavaFX client gets launched from a browser by Java Web Start technology. Then the client connects to the web server to get the data and draws the wish tree hanging with all the stars. The server PHP component gets data from the database and returns to the client. If a user makes a wish on the client, the data of the wish is sent to the server for persistence.

It is quite interesting to see there were already more than 30 people leaving their wishes on the tree since I released the application. If you are intersted in details of this demo, please visit the following articles:

JavaFX Multi-user Application Demo: Wish Tree Part 1
JavaFX Multi-user Application Demo: Wish Tree Part 2

Other related JavaFX articles:
JavaFX Scene in Swing       JavaFX API for Java
JavaFX Menu       How-to: Java Code Calling JavaFX API



Other unrelated links:
NASCAR Diecast Racing Car and Drivers Collectibles
NASCAR Diecast Car Jimmie Johnson NASCAR Diecast Car of Dale Earnhardt
New US Citizenship Test Questions
Free Online US Citizenship Practice Test
US American Citizenship Application Package

Thursday Jul 30, 2009

Thoughts on an JavaFX article

I read an article by Charles Ditzel on dzone.com. The article listed a few points that JavaFX should be improved on.

The first thing I agree on is the "Two-way Integration with SWING". SWING is probably the most important client side technology in Java. The current interoperability between JavaFX and Java is one way, i.e. JavaFX can use Java directly, not vice versa. I think it is necessary to create a JavaFX API for Java. The adoption of JavaFX will be greatly improved if we have the two-way integration.

The second thing is the "Lack of Control". I saw people are writing some controls to complement what are missing in the JavaFX API. For example, a JavaFX Menu is built by SWING Menu Classes. I am not sure whether more controls are planning in the coming JavaFX releases, but I think it is crucial for developers to turn into JavaFX and build anything practical.

The third thing is no visual development tool. Well, we all know that there should be a visual tool like other modern IDEs. I know some people should be working hard on it.

The next two things are Proprietary Framework and no modular system. I don't think we need to care much about this now. Open source issue can be dealt with later when JavaFX becomes more mature. Modular system is is so necessary for a scripting language.

The last thing is the roadmap of JavaFX. I would say we really want that as we then know where JavaFX is heading.

I would agree on most of points in the article. I hope in subsequent releases of JavaFX, we can have more improvement on interop and better tool. This will attract more developers from Java or other languages.

Relate articles:
How to show JavaFX Component in Java
How to Invoke JavaFX from Java?
Details on Interoperability between JavaFX and Java



other articles:
Diecast cars of NASCAR

Friday Jul 17, 2009

JavaFX Tricks: SWING Application Displays JavaFX Components

About a month ago, Amy Fowler posted an article about Mixing Swing and JavaFX in an application. The post introduced a few steps to convert SWING applications into JavaFX ones. As I understand it, this approach requires existing java(swing) application to be refactored into JavaFX using wrappers etc. Since JavaFX is still an evolving platform, I doubt people would actually do it.

In fact, I think it should be the other way around. The necessity of Java to call JavaFX is important to many existing Java applications including Swing applications. Why not JavaFX provides some official way to allow Java to call JavaFX features? We know there are a lot of good stuffs in JavaFX, such as animation, media handling, charting. These pieces are missing in Java SE versions. Suppose we could have JavaFX APIs for Java, they would provide great help to Java development. This also promotes a wider adoption of JavaFX among current Java developers.

For people interested in the tricks and techniques on JavaFX and SWING integration, an article on javafxgame.com describes in details. Basically, the open source project JFXtras has provided a way to put JavaFX Scene into a SWING container. You can check out the article for more details:

JavaFX Scene Embedded into a Swing JFrame.

Related articles:
Calling JavaFX from Java
Interoperability between JavaFX & Java


Unrelated articles:
American Immigration Guide for people who want to live and work in United States(some of my friends are still working hard to get this). Some other readers might be interested in how to get through the naturalization process to apply for US citizenship.
NASCAR Die-cast Models : A friend's NASCAR Diecast Models collection for his favorite NASCAR racing drivers, and other collectibles.

Sunday Jun 21, 2009

Pure Java Code to Invoke JavaFX Charting Features

From time to time, people asked questions like "how to call JavaFX from Java code?". After the release of JavaFX 1.0, I wrote a post Interoperability between JavaFX and Java. I discussed three possible approaches to invoke JavaFX features from the Java side. These approaches were:

1. The ScriptEngineManager class. It is based on JSR-223, the java scripting API, which allows a java program to call a script(such as JavaFX Script, javascript).
2. The JavaFX reflection API. It can probably call any classes in JavaFX.
3. The JavaFX class implements a Java interface so that a Java program can invoke the JavaFX class via the interface. The interface acts as a bridge between the two sides.

The third one seems the most elegant way to call JavaFX from Java. However, there is a drawback: the program should start from the JavaFX side. The reason is that it is simpler to use JavaFX code to instantiate the JavaFX classes which can be passed to Java code. Nevertheless, in some scenario, it would be better to start the program from the java side. For example, if you want to add in some JavaFX features to an existing large java application, it is better to have java code as the entry point. To solve this issue, I would introduce an approach for Pure Java Code to Call JavaFX Class. In fact, I am combining the essence of Approach 2 and 3 to create the below example.

Let's say we want to invoke the latest charting functions of JavaFX 1.2 from the java code. We will first use the JavaFX reflection API to instantiate the JavaFX class. We then use it via its java interface. So we define a Java interface first.

/*
 * JavaInterface.java
 *
 * @author Henry Zhang      http://www.javafxgame.com
 */
package javatest;
public interface JavaInterface {
  public void addData(String name, float data);
  public void showChart();
}

The next step is to create a JavaFX class MyChart to implements this interface:

/*
 * MyChart.fx
 *
 * @author Henry Zhang     http://www.javafxgame.com
 */
package javatest;

import javafx.scene.chart.PieChart;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.scene.chart.PieChart3D;

public class MyChart extends JavaInterface {
  var chartData :  PieChart.Data[] = [];
  
  public override function addData( l:String, v: Number):Void {
    var labelString = l;

    var data =  PieChart.Data {
      label : l
      value : v
      action: function() {
        println("{labelString} clicked!");
      }
     } ;

    insert data into chartData;
  }

  public override function showChart() : Void {
    var chart =
      PieChart3D {
        data : chartData
        pieThickness: 25
        pieLabelFont: Font{ size: 9 };
        pieToLabelLineOneLength: 10
        pieToLabelLineTwoLength : 20
        pieLabelVisible: true
        pieValueVisible: true
        translateY: -50
     };

    Stage {
      title: "PieChart Window"
      width: 520
      height: 300
      scene: Scene {
        content: [
          Text {
            font : Font {
                    size : 16
                   }
            x: 200
            y: 20
            content: "Pie Chart"
          },
          chart
        ]
      }
    }
  }
}

The last thing is to write the java main class JavaTest.

/* 
 * JavaTest.java
 * @author Henry Zhang    http://www.javafxgame.com
 */
package javatest;

import javafx.reflect.FXClassType;
import javafx.reflect.FXLocal;
import javafx.reflect.FXLocal.Context;
import javafx.reflect.FXLocal.ObjectValue;

public class JavaTest {
  public static void main(String args[]) {
    Context context = FXLocal.getContext();
    FXClassType instance = context.findClass("javatest.MyChart");
    ObjectValue obj = (ObjectValue)instance.newInstance();

    JavaInterface ji = (JavaInterface)obj.asObject();

    String [] labels = {"January", "Febuary", "March", "April"};
    int [] values = { 18, 20, 25, 37 };

    for ( int i=0; i < values.length; i++ ) {
      ji.addData(labels[i], values[i]);
    }

    ji.showChart();
  }
}

In the above code, there are three lines for instantiating a JavaFX class via reflection:

    Context context = FXLocal.getContext();
    FXClassType instance = context.findClass("javatest.MyChart");
    ObjectValue obj = (ObjectValue)instance.newInstance();
The next line is to convert the JavaFX instance into a java interface so that it can be used by Java code:
    JavaInterface ji = (JavaInterface)obj.asObject();

If you are using NetBeans IDE, you can set javatest.JavaTest as the main class in your project properties(so that it can be the entry point of your program). Build this project you will get a javatest.jar. Running this program produces the below screenshot:

Java PieChart via JavaFX

To run it from the command line, use the below command:

   javafx -jar javatest.jar

Actually, you could do it in the purest java style by including all the JavaFX runtime stuffs, the command would look like this:

 java -Djava.library.path="<path to javafx sdk lib>" 
     -classpath "<all javafx sdk jars>" -jar javatest.jar

Since there are many jar files used by the JavaFX, this purest java approach turns out to be very troublesome. I would rather use the javafx command, which is a wrapper of the above java command.

Please leave comments if you have any questions.

This article is cross-posted at Calling JavaFX Classes from Pure Java Code. The Chinese translation can be found at 用纯Java代码调用JavaFX的功能.

Thursday Jun 18, 2009

Pac-Man Game Demo-ed in JavaOne

JavaOne Speaker Stephen Chin told me that he demo-ed my Pac-man game in two of his sessions. Though I didn't attend the JavaOne event, I was happy to learn that the game was a huge hit in his sessions.

The game he showed on JavaOne was a WidgetFX widget that I wrote to answer Jim Weaver's challenge. He asked me to write a widget before the J1 event. Stephen even promised to show it on the stage if I could finish in time. I think it was fun so I gave it a try. The APIs of WidgetFX was simple to use so I finished the widget in just 2 days. Thanks Steve for showing it on the big stage.


JavaOne Pac-Man Game
JavaOne Pac-Man Game

The two JavaOne sessions were:

Pro JavaFX Platform: RIA Enterprise Application Development with JavaFX Technology

Getting Started with WidgetFX: Open-Source Widget Desktop Platform with JavaFX Technology

Other JavaFX articles:

Develop Games in JavaFX
How to Write Pac-Man Game in JavaFX
Pac-Man Widget for WidgetFX 1.2
WidgetFX Game Widgets: Pac-Man
My First JavaFX Game Demo
JavaFX Discussion Blogs
JavaFX Game Articles

The Featured Articles on insideRIA.com:

May - June, 2009: Writing the Pac-Man Game in JavaFX

Saturday Jun 13, 2009

The Final Article on JavaFX Pac-man Game

This week, my last article of a series, "Writing the Pac-Man Game in JavaFX Part 5", is published. This article detailed the chasing algorithms of the ghosts. This is probably one of the most interesting things in the code.

There are a few things we need to consider when designing an algorithm of the ghosts, such as effectiveness, randomness, simplicity. You can refer to the article about considerations on these aspects. An excerpt from the article is listed below in blue text. It discussed the choice of a proper algorithm. This algorithm not only serves as the chasing logic, it can also control the escaping behavior of the ghosts.

. . . . . .

After some thinking, I found that the distance between a ghost and the Pac-Man is a good ranking metric. The shorter the distance is, the higher the score is given to a particular choice. The advantages of using the distance as a metric are obvious. It is very simple and can be caculated easily. Besides, this algorithm makes a ghost move in the direction that has the shortest distance to the Pac-Man. To illustrate this algorithm, let's look at the below figure.

In the figure, the ghost Blinky is moving into an intersection from the right to the left. When it reaches the intersection, it has three possible choices of its next movement: to go up, to go down and to continue heading left. Going down is not a valid move because it hits the border of the maze. So we need to compare the other two options. The below table shows the computation of the distance of the two possible moves:

ChoiceX distanceY distanceTotal
Intersection31013
Up3912
Left41014

As shown in the table, the distance from the intersection to the Pac-Man character is 13 (The distance between two adjacent dots is 1). If Blinky goes up, the distance is reduced to 12. If it heads left, the distance becomes 14. Therefore, going up seems a better choice for Blinky. In this way, Blinky should be able to get closer and closer to the Pac-Man and eventually catches him.

Of course, this simple algorithm does not take into consideration for the walls in the maze. For this reason, sometimes the calculated score does not in fact represent the shortest path. However, this inaccuracy makes the ghosts appear "stupid" in the game, which is the randomness we want to achieve in the behavior. So we are going to implement it in our code. We rewrite the class MoveDecision. When the function evaluate() calculates a score, it takes in two arguments: the reference to Pac-Man instance and whether the ghost is in a hollow state. The variable distance is used to compute the score. If the ghost is going after the Pac-Man character, the score is 500-distance, which means a shorter distance yields a higher score. If the Pac-Man is hunting the ghosts(when they are hollow), the score is caculated as 500+distance. This makes the ghosts running away from the Pac-Man.

. . . . . .

Now that all the articles had been published and I hope you enjoyed reading them. The game was originally written in JavaFX 1.0, and was compatible with JavaFX 1.1. Because multi-inheritance was removed in JavaFX 1.2, there is some minor changes to the code. The code for JavaFX 1.2 can be download from JavaFX Demo Game Programming.

You can now click on the below image to play the completed Pac-Man game, it is based on the newly released JavaFX 1.2 . With the improved performance, the game is much faster and can run very smoothly.


click to run

click to run

Related Articles:
JavaFX Game Article
Develop Games in JavaFX
JavaFX MineSweeper Demo Game
JavaFX Demo Game: LinkUP
WidgetFX Game Widgets: Pac-Man
My First JavaFX Game Demo
JavaFX Discussion Blogs
JavaFX 实例、教程、例子和编程示范、讲座
JavaFX Guy的技术博克
JavaFX交流:技术应用实例、中文教程、例子和示范

The Pac-Man Game articles:

May 14, 2009: Writing the Pac-Man Game in JavaFX - Part 1
May 21, 2009: Writing the Pac-Man Game in JavaFX - Part 2
May 28, 2009: Writing the Pac-Man Game in JavaFX - Part 3
June 4, 2009: Writing the Pac-Man Game in JavaFX - Part 4
June 11, 2009: Writing the Pac-Man Game in JavaFX - Part 5

Friday Jun 05, 2009

Latest Article on Writing the JavaFX Pac-Man Game

My latest article of a series, "Writing the Pac-Man Game in JavaFX Part 4", was out on June 4. The articles are getting more and more interesting now.

In this article, the interaction between Pac-Man character and the ghosts was introduced in details. The article showed how to determine whether the Pac-man character and a ghost touched each other. A simplified equation was applied to achieve better performance. When Pac-man touches a ghost, he can eat it if the ghost is hollow. The ghost then is thrown back to the cage again. Otherwise, the ghost eats the Pac-man, at this moment, an animation of showing a dying Pac-Man appears. This is in fact a shrinking circle which disappears at the end of the animation. The animation is accomplished by the DyingPacMan class.

The below figure depicts the animation process of the dying Pac-man character.

shriking pac-man

The code of DyingPacMan.fx is listed below:


public class DyingPacMan extends Arc {
 
   var timeline = Timeline {
      repeatCount: 1
      keyFrames: [
        KeyFrame {
           time: 600ms
           action: function() {
           // hide the pacMan character and ghosts before the animation
              maze.pacMan.visible = false;
              
              for ( g in maze.ghosts ) {
                 g.hide();
              }
              visible = true;
            }
           values: [ startAngle => 90, length=>360 ];  
         },
        KeyFrame {
           time: 1800ms
           action: function() {
              visible = false;
            }
           values: [ startAngle => 270 tween Interpolator.LINEAR,
                     length => 0 tween Interpolator.LINEAR ]
         },
      ]
    }
 
 ... code omitted ...
}

As you can see it in the code, there are two keyframes of the animation. Interpolations of two instance variables, startAngle and length, are involved during the animation. To better illustrate this process, the below figure shows the change of the shape against a timeline.
timeline pac-man

Hope you enjoy reading the articles. You can use arrow keys to play the current version of the game. The ghosts are moving randomly which makes the game less challenging. In the next article, I will introduced a better algorithm. Try it by clicking the below screenshot:

click to run

click to run

Related Articles:
More on JavaFX Games: Develop Games in JavaFX
JavaFX MineSweeper Demo Game
JavaFX Demo Game: LinkUP
WidgetFX Game Widgets: Pac-Man
My JavaFX Demo Game: Pac-Man

Thursday May 28, 2009

3rd Article on Writing the JavaFX Pac-Man Game

The latest JavaFX article of writing the Pac-Man game is published today. It is the third out of a five-article series: "Writing the Pac-Man Game in JavaFX - Part 3".

In this article, the ghosts are introduced. The animation of the ghosts are almost the same as the Pac-Man character. It is basically moving a CustomNode and switching the images. There are three sets of images for the animation: normal, hollow and flashing. The moving algorithm of the ghosts is the heart of the code. In this article, for simplicity, a random moving algorithm is applied. A more complicated moving behavior of the ghosts will be introduced in Article 5. Click on the below image to try the program so far. The Pac-man and ghosts cannot eat each other even they meet in the maze.



Related Articles:

Pac-Man Game WidgetFX Widget
JavaFX Game Example Code: MineSweeper
JavaFX Game Demo Example: Pac-Man

Other links:

Applicant of American Citizenship Information, software and guide.
Guide American Citizenship in United States
Canadian Citizenship Application and Practice Exam
Haining Zhang

Thursday May 21, 2009

Second Article on Writing the JavaFX Pac-Man Game Published

The second article of a series, "Writing the Pac-Man Game in JavaFX - Part 2", is published today.

In the first article, I introduced a data model expressed in Java and the JavaFX drawing logic of the maze. In the 2nd article, the animation of the Pac-Man character is detailed. When you are reading, you can click on the java web start links to see the Pac-Man opening and closing mouths, and gradually moving inside the maze. The keyboard handling logic is introduced as well.

Some JavaFX features demostrated in these two articles include:

. shapes
. animation
. keyboard handling
. java code integration
. Transfromation

Hope you can enjoy reading the articles. You can use arrow keys to control the Pac-Man character to move around and gobble dots. Try the never-to-die version of the game by clicking the below screenshot:

click to run

click to run


Other Related Articles:
Develop Games in JavaFX
JavaFX Blogs: Tips, Tricks, Programming Sample Code
My JavaFX Demo Game: Pac-Man

Monday May 18, 2009

JavaFX Demo Program: Wish Tree

To give some fun to my kids, I wrote a small JavaFX program to let them make wishes on a wish tree( such as 'I want a Barbie'). If they do something good, they may be awarded a wish coming true. :)

This program uses effect classes of JavaFX API to create the scene. Colorful stars can be placed on the tree to stand for wishes. More details inlcluding source code of the program can be found here: JavaFX Wish Tree.

You can click on the below web start image to start placing your wishes on the tree now. Just click on the tree and enter your name and wishes. Enjoy! (JDK 1.5+, better with JDK 1.6 U10)

Click to start JavaFX Wish Tree

Click to start JavaFX Wish Tree

Click to start JavaFX Wish Tree



Other Posts of JavaFX:
Wish Tree in JavaFX
Writing the Pac-Man Game with JavaFX
JavaFX Game Sample Code
JavaFX例子、实例、编程和源程序
JavaFX Guy的技术、教程、博客
Haining Zhang


Archives
Links
Referrers