JavaFX Script in Lobo Web Browser

The Lobo Project

Lobo@SF

Lobo 0.98.4+ [download] can directly render JavaFX Script source files. Lobo treats JavaFX as a first-class citizen, in much the same manner it treats HTML. This means that:

The JavaFX deploy-test cycle in Lobo is quicker and more convenient. There is no need to pre-compile and package JavaFX code or use HTML pages.
The source code of a JavaFX script is available for browser users to examine.
JavaFX code in Lobo has access to various capabilities of the browser and can be more web oriented.
JavaFX code can be generated by server-side technology such as servlets, JSP, PHP, RoR and others.
JavaFX scripts loaded by Lobo are potentially indexable by search engines.

Requirements

JavaFX support in Lobo requires JRE 1.6u10+, even though the web browser itself only requires JRE 1.5+.

JavaFX Version

Lobo 0.98.4 relies on the JavaFX compiler and runtime that are part of the JavaFX SDK 1.0.

Security Restrictions

JavaFX/Java code loaded by Lobo from a remote location is run with security restrictions equivalent to those of an unsigned applet. Note, however, that Lobo provides capabilities that are not currently available to applets, such as managed stores.

MIME Type

The MIME type of a JavaFX script is expected to be text/x-javafx-source, but other MIME types like application/octet-stream and text/plain will work provided the URL ends in .fx.

API Available to JavaFX Code in Lobo

A JavaFX script loaded by Lobo should be assumed to only have access to the following APIs:

Java Platform SE 6 API.
Lobo Extensions and Clientlets API (lobo-pub.jar).
The JavaFX runtime API.
Classes from locations specified in the classpath or sourcepath directives (explained below).

Directives

Java/JavaFX "pages" in Lobo use standard Java/JavaFX syntax. You can, nevertheless, add a special comment that contains compilation and rendering directives for Lobo. The comment starts with /*! and ends with */. The content of the comment should be in property-file syntax, except an asterisk is allowed at the beginning of every line. Directives (properties) understood by Lobo, all optional, include:

title: The title of the "page". This should be the window title when the page is rendered, and it's also used in history lists and so on.
description: A description of the "page". This is saved along with Lobo bookmarks and is potentially indexable by search engines.
sourcepath: A list of comma-separated URLs required to locate other source files during compilation.
classpath: A list of comma-separated URLs, typically JAR file locations, required by the "page" at run-time.
sourcelist: If sourcepath contains URLs ending in slash (directories instead of JAR files) this property should contain a list of comma-separated file paths required during the build of the main compilation unit. A file path consists of the package name, with its dots replaced by forward slashes, followed by a forward slash and the file name, e.g. com/acme/package/File.java or com/acme/package/File.fx.
classlist: If classpath contains URLs ending in slash (directories instead of JAR files) this property should contain a list of comma-separated file paths required during the build of the main compilation unit. A file path consists of the package name, with its dots replaced by forward slashes, followed by a forward slash and the file name, e.g. com/acme/package/File.class.
use-preferred-size: If true, the component is rendered using its preferred size, if possible, and centered in the page. Otherwise, the component's size is the same as the page's.

Clientlet Context Access

A request-response thread in Lobo has access to the current ClientletContext instance, obtained by calling ClientletAccess.getCurrentClientletContext(). This can be used by scripts to perform various browser tasks, such as navigating away from the page, opening alert windows, making requests through Lobo, creating browser frames, or accessing managed stores.

What is Rendered

Obviously, only certain classes can be rendered: Those that can be assigned to java.awt.Component (including javax.swing.JComponent and java.awt.Window) plus any JavaFX classes assignable to Stage, Scene or Node.

Programmatic use of Lobo

We have a Browser API (GPL) that will load Java/JavaFX code, much like it loads HTML, provided the pertinent browser extensions are available at run-time. This means a Swing application can embed Lobo and load remote JavaFX/Java code via the Lobo API.

Examples

The following examples are not intended to teach the reader about JavaFX syntax or capabilities. For that you might want to visit Jim Weaver's Blog or read the JavaFX language tutorial. These are examples of some things you can do in Lobo with JavaFX.

