Changes in GUI Development

1. JavaFX goes Scala
Farewell JavaFX Script
Andreas Schosser

2. Changes in GUI development

3. Conventional GUIs
• Often designed by a
software engineer
• Usage of common
widgets / controls
• Customized by skins
/ CSS
Developer + • Supported by
WindowBuilder toolkits like Swing

4. Modern GUIs
• Often designed by a
graphics designer
• Usage of individual
widgets / controls
• Designed from soup
to nuts
Designer + • Supported by
Illustrator toolkits like JavaFX

5. The difference
Designer + Developer +
Illustrator WindowBuilder

6. Why are designers important?
Designer + Developer +
Illustrator Illustrator

7. What makes the difference …
Designers …. Developers …
• … describe a new • … reuse existing
interface patterns
• … focus on • … focus on
appearance functionality

8. The JavaFX 2.0 API

9. Pure Java API
Java API including JavaFX 1.3 features
• Data-Binding
• Charts and diagrams
• Bitmap-Effects
• Animation
Focus on
Functionality
JavaFX Script => Java

10. "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);
Existing Label label = new Label(scene);
label.setText("Welcome");
patterns scene.add(label);
[…]

11. Why another language?
• Design-related domain
• Interoperability with design tools
(e.g. Adobe Illustrator)
• Independence from devices
Focus on
Appearance

12. The GUI language
• Intuitive placement
• Mapping source-code with
layout definitions
• Innovative controls […]
scene = new Scene {
width = 800
height = 600
content = new Content {
Describe a label = new Label {
text = "Welcome"
new interface }
[…]

13. Java and GUI language
GUI language does …. Java does …
• … describe a new • … reuse existing
interface patterns
• … focus on • … focus on
appearance functionality

14. Bringing both worlds together

15. Translating the GUI-DSL
[…]
Scene scene = new Scene(stage);
scene.setWidth(800);
scene.setHeight(600);
Label label = new Label(scene);
label.setText("Welcome");
GUI API
scene.add(label);
[…]
[…]
DSL
scene = new Scene {
width = 800
JAVA
height = 600
content = new Content { GUI-DSL
label = new Label { to Java API
text = "Welcome"
}
[…]

16. Learning from JavaFX Script
• Focus on appearance
• Concise definitions
• Usage of Mixins
• Transparent Java integration
Good old
JavaFX Script

17. The Visage Project
• Unofficial successor to JavaFX Script
• Open Source Project
• Founded by
JavaFX Expert Stephen Chin
The unofficial
successor

18. Scala as DSL technology
• Established DSL-technology
• Runs on Android
• Static Type Checking
=> Performance
Reasons
for Scala

19. Transformation example
[…]
Label label = new Label(scene);
label.setText(“Hello JavaFX Script");
scene.add(label);
[…]
[…]
def node = "new" ~> nodeType ^^ type => {
if ("Label" == type) {
new JLabel()
}
[…]
[…]
label = new Label {
text = "Hello JavaFX„ Speaking
} Java API
[…]

20. Which JVM-language?
Visage ? Scala
?
? JRuby ?
Flexible
? Groovy ?
Integration

21. Links & Literature
• Roadmap JavaFX
Official JavaFX Website
• The “Visage“ Project
Google Code Project
• Der Abschied von JavaFX Script
Online article 04/2011

22. Thank you for your attention!

23. Wir gehören zu den 100 besten Arbeitgebern Deutschlands …
COINOR bietet allen Mitarbeitern
 Spannende Projekte
 Individuelle Förderung
 Die Möglichkeit, schnell Verantwortung zu übernehmen
 Attraktive Vergütungsmodelle
 Einen motivierenden Teamgeist
… und suchen ein paar der besten Arbeitnehmer!