JavaFX Authoring Tool Demo at JavaOne
At JavaOne 2009 during James Gosling's Toy Show, Tor Norbye demonstrated the current state of the long-awaited JavaFX Authoring Tool.
Some of the demonstrated features were:
- The ability to position/orient a node (e.g. an image) in multiple places on the stage, each corresponding with a point in time on a timeline (represented by a slider). Each point in time becomes a KeyFrame, and interpolations are calculated based upon position/orientation. Dragging the slider results in seeing the node move and rotate through the positions in which the node was placed. I assume that scaling and other transforms will be supported in the tool as well. Tor mentioned that various interpolations are supported (LINEAR, EASEIN, EASEOUT, and EASEBOTH). I assume that spline interpolation will be supported as well.
- Placing UI controls on the stage, hooking them up with event handlers, as well as binding to instance variable values (e.g. in other UI controls).
- Targeting an application at multiple screens (e.g. desktop, mobile phones), with the ability to customize for each screen.
Augusto Sellhorn (AKA sellmic) has compiled some video clips and his thoughts about the JavaFX Authoring Tool in a blog post. If you didn't see the Toy Show, checking out Augusto's post is a quick way of seeing the preview of the tool.
Update June 13, 2009: Augusto created another blog post with new screenshots, links and thoughts on the JavaFX Authoring Tool.
Magnus Robertsson presents another *aspect* on JavaFX MOJO binding ;-)
Magnus has created an open source tool called javafxbinder that utilizes Aspect-Oriented Programming, and PropertyChangeListener functions, to keep a JavaFX object updated when mutator functions in a POJO are called. Nice MOJO, Magnus!
Speaking at Øredev in Malmö, Sweden
On a related note, I'll be speaking at Øredev (founded by jayway and some other "ways": dotway, leadway, testway and realway) which will be held in Malmö, Sweden on 2-6 November, 2009. Hope to see you there!
JFXtras 0.2 Released: Featuring Extra Shapes for JavaFX
The open source JFXtras project provides extra capabilities for JavaFX, such as a powerful Grid layout facility, dialog box capability, easy to use asynchronous thread support and declarative unit testing. The JFXtras 0.2 release features a new custom shape library that came out of a joint effort with the jSilhouette Project. See Stephen Chin's blog post for more information on this release. Also, see Andres Almiray's blog post on the jSilhouette 0.3 release.
Here a screenshot of the ShapesDemoFX program that is included with the JFXtras project. Click the Java Web Start link below to run the demo.
Here's a screenshot from a little program written by Chris Wright that demonstrates how to use some of the shapes in JFXtras, followed by the source code:
import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.text.*;
import javafx.scene.paint.*;
import javafx.scene.layout.*;
import javafx.scene.transform.*;
import org.jfxtras.scene.shape.*;
Stage {
width: 500
height: 350
title: "JFXtras 0.2"
scene:
Scene {
fill: Color.BLACK
content: [
Group {
content: [
MultiRoundRectangle {
x: 50
y: 100
width: 400
height: 100
topRightWidth: 35
topRightHeight: 35
bottomRightWidth: 35
bottomRightHeight: 35
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 1.0
endY: 0.0
proportional: true
stops: [
Stop {
offset: 0.0
color: Color.rgb(255,255,51)
},
Stop {
offset: 0.5
color: rgb(255,102,0)
}
]
}
},
ReuleauxTriangle {
angle: -48
x: 150
y: 100
width: 175
fill: Color.rgb(204,0,0)
stroke: Color.rgb(102,0,0)
},
HBox {
transforms: Translate.translate(90, 110)
content: [
Text {
content: "JFX"
textOrigin: TextOrigin.TOP
font: Font.font("Sans serif", FontWeight.BOLD, 100)
},
Text {
transforms: Translate.translate(0, 10)
content: "tras"
textOrigin: TextOrigin.TOP
font: Font.font("Sans serif", FontWeight.BOLD, FontPosture.ITALIC, 70)
}
]
}
]
}
HBox {
transforms: Translate.translate(90, 250)
spacing: 7
content: [
Asterisk {
centerX: 10
centerY: 10
radius: 25
width: 4
beams: 7
roundness: 0.5
fill: Color.WHITE
},
Text {
content: "Now With Cool Shapes!"
textOrigin: TextOrigin.TOP
font: Font.font("Sans serif", FontWeight.BOLD, 24)
fill: Color.WHITE
}
]
}
]
}
}
For your convenience, here is a link to the JFXtras 0.2 API docs, as well as the JFXtras project itself.
Congratulations to the JFXtras project team for this 0.2 release, particularly Dean Iverson and Andres Almiray, and our fearless leader Stephen Chin :-)
Absence of Malice in JavaFX
Because JavaFX Script programs compile to Java CLASS files and run within the Java Runtime Environment (JRE), they are subject to the Java security model. When a user clicks a Java Web Start link or navigates to a page that contains an applet, the Java code must play exclusively in "the sandbox" unless the user gives it permission to jump out. There are a couple of ways to enable the user to give this permission to the application:
- Option #1: Don't sign the JAR files that contain your JavaFX application. By not signing the JAR files, you are ensuring that the user will be asked to authorize any out-of-sandbox-experiences. For example, the Earthrise at Christmas post contains a Java Web Start link to a JavaFX application that isn't signed. Because the application displays an image that is loaded from another website (in this case nasa.gov) the following Security Warning dialog is presented to the user:
This option makes the user respond to Security Warnings, but if the code isn't signed, then the user shouldn't be expected to trust the application without receiving these kinds of warnings. - Option #2: Sign the JAR files that contain your JavaFX application. By signing the JAR files, you are ensuring that the application will not execute unless the user indicates that he/she trusts the signer of the code. In addition, the user won't be asked for permission for the application to play outside of the sandbox when, for example, the image from Nasa above is accessed, or a file is written. To demonstrate this, if you click the following Java Web Start link to the Earthrise at Christmas application in which the JAR file is signed, you'll be presented with the Security dialog shown below it:
Notice that the the dialog says that the signature has been verified/validated (because a code-signing certificate was used). This is an important feature because if the signature can't be verified, then the user can't be sure who really signed it. This opens the door for spoofed and malicious applications. The only way that I would run an application whose signature hasn't been verified, is if I knew by some other means who published the application (e.g. the application was written by a colleague and it is located on a corporate intranet).
What about the Self-Signed Jar option in NetBeans (using the JavaFX Plug-in)?
If you select the Self Signed Jar option in NetBeans as shown below, then a dialog similar to the one above will appear when the user runs the application, but it will say that the signature can't be verified.
For reasons described above, posting or executing Java and JavaFX applications with self-signed JARs on the Internet is not a good practice. It's better to go with option #1 above and let the user approve any out-of-the-sandbox behavior, or option #2 with a code-signing certificate (e.g. from VeriSign or Thawte).
Creating and Signing Pack200 (Compressed) Files
The JAR files that contain Java/JavaFX applications can be further compressed into the Pack200 format and deployed with JNLP. To create and sign a Pack200 file, use the following commands available with the JDK, shown here in the context of the Earthrise at Christmas application:
pack200 --repack HelloEarthRise.jar
jarsigner -keystore [keystore url] -verbose -keypass [key password]
-storepass [keystore password] HelloEarthRise.jar [keystore alias]
pack200 HelloEarthRise.jar.pack.gz HelloEarthRise.jar
As always, please leave a comment if you have any questions.
JavaFX Skins Game, and Happy New Year!
A Note from Jim Weaver:
First of all, I would like to wish you a Happy and Blessed New Year! I'm excited about the momentum that JavaFX has achieved since its 1.0 release in December 2008, and about its increased adoption for RIA and mobile development in 2009.
Also, I'd like to introduce Dean Iverson, the author of today's article, who for many of you needs no introduction because he's been active in the Java/Swing/JavaFX community for some time now. Dean will be a regular contributor to the JavaFXpert blog, as well as to the JFXtras project that he mentions in todays article.
Dean has been writing software professionally for over 15 years. In that time he has worked on everything from games, to driving simulators, to large-scale enterprise applications and just about everything in between. Currently, he is employed by the Virginia Tech Transportation Institute where he has a cool job (of which I'm jealous) as a senior researcher where he is working on rich client applications. He also has a small software consultancy called Pleasing Software Solutions which he co-founded along with his wife who, by his own admission, is the brains of the outfit and the better programmer. I personally think that his wife develops these JavaFX examples and that he just writes about them :-) Also, he is the Technical Reviewer of the upcoming Pro JavaFX book that Weiqi Gao, Stephen Chin and I are currently writing. With that being said, please enjoy Dean's first post on the JavaFXpert blog:
JavaFX Skins Game
Simon Morris, author of the upcoming JavaFX in Action book, has just written a very informative post on his blog. He shows how to create a custom progress bar that is skinnable using JavaFX's support for CSS. It's definitely worth a read. Using CSS you can customize just about every aspect of the rectangles that Simon uses in his progress meter: their size, color, even how many there are! It's the ultimate in flexibility.
A New Shape
But what if you want to use a different shape entirely? Even that is possible without having to recompile Simon's original code. For example, there is a new shape in the JFXtras project called the VariableCornerRectangle. This shape is a rectangle that can have any combination of rounded or square corners. It looks like this:
The code to produce the shape above looks like this:
VariableCornerRectangle {
ulArc: 80
urArc: 0
lrArc: 80
llArc: 0
width: 200
height: 200
fill: Color.CORNFLOWERBLUE
stroke: Color.BLUE
strokeWidth: 5
}
We just use the shape's corner arc attributes to set the upper-left and lower-right corners as arcs with a radius of 80 pixels. We then set the other corners to be square by using an arc size of 0.
A New Skin
So how do we use this new shape in Simon's progress meter? First, we create a new skin class. It will be almost exactly the same as Simon's, but it will use the new shape.
public class VariableCornerProgressSkin extends Skin {
public var boxCount:Integer = 10;
public var boxWidth:Number = 15;
public var boxHeight:Number = 20;
public var boxHGap:Number = 2;
public var unsetHighColor:Color = Color.YELLOW;
public var unsetMidColor:Color = Color.GREEN;
public var unsetLowColor:Color = Color.DARKGREEN;
public var setHighColor:Color = Color.ORANGE;
public var setMidColor:Color = Color.RED;
public var setLowColor:Color = Color.DARKRED;
var boxValue:Integer = bind {
var p:Progress = control as Progress;
var v:Number = (p.value - p.minimum) / (p.maximum - p.minimum);
(boxCount * v) as Integer;
}
init {
def border:Number = bind boxWidth / 10;
def arc:Number = bind boxWidth / 2;
def lgUnset:LinearGradient = bind makeLG(unsetHighColor,unsetMidColor,unsetLowColor);
def lgSet:LinearGradient = bind makeLG(setHighColor,setMidColor,setLowColor);
scene = HBox {
spacing: bind boxHGap;
content: bind for(i in [0..<> A Small Change Of Style
Simon's original code used the following CSS to style the three different progress meters in his sample program.
"Progress" {
boxWidth: 15;
boxHGap: 2;
setHighColor: yellow;
setMidColor: red;
setLowColor: darkred;
unsetHighColor: cyan;
unsetMidColor: blue;
unsetLowColor: darkblue;
}
"Progress"#testId {
boxWidth: 25;
boxHeight: 30;
boxCount: 7;
boxHGap: 1;
unsetHighColor: white;
unsetMidColor: silver;
unsetLowColor: dimgray;
}
"Progress".testClass {
boxWidth: 7;
boxHGap: 2;
boxCount: 20;
setHighColor: yellow;
setMidColor: limegreen;
setLowColor: darkgreen;
} This stylesheet produced the three progress meters in Simon's original example.
All we have to do to use our new skin is to add a new CSS selector. In this case I want to change the skin of the progress meter with the id of testId. So I'll add a new selector just above the existing one that applies the new skin.
"Progress"#testId {
skin: javafx_css.VariableCornerProgressSkin;
}
"Progress"#testId {
boxWidth: 25;
boxHeight: 30;
boxCount: 7;
boxHGap: 1;
unsetHighColor: white;
unsetMidColor: silver;
unsetLowColor: dimgray;
} And voila, we have a new progress meter! Notice that the middle meter (whose id is testId) is the only one that changed. Click the Java Web Start Launch icon below to see it in action.
I have used the fully qualified path name for the VariableCornerProgressSkin class in the selector's skin declaration. In this case, the class is located in my javafx_css package.
It is important that the selector with the skin: declaration be a separate selector and be placed above any other selectors that match the same control. Otherwise all of the style declarations will be applied to the original skin instead of the new one. Apparently the skin is only replaced after the entire selector is parsed so any styles contained within the same selector will be applied to the existing skin rather than the new one.
Thanks again to Simon Morris for the original example!
JFXtras 0.1 Release: Utilities and Add-ons for the JavaFX Language
JFXtras is an open-source project that helps fill in some of the gaps of the JavaFX 1.0 Release. The JFXtras project is led by Stephen Chin (co-author of the upcoming Pro JavaFX book) and it includes support for Dialogs, Grid Layouts, Unit Testing, and an Asynchronous Worker class.
You can download the 0.1 release, peruse the Javadoc online, and sign-up for the mailing list, all on the Google Code project site.
The 0.1 release includes the following capabilities that augment what JavaFX 1.0 provides:
- Dialogs - The JFXtra Dialog provides a drop-in replacement for a Stage that will pop-up a real Java Dialog. This includes support for an owner window, modality, alwaysOnTop, the ability to hide the taskbar icon, and many other features.
- Layouts - The JFXtra Grid provides an advanced layout container (example shown above) that can be used for JavaFX nodes and wrapped swing components.
- Testing - JFXtras provides a declarative Unit Testing facility that allows you to do write JavaFX tests in the JavaFX language. It is modeled after best-of-class behavior-driven and fluent testing patterns to make tests easier to read and maintain.
- Asynchronous Worker - Working on the theory that developers deserve their share of rope, JFXtras provides an asynchronous worker wrapper that allows you to execute pure JavaFX code on a background thread.
A JavaFX Visual Designer Tool Just Fell out of the Sky
Jeff Martin of ReportMill Software has been involved with the JavaFX community since the beginning. ReportMill has been working on a GUI builder tool for JavaFX named JFXBuilder, and has given the community a peek from time to time. Each time, I've kicked the tires a bit, but haven't felt that it was ready for prime time.
Today on a JavaFX community mailing list, I received the following email from Jeff that began with:
"Hope nobody minds me posting this, since it's free and "educational". :-)
It was followed by the first portion of the JFXBuilder press release, which contains a Java Web Start link to JFXBuilder, and information such as the following:
"JFXBuilder is a desktop design and composition application for visually building JavaFX applications quickly, including the ability to:
- Perform drawing and illustration
- Add and edit rich text (fonts, colors, styles, wrapping, spelling, etc.)
- Apply advanced fills (textures and gradients)
- Apply advanced effects (shadow, reflection, emboss, glow, etc.)
- Apply advanced transforms (rotation, scale, skew)
- Drag and Drop images and other media
- Drag and Drop application components
- Apply Key-Frame based animation
- Apply path-based animation
- Apply Input-related behavior (Mouse-over, Mouse-down, etc.)
- Attach to a database or XML and perform data binding
- Design simple layouts for default JavaFX mobile devices
- Generate JavaFX code on the fly"
As I dragged the mouse on the trackball shown above in the lower-right corner, the perspective of the 3D bar graph changed accordingly. I was not expecting that level of sophistication, given that JavaFX SDK 1.0 was released only two weeks ago.
I haven't experimented much with JFXBuilder, and I don't know anything about their licensing-related plans yet, but wanted to give you a heads-up that this looks seriously cool to me so far.
Jeff Martin or someone from ReportMill: If you read this, would you leaving a comment and/or link about your licensing-related plans for JFXBuilder?
December 11, 2008
Eclipse Plugin for JavaFX Available, and NetBeans JavaFX Plugin Works on Linux
According to Josh Marinacci of Sun on a Java Posse thread: "We (Sun) have an early release of an Eclipse plugin for JavaFX up on Kenai."
Please join me in checking it out and let me know what your experiences are with this early release Eclipse plugin for JavaFX!
On a related note, Weiqi Gao shows us how to make the JavaFX 1.0 plugin for NetBeans 6.5 work on Linux!
Up the Nile *with* a Paddle: Fun with JavaFX Graphics
I've often mentioned the importance of programmers and graphics designers working together to create great looking RIAs. The declarative syntax of JavaFX facilitates this approach, and the "Project Nile" tool available with the JavaFX SDK makes this even easier.
Try your hand at the "Breakout" style game that Sten posted on his blog, and then read about how he collaborated with a graphic designer (his four-year-old daughter) to create this game in JavaFX. Sten discusses in his post how he used Project Nile to export graphics-related JavaFX code from Adobe Illustrator using Project Nile.
On a related note, Silveira Neto (whose JavaFX fun I've featured on this blog before) participated in creating a plug-in for Inkscape that exports SVG in the form of JavaFX code.
That Silveira has all the fun! Regards,
July 04, 2008
JavaFX API Documentation Tool Now Supports In-line Examples
The JavaFX API documentation tool (javafxdoc) now supports the effortless insertion of examples. For instance, this screenshot shows a page of the JavaFX API in which an example is embedded along with its output image generated:
An Explanation from the Author of this Feature
According to an explanation by Josh Marinacci of Sun, "One of the innovations in the JavaFX toolchain is our new javafxdoc tool. Rather than producing a set of html files like regular 'javadoc' does, we produce a single large XML file representing the entire codebase's API. This lets us easily add extra processing steps, such as producing semantic well-formed XHTML as you see today. It also lets us do a few other things. Last time I mentioned custom doclet tags for things like default value and read only. Now we've added inline examples.
Before today if you wanted some example code with a screenshot in your docs you had to mark up the code manually (assuming you wanted any syntax highlighting), then copy the code into a separate project, compile it, run it, then save a screenshot of the running app. Then you must finally copy the screenshot back into your docs. This system is really bad for several reasons:
* It's time consuming, so we do less of it.
* The repository becomes polluted with screenshots
* The sample code may not compile if the API changes before you release the SDK
* The screenshots can get quickly out of date.
* The code snippets aren't syntax highlighted.
With our new inline examples system all of these are taken care of. Just use the @example doc tag and the rest will be taken care of for you. The doc tool will compile and run your code into a buffered image. Then it will insert nicely syntax highlighted code back into the final page along with a link to the screenshot."
Here's an example:
@example
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
ShapeSubtract {
fill: Color.BLACK
a: Rectangle { width: 100 height: 50 }
b: Ellipse { centerX: 100 centerY: 25 radiusX: 50 radiusY: 25}
}
Will produce the page you see in the screenshot above.
Tom Ball, a JavaFX development leader in Sun, added these comments in a reply: "It also lets *anyone* with basic XML transforming skills (lots of online tutorials) do things we never imagined. One reason JavaDoc tends to look dated is that most developers have relied on whatever comes from Sun, instead of jumping in and raising the UI bar. Now it is much more hackable...
This XML file is a database of a project's attributes, which can not only be data-mined to improve documentation, but to support many other tools. For example, a cscope-like source navigator is more easily done than the original tool, as the XML model has more useful information about the source."
The ease of creating examples that are in-line with the documentation should encourage development of these examples, both in the JavaFX library API as well as in documentation that you and I as developers create for our projects. Thanks Josh and the JavaFX development team for this facility!
0 comments:
Post a Comment