Arun Gupta, Miles to go ...

JavaFX 1.0 launched - access services hosted on embedded GlassFish

Today Sun announces the availability of Java FX 1.0.

JavaFX 1.0 is a rich client platform for creating and delivering Rich Internet Applications across all screens (desktop, browser, and mobile) of your life. It consists of the following key components:

JavaFX SDK includes JavaFX script compiler and runtime tools, and a host of libraries to create RIAs for desktop, browser and mobile platforms, command-line tools & Ant tasks and other goodies. NetBeans 6.5 support (as plugin or bundled with IDE) that allows to build, preview and debug JavaFX applications using NetBeans IDE. If you prefer CLI support then SDK can be downloaded. Production Suite is a suite of tools and plugins for creative tools (such as Illustrator CS3+) that allows graphical assets to be exported to JavaFX applications.

This blog shows how to create a simple JavaFX application using NetBeans IDE. The application plays a movie, allows the viewer to cast a vote if they liked it, and see aggregate response from other viewers. The application is developed using NetBeans 6.5, JavaFX 1.0 plugin, and coded using JavaFX Script. The voting engine is deployed as a RESTful Web service using Jersey on GlassFish.

1. In NetBeans 6.5 IDE, install JavaFX plugin as explained here and RESTful Web services plugin as explained here. Both the plugins may be installed in one step by selecting the required plugins together.
2. Download NetBeans project for JavaFX client from here and add Jersey dependencies as explained in bullet #5 below. 
3. Download Web service endpoint Maven project from here and deploy the endpoint as explained in bullet #4 below.
4. Run the JavaFX application as explained here.

1. In NetBeans 6.5, install "JavaFX SDK" plugin.  In the "Tools" menu, "Plugins", search on "JavaFX", select "JavaFX SDK" and click on "Install".
2. Create a new project of type "JavaFX", "JavaFX Script Application". Take the default values as shown below:
   
   
   
   and click on "Finish".
3. The source code for this class can be downloaded from here or alternatively constructed as explained in the sub-bullets.
1. In the newly created class, change the Stage (root area for all scene content) to:
   
   

   Stage {    title: "GlassFish Media Player"    width: 625    height: 360    resizable: false    scene: myScene }

2. Create a scene that contains the view of the media to be played and controls the display of the Vote or Result nodes:
   
   

   var myScene: Scene = Scene {    content: MediaView {            fitWidth: 625            fitHeight: 360            mediaPlayer: bind myPlayer            onMouseEntered: function( e: MouseEvent ):Void {                println("mouse entered");                if (voted == false) {                    insert Vote{} into myScene.content;                } else {                    insert Result{} into myScene.content;                }            }            onMouseExited: function( e: MouseEvent ):Void {                delete myScene.content[1]            }        } }

3. Create a Media Player to use with the scene:
   
   

   var myPlayer: MediaPlayer = MediaPlayer{     autoPlay: true     media: bind myMedia };

4. Create the media object to be used with the Media Player:
   
   

   var myMedia: Media = Media {     source: "http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_2957290001_DayEarth-Bluray.flv"    };

   
   You can change the location of the movie here in the media player. For example, changing it to "http://mediacast.sun.com/users/ArunGupta/media/v3prelude-nb65-webapp.flv" will start playing the screencast #27.
   
5. Create a Vote class that is a CustomNode and appears when a user's mouse enters the scene where the video is playing. The user can select whether he likes the clip or not and the vote is recorded making a Web service call using Jersey Client APIs:
   
   

   class Vote extends CustomNode {    override function create():Node {        return Group {            content: [                Rectangle {                    fill: Color.GREEN                    x: 185                    y: 145                    width: 243                    height: 38                    arcWidth: 20                    arcHeight: 20                },                Text {                    x: 195                    y: 170                    fill: Color.WHITE                    font: Font {                        size: 18                    }                    content: "I love it"                },                Rectangle{                    x: 191                    y: 148                    smooth: false                    width: 73                    height: 32                    fill: Color.TRANSPARENT                    onMouseClicked: function( e: MouseEvent ):Void {                        println("clicked I love it");                        voted = true;                        wsClient.voteLoveIt();                        delete myScene.content[1]                    }                },                Text{                    x: 305                    y: 170                    fill: Color.WHITE                    font: Font {                        size: 18                    }                    content: "Not so great"                    },                Rectangle {                    x: 301                    y: 148                    smooth: false                    width: 118                    height: 32                    fill: Color.TRANSPARENT                                       onMouseClicked: function( e: MouseEvent ):Void {                        voted = true;                        println("clicked Not so great");                        wsClient.voteNotSoGreat();                        delete myScene.content[1]                    }                }            ]        }    } };

