Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
JavaFX 2.0 and Alternative Languages<br />Stephen Chin<br />Chief Agile Methodologist, GXS<br />steveonjava@gmail.com<br /...
About the Presenter<br />Stephen Chin<br />Java Champion<br />Family Man<br />Chief Agile Methodologist, GXS<br />Author, ...
Disclaimer: This is code-heavy<br />THE FOLLOWING IS INTENDED TO STIMULATE CREATIVE USE OF JVM LANGUAGES. AFTER WATCHING T...
Agenda<br />JavaFX 2.0 Platform<br />JavaFX in Java<br />Explore Alternative Languages<br />
JavaFX and the Java Platform <br />Java Language<br />Java EE<br />HotSpot Java VM<br />Lightweight Java VM<br />Java SE<b...
JavaFX Design Goals<br />Deliver the Best HTML5 & Native Application Experience from Java<br />Programming model: the powe...
Programming Languages<br />JavaFX 2.0 APIs are now in Java<br />Pure Java APIs for all of JavaFX<br />Expose JavaFX Bindin...
JavaFX 2.0 Product Timeline<br />CYQ1 2011<br />CYQ3 2011<br />CYQ2 2011<br />JavaFX 2.0 EA<br />(Early Access)<br />JavaF...
JavaFX With Java<br />
JavaFX in Java<br />JavaFX API follows JavaBeans approach<br />Similar in feel to other UI toolkits (Swing, etc)<br />Uses...
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 />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setW...
Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setW...
Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setW...
Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setW...
Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setW...
Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setW...
Sequences in Java<br />Replaced with an Observable List<br />Public API is based on JavaFX sequences<br />Internal code ca...
Example Application<br />public class HelloStage extends Application {<br />  @Override public void start() {<br />    Sta...
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 />FX = Java::javafx.lang.FX<br />Stage = Java::javafx.stage.Stage<br ...
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.add_change_listener(Rectangle::HOVER) do |bean, pr, bln|<br />rect.fill = rect.hover ? ...
JRubySwiby<br />require 'swiby'<br />class HelloWorldModel<br />attr_accessor :saying<br />end<br />model = HelloWorldMode...
28<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 />42<br />Inner classes can be created using proxy<br />(.addChangeListenerrectRectangle/HOVER<br /...
Closures in Clojure<br />Inner classes can be created using proxy<br />43<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 ...
Example 1: Simple FX Script to Groovy<br />
Step 1: Lazy conversion to Groovy<br />class HelloStage implements Runnable {<br /> void run() {<br />    Stage stage = ne...
Step 2: Slightly More Groovy<br />class HelloStage implements Runnable {<br />    void run() {<br />        new Stage(<br ...
Slight Aside: Groovy Builders<br />Groovy builders make writing custom DSLs easy<br />For the next slide, I am using a bui...
Step 3: Using a Groovy Builder<br />FxBuilder.build {<br />    stage = stage(<br />        title: "Hello World",  <br />  ...
Step 4: With Content<br />FxBuilder.build {<br />    stage = stage(<br />        title: "Hello Rectangle (Groovy FxBuilder...
Example 2: 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 />repeatCount: Timeline.INDEFINITE,<br ...
Step 3: JavaFX Animation Groovy DSL (courtesy of Jim Clarke – work in progress)<br />timeline = timeline(repeatCount: Time...
Groovy Closures  - With interface coercion<br />def f = { <br />  bean, pr-> rect.setFill(rect.isHover() ? Color.GREEN : C...
58<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 implements Runnable {<br />  public void run() {<br />    Stage stage = ne...
object HelloJavaFX extends JavaFXApplication {<br />  def stage = new Stage {<br />    title = "Hello Stage"<br />    widt...
63<br />object HelloJavaFX extends JavaFXApplication {<br />  def stage = new Stage {<br />    title = "Hello Stage"<br />...
64<br />object HelloJavaFX extends JavaFXApplication {<br />def stage = new Stage {<br />    title = "Hello Stage"<br />  ...
65<br />object HelloJavaFX extends JavaFXApplication {<br />  def stage = new Stage {<br />title = "Hello Stage"<br />    ...
66<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 />69<br />def timeline = new Timeline {<br />repeatCount = INDEFINITE<br />autoReverse = true<br />k...
Closures in Scala<br />70<br />Closures are also supported in Scala<br />And they are 100% type-safe<br />rect.addChangedL...
Closures in Scala<br />Closures are also supported in Scala<br />And they are 100% type-safe<br />71<br />rect.addChangedL...
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 />75<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...
Conclusion<br />You can write JavaFX applications in pure Java<br />JavaFX is also usable in alternate languages<br />Over...
Challenge the Presenter…<br />
Próxima SlideShare
Cargando en…5
×

JavaFX 2.0 and Alternative Languages

12.503 visualizaciones

Publicado el

Presentation on JavaFX 2.0 and development with alternative languages given to the Chennai Java User Group in India.

Publicado en: Educación, Tecnología

JavaFX 2.0 and Alternative Languages

  1. 1. JavaFX 2.0 and Alternative Languages<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 />Motorcyclist<br />
  3. 3. 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 PRESENTERS ARE NOT LIABLE FOR ANY INNOVATION, BREAKTHROUGHS, OR NP-COMPLETE SOLUTIONS THAT MAY RESULT. <br />
  4. 4. Agenda<br />JavaFX 2.0 Platform<br />JavaFX in Java<br />Explore Alternative Languages<br />
  5. 5. JavaFX and the Java Platform <br />Java Language<br />Java EE<br />HotSpot Java VM<br />Lightweight Java VM<br />Java SE<br />Java TV & Java ME<br />Java Card<br />Java FX<br />APIs<br />Copyright 2010 Oracle<br />
  6. 6. JavaFX Design Goals<br />Deliver the Best HTML5 & Native Application Experience from Java<br />Programming model: the power of Java, the ease of JavaFX<br />Native interoperability between Java, JavaScript & HTML5 <br />High performance 2D and 3D Java graphics engine designed to exploit hardware advances in desktop & mobile<br />Complete & integrated development lifecycle experience<br />Copyright 2010 Oracle<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 />Copyright 2010 Oracle<br />
  8. 8. 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 />
  9. 9. JavaFX With Java<br />
  10. 10. 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 />
  11. 11. 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 />
  12. 12. 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 />
  13. 13. Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.addChangeListener(Rectangle.HOVER, new ChangeListener() {<br />});<br />
  14. 14. Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.addChangeListener(Rectangle.HOVER, new ChangeListener() {<br />});<br />The property we want to watch<br />
  15. 15. Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.addChangeListener(Rectangle.HOVER, new ChangeListener() {<br />});<br />Only one listener used regardless of data type<br />
  16. 16. Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.addChangeListener(Rectangle.HOVER, new ChangeListener() {<br /> public void handle(Bean bean, PropertyReference pr) {<br /> }<br />});<br />Rectangle is a Bean<br />
  17. 17. Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.addChangeListener(Rectangle.HOVER, new ChangeListener() {<br /> public void handle(Bean bean, PropertyReference pr) {<br /> }<br />});<br />Refers to the Rectangle.hover ‘property’<br />
  18. 18. Observable Pseudo-Properties<br />Rectangle rect = new Rectangle();<br />rect.setX(40);<br />rect.setY(40);<br />rect.setWidth(100);<br />rect.setHeight(200);<br />rect.addChangeListener(Rectangle.HOVER, new ChangeListener() {<br /> public void handle(Bean bean, PropertyReference pr) {<br />rect.setFill(rect.isHover() ? Color.GREEN : Color.RED);<br /> }<br />});<br />
  19. 19. 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 will also have an Observable Map<br />
  20. 20. Example Application<br />public class HelloStage extends Application {<br /> @Override public void start() {<br /> Stage stage = new 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 />Launcher.launch(HelloStage.class, args);<br /> }<br />}<br />
  21. 21. JavaFX With JRuby<br />
  22. 22. Why JRuby?<br /><ul><li>Direct access to Java APIs
  23. 23. Dynamic Typing
  24. 24. Closures
  25. 25. ‘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 />
  26. 26. JRuby Example 1: Simple Stage<br />require 'java'<br />FX = Java::javafx.lang.FX<br />Stage = Java::javafx.stage.Stage<br />Scene = Java::javafx.scene.Scene<br />Color = Java::javafx.scene.paint.Color<br />class HelloStage<br /> include java.lang.Runnable<br /> def run<br /> .....<br /> end<br />end<br />FX.start(HelloStage.new);<br />stage = Stage.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 />
  27. 27. 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 />scene.content.add(rect)<br />timeline = Timeline.new<br />timeline.repeat_count= Timeline::INDEFINITE<br />timeline.auto_reverse = true<br />kv = KeyValue.new(rect, Rectangle::X, 200);<br />kf = KeyFrame.new(Duration.valueOf(500), kv);<br />timeline.key_frames.addkf;<br />timeline.play();<br />
  28. 28. JRuby Closure Conversion<br />rect.add_change_listener(Rectangle::HOVER) do |bean, pr, bln|<br />rect.fill = rect.hover ? Color::GREEN : Color::RED;<br />end<br />26<br />
  29. 29. 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 />27<br />
  30. 30. 28<br />JavaFX With Clojure<br />Artwork by Augusto Sellhorn<br />http://sellmic.com/<br />
  31. 31. 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 />29<br />(def hello (fn [] "Hello world"))<br />(hello)<br />
  32. 32. 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 />30<br />(plus macros that are syntactic sugar wrapping the above)<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 />
  34. 34. 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 />32<br />Create a Function for the Application<br />
  35. 35. 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 />33<br />Initialize the Stage and Scene Variables<br />
  36. 36. 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 />34<br />Call Setter Methods on Scene and Stage<br />
  37. 37. 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 />35<br />Java Constant Syntax<br />Java Method Syntax<br />
  38. 38. 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 />36<br />
  39. 39. 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 />37<br />doto form:<br />(doto symbol<br /> (.method params))<br /> equals:<br />(.method symbol params)<br />
  40. 40. 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 />38<br />
  41. 41. 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 />39<br />Let replaced with inline declarations<br />
  42. 42. 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 />40<br />Doto allows nested data structures<br />
  43. 43. 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 />41<br />Now a nested Rectangle fits!<br />
  44. 44. Closures in Clojure<br />42<br />Inner classes can be created using proxy<br />(.addChangeListenerrectRectangle/HOVER<br /> (proxy [Listener] []<br /> (handle [b, p]<br /> (.setFillrect<br /> (if (.isHoverrect) Color/GREEN Color/RED)))))<br />
  45. 45. Closures in Clojure<br />Inner classes can be created using proxy<br />43<br />Proxy form:<br />(proxy [class] [args] fs+)<br /> f => (name [params*] body)<br />(.addChangeListenerrectRectangle/HOVER<br /> (proxy[Listener][]<br /> (handle [b, p]<br /> (.setFillrect<br /> (if (.isHoverrect) Color/GREEN Color/RED)))))<br />
  46. 46. JavaFX With Groovy<br />
  47. 47. 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 />
  48. 48. Example 1: Simple FX Script to Groovy<br />
  49. 49. Step 1: Lazy conversion to Groovy<br />class HelloStage implements Runnable {<br /> void run() {<br /> Stage stage = new Stage();<br />stage.setTitle("Hello Stage (Groovy)“);<br />stage.setWidth(600);<br />stage.setHeight(450);<br /> Scene scene = new Scene();<br />scene.setFill(Color.LIGHTSKYBLUE);<br />stage.setScene(scene);<br />stage.setVisible(true);<br /> }<br />static void main(args) {<br />FX.start(new HelloStage());<br /> }<br />}<br />
  50. 50. Step 2: Slightly More Groovy<br />class HelloStage implements Runnable {<br /> void run() {<br /> new Stage(<br /> title: "Hello Stage (Groovy)",<br /> width: 600,<br /> height: 450,<br /> visible: true,<br /> scene: new Scene(<br /> fill: Color.LIGHTSKYBLUE,<br /> )<br /> );<br /> }<br /> static void main(args) {<br />FX.start(new HelloStage());<br /> }<br />}<br />
  51. 51. Slight Aside: Groovy Builders<br />Groovy builders make writing custom DSLs easy<br />For the next slide, I am using a builder I defined<br />Hopefully the community will improve upon this<br />
  52. 52. Step 3: Using a Groovy Builder<br />FxBuilder.build {<br /> stage = stage(<br /> title: "Hello World", <br /> width: 600, <br /> height: 450,<br /> scene: scene(fill: Color.LIGHTSKYBLUE) {<br /> ...<br /> }<br /> )<br /> stage.visible = true;<br />}<br />
  53. 53. Step 4: With Content<br />FxBuilder.build {<br /> stage = stage(<br /> title: "Hello Rectangle (Groovy FxBuilder 2)", <br /> width: 600, <br /> height: 450,<br /> scene: scene(fill: Color.LIGHTSKYBLUE) {<br /> rectangle(<br /> x: 25, y: 40,<br /> width: 100, height: 50,<br /> fill: Color.RED<br /> )<br /> }<br /> )<br /> stage.visible = true;<br />}<br />
  54. 54. Example 2: FX Script Animation in Groovy<br />
  55. 55. 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 />
  56. 56. 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 />
  57. 57. Step 2: Java-ish Groovy Animations<br />final Timeline timeline = new Timeline(<br />repeatCount: Timeline.INDEFINITE,<br />autoReverse: true<br />)<br />final KeyValue kv1 = new KeyValue (rect1.x(), 200);<br />final KeyValue kv2 = new KeyValue (rect2.y(), 200);<br />final KeyValue kv3 = new KeyValue (circle1.radius(), 200);<br />final KeyFramekf = new KeyFrame(Duration.valueOf(750), kv1, kv2, kv3);<br />timeline.getKeyFrames().add(kf);<br />timeline.play();<br />
  58. 58. Step 3: JavaFX Animation Groovy DSL (courtesy of Jim Clarke – work in progress)<br />timeline = timeline(repeatCount: Timeline.INDEFINITE, autoReverse: true) {<br /> at 750.ms update values {<br /> change rect1.y() to 200<br /> change rect2.x() to 200<br /> change circle.radius() to 200<br /> }<br />}<br />timeline.play();<br />
  59. 59. Groovy Closures - With interface coercion<br />def f = { <br /> bean, pr-> rect.setFill(rect.isHover() ? Color.GREEN : Color.RED);<br />} as Listener;<br />rect.addChangedListener(Rectangle.HOVER, f);<br />
  60. 60. 58<br />JavaFX With Scala<br />
  61. 61. 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 />59<br />
  62. 62. 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 />60<br />
  63. 63. Java vs. Scala DSL<br />public class HelloStage implements Runnable {<br /> public void run() {<br /> Stage stage = new 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 />FX.start(new HelloStage());<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 />61<br />22 Lines<br />545 Characters<br />17 Lines<br />324 Characters<br />
  64. 64. 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 />62<br />
  65. 65. 63<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 />
  66. 66. 64<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 />
  67. 67. 65<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 />
  68. 68. 66<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 />
  69. 69. 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.x() -> 300),<br /> new KeyValue(rect2.y() -> 500),<br /> new KeyValue(rect2.width() -> 150)<br /> )<br /> }<br /> )<br /> }<br />67<br />
  70. 70. 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.x() -> 300),<br /> new KeyValue(rect2.y() -> 500),<br /> new KeyValue(rect2.width() -> 150)<br /> )<br /> }<br /> )<br /> }<br />Animation in Scala<br />68<br />Duration set by Constructor Parameter<br />
  71. 71. Animation in Scala<br />69<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.x() -> 300),<br /> new KeyValue(rect2.y() -> 500),<br /> new KeyValue(rect2.width() -> 150)<br /> )<br /> }<br /> )<br /> }<br />Operator overloading for animation syntax<br />
  72. 72. Closures in Scala<br />70<br />Closures are also supported in Scala<br />And they are 100% type-safe<br />rect.addChangedListener(Node.HOVER, (b, p) => {<br />rect.fill = if (rect.hover) Color.GREEN else Color.RED<br />})<br />
  73. 73. Closures in Scala<br />Closures are also supported in Scala<br />And they are 100% type-safe<br />71<br />rect.addChangedListener(Node.HOVER, (b, p) => {<br />rect.fill = if (rect.hover) Color.GREEN else Color.RED<br />})<br />Compact syntax<br />(params) => {body}<br />
  74. 74. 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 />72<br />
  75. 75. 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 />73<br />
  76. 76. 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 />74<br />Fantom has a built-in Duration type<br />And also supports operator overloading<br />
  77. 77. Announcing Project Visage<br />75<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 />
  78. 78. 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 />76<br />
  79. 79. 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 />77<br />
  80. 80. 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 />78<br />
  81. 81. 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 />Remember: This is a proof of concept only – you can not leave this session and do this today.<br />
  82. 82. Challenge the Presenter…<br />
  83. 83. Challenge the Presenter…<br />
  84. 84. 82<br />Stephen Chin<br />steveonjava@gmail.com<br />tweet: @steveonjava<br />

×