JavaFX Script

Declarative GUI Programming Language for the Java Platform

Anatoli Fomenko, Senior Staff Engineer, JavaFX Community Manager

Greg Murray, Senior Staff Engineer, Ajax Architect
Sun Microsystems, Inc.
Submission ID: 2161

Sun Microsystems, Inc.

Who are Anatoli and Greg?
2

> Anatoli
– In Java since 1998
– Sun Java IDE developer and architect
– JavaFX Community Manager
> Greg
– Web head for the past 12 years
– Servlet 2.5 Specification lead
– Started grass root Ajax efforts at Sun
– Ajax Architect for Sun
– Lead for jMaki

Sun Microsystems, Inc.

Before JavaFX 3

> Why does it take a long time to write GUI

programs?
> How can we avoid the “Ugly Java technology GUI”
stereotype?
> Why do Flash programs look different than Java
platform programs?
> Why does it seem easier to write web apps than
Swing programs?
> How can I avoid having an enormous mass of
listener patterns?

Sun Microsystems, Inc.

History of JavaFX 4

> Originally it was kind of modeling language:

– The class declarations were based on the IDL used for
object databases
– UML cardinality specifications for attributes
– UML object notation (NAME:CLASS) for constants
> Query language added:
– Java-like expressions
– Features from XQuery: sequences (arrays), predicates
and list-comprehensions (foreach, Select)
– First-class functions and closures follow the syntax of
ECMAScript to incorporate them into variable
declarations

Sun Microsystems, Inc.

History of JavaFX 5

> Procedural update language with Java-like

control structures and the update syntax
(insert/delete) from XQuery
> For UI designers convenience:
– Cryptic Java operators (!=, !, &&, ||, ?:) were
replaced with more well-known equivalents (<>,
not, and, or, if/then/else)
– Balance between having type declarations for
readability and having the option of omitting
them without hurting ability to understand the
code

Sun Microsystems, Inc.

History of JavaFX 6

From my experience with C++ and Java, having

method bodies in the class declaration clutters it
with a mass of implementation details which is
detrimental to getting an overview of the actual
relationships and operations embodied by the
class. It was for this reason that I decided to
define the bodies of class operations and
functions outside the class declaration.

Chris Oliver - Creator of JavaFX

Sun Microsystems, Inc.

What is JavaFX? 7

> Programming Language for the Java platform

> Object-oriented
> Declarative Syntax
> Statically-typed + type-inference
> Automatic data binding
> Extensive Widget library encompassing Swing
and Java 2D™ API
> Development tools including NetBeans™ and
Eclipse IDE plugins

Sun Microsystems, Inc.

Why Another Scripting Language?
8

> Only the Java platform can marry client- and

browser-based technologies with RIAs to run
across virtually any device
> Designed to optimize the creative process of
building rich and compelling UIs leveraging
Java Swing, Java 2D and Java 3D for
developers and content authors
> Structure of JavaFX code closely matches the
actual layout of the GUI, making it more
readable and maintainable

Sun Microsystems, Inc.

DEMO

Sun Microsystems, Inc.

 10

What Problem Does JavaFX Solve?

> Fundamentally: how can we make GUI
development more efficient?
> GUI development is a collaboration between
content designers, graphic artists, and
programmers
> The main bottleneck in this process appears to
be us—the programmers—and not the content
designers or graphic artists
> But what exactly is making us inefficient?

Sun Microsystems, Inc.

The “Ugly Java Technology GUI” 11

Stereotype
> Part of the problem is Swing
– AWT/Swing container/component hierarchy is a tree of
rectangular (mostly gray) boxes
– If all you do is compose Swing components together
 the result is typically the Ugly Java technology GUI
– Same problem exists with other toolkits, e.g., GTK, VB
> UI Designers and Swing programmers are using different
building blocks
– UI Designers compose designs in tools like Photoshop
and Illustrator
– The building blocks they use have direct analogs in Java
2D API, but not necessarily in Swing

Sun Microsystems, Inc.

DEMO

Sun Microsystems, Inc.

Swing Hello World 13

import javax.swing.*;

