JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and Visage <br />Stephen Chin<br />Chief Agile Met...
About the Presenter<br />Stephen Chin<br />Java Champion<br />Family Man<br />Chief Agile Methodologist, GXS<br />Author, ...
Pro JavaFX 2 Platform Coming Soon!<br />Coming 2nd half of this year<br />All examples rewritten in Java<br />Will cover t...
Disclaimer: This is code-heavy<br />THE FOLLOWING IS INTENDED TO STIMULATE CREATIVE USE OF JVM LANGUAGES. AFTER WATCHING T...
JavaFX With Java<br />
JavaFX 2.0 Product Timeline<br />CYQ1 2011<br />CYQ3 2011<br />CYQ2 2011<br />JavaFX 2.0 EA<br />(Early Access)<br />JavaF...
Programming Languages<br />JavaFX 2.0 APIs are now in Java<br />Pure Java APIs for all of JavaFX<br />Expose JavaFX Bindin...
JavaFX in Java<br />JavaFX API follows JavaBeans approach<br />Similar in feel to other UI toolkits (Swing, etc)<br />Uses...
Example Application<br />public class HelloStage extends Application {<br />  @Override public void start(Stage stage) {<b...
Binding<br />Unquestionably the biggest JavaFX Script innovation<br />Supported via a PropertyBinding class<br />Lazy invo...
Observable Pseudo-Properties<br />Supports watching for changes to properties<br />Implemented via anonymous inner classes...
Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rec...
Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rec...
Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rec...
Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rec...
Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rec...
Sequences in Java<br />Replaced with an Observable List<br />Public API is based on JavaFX sequences<br />Internal code ca...
JavaFX With JRuby<br />
Why JRuby?<br /><ul><li>Direct access to Java APIs
Dynamic Typing
Closures
‘Closure conversion’ for interfaces</li></li></ul><li>Java in JRuby  - Accessing Properties<br />timeline.setAutoReverse(t...
JRuby Example 1: Simple Stage<br />require 'java'<br />Application = Java::javafx.application.Application<br />Stage = Jav...
JRuby Example 2<br />rect = Rectangle.new<br />rect.x = 25<br />rect.y = 40<br />rect.width = 100<br />rect.height = 50<br...
JRuby Closure Conversion<br />rect.hoverProperty.addListener() do |prop, oldVal, newVal|<br />rect.fill = rect.hover ? Col...
JRubySwiby<br />require 'swiby'<br />class HelloWorldModel<br />attr_accessor :saying<br />end<br />model = HelloWorldMode...
25<br />JavaFX With Clojure<br />Artwork by Augusto Sellhorn<br />http://sellmic.com/<br />
A Little About      Clojure<br />Started in 2007 by Rich Hickey<br />Functional Programming Language<br />Derived from LIS...
Clojure Syntax in One Slide<br />Symbols<br />numbers – 2.178<br />ratios – 355/113<br />strings – “clojure”, “rocks”<br /...
Clojure GUI Example<br />(defnjavafxapp []<br />  (let [stage (Stage. "JavaFX Stage")<br />        scene (Scene.)]<br />  ...
Clojure GUI Example<br />(defnjavafxapp[]<br />  (let [stage (Stage. "JavaFX Stage")<br />        scene (Scene.)]<br />   ...
Clojure GUI Example<br />(defnjavafxapp []<br />(let [stage (Stage. "JavaFX Stage")<br />        scene (Scene.)]<br />    ...
Clojure GUI Example<br />(defnjavafxapp []<br />  (let [stage (Stage. "JavaFX Stage")<br />        scene (Scene.)]<br />  ...
Clojure GUI Example<br />(defnjavafxapp []<br />  (let [stage (Stage. "JavaFX Stage")<br />        scene (Scene.)]<br />  ...
Simpler Code Using doto<br />(defnjavafxapp []<br />  (let [stage (Stage. "JavaFX Stage")<br />        scene (Scene.)]<br ...
Simpler Code Using doto<br />(defnjavafxapp []<br />  (let [stage (Stage. "JavaFX Stage")<br />        scene (Scene.)]<br ...
Refined Clojure GUI Example<br />(defnjavafxapp []<br />  (doto (Stage. "JavaFX Stage")<br />    (.setWidth600)<br />    (...
Refined Clojure GUI Example<br />(defnjavafxapp []<br />  (doto(Stage. "JavaFX Stage")<br />    (.setWidth 600)<br />    (...
Refined Clojure GUI Example<br />(defnjavafxapp []<br />  (doto (Stage. "JavaFX Stage")<br />    (.setWidth 600)<br />    ...
Refined Clojure GUI Example<br />(defnjavafxapp []<br />  (doto (Stage. "JavaFX Stage")<br />    (.setWidth 600)<br />    ...
Closures in Clojure<br />39<br />Inner classes can be created using proxy<br />(.addListenerhoverProperty<br />  (proxy [C...
Closures in Clojure<br />Inner classes can be created using proxy<br />40<br />Proxy form:<br />(proxy [class] [args] fs+)...
JavaFX With Groovy<br />
Features of Groovy<br />Tight integration with Java<br />Very easy to port from Java to Groovy<br />Declarative syntax<br ...
Step 1: Lazy conversion to Groovy<br />class HelloStage extends Application {<br /> void start(stage) {<br />    stage.set...
Step 2: Slightly More Groovy<br />class HelloStage extends Application {<br />    void start(stage) {<br />       stage.se...
Introducing GroovyFX<br />Groovy DSL for JavaFX<br />Started by James Clark<br />In Alpha 1.0 State<br />http://groovy.cod...
Step 3: Using GroovyFX<br />GroovyFX.start ({<br />   def sg = new SceneGraphBuilder();<br />    def stage = sg.stage(<br ...
Step 4: With Content<br />GroovyFX.start ({<br />   def sg = new SceneGraphBuilder();<br />    def stage = sg.stage(<br />...
FX Script Animation in Groovy<br />
Step 1: JavaFX Script<br />def timeline = Timeline {<br />repeatCount: Timeline.INDEFINITE<br />autoReverse: true<br />key...
Step 1a: JavaFX Script Simplification<br />def timeline = Timeline {<br />repeatCount: Timeline.INDEFINITE<br />autoRevers...
Step 2: Java-ish Groovy Animations<br />final Timeline timeline = new Timeline(<br />  cycleCount: Timeline.INDEFINITE,<br...
Step 3: GroovyFX Animation<br />timeline = timeline(cycleCount: Timeline.INDEFINITE, autoReverse: true) {<br />  at 750.ms...
Groovy Closures  - With interface coercion<br />def f = { <br />  p, o, v -> rect.setFill(rect.isHover() ? Color.GREEN : C...
54<br />JavaFX With Scala<br />
What is Scala<br />Started in 2001 by Martin Odersky<br />Compiles to Java bytecodes<br />Pure object-oriented language<br...
Why Scala?<br />Shares many language features with JavaFX Script that make GUI programming easier:<br />Static type checki...
Java vs. Scala DSL<br />public class HelloStage extends Application {<br />  public void start(Stage stage) {<br />    sta...
object HelloJavaFX extends JavaFXApplication {<br />  def stage = new Stage {<br />    title = "Hello Stage"<br />    widt...
59<br />object HelloJavaFX extends JavaFXApplication {<br />  def stage = new Stage {<br />    title = "Hello Stage"<br />...
60<br />object HelloJavaFX extends JavaFXApplication {<br />def stage = new Stage {<br />    title = "Hello Stage"<br />  ...
61<br />object HelloJavaFX extends JavaFXApplication {<br />  def stage = new Stage {<br />title = "Hello Stage"<br />    ...
62<br />object HelloJavaFX extends JavaFXApplication {<br />  def stage = new Stage {<br />    title = "Hello Stage"<br />...
Animation in Scala<br />def timeline = new Timeline {<br />repeatCount = INDEFINITE<br />autoReverse = true<br />keyFrames...
def timeline = new Timeline {<br />repeatCount = INDEFINITE<br />autoReverse = true<br />keyFrames = List(<br />      new ...
Animation in Scala<br />65<br />def timeline = new Timeline {<br />repeatCount = INDEFINITE<br />autoReverse = true<br />k...
Closures in Scala<br />66<br />Closures are also supported in Scala<br />And they are 100% type-safe<br />rect.hoverProper...
Closures in Scala<br />Closures are also supported in Scala<br />And they are 100% type-safe<br />67<br />rect.hoverProper...
Other JVM Languages to Try<br />Jython<br />Started by Jim Hugunin<br />High Performance Python<br />Mirah<br />Invented b...
Fantom Code Example<br />Void main() {<br />  Stage {<br />    title= "Hello Stage"<br />    width= 600<br />    height= 4...
timeline := Timeline {<br />  repeatCount = Timeline.INDEFINITE<br />  autoReverse = true<br />KeyFrame {<br />   time = 5...
Announcing Project Visage<br />71<br /><ul><li>“Visage is a domain specific language (DSL) designed for the express purpos...
How about JavaFX on…  Visage<br />Stage {<br />  title: "Hello Stage"<br />  width: 600<br />  height: 450<br /> scene: Sc...
How about JavaFX on…  Visage<br />Stage {<br />  title: "Hello Stage"<br />  width: 600<br />  height: 450<br />scene: Sce...
How about JavaFX on…  Visage<br />Stage {<br />  title: "Hello Stage"<br />  width: 600<br />  height: 450<br /> Scene {<b...
Visage on Android<br />Curious?<br />Drop by room 4 after this talk to find out more…<br />
Upcoming SlideShare
Loading in...5
×

JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and Visage

4,868

Published on

Presentation given at Jazoon on using JavaFX with alternative languages. Includes updates for GroovyFX and the JavaFX 2.0 Beta.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,868
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • There are two kinds of listener: ‘changedListener’ and ‘ChangingListener’. Being informed of the change before it happens allow for it to be vetoed.It is also possible to either watch a single property, or all properties belonging to a bean.Note that the value passed to the callback is the old value. This is to ensure that we aren’t eagerly computing the new value when it might not be required. To get the new value, you can call the function on the bean or via the propertyReference
  • There are two kinds of listener: ‘changedListener’ and ‘ChangingListener’. Being informed of the change before it happens allow for it to be vetoed.It is also possible to either watch a single property, or all properties belonging to a bean.Note that the value passed to the callback is the old value. This is to ensure that we aren’t eagerly computing the new value when it might not be required. To get the new value, you can call the function on the bean or via the propertyReference
  • There are two kinds of listener: ‘changedListener’ and ‘ChangingListener’. Being informed of the change before it happens allow for it to be vetoed.It is also possible to either watch a single property, or all properties belonging to a bean.Note that the value passed to the callback is the old value. This is to ensure that we aren’t eagerly computing the new value when it might not be required. To get the new value, you can call the function on the bean or via the propertyReference
  • There are two kinds of listener: ‘changedListener’ and ‘ChangingListener’. Being informed of the change before it happens allow for it to be vetoed.It is also possible to either watch a single property, or all properties belonging to a bean.Note that the value passed to the callback is the old value. This is to ensure that we aren’t eagerly computing the new value when it might not be required. To get the new value, you can call the function on the bean or via the propertyReference
  • There are two kinds of listener: ‘changedListener’ and ‘ChangingListener’. Being informed of the change before it happens allow for it to be vetoed.It is also possible to either watch a single property, or all properties belonging to a bean.Note that the value passed to the callback is the old value. This is to ensure that we aren’t eagerly computing the new value when it might not be required. To get the new value, you can call the function on the bean or via the propertyReference
  • There are two kinds of listener: ‘changedListener’ and ‘ChangingListener’. Being informed of the change before it happens allow for it to be vetoed.It is also possible to either watch a single property, or all properties belonging to a bean.Note that the value passed to the callback is the old value. This is to ensure that we aren’t eagerly computing the new value when it might not be required. To get the new value, you can call the function on the bean or via the propertyReference
  • Slight conversion to Groovy. This can be compiled by the Groovy compiler and run, but basically there is only one line difference (the ‘static void main’ line)
  • This is the same code as the previous slide, taking advantage of some of the Groovy syntax tricks. This is getting to look a lot more like JavaFX Script.
  • This DSL handles running on the EDT, and can actually be run as-is – there is no need for a class declaration, or anything else to ensure that we’re on the EDT. This is getting us fairly close to the simple JavaFX Script at the beginning
  • This DSL handles running on the EDT, and can actually be run as-is – there is no need for a class declaration, or anything else to ensure that we’re on the EDT. This is getting us fairly close to the simple JavaFX Script at the beginning
  • JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and Visage

    1. 1. JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and Visage <br />Stephen Chin<br />Chief Agile Methodologist, GXS<br />steveonjava@gmail.com<br />tweet: @steveonjava<br />
    2. 2. About the Presenter<br />Stephen Chin<br />Java Champion<br />Family Man<br />Chief Agile Methodologist, GXS<br />Author, Pro JavaFX Platform<br />OSCON Java Conference Chair<br />Motorcyclist<br />
    3. 3. Pro JavaFX 2 Platform Coming Soon!<br />Coming 2nd half of this year<br />All examples rewritten in Java<br />Will cover the new JavaFX 2.0 APIs<br />3<br />
    4. 4. Disclaimer: This is code-heavy<br />THE FOLLOWING IS INTENDED TO STIMULATE CREATIVE USE OF JVM LANGUAGES. AFTER WATCHING THIS PRESENTATION YOU MAY FEEL COMPELLED TO START LEARNING A NEW JVM LANGUAGE AND WANT TO APPLY IT AT YOUR WORKPLACE. THE PRESENTER IS NOT LIABLE FOR ANY INNOVATION, BREAKTHROUGHS, OR NP-COMPLETE SOLUTIONS THAT MAY RESULT. <br />
    5. 5. JavaFX With Java<br />
    6. 6. JavaFX 2.0 Product Timeline<br />CYQ1 2011<br />CYQ3 2011<br />CYQ2 2011<br />JavaFX 2.0 EA<br />(Early Access)<br />JavaFX 2.0 Beta<br />JavaFX 2.0 GA<br />(General Availability)<br />Copyright 2010 Oracle<br />JavaFX Beta Available Now!<br />
    7. 7. Programming Languages<br />JavaFX 2.0 APIs are now in Java<br />Pure Java APIs for all of JavaFX<br />Expose JavaFX Binding, Sequences as Java APIs<br />Embrace all JVM languages<br />JRuby, Clojure, Groovy, Scala<br />Fantom, Mira, Jython, etc.<br />JavaFX Script is no longer supported by Oracle<br />Existing JavaFX Script based applications will continue to run<br />Visage is the open-source successor to the JavaFX Script language<br />
    8. 8. JavaFX in Java<br />JavaFX API follows JavaBeans approach<br />Similar in feel to other UI toolkits (Swing, etc)<br />Uses builder pattern to minimize boilerplate<br />
    9. 9. Example Application<br />public class HelloStage extends Application {<br /> @Override public void start(Stage stage) {<br /> stage.setTitle("Hello Stage");<br />stage.setWidth(600);<br /> stage.setHeight(450);<br />Group root = new Group();<br /> Scene scene = new Scene(root);<br />scene.setFill(Color.LIGHTGREEN);<br />stage.setScene(scene);<br />stage.setVisible(true);<br /> }<br /> public static void main(String[] args) {<br /> launch(HelloStage.class, args);<br /> }<br />}<br />
    10. 10. Binding<br />Unquestionably the biggest JavaFX Script innovation<br />Supported via a PropertyBinding class<br />Lazy invocation for high performance<br />Static construction syntax for simple cases<br />e.g.: bindTo(<property>)<br />
    11. 11. Observable Pseudo-Properties<br />Supports watching for changes to properties<br />Implemented via anonymous inner classes<br />Will take advantage of closures in the future<br />
    12. 12. Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.hoverProperty().addListener(new ChangeListener<Boolean>() {<br />});<br />
    13. 13. Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.hoverProperty().addListener(new ChangeListener<Boolean>() {<br />});<br />The property we want to watch<br />
    14. 14. Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.hoverProperty().addListener(new ChangeListener<Boolean>() {<br />});<br />Only one listener used with generics to specify the data type<br />
    15. 15. Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.hoverProperty().addListener(new ChangeListener<Boolean>() {<br /> public void changed(ObservableValue<? extends Boolean> property, Boolean oldValue, Boolean value) {<br /> }<br />});<br />Refers to the Rectangle.hoverProperty()<br />
    16. 16. Observable Pseudo-Properties<br />final Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.hoverProperty().addListener(new ChangeListener<Boolean>() {<br /> public void changed(ObservableValue<? extends Boolean> property, Boolean oldValue, Boolean value) {<br /> rect.setFill(rect.isHover() ? Color.GREEN : Color.RED);<br /> }<br />});<br />
    17. 17. Sequences in Java<br />Replaced with an Observable List<br />Public API is based on JavaFX sequences<br />Internal code can use lighter collections API<br />JavaFX 2.0 also has an Observable Map<br />
    18. 18. JavaFX With JRuby<br />
    19. 19. Why JRuby?<br /><ul><li>Direct access to Java APIs
    20. 20. Dynamic Typing
    21. 21. Closures
    22. 22. ‘Closure conversion’ for interfaces</li></li></ul><li>Java in JRuby - Accessing Properties<br />timeline.setAutoReverse(true)<br />timeline.autoReverse = true<br />timeline.auto_reverse = true<br />timeline.getKeyFrames().add(kf)<br />timeline.key_frames.add(kf)<br />timeline.key_frames.addkf<br />
    23. 23. JRuby Example 1: Simple Stage<br />require 'java'<br />Application = Java::javafx.application.Application<br />Stage = Java::javafx.stage.Stage<br />Scene = Java::javafx.scene.Scene<br />Color = Java::javafx.scene.paint.Color<br />class HelloStage< Application<br /> def start(stage)<br /> .....<br /> end<br />end<br />Application.launch(HelloStage.new);<br />stage.title = 'Hello Stage (JRuby)'<br />stage.width = 600<br />stage.height = 450<br />scene = Scene.new<br />scene.fill = Color::LIGHTGREEN<br />stage.scene = scene<br />stage.visible = true;<br />
    24. 24. JRuby Example 2<br />rect = Rectangle.new<br />rect.x = 25<br />rect.y = 40<br />rect.width = 100<br />rect.height = 50<br />rect.fill = Color::RED<br />root.children.add(rect)<br />timeline = Timeline.new<br />timeline.cycle_count= Timeline::INDEFINITE<br />timeline.auto_reverse = true<br />kv = KeyValue.new(rect.xProperty, 200);<br />kf = KeyFrame.new(Duration.valueOf(500), kv);<br />timeline.key_frames.addkf;<br />timeline.play();<br />
    25. 25. JRuby Closure Conversion<br />rect.hoverProperty.addListener() do |prop, oldVal, newVal|<br />rect.fill = rect.hover ? Color::GREEN : Color::RED;<br />end<br />23<br />
    26. 26. JRubySwiby<br />require 'swiby'<br />class HelloWorldModel<br />attr_accessor :saying<br />end<br />model = HelloWorldModel.new<br />model.saying = "Hello World"<br />Frame {<br /> title "Hello World“<br /> width 200<br /> content {<br /> Label {<br /> text bind(model,:saying)<br /> }<br /> }<br /> visible true<br />}<br />24<br />
    27. 27. 25<br />JavaFX With Clojure<br />Artwork by Augusto Sellhorn<br />http://sellmic.com/<br />
    28. 28. A Little About Clojure<br />Started in 2007 by Rich Hickey<br />Functional Programming Language<br />Derived from LISP<br />Optimized for High Concurrency<br />… and looks nothing like Java!<br />26<br />(def hello (fn [] "Hello world"))<br />(hello)<br />
    29. 29. Clojure Syntax in One Slide<br />Symbols<br />numbers – 2.178<br />ratios – 355/113<br />strings – “clojure”, “rocks”<br />characters – a b c d<br />symbols – a b c d<br />keywords – :alpha :beta<br />boolean – true, false<br />null - nil<br />Collections<br />(commas optional)<br />Lists<br />(1, 2, 3, 4, 5)<br />Vectors<br />[1, 2, 3, 4, 5]<br />Maps<br />{:a 1, :b 2, :c 3, :d 4}<br />Sets<br />#{:a :b :c :d :e}<br />27<br />(plus macros that are syntactic sugar wrapping the above)<br />
    30. 30. Clojure GUI Example<br />(defnjavafxapp []<br /> (let [stage (Stage. "JavaFX Stage")<br /> scene (Scene.)]<br /> (.setFill scene Color/LIGHTGREEN)<br /> (.setWidth stage 600)<br /> (.setHeight stage 450)<br /> (.setScene stage scene)<br /> (.setVisible stage true)))<br />(javafxapp)<br />28<br />
    31. 31. Clojure GUI Example<br />(defnjavafxapp[]<br /> (let [stage (Stage. "JavaFX Stage")<br /> scene (Scene.)]<br /> (.setFill scene Color/LIGHTGREEN)<br /> (.setWidth stage 600)<br /> (.setHeight stage 450)<br /> (.setScene stage scene)<br /> (.setVisible stage true)))<br />(javafxapp)<br />29<br />Create a Function for the Application<br />
    32. 32. Clojure GUI Example<br />(defnjavafxapp []<br />(let [stage (Stage. "JavaFX Stage")<br /> scene (Scene.)]<br /> (.setFill scene Color/LIGHTGREEN)<br /> (.setWidth stage 600)<br /> (.setHeight stage 450)<br /> (.setScene stage scene)<br /> (.setVisible stage true)))<br />(javafxapp)<br />30<br />Initialize the Stage and Scene Variables<br />
    33. 33. Clojure GUI Example<br />(defnjavafxapp []<br /> (let [stage (Stage. "JavaFX Stage")<br /> scene (Scene.)]<br /> (.setFill scene Color/LIGHTGREEN)<br /> (.setWidth stage 600)<br /> (.setHeight stage 450)<br /> (.setScene stage scene)<br /> (.setVisible stage true)))<br />(javafxapp)<br />31<br />Call Setter Methods on Scene and Stage<br />
    34. 34. Clojure GUI Example<br />(defnjavafxapp []<br /> (let [stage (Stage. "JavaFX Stage")<br /> scene (Scene.)]<br /> (.setFillscene Color/LIGHTGREEN)<br /> (.setWidthstage 600)<br /> (.setHeightstage 450)<br /> (.setScenestage scene)<br /> (.setVisiblestage true)))<br />(javafxapp)<br />32<br />Java Constant Syntax<br />Java Method Syntax<br />
    35. 35. Simpler Code Using doto<br />(defnjavafxapp []<br /> (let [stage (Stage. "JavaFX Stage")<br /> scene (Scene.)]<br /> (doto scene<br /> (.setFillColor/LIGHTGREEN))<br /> (doto stage<br /> (.setWidth600)<br /> (.setHeight450)<br /> (.setScene scene)<br /> (.setVisibletrue))))<br />(javafxapp)<br />33<br />
    36. 36. Simpler Code Using doto<br />(defnjavafxapp []<br /> (let [stage (Stage. "JavaFX Stage")<br /> scene (Scene.)]<br /> (doto scene<br /> (.setFillColor/LIGHTGREEN))<br /> (doto stage<br /> (.setWidth 600)<br /> (.setHeight 450)<br /> (.setScene scene)<br /> (.setVisible true))))<br />(javafxapp)<br />34<br />doto form:<br />(doto symbol<br /> (.method params))<br /> equals:<br />(.method symbol params)<br />
    37. 37. Refined Clojure GUI Example<br />(defnjavafxapp []<br /> (doto (Stage. "JavaFX Stage")<br /> (.setWidth600)<br /> (.setHeight450)<br /> (.setScene (doto (Scene.)<br /> (.setFillColor/LIGHTGREEN)<br /> (.setContent (list (doto (Rectangle.)<br /> (.setX25)<br /> (.setY40)<br /> (.setWidth100)<br /> (.setHeight50)<br /> (.setFillColor/RED))))))<br /> (.setVisibletrue)))<br />(javafxapp)<br />35<br />
    38. 38. Refined Clojure GUI Example<br />(defnjavafxapp []<br /> (doto(Stage. "JavaFX Stage")<br /> (.setWidth 600)<br /> (.setHeight 450)<br /> (.setScene (doto(Scene.)<br /> (.setFillColor/LIGHTGREEN)<br /> (.setContent (list (doto (Rectangle.)<br /> (.setX 25)<br /> (.setY 40)<br /> (.setWidth 100)<br /> (.setHeight 50)<br /> (.setFillColor/RED))))))<br /> (.setVisible true)))<br />(javafxapp)<br />36<br />Let replaced with inline declarations<br />
    39. 39. Refined Clojure GUI Example<br />(defnjavafxapp []<br /> (doto (Stage. "JavaFX Stage")<br /> (.setWidth 600)<br /> (.setHeight 450)<br /> (.setScene (doto (Scene.)<br /> (.setFillColor/LIGHTGREEN)<br /> (.setContent (list (doto (Rectangle.)<br /> (.setX 25)<br /> (.setY 40)<br /> (.setWidth 100)<br /> (.setHeight 50)<br /> (.setFillColor/RED))))))<br /> (.setVisible true)))<br />(javafxapp)<br />37<br />Doto allows nested data structures<br />
    40. 40. Refined Clojure GUI Example<br />(defnjavafxapp []<br /> (doto (Stage. "JavaFX Stage")<br /> (.setWidth 600)<br /> (.setHeight 450)<br /> (.setScene (doto (Scene.)<br /> (.setFillColor/LIGHTGREEN)<br /> (.setContent (list (doto (Rectangle.)<br /> (.setX 25)<br /> (.setY 40)<br /> (.setWidth 100)<br /> (.setHeight 50)<br /> (.setFillColor/RED))))))<br /> (.setVisible true)))<br />(javafxapp)<br />38<br />Now a nested Rectangle fits!<br />
    41. 41. Closures in Clojure<br />39<br />Inner classes can be created using proxy<br />(.addListenerhoverProperty<br /> (proxy [ChangeListener] []<br />(changed [p, o, v]<br /> (.setFillrect<br /> (if (.isHoverrect) Color/GREEN Color/RED)))))<br />
    42. 42. Closures in Clojure<br />Inner classes can be created using proxy<br />40<br />Proxy form:<br />(proxy [class] [args] fs+)<br /> f => (name [params*] body)<br />(.addListenerhoverProperty<br /> (proxy[ChangeListener][]<br />(changed [p, o, v]<br /> (.setFillrect<br /> (if (.isHoverrect) Color/GREEN Color/RED)))))<br />
    43. 43. JavaFX With Groovy<br />
    44. 44. Features of Groovy<br />Tight integration with Java<br />Very easy to port from Java to Groovy<br />Declarative syntax<br />Familiar to JavaFX Script developers<br />Builders<br />
    45. 45. Step 1: Lazy conversion to Groovy<br />class HelloStage extends Application {<br /> void start(stage) {<br /> stage.setTitle("Hello Stage (Groovy)");<br />stage.setWidth(600);<br /> stage.setHeight(450);<br /> Group root = new Group();<br /> Scene scene = new Scene(root);<br /> scene.setFill(Color.LIGHTSKYBLUE);<br /> stage.setScene(scene);<br />stage.setVisible(true);<br /> }<br />static void main(args) {<br /> launch(HelloStage.class, args);<br /> }<br />}<br />
    46. 46. Step 2: Slightly More Groovy<br />class HelloStage extends Application {<br /> void start(stage) {<br /> stage.setTitle("Hello Stage (Groovy)");<br />stage.setScene(new Scene(<br /> width: 600,<br /> height: 450,<br /> fill: Color.LIGHTSKYBLUE<br /> root: new Group()<br /> ));<br /> stage.setVisible(true);<br /> }<br /> static void main(args) {<br /> launch(HelloStage.class, args);<br /> }<br />}<br />
    47. 47. Introducing GroovyFX<br />Groovy DSL for JavaFX<br />Started by James Clark<br />In Alpha 1.0 State<br />http://groovy.codehaus.org/GroovyFX<br />
    48. 48. Step 3: Using GroovyFX<br />GroovyFX.start ({<br /> def sg = new SceneGraphBuilder();<br /> def stage = sg.stage(<br /> title: "Hello World", <br /> width: 600, <br /> height: 450,<br /> visible: true<br /> ) {<br /> scene(fill: Color.LIGHTSKYBLUE) {<br /> ...<br /> }<br /> )<br />}<br />
    49. 49. Step 4: With Content<br />GroovyFX.start ({<br /> def sg = new SceneGraphBuilder();<br /> def stage = sg.stage(<br /> title: "Hello World", <br /> width: 600, <br /> height: 450,<br /> visible: true<br /> ) {<br /> scene(fill: Color.LIGHTSKYBLUE) {<br />rectangle(<br /> x: 25, y: 40,<br /> width: 100, height: 50,<br /> fill: Color.RED<br />)<br />})}<br />
    50. 50. FX Script Animation in Groovy<br />
    51. 51. Step 1: JavaFX Script<br />def timeline = Timeline {<br />repeatCount: Timeline.INDEFINITE<br />autoReverse: true<br />keyFrames: [<br />KeyFrame {<br /> time: 750ms<br /> values : [<br /> rect1.x => 200.0 tweenInterpolator.LINEAR,<br /> rect2.y => 200.0 tweenInterpolator.LINEAR,<br /> circle1.radius => 200.0 tweenInterpolator.LINEAR<br /> ]<br /> }<br /> ];<br />}<br />timeline.play();<br />
    52. 52. Step 1a: JavaFX Script Simplification<br />def timeline = Timeline {<br />repeatCount: Timeline.INDEFINITE<br />autoReverse: true<br /> keyFrames: at (750ms) {<br /> rect1.x => 200.0 tween Interpolator.LINEAR;<br /> rect2.y => 200.0 tween Interpolator.LINEAR;<br /> circle1.radius => 200.0 tween Interpolator.LINEAR;<br /> }<br />}<br />timeline.play();<br />
    53. 53. Step 2: Java-ish Groovy Animations<br />final Timeline timeline = new Timeline(<br /> cycleCount: Timeline.INDEFINITE,<br />autoReverse: true<br />)<br />final KeyValue kv1 = new KeyValue (rect1.xProperty(), 200);<br />final KeyValue kv2 = new KeyValue (rect2.yProperty(), 200);<br />final KeyValue kv3 = new KeyValue (circle1.radiusProperty(), 200);<br />final KeyFramekf = new KeyFrame(Duration.valueOf(750), kv1, kv2, kv3);<br />timeline.getKeyFrames().add(kf);<br />timeline.play();<br />
    54. 54. Step 3: GroovyFX Animation<br />timeline = timeline(cycleCount: Timeline.INDEFINITE, autoReverse: true) {<br /> at 750.ms {<br /> change (rect1, "y") {<br /> to 200<br /> }<br /> change (rect2, "x") {<br /> to 200<br /> }<br /> change (circle, "radius") {<br /> to 200<br /> }<br /> }<br />}<br />timeline.play();<br />
    55. 55. Groovy Closures - With interface coercion<br />def f = { <br /> p, o, v -> rect.setFill(rect.isHover() ? Color.GREEN : Color.RED);<br />} as ChangeListener;<br />rect.hoverProperty().addListener(f);<br />
    56. 56. 54<br />JavaFX With Scala<br />
    57. 57. What is Scala<br />Started in 2001 by Martin Odersky<br />Compiles to Java bytecodes<br />Pure object-oriented language<br />Also a functional programming language<br />55<br />
    58. 58. Why Scala?<br />Shares many language features with JavaFX Script that make GUI programming easier:<br />Static type checking – Catch your errors at compile time<br />Closures – Wrap behavior and pass it by reference<br />Declarative – Express the UI by describing what it should look like<br />Scala also supports DSLs!<br />56<br />
    59. 59. Java vs. Scala DSL<br />public class HelloStage extends Application {<br /> public void start(Stage stage) {<br /> stage.setTitle("Hello Stage");<br />stage.setWidth(600);<br />stage.setHeight(450);<br /> Scene scene = new Scene();<br />scene.setFill(Color.LIGHTGREEN);<br /> Rectangle rect = new Rectangle();<br />rect.setX(25);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(50);<br />rect.setFill(Color.RED);<br />stage.add(rect);<br />stage.setScene(scene);<br />stage.setVisible(true);<br /> }<br /> public static void main(String[] args) {<br /> Launcher.launch(HelloStage.class, args);<br /> }<br />}<br />object HelloJavaFX extends JavaFXApplication {<br /> def stage = new Stage {<br /> title = "Hello Stage"<br /> width = 600<br /> height = 450<br /> scene = new Scene {<br /> fill = Color.LIGHTGREEN<br /> content = List(new Rectangle {<br /> x = 25<br /> y = 40<br /> width = 100<br /> height = 50<br /> fill = Color.RED<br /> })<br /> }<br /> }<br />}<br />57<br />21 Lines<br />541 Characters<br />17 Lines<br />324 Characters<br />
    60. 60. object HelloJavaFX extends JavaFXApplication {<br /> def stage = new Stage {<br /> title = "Hello Stage"<br /> width = 600<br /> height = 450<br /> scene = new Scene {<br /> fill = Color.LIGHTGREEN<br /> content = List(new Rectangle {<br /> x = 25<br /> y = 40<br /> width = 100<br /> height = 50<br /> fill = Color.RED<br /> })<br /> }<br /> }<br />}<br />58<br />
    61. 61. 59<br />object HelloJavaFX extends JavaFXApplication {<br /> def stage = new Stage {<br /> title = "Hello Stage"<br /> width = 600<br /> height = 450<br /> scene = new Scene {<br /> fill = Color.LIGHTGREEN<br /> content = List(new Rectangle {<br /> x = 25<br /> y = 40<br /> width = 100<br /> height = 50<br /> fill = Color.RED<br /> })<br /> }<br /> }<br />}<br />object HelloJavaFX extends JavaFXApplication {<br /> def stage = new Stage {<br /> title = "Hello Stage"<br /> width = 600<br /> height = 450<br /> scene = new Scene {<br /> fill = Color.LIGHTGREEN<br /> content = List(new Rectangle {<br /> x = 25<br /> y = 40<br /> width = 100<br /> height = 50<br /> fill = Color.RED<br /> })<br /> }<br /> }<br />}<br />Base class for JavaFX applications<br />
    62. 62. 60<br />object HelloJavaFX extends JavaFXApplication {<br />def stage = new Stage {<br /> title = "Hello Stage"<br /> width = 600<br /> height = 450<br /> scene = new Scene {<br /> fill = Color.LIGHTGREEN<br /> content = List(new Rectangle {<br /> x = 25<br /> y = 40<br /> width = 100<br /> height = 50<br /> fill = Color.RED<br /> })<br /> }<br /> }<br />}<br />Declarative Stage definition<br />
    63. 63. 61<br />object HelloJavaFX extends JavaFXApplication {<br /> def stage = new Stage {<br />title = "Hello Stage"<br /> width = 600<br /> height = 450<br /> scene = new Scene {<br /> fill = Color.LIGHTGREEN<br /> content = List(new Rectangle {<br /> x = 25<br /> y = 40<br /> width = 100<br /> height = 50<br /> fill = Color.RED<br /> })<br /> }<br /> }<br />}<br />Inline property definitions<br />
    64. 64. 62<br />object HelloJavaFX extends JavaFXApplication {<br /> def stage = new Stage {<br /> title = "Hello Stage"<br /> width = 600<br /> height = 450<br /> scene = new Scene {<br /> fill = Color.LIGHTGREEN<br /> content = List(new Rectangle {<br /> x = 25<br /> y = 40<br /> width = 100<br /> height = 50<br /> fill = Color.RED<br /> })<br /> }<br /> }<br />}<br />List Construction Syntax<br />
    65. 65. Animation in Scala<br />def timeline = new Timeline {<br />repeatCount = INDEFINITE<br />autoReverse = true<br />keyFrames = List(<br /> new KeyFrame(time: 50) {<br /> values = List(<br /> new KeyValue(rect1.xProperty -> 300),<br /> new KeyValue(rect2.yProperty -> 500),<br /> new KeyValue(rect2.widthProperty -> 150)<br /> )<br /> }<br /> )<br /> }<br />63<br />
    66. 66. def timeline = new Timeline {<br />repeatCount = INDEFINITE<br />autoReverse = true<br />keyFrames = List(<br /> new KeyFrame(time: 50) {<br /> values = List(<br /> new KeyValue(rect1.xProperty -> 300),<br /> new KeyValue(rect2.yProperty -> 500),<br /> new KeyValue(rect2.widthProperty -> 150)<br /> )<br /> }<br /> )<br /> }<br />Animation in Scala<br />64<br />Duration set by Constructor Parameter<br />
    67. 67. Animation in Scala<br />65<br />def timeline = new Timeline {<br />repeatCount = INDEFINITE<br />autoReverse = true<br />keyFrames = List(<br /> new KeyFrame(time: 50) {<br /> values = List(<br /> new KeyValue(rect1.xProperty -> 300),<br /> new KeyValue(rect2.yProperty -> 500),<br /> new KeyValue(rect2.widthProperty -> 150)<br /> )<br /> }<br /> )<br /> }<br />Operator overloading for animation syntax<br />
    68. 68. Closures in Scala<br />66<br />Closures are also supported in Scala<br />And they are 100% type-safe<br />rect.hoverProperty.addListener((p, o, v) => {<br />rect.fill = if (rect.hover) Color.GREEN else Color.RED<br />})<br />
    69. 69. Closures in Scala<br />Closures are also supported in Scala<br />And they are 100% type-safe<br />67<br />rect.hoverProperty.addListener((p, o, v) => {<br />rect.fill = if (rect.hover) Color.GREEN else Color.RED<br />})<br />Compact syntax<br />(params) => {body}<br />
    70. 70. Other JVM Languages to Try<br />Jython<br />Started by Jim Hugunin<br />High Performance Python<br />Mirah<br />Invented by Charles Nutter<br />Originally called Duby<br />Local Type Inference, Static and Dynamic Typing<br />Fantom<br />Created by Brian and Andy Frank<br />Originally called Fan<br />Built-in Declarative Syntax<br />Portable to Java and .NET<br />Local Type Inference, Static and Dynamic Typing<br />68<br />
    71. 71. Fantom Code Example<br />Void main() {<br /> Stage {<br /> title= "Hello Stage"<br /> width= 600<br /> height= 450<br /> Scene {<br /> fill= Color.LIGHTGREEN<br /> Rectangle {<br /> x= 25<br /> y= 40<br /> width= 100<br /> height= 50<br /> fill= Color.RED<br /> }<br /> }<br /> }.open<br />}<br />69<br />
    72. 72. timeline := Timeline {<br /> repeatCount = Timeline.INDEFINITE<br /> autoReverse = true<br />KeyFrame {<br /> time = 50ms<br />KeyValue(rect1.x()-> 300),<br /> KeyValue(rect2.y() -> 500),<br /> KeyValue(rect2.width() -> 150)<br />}<br />}<br />Animation in Fantom<br />70<br />Fantom has a built-in Duration type<br />And also supports operator overloading<br />
    73. 73. Announcing Project Visage<br />71<br /><ul><li>“Visage is a domain specific language (DSL) designed for the express purpose of writing user interfaces.”</li></ul>Visage project goals:<br />Compile to JavaFX Java APIs<br />Evolve the Language (Annotations, Maps, etc.)<br />Support Other Toolkits<br />Come join the team!<br />For more info: http://visage-lang.org/<br />
    74. 74. How about JavaFX on… Visage<br />Stage {<br /> title: "Hello Stage"<br /> width: 600<br /> height: 450<br /> scene: Scene {<br /> fill: Color.LIGHTGREEN<br /> content: Rectangle {<br /> x: 25<br /> y: 40<br /> width: 100<br /> height: 50<br /> fill: Color.RED<br /> }<br /> }<br />}<br />72<br />
    75. 75. How about JavaFX on… Visage<br />Stage {<br /> title: "Hello Stage"<br /> width: 600<br /> height: 450<br />scene: Scene {<br /> fill: Color.LIGHTGREEN<br />content: Rectangle {<br /> x: 25<br /> y: 40<br /> width: 100<br /> height: 50<br /> fill: Color.RED<br /> }<br /> }<br />}<br />73<br />
    76. 76. How about JavaFX on… Visage<br />Stage {<br /> title: "Hello Stage"<br /> width: 600<br /> height: 450<br /> Scene {<br /> fill: Color.LIGHTGREEN<br /> Rectangle {<br /> x: 25<br /> y: 40<br /> width: 100<br /> height: 50<br /> fill: Color.RED<br /> }<br /> }<br />}<br />74<br />
    77. 77. Visage on Android<br />Curious?<br />Drop by room 4 after this talk to find out more…<br />
    78. 78. Conclusion<br />You can write JavaFX applications in pure Java<br />JavaFX is also usable in alternate languages<br />Over time improved support is possible<br />Groovy Builders, Scala DSL, Visage<br />
    79. 79. 77<br />Stephen Chin<br />steveonjava@gmail.com<br />tweet: @steveonjava<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×