98..Etc/JavaFX2008. 10. 17. 17:10

JavaFX DEMO Applets

Running Draggable JavaFX Applets

Sang Shin, sang.shin@sun.com, Sun Microsystems, www.javapassion.com/javafx

The new Drag'able feature in Applet in Java SE 6 update 10 unifies user's browser and desktop experience - The new Plug-In allows you to drag an Applet off from a browser to your desktop and allows your Applet continues to run. In addition to dragging an Applet off from a browser, when user closes the browser, a shortcut can also be created from this Drag'able Applet. The shortcut utilizes Java Web Start technology and allow user to launch the Applet with Java Web Start without opening a web browser. Thus, this feature unifies desktop application deployment via Java Web Start technology, and Applet deployment inside the browser.

Acknowledgments: The sample applications are from Joshua Marinacci and Chuk-Munn Lee.

Expected duration: 60 minutes (excluding homework)

Software Needed

JRE 6 update 10 (download)

The installation instruction of JRE 6 update 10 is described belo w.

Firefox 3 (download)

The installation instruction of JRE 6 update 10 is described below.

4611_javafxdraggableapplets.zip (download)

It contains this document and the lab contents

Download it and unzip in a directory of your choice

OS platforms you can use

Windows
Solaris x86, Solaris Sparc
Linux
Mac OS X

Change Log

June 16th, 2008: Created

Lab Exercises

Exercise 1: Download and Install JRE 6 Update 10 (10 minutes)
Exercise 2: Download and Install Firefox 3 (10 minutes)
Exercise 3: Run StopWatch Drag'able JavaFX Applet (20 minutes)
Exercise 4: Run Magnifying Glass Drag'able JavaFX Applet (20 minutes)
Exercise 5: Run LiveConnect Dragganle JavaFX Applet (20 minutes)

Homework Exercise (for people who are taking Sang Shin's Web Services Programming online course")

Exercise 1: Download and Install JRE 6 Update 10

You will have to use JRE 6 Update 10 in order to run the StopWatch application leveraging the new Java plug-in architecture.

(1.1) Download JRE 6 Update 10

1. From your browser go to, http://java.sun.com/javase/downloads/index.jsp.

(1.2) Install JRE 6 Update 10

(1.3) Verify that JRE 6 update 10 is installed

Exercise 2: Download and Install Firefox 3

You will need either Firefox 3 or IE 7 in order to run StopWatch application.

(2.1) Download Firefox 3

1. Go to http://www.mozilla.com/en-US/firefox/all-rc.html.

(2.2) Install Firefox 3

<To do: Include installation of Firefox 3>

(2.3) Verify that Firefox 3 is using JRE 6 Update 10

1. Verify that Firefox 3 is using JRE 6 Update 10 from the browser.

In the URL field, type in about:plugins.
Make sure you see Java(TM) Platform SE 6 U10 and its Enabled column says Yes.

2. Verify that Firefox 3 is using JRE 6 Update 10 from the Add-ons page. (This is an optional step.)

Select Tools from the top-level menu and select Add-ons in the Firefox 3.

Make sure you see Java(TM) Platform SE 6 U10 is in enabled state.

Exercise 3: Run StopWatch application

The StopWatch application is compiled version of JavaFX application. The StopWatch application is provided as part of this hands-on lab zip file and located under <LAB_UNZIPPED_DIRECTORY>/javafxstopwatch/samples/StopWatch directory.

(3.1) Open index.html of the Stopwatch application from local file system

1. Open index.html of the application from the local file system.

Within Firefox 3 browser, select File->Open File.

Go to <LAB_UNZIPPED_DIRECTORY>/javafxstopwatch/samples/StopWatch directory.
Select index.html.
Click Open.

(3.2) Observe the stopwatch

1. Click the start button of the stopwatch.

2. Observe that the stopwatch now starts timing.

3. While holding ALT key, drag the stopwatch from the browser to the desktop.

Observe that the browser now has the Java logo (instead of the stopwatch) and the stopwatch on the desktop still works.
If you want to move the stopwatch around on the desktop, hold ALT key and move it around.
Note: Somehow I could not capture the stopwatch on the desktop.

4. Close the browser.

You can close the browser now and the stopwatch on the desktop still works.

(3.3) Look under the hood of the application

1. index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Java FX Applets</title>
<style type="text/css">

</style></head>
<script src="http://java.com/js/deployJava.js"></script>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width:1000px" align="center">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="header-left.png" width="592" height="147" /></td>
<td width="100%" background="header-center.png"> </td>
<td><img src="header-right.png" width="19" height="147" /></td>
</tr>
</table></td>
</tr>
   <tr>
<td colspan=3 align="center">
<applet width="350" height="350">
<param name="draggable" value="true">
<param name="image" value="spinner.gif">
<param name="boxborder" value="false">
<param name="centerimage" value="true">
<param name="boxbgcolor" value="#3b3b3b">
<param name="boxfgcolor" value="#ffffff">
<param name="jnlp_href" value="Stopwatch.jnlp">
</applet>
</td>
   </tr>
   <tr>
<td colspan=3 align="center"><h3>Stopwatch</h3>
<p>Need to keep track of how long it takes to run around your office? How long a coworker is talking to you and won't leave? How fast you wrote that code? Look no further. This Stopwatch applet does all that, and more, all while animating with drop shadows and lighting effects.</p></td>
   </tr>
</table>
</body>
</html>
index.html

2. Stopwatch.jnlp

<?xml version="1.0" encoding="UTF-8"?>
<jnlp href="Stopwatch.jnlp">
<information>
<title>Stopwatch</title>
<vendor>Sun Microsystems</vendor>
<offline-allowed />
<shortcut online="false">
<desktop/>
</shortcut>
</information>
<resources>
<j2se version="1.6+" href="http://java.sun.com/products/autodl/j2se" />
<jar href="Widgets.jar" main="true" />
<extension name="JavaFXRT" href="extensions/javafxrt.jnlp" />
<extension name="Reprise" href="extensions/Reprise.jnlp" />
<extension name="Scenario" href="extensions/Scenario.jnlp" />
<extension name="Swingx-WS" href="extensions/swingx-ws.jnlp" />
</resources>
<applet-desc
name="Stopwatch"
main-class="widgets.stopwatch.StopwatchApplet"
width="500"
height="500">
</applet-desc>
</jnlp>
Stopwatch.jnlp

Exercise 4: Run Magnifying Glass Draggable Applet

In this exercise, you are going to run magnifuing glass draggable applet.

(4.1) Access the Magnifying Glass Draggable Applet

1. From your browser go to Magnifying Glass Draggable Applet.

2. Drag the magnifying class from the browser to the desktop.
3. Observe that the magnifying glass magnifies the things on the desktop.
4. Closes the browser and observe that the magnifying glass still works.

Exercise 5: Run LiveConnect Draggable Applet

In this exercise, you are going to run LiveConnect draggable applet application.

(4.0) Create a Twitter account

<To do: Add instruction on how to create Twitter account>

(4.1) Access the LiveConnect Applet

1. From your browser, go to LiveConnect.

2. Enter your twitter account username and password.

3. Observe that the picture icon table is being displayed on the left.
4. Drag it from the browser to the desktop.

5. Close the browser.

6. Observe that the LiveConnect applet still works in the desktop.

If you want to close the LiveConnect on the desktop, press ALT key and click x button (upper right corner).

Homework Exercise (for people who are taking Sang Shin's "Java Web Services Programming online course")

<tbd>

   return to the top