6. Create a Result class that is a CustomNode and simply reports on how many voters like this clip:
   
   

   class Result extends CustomNode {    override function create():Node {        var resultPercent = wsClient.showResults();        var resultString = "{resultPercent} voters liked this clip";        return Group {            content: [                Rectangle {                    fill: Color.BLUE                    x: 187                    y: 145                    width: 244                    height: 38                    arcWidth: 20                    arcHeight: 20                    onMouseClicked: function( e: MouseEvent ):Void {                        delete myScene.content[1]                    }                },                Text {                    x: 199                    y: 170                    fill: Color.WHITE                    font: Font {                        size: 18                    }                    content: resultString                }            ]        }    } };

7. Add two instance variables:
   
   

   var voted = false; var wsClient = new WebserviceClient;

   
   The first variable captures if the viewer has already voted and the second variable is an instance to the RESTful Web service client.
   
8. Add the following import statements:
   
   

   import javafx.scene.*; import javafx.scene.input.MouseEvent; import javafx.scene.media.Media; import javafx.scene.media.MediaPlayer; import javafx.scene.media.MediaView; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.scene.text.Font; import javafx.scene.text.Text; import javafx.stage.Stage;

   
   "Fix Imports" should be able to fix them and bug #154307 is already filed for that.
4. Create a new class that is used to capture the Vote as:
   
   

   @javax.xml.bind.annotation.XmlRootElement public class VoteBean {     public static enum VOTE { LOVE_IT, NOT_SO_GREAT };         public VOTE vote;     public VoteBean() { vote = VOTE.LOVE_IT; }     public VoteBean(VOTE vote) {         this.vote = vote;     } }

   
   This is a simple Javabean with a standard JAXB annotation. This ensures that XML is used as the data format for transfering results between client and endpoint. The source code for this class is available here.
   
5. Add Jersey libraries to the project by right-clicking on Project, select Libraries, click on "Add Library...", select "JAX-RS 1.0" and "Jersey 1.0 (JAX-RS RI)", and click on "Add Library".
   
   
   
   If these libraries are not available then install the "RESTful Web Services" plugin from the Plugin Center.
6. And finally add the class that invokes the RESTful Webservice endpoint:
   
   

   public class WebserviceClient {     private static com.sun.jersey.api.client.WebResource createWebResource() {         return com.sun.jersey.api.client.Client.create().                 resource("http://localhost:8080/movie-feedback-webapp/webresources/myresource");     }     public static void voteLoveIt() {         createWebResource().type("application/json").                 post(new VoteBean(VoteBean.VOTE.LOVE_IT));     }     public static void voteNotSoGreat() {         createWebResource().type("application/json").                 post(new VoteBean(VoteBean.VOTE.NOT_SO_GREAT));     }     public static String showResults() {         return createWebResource().get(String.class);     } }

   
   The Webservice endpoint will be hosted at "http://localhost:8080/movie-feedback-webapp/webresources/myresource". A WebResource is created from the Client. The POST methods are used to cast the user vote and GET method is used to retrieve the aggregated results. The source code for this class is available here.

1. Create and deploy a RESTful Web service endpoint
1. Create a template RESTful Web service endpoint as described in TOTD #56. Lets use the artifactId as "movie-feedback-webapp".
2. Create the bean "VoteBean" in "org.glassfish.samples" package. This is the exactly same bean used earlier by the client:
   
   

   @javax.xml.bind.annotation.XmlRootElement public class VoteBean {     public static enum VOTE { LOVE_IT, NOT_SO_GREAT };     public VOTE vote;     public VoteBean() { vote = VOTE.LOVE_IT; }     public VoteBean(VOTE vote) {         this.vote = vote;     } }

3. Update the generated resource
1. Add @com.sun.jersey.spi.resource.Singleton as class annotation so that only one instance of the resource is created for the entire web application. This allows to save state (preferences from other users) in the RESTful resource.
   
2. Add two instance variables:
   
   

   int loveIt;     int noSoGreat;

3. Add a method that will process HTTP POST requests as:
   
   

   @POST     public void postOneVote(VoteBean bean) {         if (bean.vote == VoteBean.VOTE.LOVE_IT) {             loveIt++;         } else {             noSoGreat++;         }         System.out.println("In POST: " + bean.vote);     }

   
   This method stores the vote in the resource. The handling of POST request messages by Jersey is explained in TOTD #58.
   
4. Add a method that will process HTTP GET requests as:
   
   

   @GET     @Produces("text/plain")     public String getOpinion() {         if (loveIt == 0 && noSoGreat == 0)             return "No votes cast yet!";         return (loveIt * 100) / (loveIt + noSoGreat) + "%";     }

   
   This method calculates the percentage of viewers who liked the movie.
4. Deploy the endpoint using "mvn glassfish:run" in "movie-feedback-webapp" directory.

• How to install JavaFX capabilities to an existing NetBeans 6.5 installation
• How to create a simple JavaFX application that plays media files
• Integrate it with existing Java libraries (Jersey client libraries in this case)
• Invoke services hosted on GlassFish

Posted by Arun Gupta in webservices  |  Comments[13]