Lab-9005: Java Strikes Back on Client Side: Easier Development and Deployment

Expected Duration: 100 minutes

Exercise 3: Revolutionary in Deploy: Deploy on Drag (20 minutes)

 

This exercise introduces a revolutionary way of deploying Java/Java FX application as draggable pieces in browsers. And also we will learn how developers can customize the behavior of application when being dragged.


Background Information

 

Introducing Deploy on Drag

 

Generally, web applications and stand alone desktop applications are very different. Web applications are cross platform, easy to deploy, but all features are limited by the browser. Everytime users want to relaunch the application, they have to open the browser first and point it to certain URLs. On the other hand, stand alone desktop applications are eaiser to start, more powerful in features and user experiences, but they are relatively harder to deploy.

With the new Java plugin feature introduced in Java SE 6 update 10, Java applets running in a browser, can be dragged out of browser, running on desktop independently. Also user could save a shortcut on the desktop for the applet dragged out, so that the shortcut can be used to launch the application directly without opening the browser. Java FX can take this advantage as well. By this way, the boundary between web applications and desktop applications is removed. We will have rich experienced application deployed easily via web.


Steps to Follow

 

Step 1: Opening the Project

  1. Click the Files Tab in the NetBeans IDE, and then expand the HelloApplet Node.

    Open Hello Applet
  2. Double-click on the file HelloApplet.java and add the following code to the end of the file.


    public boolean isAppletDragStart(MouseEvent e) {
            System.out.println("isAppletDragStart ");
            return (e.getSource() == this && e.isAltDown());
    }


    By default, the gesture to drag the applet out of the web browser is Alt + Left click + Drag. On some platforms (X11 in particular), this particular gesture is usually intercepted by the window manager to move entire windows around the desktop. You can customize exactly what gesture initiates the drag operation by providing a public isAppletDragStart method on your applet class.


  3. Double click on the file demo.html as shown below.

    Open Demo HTML
  4. Modify the code of demo.html by adding one parameter into the deployment tools. Then the deployment code looks like:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2 <html>
    3 <head>
    4 <title></title>
    5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    6 <script src="deployJava.js"></script>
    7 <script language="javascript">
    8 function go1() {
    9 var value1 = HelloApplet.getNameValue();
    10 WorldApplet.setLabelText("Value from HelloApplet: " + value1);
    11 }
    12
    13 function go2() {
    14 var value1 = form1.foo.value;
    15 WorldApplet.setLabelText("Value from HTML Form: " + value1);
    16 }
    17
    18 function f() {
    19 window.alert("abc");
    20 return "abc";
    21 }
    22 </script>
    23 </head>
    24 <body>
    25 <table border="1">
    26 <tr>
    27 <td>Applet 1</td>
    28 <td>HTML FORM</td>
    29 <td>Applet 2</td>
    30 </tr>
    31 <tr>
    32 <td>
    33
    34 <script>
    35 var attributes = {codebase:'.',
    36 code:'demo.applets.HelloApplet.class',
    37 width:200, height:200,
    38 archive: 'dist/HelloApplet.jar',
    39 id:'HelloApplet',name:'HelloApplet',
    40 mayscript:'false'} ;
    41 var parameters = {draggable:'true'} ;
    42 var version = '1.6' ;
    43 deployJava.runApplet(attributes, parameters, version);
    44 </script>
    45 </td>
    46 <td>
    47 <form name="form1">
    48 JavaScript Button: <input type="button" value="Put Applet 1 Value to Applet 2" onclick="go1()"/>
    49 <br/>
    50 <hr/>
    51 <input name="foo" size="10"/> <input type="button" value="Put form Value to Applet 2" onclick="go2()"/>
    52 </form>
    53 </td>
    54 <td>
    55
    56 <br/> Applet deployed with deployment tools: <br/>
    57 <script>
    58 var attributes = {codebase:'.',
    59 code:'demo.applets.WorldApplet.class',
    60 width:200, height:200,
    61 archive: 'dist/HelloApplet.jar',
    62 id:'WorldApplet',name:'WorldApplet'} ;
    63 var version = '1.6' ;
    64 deployJava.runApplet(attributes, parameters, version);
    65 </script>
    66
    67 </td>
    68 <tr/>
    69 </table>
    70
    71 </body>
    72 </html>


    The key point is to add line 41marked as red to indicate that this applet implements the draggable feature to the JVM.

  5. Run the Applet.
    Open the file explorer and navigate to the directory containing the file demo.html and then double click the file, the applet will run in the browser as shown below.

    Run Demo


  6. Drag the Applet1 out of the browser.
    Mouse click on the gray area of Applet1 first and then press alt key on the keyboard, then drag the Applet1 from browser shown below.
    Drag out

    Even after the Applet1 is dragged out of the browser, it can continue comunicate with components in the browser before. Please try to click the button in the Applet1 and the HTML FORM.

