JavaOne 2011 Progressive JavaFX 2.0 Custom Components

4,885 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,885
On SlideShare
0
From Embeds
0
Number of Embeds
1,740
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaOne 2011 Progressive JavaFX 2.0 Custom Components

  1. 1. Peter Pilgrim Oracle Java Champion10/15/2011 XeNoNiQUe.co.uk (c) 2011 1
  2. 2. Blog: www.XeNoNiQUe.co.uk/blog/ Industry: Financial Services, London, UK Education: London South Bank University Languages: Scala, Java, Groovy, Clojure Conferences: JavaOne, ACCU, QCon, Devoxx10/15/2011 XeNoNiQUe.co.uk (c) 2011 2
  3. 3. “At the end of the day, on the one hand we have computer systems, and on the other, people. Connecting them together, and allowing people to interact with computer systems in a compelling way, requires graphical user interfaces Chris Oliver, Creator of F3 http://blogs.oracle.com/chrisoliver/entry/epitaph10/15/2011 XeNoNiQUe.co.uk (c) 2011 3
  4. 4. Headline News “Something that no one has mentioned and surprises me very much is that JavaFX 2.0 will only be supported on Windows...” - Max Katz, March 2011 “The major difference in the new version is that it provides Java APIs for JavaFX, allowing you to use JavaFX from within your normal Java applications” - James Sugrue, JavaLobby, May 2011 “You can write Pivot applications in Java or any other JVM language (you are not limited to JavaFX Script). ” – Greg Brown, Apache Pivot, Mailing List, Sept 201010/15/2011 XeNoNiQUe.co.uk (c) 2011 4
  5. 5. Demo10/15/2011 XeNoNiQUe.co.uk (c) 2011 5
  6. 6. The Plan What is a component? What types of component? How does binding work? Design Adaptive Process Future Work10/15/2011 XeNoNiQUe.co.uk (c) 2011 6
  7. 7. JavaFX 2.010/15/2011 XeNoNiQUe.co.uk (c) 2011 7
  8. 8. The Basics10/15/2011 XeNoNiQUe.co.uk (c) 2011 8
  9. 9. The Scene-graph is King.10/15/2011 XeNoNiQUe.co.uk (c) 2011 9
  10. 10. Customers want applications that work like today’s popular mobile devices.10/15/2011 XeNoNiQUe.co.uk (c) 2011 10
  11. 11. JavaFX forms, controls and layouts provide reinvestment .10/15/2011 XeNoNiQUe.co.uk (c) 2011 11
  12. 12. The Java platform is proven10/15/2011 XeNoNiQUe.co.uk (c) 2011 12
  13. 13. We know how to make Java run fast and it will get faster.10/15/2011 XeNoNiQUe.co.uk (c) 2011 13
  14. 14. Demo10/15/2011 XeNoNiQUe.co.uk (c) 2011 14
  15. 15. How much work must we do to reinvigorate a platform?10/15/2011 XeNoNiQUe.co.uk (c) 2011 15
  16. 16. Java Virtual Machine is the crown jewels10/15/2011 XeNoNiQUe.co.uk (c) 2011 16
  17. 17. JavaFX is written in Java, Java runs on the JVM10/15/2011 XeNoNiQUe.co.uk (c) 2011 17
  18. 18. Every Node … Every Node can have a clip node Effectively generate a bitmap mask Easy to create a “PortHole” widget Invert the selection of the clip node, you can create a “Punch” out widget10/15/2011 XeNoNiQUe.co.uk (c) 2011 18
  19. 19. Image View 1 Image View 2 Media Image View 3 Image View 410/15/2011 XeNoNiQUe.co.uk (c) 2011 19
  20. 20. Media View 1 Media View 2 Media Player Media Media View 3 Media View 410/15/2011 XeNoNiQUe.co.uk (c) 2011 20
  21. 21. Breaking Glass1. Divide a bounded area into four triangles2. Are we there yet?3. For each triangle A. Choose a random side and split it to two rectangles B. Recursive descend the two triangles (step 2)10/15/2011 XeNoNiQUe.co.uk (c) 2011 21
  22. 22. Express Yourself10/15/2011 XeNoNiQUe.co.uk (c) 2011 22
  23. 23. JavaFX Properties.10/15/2011 XeNoNiQUe.co.uk (c) 2011 23
  24. 24. Properties Primitive Properties Object Properties FX List Collection Properties10/15/2011 XeNoNiQUe.co.uk (c) 2011 24
  25. 25. Listeners Change Listener  Observable, old value, new value Invalidation Listeners  Observable10/15/2011 XeNoNiQUe.co.uk (c) 2011 25
  26. 26. Property Listener Example10/15/2011 XeNoNiQUe.co.uk (c) 2011 26
  27. 27. Properties of Component10/15/2011 XeNoNiQUe.co.uk (c) 2011 27
  28. 28. Code Generate JavaFX Properties e.g. Groovy10/15/2011 XeNoNiQUe.co.uk (c) 2011 28
  29. 29. Hey Ho! This is all just to say: var temparature: Integer = 23 on replace oldValue { println(“temperature={temperarture}, oldValue={oldValue}” } // JavaFX Script 1.310/15/2011 XeNoNiQUe.co.uk (c) 2011 29
  30. 30. JavaFX Components10/15/2011 XeNoNiQUe.co.uk (c) 2011 30
  31. 31. A pad, a paper and a pen, first!10/15/2011 XeNoNiQUe.co.uk (c) 2011 31
  32. 32. A JavaFX component is an encapsulation that binds a particular tree set of nodes with the operations that act on those nodes10/15/2011 XeNoNiQUe.co.uk (c) 2011 32
  33. 33. Component Types Non-Resizable  javafx.scene.shape.Shape  javafx.scene.Group Resizable  javafx.scene.layout.Pane  javafx.scene.layout.Region  javafx.scene.layout.Control10/15/2011 XeNoNiQUe.co.uk (c) 2011 33
  34. 34. Group based Particularly using the JavaFX primitive nodes under javafx.scene.shape.*; Design is not meant to be resized Layout is fixed at construction / initialisation time10/15/2011 XeNoNiQUe.co.uk (c) 2011 34
  35. 35. Region based Region is the sub class of javafx.scene.Parent Adds the ability to resize a node, layout a particular set of children10/15/2011 XeNoNiQUe.co.uk (c) 2011 35
  36. 36. Control based Allows particular subclass of Region that permits skinning of node with a stylesheet You need 3 classes  The Control java.scene.control.Control type  The Skinnable java.scene.control.Skinnable  The Behaviour com.sun.javafx.scene.control.BehaviorBase10/15/2011 XeNoNiQUe.co.uk (c) 2011 36
  37. 37. Control based Allows particular subclass of Region that permits skinning of node with a stylesheet Control is a direct type of Parent You need 3 classes  The Control java.scene.control.Control type  The Skin java.scene.control.Skin java.scene.control.Skinnable  The Behaviour com.sun.javafx.scene.control.Behavior10/15/2011 XeNoNiQUe.co.uk (c) 2011 37
  38. 38. Control based contd See JFXtras.org for more examples of skinnable components written for JavaFX 2.0 beta 45 A Skin can be a Region (?)com.sun.javafx.scene.control.BehaviorBasecom.sun.javafx.scene.control.SkinBase10/15/2011 XeNoNiQUe.co.uk (c) 2011 38
  39. 39. Layout Children Methodvoid layoutChildren() Layout all of the children of a Region based component10/15/2011 XeNoNiQUe.co.uk (c) 2011 39
  40. 40. Layout Children Methodvoid layoutChildren() Layout all of the children of a Region based component Compute the preferred width and height of the children (first) May cache those values internally as part of the component or use Constraints10/15/2011 XeNoNiQUe.co.uk (c) 2011 40
  41. 41. Layout Boundaries SDK will make a request to find out the best width and height of your component. Your component must do the same for its children Implement at least compute pref width and pref height methods!10/15/2011 XeNoNiQUe.co.uk (c) 2011 41
  42. 42. Layout Methods10/15/2011 XeNoNiQUe.co.uk (c) 2011 42
  43. 43. Pedantic CompleteImplement the other four methods too computeMinWidth(v) computeMinHeight(v) computeMaxWidth(v) computeMaxHeight(v)10/15/2011 XeNoNiQUe.co.uk (c) 2011 43
  44. 44. Demo10/15/2011 XeNoNiQUe.co.uk (c) 2011 44
  45. 45. Writing JavaFX Containers10/15/2011 XeNoNiQUe.co.uk (c) 2011 45
  46. 46. Event Input on Node Mouse Events fall under the pointer iteraction (single)  Clicked, Entered, Exited, Pressed, Dragged, Released, Wheel  Target Entered, Target Exited Key Events  Clicked, Pressed, Released10/15/2011 XeNoNiQUe.co.uk (c) 2011 46
  47. 47. Event Input on Node It is possible to consume an event and stop it bubbling further down the scenegraph hierarchy You can block a component from event interaction Using clever tricks (opaque shape) you can implement dialog / focus / modal behaviour10/15/2011 XeNoNiQUe.co.uk (c) 2011 47
  48. 48. Layout Secrets10/15/2011 XeNoNiQUe.co.uk (c) 2011 48
  49. 49. Reuse SDK Methods10/15/2011 XeNoNiQUe.co.uk (c) 2011 49
  50. 50. Some SDK Methods Region#layoutInArea() Region#positionInArea() Node#resize() Node#resizeRelocate()10/15/2011 XeNoNiQUe.co.uk (c) 2011 50
  51. 51. Demo10/15/2011 XeNoNiQUe.co.uk (c) 2011 51
  52. 52. Tips When Dragging a Node prefer to translate (X,Y) When Laying Out a Node prefer to set the position with layoutX, layoutY Given steady state conditions you can swap layout (X,Y) for translation (X,Y)10/15/2011 XeNoNiQUe.co.uk (c) 2011 52
  53. 53. Tips 2 Use blocking boolean flags to prevent conflict when you animating children in a container If you are unsure about MT concurrency you can always use AtomicBoolean Prefer JavaFX Properties10/15/2011 XeNoNiQUe.co.uk (c) 2011 53
  54. 54. Tools10/15/2011 XeNoNiQUe.co.uk (c) 2011 54
  55. 55. Tools We badly need a JavaFX Property plug- in for various IDE Otherwise the Groovy script will do for now Scene Builder is coming FXML is always10/15/2011 XeNoNiQUe.co.uk (c) 2011 55
  56. 56. Alternative JVM Languages Still new to comment on the best practice for writing component in other languages other than Java Consider using a Java interface Prefer to use and expose JavaFX Properties Learn JavaFX against Java, First!10/15/2011 XeNoNiQUe.co.uk (c) 2011 56
  57. 57. Six Months, 2012 … Okay!10/15/2011 XeNoNiQUe.co.uk (c) 2011 57
  58. 58. Design Think of JavaFX as a sophisticated composition engine á la PhotoShop without the pixel access Learn U/I/X design from elsewhere10/15/2011 XeNoNiQUe.co.uk (c) 2011 58
  59. 59. Boagworld.com10/15/2011 XeNoNiQUe.co.uk (c) 2011 59
  60. 60. Books10/15/2011 XeNoNiQUe.co.uk (c) 2011 60
  61. 61. End Game10/15/2011 XeNoNiQUe.co.uk (c) 2011 61
  62. 62. Blow your toe off now!10/15/2011 XeNoNiQUe.co.uk (c) 2011 62
  63. 63. However, we are behind the wave! Let us learn from the web technologists and the mobile app leaders and ran past them!10/15/2011 XeNoNiQUe.co.uk (c) 2011 63
  64. 64. Test JavaFX 2.0 User Interface against your target users BEFORE and AFTER10/15/2011 XeNoNiQUe.co.uk (c) 2011 64
  65. 65. Learn more http://xenonique.co.uk/blog/ peter.pilgrim@gmail.com http://javafx.com/ twitter:peter_pilgrim10/15/2011 XeNoNiQUe.co.uk (c) 2011 65
  66. 66. Professional Services peter.pilgrim@gmail.com JavaFX 2.0 in Enterprises Contracting Training with Consultancy Technical Leadership10/15/2011 XeNoNiQUe.co.uk (c) 2011 66
  67. 67.  Can I have a HIRES JavaFX logo please? A work in Progress Source Code to be added Demos to be completed in September10/15/2011 XeNoNiQUe.co.uk (c) 2011 67
  68. 68. AttributionsAll images are Creative Commons (CC) License from Flickr.com– “You must attribute the source and you cannot change the content”Tim Ellis http://www.flickr.com/photos/tim_ellis/Lego Basics http://www.flickr.com/photos/tim_ellis/338755101/sizes/l/*PaysImaginaire* http://www.flickr.com/photos/nevrlndtink/Variable Plastic Bag http://www.flickr.com/photos/nevrlndtink/232906118/sizes/m/~Deiby http://www.flickr.com/photos/deiby/Expression http://www.flickr.com/photos/deiby/5489382677/sizes/l/Lisa Sinclair http://www.flickr.com/photos/plumandjello/fruit http://www.flickr.com/photos/plumandjello/2333263539/sizes/l/Nerovivo http://www.flickr.com/photos/dominik99/http://www.flickr.com/photos/dominik99/407716865/sizes/z/in/photostream/10/15/2011 XeNoNiQUe.co.uk (c) 2011 68
  69. 69. AttributionsAll images are Creative Commons (CC) License from Flickr.com– “You must attribute the source and you cannot change the content”.Guilty http://www.flickr.com/photos/roll_initiative/Arbitrary Function Generator http://www.flickr.com/photos/roll_initiative/3278642272/Loop Oh Rupert Grazer http://www.flickr.com/photos/loop_oh/Pattern at the Senckenberg Museum in Frankfurt am Main / Germany. http://www.flickr.com/photos/loop_oh/4571485915/Lili Vieira de Carvalho, Vancouver, Canada http://www.flickr.com/people/lilivc/Composition of Bowls http://www.flickr.com/photos/lilivc/367582911/sizes/l/Mykl Roventine http://www.flickr.com/people/myklroventine/19/365 Game Over http://www.flickr.com/photos/myklroventine/3210068573/sizes/l/superciliousness / Bentley Smith http://www.flickr.com/people/superciliousness/200510 carpenters tools - inside the workmans shed - all his old tools http://www.flickr.com/photos/superciliousness/57486288/10/15/2011 XeNoNiQUe.co.uk (c) 2011 69
  70. 70. AttributionsAll images are Creative Commons (CC) License from Flickr.com– “You must attribute the source and you cannot change the content”You’ve got a fast car http://www.flickr.com/photos/coreforce/5910961411/Core Force http://www.flickr.com/photos/coreforce/GAME AT MARBLES http://www.flickr.com/photos/9619972@N08/928099769/sizes/l/in/photostream/(Author unknown, from an antique childrens booLucs Game http://www.flickr.com/photos/9619972@N08/928099769/just.Luc http://www.flickr.com/people/9619972@N08/DIY Easel http://www.flickr.com/photos/68888883@N00/2744696593/in/photostream/Judy of the Woods http://www.flickr.com/people/68888883@N00/10/15/2011 XeNoNiQUe.co.uk (c) 2011 70
  71. 71. Beyond Java Today10/15/2011 XeNoNiQUe.co.uk (c) 2011 71
  72. 72. Beyond Java Future 2016?10/15/2011 XeNoNiQUe.co.uk (c) 2011 72

×