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?
> Anatoli
– In Java since 1998 – Sun Java IDE developer and architect – JavaFX Community Manager

2

> 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
> 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.

3

History of JavaFX
> 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

4

> 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
> 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.

5

History of JavaFX
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.

6

What is JavaFX?
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.

7

Why Another Scripting Language?
> 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.

8

DEMO

Sun Microsystems, Inc.

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?

10

Sun Microsystems, Inc.

The “Ugly Java Technology GUI” Stereotype

11

> 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
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);

13

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

Sun Microsystems, Inc.

JavaFX Hello World
import javafx.ui.*; Frame { title: "Hello World JavaFX" width: 200 height: 50 content: Label { text: "Hello World" } visible: true }
Sun Microsystems, Inc.

14

Java 2D API
> To match the designs of UI designers requires using Java 2D API > But Java 2D API doesn't have compositional behavior

15

– 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 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.

17

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
<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.

20

DEMO
JavaFX Pad

Sun Microsystems, Inc.

Benefits of Data Binding in JavaFX
> 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.

22

Example: Adding Dynamic Behavior
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 };

23

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
> 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.

27

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.