public class HelloWorldSwing {

public static void main(String[] args) {
JFrame frame = new JFrame("HelloWorldSwing");
final JLabel label = new JLabel("Hello World");
frame.getContentPane().add(label);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_
CLOSE);
frame.pack();
frame.setVisible(true);
}
}

Sun Microsystems, Inc.

JavaFX Hello World 14

import javafx.ui.*;

Frame {
title: "Hello World JavaFX"
width: 200
height: 50
content: Label {
text: "Hello World"
}
visible: true
}

Sun Microsystems, Inc.

Java 2D API
15

> To match the designs of UI designers requires using

Java 2D API
> But Java 2D API doesn't have compositional behavior
– The barrier to entry for many Java code programmers is
too high (i.e., other than Romain Guy)
> In addition to Swing Components, JavaFX includes
SVG-like interfaces to Java 2D API as first-class
elements which can be composed together into
higher-level components.
> JavaFX allows declarative expression of this
composition

Sun Microsystems, Inc.

DEMO
JavaFX 2D Graphics Tutorial

Sun Microsystems, Inc.

Why Do Flash Programs Look Different
17

Than Java Platform Programs?

> Actually—they don’t
> Java 2D API can do what Flash does—You just
have to use it!
> Demos
– Amazon
– Bentley
– Tesla
– Nike
– Lotus

Sun Microsystems, Inc.

DEMO

Sun Microsystems, Inc.

 19

Benefits of Declarative Syntax

> You can see it in Web applications

> For example, ease of composing styled text
– HTML vs. JTextPane
> HTML Table using JSTL versus JTable
> JavaFX brings that same ease of use to
Swing and Java 2D API programming

Sun Microsystems, Inc.

HTML Table With JSTL 20

<table>
<tr>
<th>Description</th>
<th>Price</th>
</tr>
<forEach var=”item” items=”${cart.items}”>
<tr>
<td>${item.description}</td>
<td>${item.price}</td>
</tr>
</forEach>
</table>

Sun Microsystems, Inc.

DEMO
JavaFX Pad

Sun Microsystems, Inc.

Benefits of Data Binding in JavaFX 22

> Cause and Effect—Responding to change

> The JavaFX bind operator—Allows dynamic
content to be expressed declaratively
> Dependency-based evaluation of any expression
> Automated by the system—Rather than
manually wired by the programmer
> You just declare dependencies and the JavaFX
runtime takes care of performing updates when
things change
> Eliminates listener patterns

Sun Microsystems, Inc.

Example: Adding Dynamic Behavior 23

class HelloWorldModel {
attribute saying: String;
}

var model = HelloWorldModel {

saying: "Hello World"
};

var win = Frame {

title: bind "{model.saying} JavaFX"
width: 200
content: TextField {
value: bind model.saying
}
visible: true
};

Sun Microsystems, Inc.

DEMO

Sun Microsystems, Inc.

 25

Benefits of Static Typing

> High-quality, compile-time error reporting
> High-quality IDE support
– Code-completion
– Searching
– Refactoring
> Efficient compilation

Sun Microsystems, Inc.

DEMO
NetBeans Plugin

Sun Microsystems, Inc.

JavaFX: To Infinity and Beyond 27

> Compiler development is in progress

> NetBeans Plugins are updated regularly
> JavaFX Hardware Platforms:
– Phones (JavaFX Mobile)
– Set top boxes
> Multi-language site: java.net #1 by hits and
accesses
> Fast community growth

Sun Microsystems, Inc.

 28

JavaFX: Call to Action

> Open Sourcing in progress
> The future of JavaFX is up to YOU
> How can you make a difference:
– Register at http://openjfx.dev.java.net
– Learn, play, ask questions
– Participate, submit patches or content
– Educate, drive, inspire

Sun Microsystems, Inc.

DEMO

Sun Microsystems, Inc.

 30

Resources

>http://openjfx.dev.java.net
>http://www.sun.com/javafx
>http://jfx.wikia.com
> http://evc-cit.info/jfx/makeapi/api/index.html

Sun Microsystems, Inc.

Q&A

Sun Microsystems, Inc.

Anatoli.Fomenko@Sun.COM

Gregory.Murray@Sun.COM
http://weblogs.java.net/blog/gmurray71

Sun Microsystems, Inc.

Sun Microsystems, Inc.