Exercise 1: Deploy Java/Java FX application via Web
(30 minutes)
This exercise
provides various ways of deploying Java/Java FX applications via Web,
including
applet tag, JNLP file, or using deploy toolkit embedded in JDK 6u10.
Background Information
Introducing the Deployment Technology of Java/Java FX
Java SE 6 update 10 introduces a new
(default) implementation of the Java Plug-in that supports
applets in the web browser. The next generation Java Plug-in
combines the architectural features of applet and Java Web Start
technologies to a universal solution. It provides a robust platform for deployment of Java
and JavaFX content in web browsers.
The next generation Java Plug-in offers
many powerful features supporting both
consumer content and enterprise applications. Some of which are:
Steps to Follow
- If NetBeans is not already running, start it.
-
When NetBeans has started, select File->Open Project
and browse to the <lab_root>/javaseclient/execises/HelloApplet
directory.

- Click Open Project button.
-
After the project has opened, expand the HelloApplet
node in the Projects tab and then expand the Source Packages node. You
will see the project packages displayed. To open a source file,
expand its package node and double-click on source file's name.
Open the HelloWorldApplet in
the package demo.applets. Override
the init() method as shown in
the table
below.
package demo.applets;
import javax.swing.JApplet;
import javax.swing.JLabel;
import javax.swing.SwingConstants;
public class HelloWorldApplet extends JApplet {
// Please add the codes here as shown in the HOL document.
@Override
public void init() {
super.init();
//add a Label to the center of the Applet
JLabel l = new JLabel("Hello World from Applet!!", SwingConstants.CENTER);
this.getContentPane().add(l);
}
}
Now we add a label to the applet content.
-
Click 'save all' in the File menu.
- Right-click on the HelloApplet node in the Projects tab and
then click ´clean and build´.
After successfully building the HelloWorld Applet code, we're
going to deploy it by using the traditional Applet tag.
- Click the Files Tab in the NetBeans IDE, and then expand
the HelloApplet Node.

- Double click on the file named
'launch-with-applet-tags.html'.
Modify the code as shown in the table
below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test page for launching the applet via Applet tag</title>
</head>
<body>
<h3>Test page for launching the applet via Applet tag</h3>
<applet width="300"
height="300"
code="demo.applets.HelloWorldApplet.class"
name="HelloWorldApplet"
archive="dist/HelloApplet.jar">
</applet>
</body>
</html>
In the applet tag of the above
code, the code attribute
specifies the full qualified class name of the applet. The name attribute specifies a name for
the applet instance, which makes it possible for applets on the same
page to find (and communicate with) each other. The archive attribute specifies a
comma-separated list of URIs for archives containing classes.
- Run the Applet in browser.
Open the file explorer and navigate to <lab_root>/javaseclient/execises/HelloApplet/launch-with-applet-tags.html and then double click the file, the applet
will run in the browser as shown below.

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

-
Double-click the file launch-with-jnlp.html
and modify the code for launch-with-jnlp.html
as shown in
the
following table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- ########################## IMPORTANT NOTE ############################ -->
<!-- This preview HTML page will work only with JDK 6 update 10 and higher! -->
<!-- ###################################################################### -->
<html>
<head>
<title>Test page for launching the applet via JNLP</title>
</head>
<body>
<h3>Test page for launching the applet via JNLP</h3>
<!-- Please add the codes here as shown in the HOL document. -->
<applet width="300"
height="300">
<param name="jnlp_href" value="launch.jnlp"/>
</applet>
</body>
</html>
In the above html codes, the code
attribute and archive
attribute are removed, instead, we use the param element named jnlp_href to specify the JNLP file
the new Java Plug-In should use to launch the applet.
- Double click the file named 'launch.jnlp' in the File tab
shown below.

-
Modify the code for the file launch.jnlp as shown in the
following table.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<jnlp spec="1.0+">
<information>
<title>HelloWorldApplet</title>
<vendor>jason</vendor>
<homepage href="http://www.sun.com"/>
<description>HelloWorldApplet</description>
<description kind="short">HelloWorldApplet</description>
</information>
<!-- Please add the codes here as shown in the HOL document. -->
<resources>
<j2se version="1.6+" />
<jar eager="true" href="dist/HelloApplet.jar" main="true"/>
</resources>
<applet-desc
height="300"
width="300"
main-class="demo.applets.HelloWorldApplet"
name="HelloWorldApplet" >
</applet-desc>
</jnlp>
In the above jnlp file, we use the applet-desc
element to launch the applet.The JAR files that make up the
applet are described using the resources
element as for applications. The main-class attribute is used instead
of the code attribute.
The main-class attribute is
assigned the name of the Applet class (without the .class
extension). This attribute can be omitted if the Applet class can
be found from the Main-Class manifest entry in the main JAR file.
Note: Applets must be packaged in JAR files in order to work with Java
Web Start.
-
Run the HelloWorld Applet via JNLP
Open the file explorer and navigate to <lab_root>/javaseclient/execises/HelloApplet/launch-with-jnlp.html
and then double click the file, the applet
will run in the browser as shown below.

