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
- Click the Files Tab in the NetBeans IDE, and then expand
the HelloApplet Node.

-
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.
- Double click on the file demo.html as shown below.

-
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.
- 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.

- 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.

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.
In this step, we're going to make our loveletter application draggable
-
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>
- Save the file, open it by the system default browser.
-
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.
-
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.
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
- Open LoveLetter project in Netbeans.
-
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.
-
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
|