Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to JavaFX & Widget FX


Published on

Into to JavaFX & WidgetFX as presented to the Silicon Valley JUG on 2/17.

Published in: Technology
  • Be the first to comment

Intro to JavaFX & Widget FX

  1. 2. Stephen Chin <ul><li>During the Day </li></ul><ul><ul><li>Senior Manager at Inovis, Inc. </li></ul></ul><ul><ul><li>Agile Practitioner (XP/Scrum) </li></ul></ul><ul><ul><li>Large-Scale B2B Enterprise Java Systems </li></ul></ul><ul><li>Evenings & Weekends </li></ul><ul><ul><li>Open-Source Hacker, Project Leader </li></ul></ul><ul><ul><ul><li>JFXtras </li></ul></ul></ul><ul><ul><ul><li>WidgetFX </li></ul></ul></ul><ul><ul><li>Author of the upcoming Pro JavaFX book with: </li></ul></ul><ul><ul><ul><li>Jim Weaver </li></ul></ul></ul><ul><ul><ul><li>Weiqi Gao </li></ul></ul></ul>
  2. 3. Introducing JavaFX
  3. 4. Origins of JavaFX <ul><li>Originally developed by Christopher Oliver </li></ul><ul><li>Called F3 for “Form Follows Function” </li></ul><ul><li>Used Piccolo as the Underlying Scene Graph </li></ul>
  4. 5. Why Another Language? <ul><li>Portability Across Devices </li></ul><ul><ul><li>Smaller Footprint </li></ul></ul><ul><ul><li>Performance Can Be Tuned </li></ul></ul><ul><li>UI Programming Accelerators </li></ul><ul><ul><li>Declarative Syntax </li></ul></ul><ul><ul><li>Bind </li></ul></ul><ul><ul><li>Triggers </li></ul></ul><ul><li>RIA Competition </li></ul><ul><ul><li>Flash/Flex </li></ul></ul><ul><ul><li>Silverlight </li></ul></ul>
  5. 6. About the JavaFX Language <ul><li>It is an object-oriented language </li></ul><ul><li>It is a functional language </li></ul><ul><li>It is an expression language </li></ul><ul><li>It supports a declarative style suitable for GUI programming </li></ul><ul><li>It supports data binding </li></ul><ul><li>It is a statically typed, compiled language with basic type inference capabilities </li></ul><ul><li>It can leverage the vast number of Java libraries </li></ul>
  6. 7. JavaFX Crash Course
  7. 8. Hello Earthrise (Thanks to Jim Weaver for this sample)
  8. 9. Creating a Stage Stage { title: &quot;Hello Earthrise&quot; scene: Scene { … some code omitted… } }
  9. 10. Adding a Scene scene: Scene { content: [ ImageView { … some code omitted… }, Group { … some code omitted… } ] }
  10. 11. Displaying Images ImageView { image: Image { url: &quot;; &quot;54427main_MM_image_feature_102_jw4.jpg&quot; } },
  11. 12. Displaying Text in a Group Group { translateX: 50 translateY: 180 content: [ textRef = Text { translateY: 100 textOrigin: TextOrigin.TOP textAlignment: TextAlignment.JUSTIFY wrappingWidth: 380 content: &quot;Earthrise at Christmas: &quot; … some code omitted… fill: Color.rgb(187, 195, 107) font: Font.font(&quot;SansSerif&quot;, FontWeight.BOLD, 24); } ] clip: Rectangle { width: 430 height: 85 } }
  12. 13. Animating Graphics var transTransition = TranslateTransition { duration: 60s node: bind textRef toY: -700 interpolate: Interpolator.LINEAR repeatCount: Timeline.INDEFINITE }
  13. 14. The Finished Product… <ul><li><demo> </li></ul>
  14. 15. JavaFX API Documentation
  15. 16. JavaFX Language Reference
  16. 17. <ul><li>The JavaFX Desktop Widget Platform </li></ul>WidgetFX
  17. 18. WidgetFX Features <ul><li>Open-Source </li></ul><ul><ul><li>WidgetFX is a fully open-source widget platform (widgets themselves can be licensed commercially). </li></ul></ul><ul><li>Cross-Platform Support </li></ul><ul><ul><li>WidgetFX runs on all major platforms including Windows XP/Vista, Linux, and Mac OS X. </li></ul></ul><ul><li>One-Click Installation </li></ul><ul><ul><li>WidgetFX takes advantage of Java Web Start to provide one-click installation and automatic updates of the dock and widgets. </li></ul></ul><ul><li>Rich Desktop Applications </li></ul><ul><ul><li>WidgetFX leverages the full power of Java and JavaFX providing a very rich library of graphics, animation, and media capabilities. </li></ul></ul><ul><li>Embedded Flash Widgets </li></ul><ul><ul><li>Easy migration path for developers currently using Flash or Flex. </li></ul></ul>
  18. 19. Built-in Widgets <ul><li>Clock </li></ul><ul><ul><li>Skinnable via CSS </li></ul></ul><ul><li>Slide Show </li></ul><ul><ul><li>Configurable Directory, Speed, & Filter </li></ul></ul><ul><li>Web Feed </li></ul><ul><ul><li>Supports Atom and all RSS flavors </li></ul></ul>
  19. 20. Dock Features <ul><li>Drag to desktop </li></ul><ul><li>Resize widgets (option for fixed aspect ratio) </li></ul><ul><li>Per widget transparency </li></ul><ul><li>Widget settings saved on restart </li></ul><ul><li>Toggle dock always-on-top </li></ul><ul><li>Launch on start-up </li></ul><ul><li>Multi-monitor support </li></ul><ul><li>Dock and widgets can be styled via CSS </li></ul>
  20. 21. Movie Widget Tutorial
  21. 22. Widget Properties Name Type Inherited From Description width Number Resizable Initial width of the widget height Number Resizable Initial height of the widget aspectRatio Number Widget If set, defines a fixed aspect ratio for the widget width and height skin Skin Control Renders the widget to the scene graph, can have CSS properties for styling
  22. 23. Widget Definition <ul><li>var widget: Widget; </li></ul><ul><li>widget = Widget { </li></ul><ul><li>width: 640 </li></ul><ul><li>height: 352 </li></ul><ul><li>aspectRatio: bind / </li></ul><ul><li>skin: Skin { </li></ul><ul><li>scene: Group { </li></ul><ul><li>content: bind player </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  23. 24. Load the Media <ul><li>var source = &quot; &quot;; </li></ul><ul><li>var player = bind SimpleMoviePlayer { </li></ul><ul><li>media: Media { </li></ul><ul><li>source: source </li></ul><ul><li>} </li></ul><ul><li>width: bind widget.width </li></ul><ul><li>height: bind widget.height </li></ul><ul><li>} </li></ul>
  24. 25. Run as Application
  25. 26. Run in Widget Runner
  26. 27. How the Widget Runner Works <ul><li>Test widgets standalone </li></ul><ul><li>Identical behavior to production </li></ul><ul><li>Two ways to launch: </li></ul><ul><ul><li>Automatic Execution </li></ul></ul><ul><ul><ul><li>Run your widget as a Web Start application </li></ul></ul></ul><ul><ul><li>Direct Execution </li></ul></ul><ul><ul><ul><li>Create a launch url with the following structure:<widgetUrl> </li></ul></ul></ul>
  27. 28. Widget Configuration Properties Class Name Type Description BooleanProperty Boolean This class allows you to persist sequences of Booleans BooleanSequenceProperty Boolean[] This class allows you to persist sequences of Booleans IntegerProperty Integer This class allows you to persist Integers IntegerSequenceProperty Integer[] This class allows you to persist sequences of Integers LongProperty Long This class allows you to persist Longs LongSequenceProperty Long[] This class allows you to persist sequences of Longs NumberProperty Number This class allows you to persist Numbers NumberSequenceProperty Number[] This class allows you to persist sequences of Numbers StringProperty String This class allows you to persist Strings StringSequenceProperty String[] This class allows you to persist sequences of Strings
  28. 29. Widget Configuration <ul><li>widget = Widget { </li></ul><ul><li>... </li></ul><ul><li>configuration: Configuration { </li></ul><ul><li>properties: [ </li></ul><ul><li>StringProperty { </li></ul><ul><li>name: &quot;source&quot; </li></ul><ul><li>value: bind source with inverse </li></ul><ul><li>} </li></ul><ul><li>] </li></ul><ul><li>scene: Scene {} // defined in the next code fragment </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  29. 30. Widget Config Dialog <ul><li>scene: Scene { </li></ul><ul><li>content: Grid { </li></ul><ul><li>rows: row([ </li></ul><ul><li>Text { </li></ul><ul><li>content: &quot;Source URL:“ </li></ul><ul><li>}, </li></ul><ul><li>TextBox { </li></ul><ul><li>columns: 30, </li></ul><ul><li>value: bind source with inverse </li></ul><ul><li>} </li></ul><ul><li>]) </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  30. 31. Add an On-Replace Trigger <ul><li>var player = bind SimpleMoviePlayer { </li></ul><ul><li>media: Media { </li></ul><ul><li>source: source </li></ul><ul><li>} </li></ul><ul><li>width: bind widget.width </li></ul><ul><li>height: bind widget.height </li></ul><ul><li>} on replace =oldPlayer { </li></ul><ul><li>oldPlayer.player.stop(); </li></ul><ul><li>} </li></ul>
  31. 32. Widget Configuration (demo)
  32. 33. Community Written Widgets <ul><li>Disk Space </li></ul><ul><ul><li>Pär Dahlberg </li></ul></ul><ul><li>World Clock </li></ul><ul><ul><li>Ludovic </li></ul></ul><ul><li>Audio Config / Presentation Cube </li></ul><ul><ul><li>Jim Weaver </li></ul></ul>
  33. 34. <ul><li>Utilities and Add-ons for JavaFX </li></ul>JFXtras
  34. 35. JFXtras Highlights <ul><li>Dialogs </li></ul><ul><li>Layouts </li></ul><ul><ul><li>JFXtras Grid </li></ul></ul><ul><ul><li>MigLayout (new in 0.3!) </li></ul></ul><ul><li>Testing </li></ul><ul><ul><li>Declarative </li></ul></ul><ul><ul><li>Supports Behavior Driven Development (BDD) </li></ul></ul><ul><ul><li>Fluent (ala. Hamcrest, Fest Assert) </li></ul></ul><ul><li>Shape Support </li></ul><ul><ul><li>Thanks to Andres Almiray (jSilhouette) </li></ul></ul><ul><li>Asynchronous Worker </li></ul><ul><ul><li>You deserve your share of rope! </li></ul></ul>
  35. 36. Grid Sample <ul><li>JFXDialog { </li></ul><ul><li>title: “Grid Sample&quot; </li></ul><ul><li>packed: true </li></ul><ul><li>scene: ResizableScene { </li></ul><ul><li>content: Grid { </li></ul><ul><li>var list = SwingList { </li></ul><ul><li>items: for (i in [1..10]) SwingListItem { </li></ul><ul><li>text: &quot;List item {i}&quot;; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>rows: [ </li></ul><ul><li>row([Text {content: &quot;Two Text Boxes:&quot;}, TextBox {}, TextBox {}]), </li></ul><ul><li>row([Text {content: &quot;List:&quot;}, Cell {content: list, hspan: 3}]) </li></ul>
  36. 37. Grid Sample (output)
  37. 38. MigLayout Sample <ul><li>Stage { </li></ul><ul><li>title: &quot;MigLayout Basic Test&quot; </li></ul><ul><li>scene: Scene { </li></ul><ul><li>width: 300, height: 200 </li></ul><ul><li>content: MigLayout { </li></ul><ul><li>layout: &quot;fill&quot; </li></ul><ul><li>columns: &quot;[]30[]&quot; </li></ul><ul><li>rows: &quot;[]30[]&quot; </li></ul><ul><li>migContent: [ </li></ul><ul><li>Text { </li></ul><ul><li>font: Font { size: 24 } </li></ul><ul><li>content: &quot;Row Number One&quot; </li></ul><ul><li>}, </li></ul><ul><li>MigNode { </li></ul><ul><li>constraints: &quot;grow, span, wrap&quot;, </li></ul><ul><li>node: Rectangle { </li></ul><ul><li>width: 20 </li></ul><ul><li>height: 20 </li></ul><ul><li>fill: Color.CORNFLOWERBLUE </li></ul>
  38. 39. MigLayout Sample (output)
  39. 40. Unit Test Sample 1 <ul><li>Test { </li></ul><ul><li>say: &quot;Sequence Utils&quot; </li></ul><ul><li>test: [ </li></ul><ul><li>Test { </li></ul><ul><li>say : &quot;should add numbers&quot; </li></ul><ul><li>do : function() { </li></ul><ul><li>SequenceUtil.sum([10.4, 20.3]); </li></ul><ul><li>} </li></ul><ul><li>expect : closeTo(30.7) </li></ul>
  40. 41. Unit Test Sample 2 <ul><li>Test { </li></ul><ul><li>say: &quot;We should be able to convert from&quot; </li></ul><ul><li>var canonicalJavaFXPoint = Point2D {x: 1, y: 2}; </li></ul><ul><li>var canonicalJavaPoint = new java.awt.Point(1, 2); </li></ul><ul><li>test: [ </li></ul><ul><li>Test { </li></ul><ul><li>say: &quot;a JavaFX point to a Java point&quot; </li></ul><ul><li>do: function() { </li></ul><ul><li>GeometryUtil.pointToJava(canonicalJavaFXPoint); </li></ul><ul><li>} </li></ul><ul><li>expect: [ </li></ul><ul><li>instanceOf(&quot;java.awt.geom.Point2D&quot;), </li></ul><ul><li>equalTo(canonicalJavaPoint) </li></ul><ul><li>] </li></ul><ul><li>}, </li></ul>
  41. 42. Unit Test Sample (parameterized) <ul><li>Test { </li></ul><ul><li>say: &quot;should be able to multiply“ </li></ul><ul><li>test: [ </li></ul><ul><li>for (i in [0..9]) { </li></ul><ul><li>Test { </li></ul><ul><li>assume : that(i*1.5, closeTo(floor(i*1.5))) </li></ul><ul><li>say: &quot;{i} x 1.5 without a decimal&quot; </li></ul><ul><li>do: calculator.multiply(i, 1.5) </li></ul><ul><li>expect: equalTo(&quot;{(i*1.5) as Integer}&quot;) </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>] </li></ul><ul><li>}.perform(); </li></ul>
  42. 43. Shape Support <ul><li>New Shapes: </li></ul><ul><ul><li>Almond </li></ul></ul><ul><ul><li>Arrow </li></ul></ul><ul><ul><li>Asterisk </li></ul></ul><ul><ul><li>Astroid </li></ul></ul><ul><ul><li>Balloon </li></ul></ul><ul><ul><li>Cross </li></ul></ul><ul><ul><li>Donut </li></ul></ul><ul><ul><li>Fan </li></ul></ul><ul><ul><li>Lauburu </li></ul></ul><ul><ul><li>MultiRoundRectangle </li></ul></ul><ul><ul><li>Rays </li></ul></ul><ul><ul><li>RegularPolygon </li></ul></ul><ul><ul><li>ReuleauxTriangle </li></ul></ul><ul><ul><li>RoundPin </li></ul></ul><ul><ul><li>Star </li></ul></ul><ul><ul><li>Triangle </li></ul></ul>
  43. 44. Shape Support (demo)
  44. 45. Other JFXtras Goodies <ul><li>JFXObject </li></ul><ul><ul><li>Convenience method for reflection </li></ul></ul><ul><li>JFXException </li></ul><ul><ul><li>Declaratively define JavaFX exceptions </li></ul></ul><ul><li>Geometry Utilities </li></ul><ul><ul><li>pointToJava/JavaFX, rectangleToJava/JavaFX </li></ul></ul><ul><li>Sequence Utilities </li></ul><ul><ul><li>sum, concat, join, characterSequence </li></ul></ul><ul><li>ResizableScene </li></ul><ul><ul><li>no more binding to stage/scene bounds </li></ul></ul><ul><li>Native Menus </li></ul><ul><ul><li>AWT Menus and Popups </li></ul></ul>
  45. 46. JavaFX Puzzlers FX
  46. 47. Puzzler 1 <ul><li>What will this program display?: </li></ul>Text { textOrigin: TextOrigin.TOP font: Font.font(null, 36) content: “the news” “ paper in the hand” “ bag was bent” } <ul><li>Output: </li></ul>
  47. 48. Puzzler 2 <ul><li>What does this print out? </li></ul>var cars = [ [&quot;z3&quot;, &quot;m3&quot;, &quot;x5&quot;], [&quot;a4&quot;, &quot;r8&quot;, &quot;tt&quot;] ]; println(&quot;bmw: {cars[0]}&quot;); println(&quot;audi: {cars[1]}&quot;); bmw: z3 audi: m3 <ul><li>Answer: </li></ul>
  48. 49. Puzzler 3 <ul><li>What does this print out? </li></ul>var list = [1 3 -5] for (num in list) { println(“Element {indexof num} is {num}”); } Element 0 is 1 Element 1 is -2 <ul><li>Answer: </li></ul>(Thanks to Weiqi Gao for this puzzler)
  49. 50. Puzzler 4 <ul><li>What does this print out? </li></ul>var baseball = [&quot;giants&quot;, &quot;mets&quot;, &quot;yankees&quot;]; var football = [&quot;49ers&quot;, &quot;raiders&quot;, &quot;giants&quot;]; var teams = [ baseball football [&quot;sharks&quot;, &quot;rangers&quot;, &quot;devils&quot;] ]; for (team in teams) { println(&quot;Team: {team}&quot;); } Main.fx:6: Sorry, I was trying to understand an expression but I got confused when I saw ',' which is a punctuation character. [&quot;sharks&quot;, &quot;rangers&quot;, &quot;devils&quot;] <ul><li>Answer: Compilation Error! </li></ul>
  50. 51. Wrapping Things Up…
  51. 52. JFXtras Future Roadmap… <ul><li>More Layouts </li></ul><ul><li>Custom Components (pure JavaFX) </li></ul><ul><li>Graphing and Charting </li></ul><ul><li>Much more… </li></ul>
  52. 53. WidgetFX Future Roadmap… <ul><li>Browser Integration (D&D) </li></ul><ul><li>Widget Community Site </li></ul><ul><li>Mobile Widgets </li></ul>
  53. 54. And a Book… <ul><li>Will be shipped by JavaOne </li></ul><ul><li>Chapters on: </li></ul><ul><ul><li>Mobile Development </li></ul></ul><ul><ul><li>Advanced Layouts </li></ul></ul><ul><ul><li>Back-end Integration </li></ul></ul><ul><ul><li>WidgetFX/JFXtras </li></ul></ul>