Step 2: Make Java FX application draggable

In this step, we're going to make our loveletter application draggable

  1. Open MyLoveLetter.html in the <lab_root>/javaseclient/execise/page/ directory with an editor. Add the draggable parameter to the deployment script code and set its value to true as follows.

            <h1> A Letter from an Unknown Geek</h1>
            <script src="http://dl.javafx.com/1.1/dtfx.js"></script>
            <script>
                javafx(
                {
                    archive: "LoveLetter.jar",
                    draggable: true,
                    width: 600,
                    height: 400,
                    code: "loveletter.Letter",
                    name: "LoveLetter",
                    id: "MyApplet"
                }
            );
            </script>
                                                            
  2. Save the file, open it by the system default browser.
  3. Press Alt key on the keyboard, while do a mouse drag in the area of the application frame, now you should be able to drag the application out of the browser.

    When the web page is still being opened, the application which has been dragged out can still response to any javascript events we defined in the pervious execises. That means, as long as the web page is open, even the application is dragged out, the bridge between FX application and the web page is still there. If the little close button on the right top of the FX application frame is clicked, the FX application will be restored back into the web page.

  4. Now let's close the browser. The FX application instance is still running. Thus the application has been deployed on to the desktop. The bridge between FX application and web page is gone, because the page is no longer there, though. When the little close button on the right top of the application frame is clicked, the application will be terminated, however, a dialog box will popup at the first time, asking the user to save a shortcut for the application on the desktop or not. User will be able to launch the FX application as a stand alone application next time just by clicking the shortcut on the desktop.

Step 3: Make the FX application response drag events

Sometime, application needs to have specific behaviors according to the different stages when drag is happening. As we have learnt in the previous steps, there are a bunch of callback methods will get called related to different events happening during the drag process. In Java FX, those methods defined in javafx.stage.AppletStageExtension class. they are:

  • onAppletRestored
  • onDragFinished
  • onDragStarted
  • shouldDragStart

In this step we are going to connect an animation in FX code with the drag start event

  1. Open LoveLetter project in Netbeans.
  2. Double click Letter.fx to open it in the editor window. Modify the code as follows

    package loveletter;
    
    import javafx.stage.Stage;
    import javafx.scene.Scene;
    ......
    import javafx.scene.shape.MoveTo;
    import javafx.scene.shape.QuadCurveTo;
    import javafx.stage.AppletStageExtension;
    
    ......
    
    function run(__ARGS__: String[]) {
        Stage {
            title: "A Letter from an Unknown Geek"
            width: fwidth,
            height: fheight
            scene: Scene {
                width: fwidth,
                height: fheight
                content: [
                    avator,
                    smurfette,
                    lips,
                    rose,
                    buttons,
                    heartflying
                ]
            }
            extensions: [
                AppletStageExtension {
                    onDragStarted: function():Void {
                        toGetHer.play();
                    }
                }
            ]
        }
    }
    
                                                            

    toGetHer is an animation that the smurf moved up to the smurfette and the smurfette kisses him. Let's see the final result.

  3. Right click LoveLetter project in the Projects tag window of Netbeans, select Build Project from the context menu to re-create the jar file. Copy LoveLetter.jar file from <lab_root>/javaseclient/execise/LoveLetter/dist directory to <lab_root>/javaseclient/execise/page. Replace the original file there. Open MyLoveLetter.html with the browser. Alt Mousedrag the application out of the browser. Once the drag happens, you will see the effect.


Summary

 

In this exercise, you have learnt the revolutionary way of deploy Java/Java FX application on drag. Also, Java/Java FX application can easily response drag events by implementing a set of callback methods if needed.

 

Back to top
To summary