Jim has posted 66 posts at DZone. You can read more from them at their website. View Full User Profile

JavaFX Applets Meet Google Chrome

09.04.2008
| 11479 views |
  • submit to reddit

In the JFX Custom Nodes category of my blog, graphics designer Mark Dingman of Malden Labs and I have been collaborating on an imaginary Sound Beans application. This category contains a growing series of posts in which we are demonstrating how to create JavaFX UI custom controls.  This series also provide a case study in how a graphics designer and an application developer can work together effectively in developing JavaFX applications.  Today I'd like to highlight the recent Google Chrome browser announcement by showing you how to create and run a JavaFX applet in Chrome.  Here's a screenshot of the TableNode example from an earlier post running as a JavaFX applet in Chrome:


    TableNodeExampleApplet

    To try this out, first obtain Google Chrome and install it.  Then obtain Java SE 6 Update 10 and install it as well.  By the way, installing Java SE 6 update 10 will enable this JavaFX applet to run on Firefox 3 and Internet Explorer as well.  Go ahead and run this example, being sure to scroll the custom TableNode control and to click on its rows.  Also, select the Burn icon and move the slider to demonstrate the custom ProgressNode control.


    Looking at the Code

    In addition to the ButtonNode.fx, MenuNode.fx, DeckNode.fx, ProgressNode.fx and TableNode.fx files from previous posts in this series, you'll need the following files:

    TableNodeExampleApplet.fx:

    /*
    * TableNodeExampleApplet.fx -
    * An example of using the TableNode custom node in an Applet. It also
    * demonstrates the ProgressNode, DeckNode, MenuNode and ButtonNode
    * custom nodes
    *
    * Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
    * to demonstrate how to create custom nodes and applets in JavaFX
    */
    package com.javafxpert.table_node_example.ui;

    import javafx.application.*;
    import javafx.ext.swing.*;
    import javafx.scene.*;
    import javafx.scene.geometry.*;
    import javafx.scene.image.*;
    import javafx.scene.layout.*;
    import javafx.scene.paint.*;
    import javafx.scene.text.*;
    import javafx.scene.transform.*;
    import java.lang.Object;
    import java.lang.System;
    import com.javafxpert.custom_node.DeckNode;
    import com.javafxpert.custom_node.TableNode;
    import com.javafxpert.custom_node.ProgressNode;
    import com.javafxpert.custom_node.ButtonNode;
    import com.javafxpert.custom_node.MenuNode;
    import com.javafxpert.table_node_example.model.TableNodeExampleModel;

    var deckRef:DeckNode;

    Application {
    var model = TableNodeExampleModel.getInstance();
    var stageRef:Stage;
    var menuRef:MenuNode;
    stage:
    stageRef = Stage {
    fill: Color.BLACK
    content: [
    deckRef = DeckNode {
    fadeInDur: 700ms
    content: [
    // The "Splash" page
    Group {
    var vboxRef:VBox;
    var splashFont =
    Font {
    name: "Sans serif"
    style: FontStyle.BOLD
    size: 12
    };
    id: "Splash"
    content: [
    ImageView {
    image:
    Image {
    url: "{__DIR__}images/splashpage.png"
    }
    },
    vboxRef = VBox {
    translateX: bind stageRef.width - vboxRef.getWidth() - 10
    translateY: 215
    spacing: 1
    content: [
    Text {
    content: "A Fictitious Audio Application that Demonstrates"
    fill: Color.WHITE
    font: splashFont
    },
    Text {
    content: "Creating JavaFX Custom Nodes"
    fill: Color.WHITE
    font: splashFont
    },
    Text {
    content: "Application Developer: Jim Weaver"
    fill: Color.WHITE
    font: splashFont
    },
    Text {
    content: "Graphics Designer: Mark Dingman"
    fill: Color.WHITE
    font: splashFont
    },
    ]
    }
    ]
    },
    // The "Play" page
    VBox {
    var tableNode:TableNode
    id: "Play"
    spacing: 4
    content: [
    Group {
    content: [
    ImageView {
    image:
    Image {
    url: "{__DIR__}images/playing_currently.png"
    }
    },
    Text {
    textOrigin: TextOrigin.TOP
    content: bind "{tableNode.selectedIndex}"
    font: Font {
    size: 24
    }
    }
    ]
    },
    tableNode = TableNode {
    height: 135
    rowHeight: 25
    rowSpacing: 2
    columnWidths: [150, 247, 25, 70]
    tableFill: Color.BLACK
    rowFill: Color.rgb(28, 28, 28)
    selectedRowFill: Color.rgb(45, 45, 45)
    selectedIndex: -1
    vertScrollbarWidth: 20
    vertScrollbarFill: LinearGradient {
    startX: 0.0
    startY: 0.0
    endX: 1.0
    endY: 0.0
    stops: [
    Stop {
    offset: 0.0
    color: Color.rgb(11, 11, 11)
    },
    Stop {
    offset: 1.0
    color: Color.rgb(52, 52, 52)
    }
    ]
    }
    vertScrollbarThumbFill: Color.rgb(239, 239, 239)
    content: bind
    for (obj in model.playlistObjects) {
    if (obj instanceof String)
    Text {
    textOrigin: TextOrigin.TOP
    fill: Color.rgb(183, 183, 183)
    content: obj as String
    font:
    Font {
    size: 11
    }
    }
    else if (obj instanceof Image)
    ImageView {
    image: obj as Image
    }
    else
    null
    }
    onSelectionChange:
    function(row:Integer):Void {
    System.out.println("Table row #{row} selected");
    }
    }
    ]
    },
    // The "Burn" page
    Group {
    var vboxRef:VBox;
    id: "Burn"
    content: [
    vboxRef = VBox {
    translateX: bind stageRef.width / 2 - vboxRef.getWidth() / 2
    translateY: bind stageRef.height / 2 - vboxRef.getHeight() / 2
    spacing: 15
    content: [
    Text {
    textOrigin: TextOrigin.TOP
    content: "Burning custom playlist to CD..."
    font:
    Font {
    name: "Sans serif"
    style: FontStyle.PLAIN
    size: 22
    }
    fill: Color.rgb(211, 211, 211)
    },
    ProgressNode {
    width: 430
    height: 15
    progressPercentColor: Color.rgb(191, 223, 239)
    progressTextColor: Color.rgb(12, 21, 21)
    progressText: bind "{model.remainingBurnTime} Remaining"
    progressFill:
    LinearGradient {
    startX: 0.0
    startY: 0.0
    endX: 0.0
    endY: 1.0
    stops: [
    Stop {
    offset: 0.0
    color: Color.rgb(0, 192, 255)
    },
    Stop {
    offset: 0.20
    color: Color.rgb(0, 172, 234)
    },
    Stop {
    offset: 1.0
    color: Color.rgb(0, 112, 174)
    },
    ]
    }
    barFill:
    LinearGradient {
    startX: 0.0
    startY: 0.0
    endX: 0.0
    endY: 1.0
    stops: [
    Stop {
    offset: 0.0
    color: Color.rgb(112, 112, 112)
    },
    Stop {
    offset: 1.0
    color: Color.rgb(88, 88, 88)
    },
    ]
    }
    progress: bind model.burnProgressPercent / 100.0
    },
    ComponentView {
    component:
    FlowPanel {
    background: Color.BLACK
    content: [
    Label {
    text: "Slide to simulate burn progress:"
    foreground: Color.rgb(211, 211, 211)
    },
    Slider {
    orientation: Orientation.HORIZONTAL
    minimum: 0
    maximum: 100
    value: bind model.burnProgressPercent with inverse
    preferredSize: [200, 20]
    }
    ]
    }
    }
    ]
    }
    ]
    },
    // The "Config" page
    Group {
    id: "Config"
    content: [
    ImageView {
    image:
    Image {
    url: "{__DIR__}images/config.png"
    }
    }
    ]
    },
    // The "Help" page
    Group {
    id: "Help"
    content: [
    ImageView {
    image:
    Image {
    url: "{__DIR__}images/help.png"
    }
    }
    ]
    }
    ]
    },
    menuRef = MenuNode {
    translateX: bind stageRef.width / 2 - menuRef.getWidth() / 2
    translateY: bind stageRef.height - menuRef.getHeight()
    buttons: [
    ButtonNode {
    title: "Play"
    imageURL: "{__DIR__}icons/play.png"
    action:
    function():Void {
    deckRef.visibleNodeId = "Play";
    }
    },
    ButtonNode {
    title: "Burn"
    imageURL: "{__DIR__}icons/burn.png"
    action:
    function():Void {
    deckRef.visibleNodeId = "Burn";
    }
    },
    ButtonNode {
    title: "Config"
    imageURL: "{__DIR__}icons/config.png"
    action:
    function():Void {
    deckRef.visibleNodeId = "Config";
    }
    },
    ButtonNode {
    title: "Help"
    imageURL: "{__DIR__}icons/help.png"
    action:
    function():Void {
    deckRef.visibleNodeId = "Help";
    }
    },
    ]
    }
    ]
    }
    }

     


    Note that the Application class has a stage attribute just as the Frame had in previous examples.  Here's the TableNodeExamplePage.html file that you'll open in your browser.  The draggable param, by the way, enables that neat "pull the applet out of the browser" trick that I'll show you in a bit:

     

    <html>
    <body bgcolor="Black">
    <center>
    <applet code="javafx.application.Applet" width=500 height=400
    archive="javafxrt.jar, Scenario.jar, javafxgui.jar, javafx-swing.jar, TableNodeExample.jar">
    <param name="ApplicationClass" value="com.javafxpert.table_node_example.ui.TableNodeExampleApplet"/>
    <param name="jnlp_href" value="TableNodeExampleApplet.jnlp"/>
    <param name="draggable" value="true">
    </applet>
    </center>
    </body>
    </html>


    Finally, here's the Java Web Start TableNodeExampleApplet.jnlp file that is used by the HTML file above:

     

    <?xml version="1.0" encoding="UTF-8"?>
    <jnlp spec="1.0+" href="TableNodeExampleApplet.jnlp">
    <information>
    <title>TableNodeExampleApplet</title>
    <vendor>JMentor</vendor>
    <description>TableNodeExampleApplet</description>
    <description kind="short">TableNodeExampleApplet</description>
    <homepage href="http://jmentor.com"/>
    <offline-allowed />
    </information>
    <security>
    <all-permissions/>
    </security>
    <resources>
    <property name="jnlp.packEnabled" value="true"/>
    <j2se version="1.6+" href="http://java.sun.com/products/autodl/j2se" java-vm-args="-Xmx800m" />
    <jar href="TableNodeExample.jar" main="true" download="eager"/>
    <jar href="Scenario.jar"/>
    <jar href="javafxrt.jar"/>
    <jar href="javafxgui.jar"/>
    <jar href="javafx-swing.jar"/>
    </resources>
    <applet-desc
    name="TableNodeExampleApplet"
    main-class="javafx.application.Applet"
    width="500"
    height="400">
    </applet-desc>
    </jnlp>

     


    Dragging the Applet out of the Browser and onto the Desktop

    As shown in the following screenshot, one of the cool features of Java SE 6 update 10 is that you can drag a Java or JavaFX applet out of the browser and onto the desktop.  By default, you press the Alt key while dragging the applet:

    TableNodeExampleApplet-Drag

    Here is our JavaFX Applet living happily on the desktop after the browser has been closed, and the user has selected the Burn page:

    TableNodeExampleApplet-Dragged


    Google Chrome will be a Driving Force for RIA

    According to Google, Java SE 6 Update 10 is the version that must be used in order to run Java in the Chrome browser.  As I've mentioned previously, one of the objectives of Java SE 6 Update 10 is to solve the JRE and Java/JavaFX deployment issues.  Because Google Chrome is destined to be a great, cross-platform browser, and because it requires the version of Java that makes rich-client Java/JavaFX programs feasible, this will increase the adoption rate of JavaFX applets and applications.

    Thanks Google!

    Jim Weaver
    JavaFXpert.com

     

    Published at DZone with permission of its author, Jim Weaver.

    (Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

    Comments

    John Denver replied on Thu, 2008/09/04 - 7:15am

    Its very interesting Google Chrome, I know is in beta but it crashed many times when I loaded the JavaFX demo with Java6_10 and even a Flex 3 app crashed also. The Javascript V8 it is fast but sometimes it slowdown for not reason, It have many bugs.

    I agree it is good news for Java and JavaFX, Also for the adoption of JavaFX applets it is a good help of Google Chrome, but I have playing with JavaFX and there is not yet tooling support for it, Jetbrains folks said they are not developing nothing for JavaFX for the Intellij 8, seems they like more Flex and Eclipse there is no a sign of somebody interesting to do an update plugin for it. Really I cant stand Netbeans I prefer Intellij or Eclipse. So for the adoption of JavaFX without tooling and more demos, samples, Docs so on it will be hard to adopt it. Right now Im using Textmate and I made a small bundle for JavaFX it is just working highlighting but of course I would like to use a full IDE for use with my Java server code. Also Im interested of some articles or help about JavaFX and always I end at Jim Website or Sun site but it seems many people is not so interested on JavaFX, Can you point me please where I can get more docs, tutorials or help?, Thank you.

    Best Regards.

     

     

    Casper Bang replied on Thu, 2008/09/04 - 11:25am

    "...installing Java SE 6 update 10 will enable this JavaFX applet to run on Firefox 3 and Internet Explorer as well"

    Not on my machine, running Ubuntu 8.04 64x, with Firefox 3.0.1 and Java SE6 update 10rc. All I see is pitch blackness. I am going to guess this latest browser plugin still doesn't work with 64bit Linux. *sigh*

    Thom Theriault replied on Thu, 2008/09/04 - 1:52pm

    It would be great if Google preloaded Chrome with 6u10.

     

    Jim Weaver replied on Thu, 2008/09/04 - 2:06pm in response to: Thom Theriault

    It would be good if Google preloaded Chrome with 6u10

    ...and if Mac had a 6u10 implementation.

    John Denver replied on Thu, 2008/09/04 - 9:06pm

    Jim, I have a Mac and I will say that the Swing support and how behave Java on the Mac is very nice, for example I like better Intellij or Netbeans or any swing app in the Mac than Windows, and in a Mac users have preloaded Java all the time, I think the Mac Java team did a good job but they dont have full resources to keep up to date with Java specification. I concluded that if someone doesnt support Java outside of Java Mac it will always be the same problem, Java on the Mac will be quite delaying with the Java specification. SoyLatte with OpenJDK looks promising, maybe for first time in history with the OpenJDK we can have Java7 on the Mac on time?.

     

    By the way I have playing with JavaFX in the Mac and it works really very good the problem is with applets, Java6 on the mac is 64bit, The web browsers even Safari still 32bit compatible mode I think because plugins as Flash, so it doesnt load the applets. I think is a similar problem in Linux AMD_64 with the Flash player is 32 bit with a build version of Firefox 64bit it doesnt work.

     

    Regards.

    Michael Bien replied on Mon, 2008/09/08 - 2:39am in response to: Casper Bang

    no it only doesn't work with 64bit browsers. it works perfectly on 64bit xp/ubuntu for me.

    Comment viewing options

    Select your preferred way to display the comments and click "Save settings" to activate your changes.