JavaFx 2.0                  Lars Röwekamp | open knowledge GmbH@mobileLarson@_openKnowledge
JavaFx History                               JavaOne:             JavaOne: Java UI Welt ist noch in gewohnter             ...
JavaFx History                               JavaOne:             JavaOne: Java UI Welt ist noch in gewohnter             ...
JavaFx 2.0
JavaFx 2.0JavaFX 2.0 is the next step in the evolution ofJava as a rich client platform. It is designed toprovide a modern...
JavaFx 2.0JavaFX 2.0 is the next step in the evolution ofJava as a rich client platform. It is designed toprovide a modern...
?
Hot `r Not           ?                       JavaFxTooling          UI Design
Hot `r Not           ?                       JavaFxTooling          UI Design
Demo(s)
JavaFx 2.0
JavaFx 2.0
JavaFx 2.0(Quelle: fxexperience)
JavaFx 2.0
JavaFx 2.0
JavaFx 2.0
JavaFx 2.0> Java API for JavaFX> Built-in UI Controls & Charts> Graphic Engine> Media Engine> Web Engine> „kind of“ Open S...
JavaFx 2.0
Kickstart
Kickstart
Kickstart
Kickstart> JavaFX Application> Stages & Scenes> Groups & Nodes> Effects & Animations
Kickstart// CREATE AN APPLICATIONpublic class ColorfulCircles extends Application {    public static void main(String[] ar...
Kickstart
Kickstart// ADD A SCENEpublic class ColorfulCircles extends Application {     public static void main(String[] args) {    ...
Kickstart// ADD A SCENEpublic class ColorfulCircles extends Application {     public static void main(String[] args) { som...
Kickstart    @Override    public void start(Stage primarystage) {        // Build scene via Builder        Scene scene = S...
Kickstart
Kickstart// ADD SOME GRAPHICS@Overridepublic void start(Stage primarystage) {  ... // scene with root already set  // add ...
Kickstart
Kickstart// ADD VISUAL EFFECTS@Overridepublic void start(Stage primarystage) {    ...    Group circles = new Group();    f...
Kickstart
Kickstart// ADD GRADIENTRectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(), new LinearGradient(0f, 1f, 1...
Kickstart
Kickstart
Kickstartroot.getChildren().add(colors);root.getChildren().add(circles);// APPLY A BLEND MODEGroup blendModeGroup = new Gr...
Kickstart
Kickstart
Kickstart// ADD ANIMATIONTimeline timeline = new Timeline();for (Node circle: circles.getChildren()) {  timeline.getKeyFra...
Kickstart
Hot `r Not           ?                       JavaFxTooling          UI Design
UI Design                      ToolingJavaFx            ?         Hot `r Not
UI Design> 50+ Build-In Controls & Layouts> Model/View-Binding> Event Handling> Drag & Drop Support> Effects & Animations>...
UI Controls
UI Controls> Label ... HTMLEditor ... Charts> extends Node> Animation, Effects, Transformation> Styling via CSS> Integrati...
(UI) Binding> via Property & Binding Classes > IntegerProperty, DoubleProperty ... > Bindings, NumberBindings, ...> via Ob...
(UI) Binding
(UI) Binding// String bindingLabel label = new Label();label.textProperty().bind(dateField.textProperty());
(UI) Binding// String bindingLabel label = new Label();label.textProperty().bind(dateField.textProperty());         != dat...
(UI) Binding// String bindingLabel label = new Label();label.textProperty().bind(new StringBinding() {  {     bind(dateFie...
Event Handling> Drag, Key, Mouse, MyEvent ...> EventHandler, EventFilter> Event Delivery Process > Target Selection > Rout...
Effects & Animations > Blend, Bloom, Blur > Shadows, Reflection, Lighting > Translation, Rotation, Scaling > Transition, Ti...
Effects & Animations(Quelle: glyphsoft)
FXML & CSS 2.1+> UI Deklaration> XML-based, Scriptable> Controller „Binding“> Action „Binding“> @FXML Annotation
Kickstart II
FXML & CSS 2.1+(Quelle: glyphsoft)
FXML & CSS 2.1+> UI Declaration
FXML & CSS 2.1+<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.layout.*?>...<BorderPane xmlns:fx="http://javaf...
FXML & CSS 2.1+> Controller & Action Binding
FXML & CSS 2.1+<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.layout.*?>...<BorderPane fx:controller="Control...
FXML & CSS 2.1+> Scripting Language
FXML & CSS 2.1+ <?xml version="1.0" encoding="UTF-8"?> <?language javascript?> <?import javafx.scene.layout.*?> ... <Borde...
FXML & CSS 2.1+> CSS 2.1+
UI Design                      ToolingJavaFx            ?         Hot `r Not
Hot `r NotTooling                       JavaFx           ?          UI Design
TOOLING> NetBeans 7.x> Eclipse 3.x/4.x via e(fx)clipse> IntelliJ Idea 10
TOOLING> NetBeans 7.x> Eclipse 3.x/4.x via e(fx)clipse> IntelliJ Idea 10> JavaFX SceneBuilder
SceneBuilder
Hot `r NotTooling                       JavaFx           ?          UI Design
Hot `r NotTooling                       JavaFx             ?          UI Design
JavaFx 2.x
JavaFx Future       7u6:                            JDK 8:                   JavaFX 8:                     JDK 9:       ²...
JavaFx Future       7u6:                            JDK 8:                   JavaFX 8:                     JDK 9:       ²...
JavaFx Future       7u6:                            JDK 8:                   JavaFX 8:                     JDK 9:       ²...
JavaFx Future       7u6:                            JDK 8:                   JavaFX 8:                     JDK 9:       ²...
JavaFx Future       7u6:                            JDK 8:                   JavaFX 8:                     JDK 9:       ²...
JavaFx 2.0                  Lars Röwekamp | open knowledge GmbH@mobileLarson@_openKnowledge
JavaFX  2.0
JavaFX  2.0
Upcoming SlideShare
Loading in...5
×

JavaFX 2.0

1,105

Published on

Speaker: Lars Röwekamp
W-JAX 2012

Und ewig grüßt das Murmeltier: Zum wiederholten Male tritt JavaFX an, die Java-UI-Welt zu (r)evolutionieren. Würde nicht Oracle mit seiner geballten Macht dahinter stehen, könnte man diese Ankündigung getrost ignorieren – aber so? Die Session zeigt die neuen Ansätze von JavaFX 2 und warum es doch zu einem Erfolg werden könnte. Und das auf (fast) allen Plattformen – Desktop, Web und Mobile.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,105
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaFX 2.0

  1. 1. JavaFx 2.0 Lars Röwekamp | open knowledge GmbH@mobileLarson@_openKnowledge
  2. 2. JavaFx History JavaOne: JavaOne: Java UI Welt ist noch in gewohnter Zweite JavaFX JavaFX 1.2 Ordnung Ankünding Launch (Swing, SWT) Preview SDK Mobile Runtine (WM)2006 2007 2008 2009 2010 Mobile a.k.a. JavaFX 1.1 JavaOne: JavaFX 1.0: JavaFX 1.3: Erste JavaFX Launch Preview Ankünding (a.k.a. F3)
  3. 3. JavaFx History JavaOne: JavaOne: Java UI Welt ist noch in gewohnter Zweite JavaFX JavaFX 1.2 Ordnung Ankünding Launch (Swing, SWT) Preview SDK Mobile Runtine (WM)2006 2007 2008 2009 2010 Mobile a.k.a. JavaFX 1.1 JavaOne: JavaFX 1.0: JavaFX 1.3: Erste JavaFX Launch Preview Ankünding (a.k.a. F3)
  4. 4. JavaFx 2.0
  5. 5. JavaFx 2.0JavaFX 2.0 is the next step in the evolution ofJava as a rich client platform. It is designed toprovide a modern Java environment thatshortens the development time and eases thedeployment of data driven business andenterprise client applications. Starting withversion 2.0, JavaFX applications are completelydeveloped in Java, which has becomeubiquitous with over 9 million developersworldwide.
  6. 6. JavaFx 2.0JavaFX 2.0 is the next step in the evolution ofJava as a rich client platform. It is designed toprovide a modern Java environment thatshortens the development time and eases thedeployment of data driven business andenterprise client applications. Starting withversion 2.0, JavaFX applications are completelydeveloped in Java, which has becomeubiquitous with over 9 million developersworldwide.
  7. 7. ?
  8. 8. Hot `r Not ? JavaFxTooling UI Design
  9. 9. Hot `r Not ? JavaFxTooling UI Design
  10. 10. Demo(s)
  11. 11. JavaFx 2.0
  12. 12. JavaFx 2.0
  13. 13. JavaFx 2.0(Quelle: fxexperience)
  14. 14. JavaFx 2.0
  15. 15. JavaFx 2.0
  16. 16. JavaFx 2.0
  17. 17. JavaFx 2.0> Java API for JavaFX> Built-in UI Controls & Charts> Graphic Engine> Media Engine> Web Engine> „kind of“ Open Source
  18. 18. JavaFx 2.0
  19. 19. Kickstart
  20. 20. Kickstart
  21. 21. Kickstart
  22. 22. Kickstart> JavaFX Application> Stages & Scenes> Groups & Nodes> Effects & Animations
  23. 23. Kickstart// CREATE AN APPLICATIONpublic class ColorfulCircles extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.show(); }}
  24. 24. Kickstart
  25. 25. Kickstart// ADD A SCENEpublic class ColorfulCircles extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primarystage) { Group root = new Group(); Scene scene = new Scene(root, 800, 600, Color.BLACK); primaryStage.setScene(scene); primaryStage.show(); }}
  26. 26. Kickstart// ADD A SCENEpublic class ColorfulCircles extends Application { public static void main(String[] args) { something? Wanna create launch(args); } There is a Builder for it! @Override public void start(Stage primarystage) { Group root = new Group(); Scene scene = new Scene(root, 800, 600, Color.BLACK); primaryStage.setScene(scene); primaryStage.show(); }}
  27. 27. Kickstart @Override public void start(Stage primarystage) { // Build scene via Builder Scene scene = SceneBuilder.create() .with(800) .height(600) .color(Color.BLACK). .root(rootGroup = GroupBuilder.create()); primaryStage.setScene(scene); primaryStage.show(); }}
  28. 28. Kickstart
  29. 29. Kickstart// ADD SOME GRAPHICS@Overridepublic void start(Stage primarystage) { ... // scene with root already set // add 30 circles Group circles = new Group(); for (int i = 0; i < 30; i++) { Circle circle = new Circle(150, Color.web("white",0.05)); circle.setStrokeType(StrokeType.OUTSIDE); circle.setStroke(Color.web("white", 0.16)); circle.setStrokeWidth(4); circles.getChildren().add(circle); } root.getChrildren().add(circles); primaryStage.show();}
  30. 30. Kickstart
  31. 31. Kickstart// ADD VISUAL EFFECTS@Overridepublic void start(Stage primarystage) { ... Group circles = new Group(); for (int i = 0; i < 30; i++) { ... circles.getChildren().add(circle); } circles.setEffect(new BoxBlur(10, 10, 3)); root.getChrildren().add(circles); primaryStage.show();}
  32. 32. Kickstart
  33. 33. Kickstart// ADD GRADIENTRectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(), new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new Stop[]{ new Stop(0, Color.web("#f8bd55")), new Stop(0.14, Color.web("#c0fe56")), new Stop(0.28, Color.web("#5dfbc1")), new Stop(0.43, Color.web("#64c2f8")), new Stop(0.57, Color.web("#be4af7")), new Stop(0.71, Color.web("#ed5fc2")), new Stop(0.85, Color.web("#ef504c")), new Stop(1, Color.web("#f2660f")),}));root.getChildren().add(colors);
  34. 34. Kickstart
  35. 35. Kickstart
  36. 36. Kickstartroot.getChildren().add(colors);root.getChildren().add(circles);// APPLY A BLEND MODEGroup blendModeGroup = new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(),Color.BLACK), circles), colors);colors.setBlendMode(BlendMode.OVERLAY);root.getChildren().add(blendModeGroup);primaryStage.show();
  37. 37. Kickstart
  38. 38. Kickstart
  39. 39. Kickstart// ADD ANIMATIONTimeline timeline = new Timeline();for (Node circle: circles.getChildren()) { timeline.getKeyFrames().addAll( new KeyFrame(Duration.ZERO, // set start pos at 0 new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600) ), new KeyFrame(new Duration(40000), // set end pos at 40s new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600) ) );}// play 40s of animationtimeline.play();
  40. 40. Kickstart
  41. 41. Hot `r Not ? JavaFxTooling UI Design
  42. 42. UI Design ToolingJavaFx ? Hot `r Not
  43. 43. UI Design> 50+ Build-In Controls & Layouts> Model/View-Binding> Event Handling> Drag & Drop Support> Effects & Animations> FXML & CSS 2.1+
  44. 44. UI Controls
  45. 45. UI Controls> Label ... HTMLEditor ... Charts> extends Node> Animation, Effects, Transformation> Styling via CSS> Integration with Swing ( & SWT)
  46. 46. (UI) Binding> via Property & Binding Classes > IntegerProperty, DoubleProperty ... > Bindings, NumberBindings, ...> via Observable & Listener > Observable, ObservableValue > Change- & InvalidationListener > Lists, Maps, Collections
  47. 47. (UI) Binding
  48. 48. (UI) Binding// String bindingLabel label = new Label();label.textProperty().bind(dateField.textProperty());
  49. 49. (UI) Binding// String bindingLabel label = new Label();label.textProperty().bind(dateField.textProperty()); != dateField.getText( )
  50. 50. (UI) Binding// String bindingLabel label = new Label();label.textProperty().bind(new StringBinding() { { bind(dateField.textProperty());//}String bindingLabel label = new Label();label.textProperty().bind(dateField.textProperty()); @Override protected String computeValue() { Date date = format.parse(dateField.getText()); return "You were born " + format.format(date); } != dateField.getText( )});
  51. 51. Event Handling> Drag, Key, Mouse, MyEvent ...> EventHandler, EventFilter> Event Delivery Process > Target Selection > Route Construction > Event Capturing (for EventFilter) > Event Bubbling (for EventHandler)
  52. 52. Effects & Animations > Blend, Bloom, Blur > Shadows, Reflection, Lighting > Translation, Rotation, Scaling > Transition, Timelines, Keyframes > Effect Chains
  53. 53. Effects & Animations(Quelle: glyphsoft)
  54. 54. FXML & CSS 2.1+> UI Deklaration> XML-based, Scriptable> Controller „Binding“> Action „Binding“> @FXML Annotation
  55. 55. Kickstart II
  56. 56. FXML & CSS 2.1+(Quelle: glyphsoft)
  57. 57. FXML & CSS 2.1+> UI Declaration
  58. 58. FXML & CSS 2.1+<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.layout.*?>...<BorderPane xmlns:fx="http://javafx.com/fxml"> <top> ... </top> <center> <GridPane ... > <children> ... </children> </GridPane> </center></BorderPane>> UI Declaration
  59. 59. FXML & CSS 2.1+> Controller & Action Binding
  60. 60. FXML & CSS 2.1+<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.layout.*?>...<BorderPane fx:controller="Controller" xmlns:fx="http://javafx.com/fxml"> ... <Button fx:id="submitButton" text="%submit" onAction="#handleSubmitButtonAction"/> ...</BorderPane>> Controller & Action Binding
  61. 61. FXML & CSS 2.1+> Scripting Language
  62. 62. FXML & CSS 2.1+ <?xml version="1.0" encoding="UTF-8"?> <?language javascript?> <?import javafx.scene.layout.*?> ... <BorderPane fx:controller="Controller" xmlns:fx="http://javafx.com/fxml"> <fx:script source="demo.js" /> ... </BorderPane>> Scripting Language
  63. 63. FXML & CSS 2.1+> CSS 2.1+
  64. 64. UI Design ToolingJavaFx ? Hot `r Not
  65. 65. Hot `r NotTooling JavaFx ? UI Design
  66. 66. TOOLING> NetBeans 7.x> Eclipse 3.x/4.x via e(fx)clipse> IntelliJ Idea 10
  67. 67. TOOLING> NetBeans 7.x> Eclipse 3.x/4.x via e(fx)clipse> IntelliJ Idea 10> JavaFX SceneBuilder
  68. 68. SceneBuilder
  69. 69. Hot `r NotTooling JavaFx ? UI Design
  70. 70. Hot `r NotTooling JavaFx ? UI Design
  71. 71. JavaFx 2.x
  72. 72. JavaFx Future 7u6: JDK 8: JavaFX 8: JDK 9: ² JRE an Mac complete ² Lamda ² Public UI Control API ² Jigsaw ² JavaFX 2.2 Integration ² JVM Convergence ²Java SE Embedded ² Cloud ² Linux ARM V6/V7 ² JavaScript Interorp ² Enhanced HTML 5 ² JavaFX JSRs ² JavaFX on Mac & Linux ² Rich Text & Printing ² Muti-Touch, 3D, ...2011 2012 2013 2014 2015 NetBeans 7.2: NetBeans 7.3: NetBeans 8: NetBeans 9: ² JDK 7 Mac ² ARM/Linux ² JDK 8 ² JDK 9 ² JavaFX 2.2 ² Scene Buidler 1.1 ² Scene Buidler 2.0 ² Scene Buidler 3.0 Scene Builder 1.0: Scene Builder 1.1: Scene Builder 2.0: Scene Builder 3.0: ² Windows & Mac ² Linux ² JavaFX 8 ² JavaFX 9 ² Enhanced IDE Support
  73. 73. JavaFx Future 7u6: JDK 8: JavaFX 8: JDK 9: ² JRE an Mac complete ² Lamda ² Public UI Control API ² Jigsaw ² JavaFX 2.2 Integration ² JVM Convergence ²Java SE Embedded ² Cloud ² Linux ARM V6/V7 ² JavaScript Interorp ² Enhanced HTML 5 ² JavaFX JSRs ² JavaFX on Mac & Linux ² Rich Text & Printing ² Muti-Touch, 3D, ...2011 2012 2013 2014 2015 NetBeans 7.2: NetBeans 7.3: NetBeans 8: NetBeans 9: ² JDK 7 Mac ² ARM/Linux ² JDK 8 ² JDK 9 ² JavaFX 2.2 ² Scene Buidler 1.1 ² Scene Buidler 2.0 ² Scene Buidler 3.0 Scene Builder 1.0: Scene Builder 1.1: Scene Builder 2.0: Scene Builder 3.0: ² Windows & Mac ² Linux ² JavaFX 8 ² JavaFX 9 ² Enhanced IDE Support Open Source End of 2012
  74. 74. JavaFx Future 7u6: JDK 8: JavaFX 8: JDK 9: ² JRE an Mac complete ² Lamda ² Public UI Control API ² Jigsaw ² JavaFX 2.2 Integration ² JVM Convergence ²Java SE Embedded ² Cloud ² Linux ARM V6/V7 ² JavaScript Interorp ² Enhanced HTML 5 ² JavaFX JSRs ² JavaFX on Mac & Linux ² Rich Text & Printing ² Muti-Touch, 3D, ...2011 2012 2013 2014 2015 NetBeans 7.2: NetBeans 7.3: NetBeans 8: NetBeans 9: ² JDK 7 Mac ² ARM/Linux ² JDK 8 ² JDK 9 ² JavaFX 2.2 ² Scene Buidler 1.1 ² Scene Buidler 2.0 ² Scene Buidler 3.0 Scene Builder 1.0: Scene Builder 1.1: Scene Builder 2.0: Scene Builder 3.0: ² Windows & Mac ² Linux ² JavaFX 8 ² JavaFX 9 ² Enhanced IDE Support Upps, sorry delayed until Q1 2013
  75. 75. JavaFx Future 7u6: JDK 8: JavaFX 8: JDK 9: ² JRE an Mac complete ² Lamda ² Public UI Control API ² Jigsaw ² JavaFX 2.2 Integration ² JVM Convergence ²Java SE Embedded ² Cloud ² Linux ARM V6/V7 ² JavaScript Interorp ² Enhanced HTML 5 ² JavaFX JSRs ² JavaFX on Mac & Linux ² Rich Text & Printing ² Muti-Touch, 3D, ...2011 2012 2013 2014 2015 NetBeans 7.2: NetBeans 7.3: NetBeans 8: NetBeans 9: ² JDK 7 Mac ² ARM/Linux ² JDK 8 ² JDK 9 ² JavaFX 2.2 ² Scene Buidler 1.1 ² Scene Buidler 2.0 ² Scene Buidler 3.0 Scene Builder 1.0: Scene Builder 1.1: Scene Builder 2.0: Scene Builder 3.0: ² Windows & Mac ² Linux ² JavaFX 8 ² JavaFX 9 ² Enhanced IDE Support Upps, sorry delayed until Q1 2013
  76. 76. JavaFx Future 7u6: JDK 8: JavaFX 8: JDK 9: ² JRE an Mac complete ² Lamda ² Public UI Control API ² Jigsaw ² JavaFX 2.2 Integration ² JVM Convergence ²Java SE Embedded ² Cloud ² Linux ARM V6/V7 ² JavaScript Interorp ² Enhanced HTML 5 ² JavaFX JSRs ² JavaFX on Mac & Linux ² Rich Text & Printing ² Muti-Touch, 3D, ...2011 2012 2013 2014 2015 NetBeans 7.2: NetBeans 7.3: NetBeans 8: NetBeans 9: ² JDK 7 Mac ² ARM/Linux ² JDK 8 ² JDK 9 ² JavaFX 2.2 ² Scene Buidler 1.1 ² Scene Buidler 2.0 ² Scene Buidler 3.0 Scene Builder 1.0: Scene Builder 1.1: Scene Builder 2.0: Scene Builder 3.0: ² Windows & Mac ² Linux ² JavaFX 8 ² JavaFX 9 ² Enhanced IDE Support Upps, sorry delayed until Q1 2013
  77. 77. JavaFx 2.0 Lars Röwekamp | open knowledge GmbH@mobileLarson@_openKnowledge
  1. A particular slide catching your eye?

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

×