Javafx

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

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

2

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

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

4

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?

Sun Microsystems, Inc.

10

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

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

Sun Microsystems, Inc.

13

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

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

Description	Price
${item.description}	${item.price}

Sun Microsystems, Inc.

20

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

23

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.

[email protected] [email protected] http://weblogs.java.net/blog/gmurray71

Sun Microsystems, Inc.

Sun Microsystems, Inc.