JavaFX goes Scala

Farewell JavaFX Script

Andreas Schosser

Changes in GUI development

Conventional GUIs

• Often designed by a

software engineer

• Usage of common

widgets / controls

• Customized by skins

/ CSS

• Supported by

toolkits like SwingDeveloper +

WindowBuilder

Modern GUIs

• Often designed by a

graphics designer

• Usage of individual

widgets / controls

• Designed from soup

to nuts

• Supported by

toolkits like JavaFXDesigner +

Illustrator

The difference

Designer +

Illustrator

Developer +

WindowBuilder

Why are designers important?

Designer +

Illustrator

Developer +

Illustrator

What makes the difference …

Designers ….

• … describe a new

interface

• … focus on

appearance

Developers …

• … reuse existing

patterns

• … focus on

functionality

The JavaFX 2.0 API

Pure Java API

Java API including JavaFX 1.3 features

• Data-Binding

• Charts and diagrams

• Bitmap-Effects

• Animation

JavaFX Script => Java

Focus on

Functionality

"JavaFX 2.0" == "Swing 2.0" ?

• Swing-like controls

• Programmatic initialization:

common construction + alignment

• Swing interoperability[…]

Scene scene = new Scene(stage);

scene.setWidth(800);

scene.setHeight(600);

Label label = new Label(scene);

label.setText("Welcome");

scene.add(label);

[…]

Existing

patterns

Why another language?

• Design-related domain

• Interoperability with design tools

(e.g. Adobe Illustrator)

• Independence from devices

Focus on

Appearance

The GUI language

• Intuitive placement

• Mapping source-code with

layout definitions

• Innovative controls […]

scene = new Scene {

width = 800

height = 600

content = new Content {

label = new Label {

text = "Welcome"

}

[…]

Describe a

new interface

Java and GUI language

GUI language does ….

• … describe a new

interface

• … focus on

appearance

Java does …

• … reuse existing

patterns

• … focus on

functionality

Bringing both worlds together

Translating the GUI-DSL

GUI-DSL

to Java API

GUIDSL

API

JAVA[…]

scene = new Scene {

width = 800

height = 600

content = new Content {

label = new Label {

text = "Welcome"

}

[…]

[…]

Scene scene = new Scene(stage);

scene.setWidth(800);

scene.setHeight(600);

Label label = new Label(scene);

label.setText("Welcome");

scene.add(label);

[…]

Learning from JavaFX Script

• Focus on appearance

• Concise definitions

• Usage of Mixins

• Transparent Java integration

Good old

JavaFX Script

The Visage Project

• Unofficial successor to JavaFX Script

• Open Source Project

• Founded by

JavaFX Expert Stephen Chin

The unofficial

successor

Scala as DSL technology

• Established DSL-technology

• Runs on Android

• Static Type Checking

=> Performance

Reasons

for Scala

Transformation example

Speaking

Java API

[…]

Label label = new Label(scene);

label.setText(“Hello JavaFX Script");

scene.add(label);

[…]

[…]

label = new Label {

text = "Hello JavaFX„

}

[…]

[…]

def node = "new" ~> nodeType ^^ type => {

if ("Label" == type) {

new JLabel()

}

[…]

Which JVM-language?

Flexible

Integration

Visage

Scala

Groovy

JRuby

?

?

??

?

?Scala

JRuby

Visage

Links & Literature

• Roadmap JavaFX

Official JavaFX Website

• The “Visage“ Project

Google Code Project

• Der Abschied von JavaFX Script

Online article 04/2011

Thank you for your attention!

… und suchen ein paar der besten Arbeitnehmer!

COINOR bietet allen Mitarbeitern

Spannende Projekte

Individuelle Förderung

Die Möglichkeit, schnell Verantwortung zu übernehmen

Attraktive Vergütungsmodelle

Einen motivierenden Teamgeist

Wir gehören zu den 100 besten Arbeitgebern Deutschlands …