JavaFX Redirect.
You have probably heard of a HTML redirect. This would be a JavaFX redirect in Lobo.
JfxRedirect.fx
/*! * title: JavaFX Redirect Demo */ import org.lobobrowser.clientlet.*; ClientletAccess.getCurrentClientletContext().navigate("http://lobobrowser.org");
Lobo Frame in JavaFX
At this point we don't have a JavaFX-based API for Lobo, but it is possible to add AWT/Swing components obtained from Lobo's Java-based Public API and wrap them in JavaFX nodes. The following example shows how to embed a Lobo browser frame.
LoboFrameInJFX.fx
import javafx.stage.*; import javafx.scene.*; import javafx.scene.paint.*; import javafx.scene.layout.*; import javafx.ext.swing.*; import javax.swing.*; import java.awt.Component; import java.awt.FlowLayout; import org.lobobrowser.clientlet.*; /* Get clientlet context and create a new browser frame. */ var CTX = ClientletAccess.getCurrentClientletContext(); var loboFrame = CTX.createNavigatorFrame(); var frameComponent = loboFrame.getComponent() as JComponent; var javafxFrame = SwingComponent.wrap(frameComponent); Stage { title: "Lobo Frame in JavaFX Script" scene: Scene { fill: Color.YELLOW content: [ VBox { content: [ HBox { var textField = SwingTextField { columns: 60 text: "http://google.com" }; var button = SwingButton { text: "GO" action: function() { loboFrame.navigate(textField.text); } }; content: [ textField, button ] }, javafxFrame ] } ] } }
The following is how LoboFrameInJFX.fx renders in Lobo:
Managed Store Demo.
The following example illustrates several Lobo features (managed stores, browser frames) and several JavaFX features (dragging, scaling, gradients, etc.) It shows a desktop-like surface with a small window you can drag. The position of the window is persisted securely in a client-side managed store (which is the equivalent of a repository of cookies, if you will.) The window also has a small, scaled down web browser. The URL of the mini-browser is also persisted. For simplicity, we use one file for each persisted property. Other implementations are of course possible.
ManagedStoreDemo.fx
import javafx.stage.*; import javafx.scene.*; import javafx.scene.shape.*; import javafx.scene.control.*; import javafx.scene.paint.*; import javafx.scene.input.*; import javafx.scene.layout.*; import javafx.scene.transform.*; import javafx.ext.swing.*; import javafx.geometry.*; import javax.swing.*; import org.lobobrowser.clientlet.*; import org.lobobrowser.io.*; /* Get clientlet context and create a new browser frame. */ var URI_FILE:String = "msd-uri.bin"; var X_FILE:String = "msd-x.bin"; var Y_FILE:String = "msd-y.bin"; var scale = 0.4; var CTX = ClientletAccess.getCurrentClientletContext(); var loboFrame = CTX.createNavigatorFrame(); var frameComponent = loboFrame.getComponent() as JComponent; frameComponent.setPreferredSize(new java.awt.Dimension(280 / scale, 240 / scale)); var javafxFrame = SwingComponent.wrap(frameComponent); var managedStore = CTX.getManagedStore("lobobrowser.org"); var uriTextField = SwingTextField { columns: 22 text: "./windowinfo.html"; } function navigate() { var uriText = uriTextField.text; managedStore.saveObject(URI_FILE, uriText); var currentURL = new java.net.URL(CTX.getResponse().getResponseURL(), uriText); loboFrame.navigate(currentURL); } class InternalStage extends CustomNode { var anchorX = 0.0; var anchorY = 0.0; postinit { onMousePressed = function(e:MouseEvent):Void { anchorX = translateX; anchorY = translateY; } onMouseDragged = function(e:MouseEvent):Void { translateX = anchorX + e.dragX; translateY = anchorY + e.dragY; } } override function create():Node { return Group { content: [ Rectangle { x: 0 y: 0 width: 300 height: 300 arcWidth: 10 arcHeight: 10 fill:Color.RED }, Rectangle { blocksMouse: true x: 5 y: 15 width: 290 height: 280 arcWidth: 10 arcHeight: 10 fill:Color.WHITE }, VBox { translateX: 10 translateY: 20 content: [ HBox { content: [ uriTextField, SwingButton { text: "Go" action: function() { navigate(); } } ] }, Group { content: javafxFrame transforms: Scale { x: scale y: scale pivotX: 0 pivotY: 0 } } ] } ] }; } } var internalStage = InternalStage { } /* Retrieve persisted data */ var storedURI = managedStore.retrieveObject(URI_FILE, null); var storedX = managedStore.retrieveObject(X_FILE, null); var storedY = managedStore.retrieveObject(Y_FILE, null); if(storedURI != null) { uriTextField.text = storedURI as String; } if(storedX != null) { internalStage.translateX = java.lang.Double.parseDouble(storedX as String); } if(storedY != null) { internalStage.translateY = java.lang.Double.parseDouble(storedY as String); } navigate(); def persistentX = bind internalStage.translateX on replace oldValue { managedStore.saveObject(X_FILE, String.valueOf(persistentX)); } def persistentY = bind internalStage.translateY on replace oldValue { managedStore.saveObject(Y_FILE, String.valueOf(persistentY)); } Stage { title: "Draggable Internal Window" scene: Scene { fill: Color.GREEN content: [ SwingButton { translateX: 5 translateY: 5 text: "Clear Store" action: function() { managedStore.saveObject(URI_FILE, null); managedStore.saveObject(X_FILE, null); managedStore.saveObject(Y_FILE, null); internalStage.translateX = 50; internalStage.translateY = 50; uriTextField.text = "./windowinfo.html"; navigate(); } }, internalStage ] } }
The following is how ManagedStoreDemo.fx renders in Lobo:

Once you download Lobo and run it, you will be able to access similar examples from the default Lobo home page.

Feedback

If you have successfully tried Java or JavaFX code in Lobo, feel free to post your source code URLs at the Open Discussion Forum.

If something doesn't work quite right in Lobo's support of Java/JavaFX, please use the Help Forum to tell us.