JFXtras
JavaFX Controls, Layouts, Services, and More


Stephen Chin          Dean Iverson
GXS                   Virginia T...
Meet the Presenters…
              Steve                               Dean

                                     Family M...
Agenda
> JFXtras 0.7 Summary
> JavaFX 2.0 Recap

> The Future of JFXtras

> A Little Announcement…




                   ...
JFXtras 0.7 Summary




     Layouts          Borders




     Shapes           Controls
                                 4
JFXtras Grid

        Row

         Row


               5
JFXtras Grid
Grid {
  effect: Reflection {}
  border: 20
  vgap: 12
  hgap: 12
  rows: bind [
    row([text, progressBar])...
JFXtras Borders




                  7
JFXtras Borders
Function:
override function create() {
  TitledBorder {
    id: "imageTitle"
    title: file.getName()
   ...
Border and Grid Example




                          9
MigLayout for JavaFX




                       10
Flexible Grid Layout


         Flow          Wrap




                              11
XMigLayout {
  constraints: "fill, wrap"
  columns: "[][]"
  rows: "[][]4mm[]push[]"
  content: [
    Label {
      text: ...
Flexible Border Layout

Stage {
  title: "Mig Docking Test"
  scene: XScene {
      width: 400, height: 400
      fill: Co...
Inflexible Absolute Layout

function createLabel( color:Color, label:String ) {
   XMigLayout {
     constraints: "fill"
 ...
JFXtras Shapes

    Almond     Intersection of two circles (Vesica Piscis)   centerX, centerY, width

    Arrow      Arrow...
JFXtras Shapes (continued)
   MultiRoundRectangle       Rectangle with configurable corners     x, y, width, height, topLe...
JFXtras Shapes




                 17
Sphere Challenge
                                                                          Andres Almiray’s Weblog




   ...
Sphere Challenge – JavaFX Response
>   Composition:
     RadialGradient for the Sphere

     Three additional RadialGrad...
JFXtras Spheres Demo




                       20
JFXtras Controls
>   Simple Controls
       XHyperlink
       XEtchedButton
       XPane
>   Complex Controls
       X...
Hyperlinks and Etched Buttons
XHyperlink {
  text: "Oracle's Homepage",
  url: "http://oracle.com/"
}

var hposSeq = [ HPo...
XPane




        23
XPane

 XPane {
  title: "Default Titled XPane”
  contentNode: Label { text: "Default XPane with a Label" }
  layoutInfo: ...
XPicker
>   Multiple Picker Types
       Side Scroll
       Drop Down
       Thumb Wheel
       Side/Thumb Nudge
>   S...
XCalendarPicker
>   Configurable Locale
>   Multiple Selection Modes
       Single
       Multiple
       Range
>   Com...
XShelfView
>   High Performance
>   Features:
       Scrollbar
       Image Title
       Reflection Effect
       Aspe...
XTableView
>   Insanely Scalable
       Up to 16 million rows
>   Extreme Performance
       Pools rendered nodes
     ...
BandMatesFX - JSONHandler in 3 Steps
              public class FreebaseResult {
                public var code: String;
...
http://jfxtras.org/   30
JavaFX 2.0 Recap
>   The Good
       JavaFX is here to stay
       Controls will be open source
       Calling JavaFX c...
The Future of JFXtras
>   Mission:
       Provide Quality JavaFX Add-ons
>   Going Forward:
       Migrate Non-Overlappi...
How about JavaFX on… Java
public class HelloStage implements Runnable {
    public void run() {
      Stage stage = new St...
How about JavaFX on… Clojure
(defn javafxapp []
  (doto (Stage. "JavaFX Stage")
    (.setWidth 600)
    (.setHeight 450)
 ...
How about JavaFX on… Groovy
FxBuilder.build {
    stage = stage(
        title: "Hello Rectangle (Groovy FxBuilder 2)",
  ...
How about JavaFX on… Scala
object HelloJavaFX extends JavaFXApplication {
  def stage = new Stage {
    title = "Hello Sta...
How about JavaFX on… Visage
Stage {
  title: "Hello Stage"
  width: 600
  height: 450
  scene: Scene {
    fill: Color.LIG...
Announcing Project Visage
>   “Visage is a domain specific language (DSL)
    designed for the express purpose of writing
...
Stephen Chin          Dean Iverson
steve@widgetfx.org    deanriverson@gmail.com
tweet: @steveonjava   tweet: @deanriverson...
Upcoming SlideShare
Loading in …5
×

JFXtras - JavaFX Controls, Layout, Services, and More

401,320 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
401,320
On SlideShare
0
From Embeds
0
Number of Embeds
3,389
Actions
Shares
0
Downloads
62
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JFXtras - JavaFX Controls, Layout, Services, and More

  1. 1. JFXtras JavaFX Controls, Layouts, Services, and More Stephen Chin Dean Iverson GXS Virginia Tech Transportation Institute steve@widgetfx.org deanriverson@gmail.com tweet: @steveonjava tweet: @deanriverson
  2. 2. Meet the Presenters… Steve Dean Family Man Family Man Motorcyclist Robotics Coach 2
  3. 3. Agenda > JFXtras 0.7 Summary > JavaFX 2.0 Recap > The Future of JFXtras > A Little Announcement… 3
  4. 4. JFXtras 0.7 Summary Layouts Borders Shapes Controls 4
  5. 5. JFXtras Grid Row Row 5
  6. 6. JFXtras Grid Grid { effect: Reflection {} border: 20 vgap: 12 hgap: 12 rows: bind [ row([text, progressBar]), row([navigator, mediaGrid]) ] } 6
  7. 7. JFXtras Borders 7
  8. 8. JFXtras Borders Function: override function create() { TitledBorder { id: "imageTitle" title: file.getName() content: FrameBorder { id: "imageFrame" node: ResizableImageView { preserveRatio: true smooth: true image: bind image } } } } 8
  9. 9. Border and Grid Example 9
  10. 10. MigLayout for JavaFX 10
  11. 11. Flexible Grid Layout Flow Wrap 11
  12. 12. XMigLayout { constraints: "fill, wrap" columns: "[][]" rows: "[][]4mm[]push[]" content: [ Label { text: "Email" layoutInfo: nodeConstraints( "ax right" ) } TextBox { layoutInfo: nodeConstraints( "growx, pushx" ) } Label { text: "Password" layoutInfo: nodeConstraints( "ax right" ) } TextBox { layoutInfo: nodeConstraints( "growx, pushx" ) } Button { text: "Login“, layoutInfo: nodeConstraints( "skip, right" ) } Label { text: "This text is 'pushed' to the bottom“, layoutInfo: nodeConstraints( "span" ) }]} 12
  13. 13. Flexible Border Layout Stage { title: "Mig Docking Test" scene: XScene { width: 400, height: 400 fill: Color.LEMONCHIFFON content: XMigLayout { constraints: "fill" content: [ migNode( createLabel( Color.KHAKI, "North" ), "north" ), migNode( createLabel( Color.GOLDENROD, "South" ), "south" ), migNode( createLabel( Color.GOLD, "East" ), "east" ), migNode( createLabel( Color.DARKKHAKI, "West" ), "west" ), ] } } } 13
  14. 14. Inflexible Absolute Layout function createLabel( color:Color, label:String ) { XMigLayout { constraints: "fill" content: [ ResizableRectangle { fill: color layoutInfo: nodeConstraints( "pos 0 0 container.x2 container.y2" ) } Text { content: label font: Font { size: 18 } layoutInfo: nodeConstraints( "center, grow" ) } ] } } 14
  15. 15. JFXtras Shapes Almond Intersection of two circles (Vesica Piscis) centerX, centerY, width Arrow Arrow shape x, y, width, height, depth, rise Asterisk Asterisk with rounded corners centerX, centerY, width, radius, beams, roundness Astroid Hypocloid with four cusps centerX, centerY, radius Balloon Rectangular shape with a tab x, y, width, height, arc, anglePosition, tabWidth, tabHeight, tabLocation, tabDisplacement Cross Symmetrical cross shape centerX, centerY, width, radius, roundness Donut Regular polygon with a hole centerX, centerY, innerRadius, outerRadius, sides Lauburu Four comma-shaped heads centerX, centerY, radius Continued… 15
  16. 16. JFXtras Shapes (continued) MultiRoundRectangle Rectangle with configurable corners x, y, width, height, topLeftWidth/Height, topRightWidth/Height, bottomLeftWidth/Height, bottomRightWidth/Height Rays Multiple rays extend from center centerX, centerY, rays, radius, extent, rounded RegularPolygon Polygon with equal sides centerX, centerY, sides, radius ReuleauxTriangle Curved triangle shape centerX, centerY, radius RoundPin Cone with rounded top centerX, centerY, height, radius Star2 Multipoint star centerX, centerY, innerRadius, outerRadius, count ETriangle Equilateral triangle x, y, width ITriangle Isosceles triangle x, y, width, height RTriangle Right triangle x, y, width, height, anglePosition 16
  17. 17. JFXtras Shapes 17
  18. 18. Sphere Challenge Andres Almiray’s Weblog http://www.jroller.com/aalmiray/entry/griffon_gfxbuilder_fxbuilder_side_by “The following snapshot shows a couple of spheres drawn with GfxBuilder and FxBuilder, can you guess which one is which? … This is by no means a post to bash JavaFX rather to point out some of its deficiencies” -- Andres Almiray (taken completely out of context) 18
  19. 19. Sphere Challenge – JavaFX Response > Composition:  RadialGradient for the Sphere  Three additional RadialGradients for the light sources  A blurred shadow underneath > Features:  All Bound/Relative Coordinates  Configurable –  Base, Ambient, Specular, Shine Colors  Shadow Size and Height  Uses New JFXtras ColorUtil Library  JavaFX Caching for High Performance 19
  20. 20. JFXtras Spheres Demo 20
  21. 21. JFXtras Controls > Simple Controls  XHyperlink  XEtchedButton  XPane > Complex Controls  XPicker  XCalendarPicker  XShelfView  XTableView 21
  22. 22. Hyperlinks and Etched Buttons XHyperlink { text: "Oracle's Homepage", url: "http://oracle.com/" } var hposSeq = [ HPos.LEFT, HPos.CENTER, HPos.RIGHT ]; HBox { spacing: -1 content: for (i in [0..2]) { XEtchedButton { graphic: ImageView { image: images[i] } buttonGroupHPos: hposSeq[i] } } } 22
  23. 23. XPane 23
  24. 24. XPane XPane { title: "Default Titled XPane” contentNode: Label { text: "Default XPane with a Label" } layoutInfo: LayoutInfo { width: 200, height: 200 } } 24
  25. 25. XPicker > Multiple Picker Types  Side Scroll  Drop Down  Thumb Wheel  Side/Thumb Nudge > Supports All Events  Mouse Clicks  Mouse Wheel  Keyboard 25
  26. 26. XCalendarPicker > Configurable Locale > Multiple Selection Modes  Single  Multiple  Range > Completely Skinnable 26
  27. 27. XShelfView > High Performance > Features:  Scrollbar  Image Title  Reflection Effect  Aspect Ratio  Infinite Repeat > Integrates With JFXtras Data Providers > Automatically Updates on Model Changes 27
  28. 28. XTableView > Insanely Scalable  Up to 16 million rows > Extreme Performance  Pools rendered nodes  Caches images  Optimized scene graph > Features:  Drag-and-Drop Column Reordering  Dynamic Updating from Model  Automatically Populates Column Headers 28
  29. 29. BandMatesFX - JSONHandler in 3 Steps public class FreebaseResult { public var code: String; 1 public var result: Result; public var status: String; POJO public var transactionId: String; } var albumHandler:JSONHandler = JSONHandler { 2 rootClass: "javafxpert.FreebaseResult“ onDone: function(obj, isSequence): Void { JSONHandler freebaseResult = obj as FreebaseResult; }} req = HttpRequest { 3 location: queryUrl onInput: function(is: java.io.InputStream) { HttpRequest albumHandler.parse(is); }} 29
  30. 30. http://jfxtras.org/ 30
  31. 31. JavaFX 2.0 Recap > The Good  JavaFX is here to stay  Controls will be open source  Calling JavaFX code from different language is pretty cool! > The Bad  We have to wait a bit… (next summer)  Mobile is no longer on the radar > The Ugly  JavaFX Script was a pretty nice language… 31
  32. 32. The Future of JFXtras > Mission:  Provide Quality JavaFX Add-ons > Going Forward:  Migrate Non-Overlapping Functionality  Support Java APIs For All Components  Continue to Fill the Gaps > Reality:  Migration Will Be Challenging  Release Dates Will Trail Oracle  (until they are fully open source) 32
  33. 33. How about JavaFX on… Java public class HelloStage implements Runnable { public void run() { Stage stage = new Stage(); stage.setTitle("Hello Stage"); stage.setWidth(600); stage.setHeight(450); Scene scene = new Scene(); scene.setFill(Color.LIGHTGREEN); stage.setScene(scene); stage.setVisible(true); } public static void main(String[] args) { FX.start(new HelloStage()); } }
  34. 34. How about JavaFX on… Clojure (defn javafxapp [] (doto (Stage. "JavaFX Stage") (.setWidth 600) (.setHeight 450) (.setScene (doto (Scene.) (.setFill Color/LIGHTGREEN) (.setContent (list (doto (Rectangle.) (.setX 25) (.setY 40) (.setWidth 100) (.setHeight 50) (.setFill Color/RED)))))) (.setVisible true))) (javafxapp) 34
  35. 35. How about JavaFX on… Groovy FxBuilder.build { stage = stage( title: "Hello Rectangle (Groovy FxBuilder 2)", width: 600, height: 450, scene: scene(fill: Color.LIGHTSKYBLUE) { rectangle( x: 25, y: 40, width: 100, height: 50, fill: Color.RED ) } ) stage.visible = true; }
  36. 36. How about JavaFX on… Scala object HelloJavaFX extends JavaFXApplication { def stage = new Stage { title = "Hello Stage" width = 600 height = 450 scene = new Scene { fill = Color.LIGHTGREEN content = List(new Rectangle { x = 25 y = 40 width = 100 height = 50 fill = Color.RED }) } } } 36
  37. 37. How about JavaFX on… Visage Stage { title: "Hello Stage" width: 600 height: 450 scene: Scene { fill: Color.LIGHTGREEN content: Rectangle { x: 25 y: 40 width: 100 height: 50 fill: Color.RED } } } 37
  38. 38. Announcing Project Visage > “Visage is a domain specific language (DSL) designed for the express purpose of writing user interfaces.” > Visage project goals:  Compile to JavaFX Java APIs  Evolve the Language (Annotations, Maps, etc.)  Support Other Toolkits > Come join the team! > For more info: http://visage-lang.org/ 38
  39. 39. Stephen Chin Dean Iverson steve@widgetfx.org deanriverson@gmail.com tweet: @steveonjava tweet: @deanriverson 39

×