With the new implementation of Java plugin framework, every applet could be run with a separate Java isntance, so
independent start arguments can be set to every single applet. In this step, we're going the evaluate the large heap support feature
in Applet.
-
Click the Files Tab in the NetBeans IDE, and then expand
the HelloApplet Node.

-
Double-click the file launch-with-java-arguments.html
and modify the code for launch-with-java-arguments.html
as shown in
the
following table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- ########################## IMPORTANT NOTE ############################ -->
<!-- This preview HTML page will work only with JDK 6 update 10 and higher! -->
<!-- ###################################################################### -->
<html>
<head>
<title>Test page for launching the applet with larger heap size</title>
</head>
<body>
<h3>Test page for launching the applet with larger heap size</h3>
<!-- Please add the codes here as shown in the HOL document. -->
<applet width="300"
height="300"
code="demo.applets.HelloWorldApplet.class"
name="HelloWorldApplet"
archive="dist/HelloApplet.jar">
<param name="separate_jvm" value="true">
<param name="java_arguments" value="-Xmx128m -Xms128m">
</applet>
<hr/>
</body>
</html>
Note:
By default, the Java Plug-in runs all the applets in one page in one
Java JVM. in the above html page, we added two param elements (named separate and java_arguments) to indicate to run
the applet with a separate JVM and special JVM arguments.
-
Run the applet
Open the file explorer and navigate to <lab_root>/javaseclient/execises/HelloApplet/launch-with-java-arguments.html
and then double click the file, the applet
will run in the browser as shown below.

-
Check the status of the JVM which runs the applet.
Use jps to get the process id of the JVM running the applet.
bash-3.2$ jps
1321
1557 Jps
1540 PluginMain
1468 Main
bash-3.2$
|
Note: jps is a command
boundled with JDK, which is used to list the instrumented JVMs on the
target system.
Then use jinfo to get state of JVM like this:
bash-3.2$ jinfo 1540
Attaching to process ID 1540, please wait...
Debugger attached successfully.
Client compiler detected.
JVM version is 11.0-b15
Java System Properties:
trustProxy = true
package.restrict.access.org.mozilla.jss = true
java.version.applet = true
http.auth.serializeRequests = true
os.version.applet = true
file.separator.applet = true
sun.net.http.errorstream.enableBuffering = true
package.restrict.definition.netscape = true
os.name.applet = true
package.restrict.access.netscape = false
acl.read.default =
package.restrict.definition.sun = true
browser.version = 1.1
line.separator.applet = true
java.class.version.applet = true
java.vendor.url.applet = true
package.restrict.access.com.sun.deploy = true
java.rmi.server.RMIClassLoaderSpi =
sun.plugin2.applet.JNLP2RMIClassLoaderSpi
http.agent = Mozilla/4.0 (SunOS 5.11)
package.restrict.definition.java = true
acl.write.default =
os.arch.applet = true
package.restrict.definition.com.sun.deploy = true
javawebstart.version = javaws-1.6.0_10
package.restrict.definition.org.mozilla.jss = true
browser.vendor = Sun Microsystems, Inc.
sun.net.client.defaultConnectTimeout = 120000
https.protocols = TLSv1,SSLv3
java.vendor.applet = true
acl.write = +
java.protocol.handler.pkgs =
sun.plugin.net.protocol|com.sun.deploy.net.protocol
package.restrict.access.sun = true
acl.read = +
path.separator.applet = true
VM Flags:
-D__jvm_launched=556975778
-Xbootclasspath/a:/usr/jdk/instances/jdk1.6.0/jre/lib/deploy.jar:/usr/jdk/instances/jdk1.6.0/jre/lib/javaws.jar:/usr/jdk/instances/jdk1.6.0/jre/lib/plugin.jar
-Xmx128m -Xms128m
|
The arguments '-Xmx128m -Xms128m' are added to the JVM running the
applet.
Note: jinfo is a command
boundled with JDK, which is used to print the configuration information
for a given Java process or core file or a remote debug server.
Applets may be deployed by hand coding the applet, object or embed tags
with the required parameters. However, to assure cross browser
compatibility, it is recommended that the Deployment Toolkit be used to deploy
applets.
To avoid browser compatibility issues, the Deployment Toolkit (deployJava.js) provides
JavaScript functions that automatically generate HTML required to
deploy applets and Java Web Start applications. Developers should
invoke these functions to deploy their solutions in a consistent
fashion across various browsers.
Note: we boundled the deployJava.js
file in the HelloApplet project. For the latest version, please
download from http://java.com/js/deployJava.js.
-
Click the Files Tab in the NetBeans IDE, and then expand
the HelloApplet Node.

