Peter Pilgrim             Oracle Java Champion10/15/2011      XeNoNiQUe.co.uk (c) 2011   1
Blog: www.XeNoNiQUe.co.uk/blog/             Industry: Financial Services, London, UK             Education: London South B...
“At the end of the day, on the one   hand we have computer systems,   and on the other, people. Connecting   them together...
Headline News “Something that no one has mentioned and  surprises me very much is that JavaFX 2.0 will  only be supported...
Demo10/15/2011   XeNoNiQUe.co.uk (c) 2011   5
The Plan What is a component? What types of component? How does binding work? Design Adaptive Process Future Work10/1...
JavaFX                                            2.010/15/2011   XeNoNiQUe.co.uk (c) 2011             7
The Basics10/15/2011   XeNoNiQUe.co.uk (c) 2011   8
The Scene-graph is King.10/15/2011          XeNoNiQUe.co.uk (c) 2011   9
Customers want applications             that work like today’s popular                    mobile devices.10/15/2011       ...
JavaFX forms, controls and             layouts provide reinvestment .10/15/2011             XeNoNiQUe.co.uk (c) 2011   11
The Java platform is proven10/15/2011      XeNoNiQUe.co.uk (c) 2011   12
We know how to make Java             run fast and it will get faster.10/15/2011              XeNoNiQUe.co.uk (c) 2011   13
Demo10/15/2011   XeNoNiQUe.co.uk (c) 2011   14
How much work must we do              to reinvigorate a platform?10/15/2011            XeNoNiQUe.co.uk (c) 2011   15
Java Virtual Machine is the                   crown jewels10/15/2011           XeNoNiQUe.co.uk (c) 2011   16
JavaFX is written in Java,               Java runs on the JVM10/15/2011           XeNoNiQUe.co.uk (c) 2011   17
Every Node … Every Node can have a clip node Effectively generate a bitmap mask Easy to create a “PortHole” widget Inv...
Image View                 1       Image View           2                                          Media             Image...
Media View                 1       Media View           2                                      Media Player   Media       ...
Breaking Glass1.      Divide a bounded area into four        triangles2.      Are we there yet?3.      For each triangle  ...
Express                                           Yourself10/15/2011   XeNoNiQUe.co.uk (c) 2011                 22
JavaFX Properties.10/15/2011        XeNoNiQUe.co.uk (c) 2011   23
Properties Primitive Properties Object Properties FX List Collection Properties10/15/2011         XeNoNiQUe.co.uk (c) 2...
Listeners     Change Listener        Observable, old value, new value     Invalidation Listeners        Observable10/1...
Property Listener Example10/15/2011   XeNoNiQUe.co.uk (c) 2011   26
Properties of Component10/15/2011   XeNoNiQUe.co.uk (c) 2011   27
Code Generate JavaFX                   Properties                  e.g. Groovy10/15/2011         XeNoNiQUe.co.uk (c) 2011 ...
Hey Ho! This is all just to say:         var temparature: Integer = 23 on replace oldValue {                println(“tempe...
JavaFX             Components10/15/2011      XeNoNiQUe.co.uk (c) 2011   30
A pad, a paper and a pen,                        first!10/15/2011            XeNoNiQUe.co.uk (c) 2011   31
A JavaFX component is an                encapsulation that binds a             particular tree set of nodes with          ...
Component Types     Non-Resizable        javafx.scene.shape.Shape        javafx.scene.Group     Resizable        java...
Group based Particularly using the JavaFX primitive  nodes under javafx.scene.shape.*; Design is not meant to be resized...
Region based Region is the sub class of  javafx.scene.Parent Adds the ability to resize a node, layout  a particular set...
Control based Allows particular subclass of Region that  permits skinning of node with a  stylesheet You need 3 classes ...
Control based Allows particular subclass of Region that  permits skinning of node with a stylesheet Control is a direct ...
Control based contd See JFXtras.org for more examples of  skinnable components written for  JavaFX 2.0 beta 45 A Skin ca...
Layout Children Methodvoid layoutChildren()     Layout all of the children of a Region      based component10/15/2011    ...
Layout Children Methodvoid layoutChildren() Layout all of the children of a Region  based component Compute the preferre...
Layout Boundaries SDK will make a request to find out the  best width and height of your  component. Your component must...
Layout Methods10/15/2011   XeNoNiQUe.co.uk (c) 2011   42
Pedantic CompleteImplement the other four methods too computeMinWidth(v) computeMinHeight(v) computeMaxWidth(v) comput...
Demo10/15/2011   XeNoNiQUe.co.uk (c) 2011   44
Writing JavaFX             Containers10/15/2011        XeNoNiQUe.co.uk (c) 2011   45
Event Input on Node     Mouse Events fall under the pointer      iteraction (single)        Clicked, Entered, Exited, Pr...
Event Input on Node It is possible to consume an event and  stop it bubbling further down the  scenegraph hierarchy You ...
Layout Secrets10/15/2011        XeNoNiQUe.co.uk (c) 2011   48
Reuse SDK Methods10/15/2011        XeNoNiQUe.co.uk (c) 2011   49
Some SDK Methods Region#layoutInArea() Region#positionInArea() Node#resize() Node#resizeRelocate()10/15/2011       XeN...
Demo10/15/2011   XeNoNiQUe.co.uk (c) 2011   51
Tips When Dragging a Node prefer to  translate (X,Y) When Laying Out a Node prefer to set  the position with layoutX, la...
Tips 2 Use blocking boolean flags to prevent  conflict when you animating children in a  container If you are unsure abo...
Tools10/15/2011           XeNoNiQUe.co.uk (c) 2011   54
Tools We badly need a JavaFX Property plug-  in for various IDE Otherwise the Groovy script will do for  now Scene Buil...
Alternative JVM Languages Still new to comment on the best  practice for writing component in other  languages other than...
Six Months, 2012 … Okay!10/15/2011   XeNoNiQUe.co.uk (c) 2011   57
Design Think of JavaFX as a sophisticated  composition engine á la PhotoShop without the pixel access Learn U/I/X desig...
Boagworld.com10/15/2011   XeNoNiQUe.co.uk (c) 2011   59
Books10/15/2011   XeNoNiQUe.co.uk (c) 2011   60
End Game10/15/2011   XeNoNiQUe.co.uk (c) 2011   61
Blow your toe off now!10/15/2011         XeNoNiQUe.co.uk (c) 2011   62
However, we are behind the             wave! Let us learn from the web              technologists and the mobile          ...
Test JavaFX 2.0 User             Interface against your target             users BEFORE and AFTER10/15/2011             Xe...
Learn more             http://xenonique.co.uk/blog/             peter.pilgrim@gmail.com             http://javafx.com/    ...
Professional Services             peter.pilgrim@gmail.com             JavaFX 2.0 in Enterprises             Contracting   ...
 Can I have a HIRES JavaFX logo  please? A work in Progress Source Code to be added Demos to be completed in September...
AttributionsAll images are Creative Commons (CC) License from Flickr.com– “You must attribute the source and you cannot ch...
AttributionsAll images are Creative Commons (CC) License from Flickr.com– “You must attribute the source and you cannot ch...
AttributionsAll images are Creative Commons (CC) License from Flickr.com– “You must attribute the source and you cannot ch...
Beyond Java Today10/15/2011   XeNoNiQUe.co.uk (c) 2011   71
Beyond Java Future 2016?10/15/2011   XeNoNiQUe.co.uk (c) 2011   72
Upcoming SlideShare
Loading in...5
×

JavaOne 2011 Progressive JavaFX 2.0 Custom Components

4,416

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,416
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
24
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
  1. A particular slide catching your eye?

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

×