Platinum Partner
java,ria,javafx,applets,client-side,javase 6 update 10

JavaFX Applets Meet Google Chrome

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

     

    {{ tag }}, {{tag}},

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}
    {{ parent.authors[0].realName || parent.author}}

    {{ parent.authors[0].tagline || parent.tagline }}

    {{ parent.views }} ViewsClicks
    Tweet

    {{parent.nComments}}