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

Expected Duration: 100 minutes

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

 

Step 1: Writing a HelloWorld Applet

  1. If NetBeans is not already running, start it.
  2. When NetBeans has started, select File->Open Project and browse to the <lab_root>/javaseclient/execises/HelloApplet directory.

    Open NetBeans Project

  3. Click Open Project button.
  4. 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.

  5. Click 'save all' in the File menu.

  6. Right-click on the HelloApplet node in the Projects tab and then click ´clean and build´.


Step 2: Deploy the Applet with traditional Applet tag

After successfully building the HelloWorld Applet code, we're going to deploy it by using the traditional Applet tag.

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

    Open Applet Tag File
  2. 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.

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

    Run Applet Tag


Step 3: Deploy the HelloWorld Applet via JNLP.

The most significant new feature of the next-generation Java Plug-In is built-in support for launching applets from JNLP files. Using the JNLP file format as the applet descriptor allows applets to instantly reuse JNLP extensions previously written for Java Web Start applications, and significantly expands the capabilities of applets in many other ways.

In this step, we're going to run the applet via JNLP.

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

    Open Applet JNLP

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

  3. Double click the file named 'launch.jnlp' in the File tab shown below.

    Open Launch JNLP
  4. 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.

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

    Run Applet via JNLP



Step 4: Larget Heap support in Applet

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

    Large Heap Support

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

  3. 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.
    Larger Heap support

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

Step 5: Deploy HelloWorld applet via Deployment tools

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

    Deployment Tookit Demo

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

  3. 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.
    Run with deployment toolkit

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:

  1. Open a Unix shell terminal.
  2. Input 'jcontrol' and hit enter, which will show the Java Control Panel.
  3. In the Java Control Panel, enable the Java Console as shown below.
  4. Then when you run applet in browser, the Java Console will show up automatically.


Step 6: Deploy Java FX application to browser

  1. If Netbeans 6.5 or Java FX SDK is not already running, start it.
  2. When Netbeans has started, select File->Open Project and browse to the javaseclient directory. Select LoveLetter project.

  3. Click Open Project button.
  4. After the project has opened, right click Loveletter project in the projects tag and select Set as Main Project from the context menu

  5. Right click Loveletter project in the projects tag and select Properties from the context menu

  6. In the Project Properties window, select Run from Categories, select Run in Brower combo box as Application Execution Model

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

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

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

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

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

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

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