-
Double-click the file launch-with-deploy-tools.html
and modify the code for launch-with-deploy-tools.html
as shown in
the
following table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- ########################## IMPORTANT NOTE ############################ -->
<!-- This preview HTML page will work only with JDK 6 update 10 and higher! -->
<!-- ###################################################################### -->
<html>
<head>
<title>Test page for launching the applet via Deployment Toolkit</title>
</head>
<body>
<h3>Test page for launching the applet via Deployment Toolkit</h3>
<!-- Or use the following script element to launch with the Deployment Toolkit -->
<!-- Open the deployJava.js script to view its documentation -->
<!-- Please add the codes here as shown in the HOL document. -->
<script src="deployJava.js"></script>
<script>
var attributes = {
codebase:'.',
width:'300',
height:'300',
id:'HelloApplet',name:'HelloApplet'
} ;
var parameters = {jnlp_href:'launch.jnlp'} ;
var version = '1.6' ;
deployJava.runApplet(attributes, parameters, version);
</script>
</body>
</html>
Note:
First, we include the java script library into this page. Then, the deployJava
object which is defined in deployJava.js,
is used to run the applet.
-
Run the applet deployed via Deployment Toolkit.
Open the file explorer and navigate to the directory
containing the file launch-with-deploy-tools.html
and then double click the file, the applet
will run in the browser as shown below.

Tips: How to show Java
console when debug the applications.
We often need to debug the problems in our
application. During the Applet development, we can enable the Java
console and get hints from it. To show the Java Console, follow these
steps:
- Open a Unix shell terminal.
- Input 'jcontrol' and hit enter, which will show the Java
Control Panel.
- In the Java Control Panel, enable the Java Console as shown
below.
- Then when you run applet in browser, the Java Console will
show up automatically.
- If Netbeans 6.5 or Java FX SDK is not already running, start it.
-
When Netbeans has started, select File->Open Project
and browse to the javaseclient directory. Select LoveLetter project.

- Click Open Project button.
-
After the project has opened, right click Loveletter project in the projects tag and select Set as Main Project from the context menu
-
Right click Loveletter project in the projects tag and select Properties from the context menu
-
In the Project Properties window, select Run from Categories, select Run in Brower combo box as Application Execution Model

-
In the Project Properties window, select Application from Categories, we can set the frame size of the application once it is launched within the browser, just keep the pre-set settings for now

-
Select Run->Run Main Project to launch the project. You should see the Java FX application is launched within the browser.

Now we've already made our Java FX application LoveLetter run in the browser. Let's take a look at what's going on.
Go to the directory <lab_root>/javaseclient/execises/LoveLetter/dist/. Netbeans created several files for us already, among which
LoveLetter.html is where the application is deployed to. Open LoveLetter.html with a text editor. It's pretty simple HTML
with some JavaScript code. Notice the code as followed:
<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"
}
);
</script>
From above code, we know that Java FX can be deployed using javafx() method defined in http://dl.javafx.com/1.1/dtfx.js.
with that method, we only need to fill in the properties as parameters. But if you take a look at javafx() method, (although you may not want to
do that :-)), you will find out it actually uses the file name set as archive paramter to look for a <filename>_browser.jnlp file.
-
So let's do an experiment. Modify LoveLetter.html as followed (code modified is marked as BROW):
<script src="http://dl.javafx.com/1.1/dtfx.js"></script>
<script>
javafx(
{
jnlp_href: "LoveLetter_browser.jnlp",
draggable: true,
width: 600,
height: 400,
code: "loveletter.Letter",
name: "LoveLetter"
}
);
</script>
Open LoveLetter.html with browser, the application can still be deployed successfully.
-
Now let's deploy LoveLetter to our own web page. Copy LoveLetter.jar ,LoveLetter_browser.jnlp files and
lib sub directory in the <lab_root>/javaseclient/execise/LoveLetter/dist directory to <lab_root>/javaseclient/execise/page directory.
-
Open MyLoveLetter.html in <lab_root>/javaseclient/execise/page directory with your favorite editor, search for
string "TODO: Deploy Java FX application here", add code piece there as followed
<h1> A Letter from an Unknown Geek</h1>
<!-- TODO: Deploy Java FX application here -->
<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"
}
);
</script>
-
In order to make LoveLetter work in our own page, we still have to modify the jnlp file. Open
<lab_root>/javaseclient/execise/page/LoveLetter_browser.jnlp with an editor, modify the codebase
property to <lab_root>/javaseclient/execise/page/ or "."
<jnlp spec="1.0+" codebase="file://<lab_root>/javaseclient/execise/page/" href="LoveLetter_browser.jnlp">
-
Open MyLoveLetter.html with a browser, LoveLetter application has been deployed in our own page.
Summary
In this exercise, you have learnt how to deploy applets and Java FX applications to web.
You can either use the applet tag, which now accepts jnlp as a parameter, or use the Deploy toolkit
Integrated in Java SE 6u10+.
With those, Java and Java FX applications can be deployed in pretty easy ways.
Back to top
Next exercise
|