79
JavaFx 2.0 @mobileLarson @_openKnowledge Lars Röwekamp | open knowledge GmbH

JavaFX 2.0

Embed Size (px)

Citation preview

Page 1: JavaFX  2.0

JavaFx 2.0

@mobileLarson @_openKnowledge

Lars Röwekamp | open knowledge GmbH

Page 2: JavaFX  2.0

Java UI Welt ist noch in gewohnter Ordnung (Swing, SWT)

JavaFX 1.0: Launch

JavaOne: Erste JavaFX Ankünding (a.k.a. F3)

JavaOne: Zweite JavaFX Ankünding

2006 2007 2008 2009 2010

JavaOne: JavaFX 1.2 Launch

Preview SDK

Mobile a.k.a. JavaFX 1.1

Mobile Runtine (WM)

JavaFX 1.3: Preview

JavaFx History

Page 3: JavaFX  2.0

Java UI Welt ist noch in gewohnter Ordnung (Swing, SWT)

JavaFX 1.0: Launch

JavaOne: Erste JavaFX Ankünding (a.k.a. F3)

JavaOne: Zweite JavaFX Ankünding

2006 2007 2008 2009 2010

JavaOne: JavaFX 1.2 Launch

Preview SDK

Mobile a.k.a. JavaFX 1.1

Mobile Runtine (WM)

JavaFX 1.3: Preview

JavaFx History

Page 4: JavaFX  2.0

JavaFx 2.0

Page 5: JavaFX  2.0

JavaFx 2.0JavaFX 2.0 is the next step in the evolution of Java as a rich client platform. It is designed to provide a modern Java environment that shortens the development time and eases the deployment of data driven business and enterprise client applications. Starting with version 2.0, JavaFX applications are completely developed in Java, which has become ubiquitous with over 9 million developers worldwide.

Page 6: JavaFX  2.0

JavaFX 2.0 is the next step in the evolution of Java as a rich client platform. It is designed to provide a modern Java environment that shortens the development time and eases the deployment of data driven business and enterprise client applications. Starting with version 2.0, JavaFX applications are completely developed in Java, which has become ubiquitous with over 9 million developers worldwide.

JavaFx 2.0

Page 7: JavaFX  2.0

?

Page 8: JavaFX  2.0

JavaFxTooling

UI DesignHot

`r N

ot

?

Page 9: JavaFX  2.0

JavaFxTooling

UI DesignHot

`r N

ot

?

Page 10: JavaFX  2.0

Demo(s)

Page 11: JavaFX  2.0

JavaFx 2.0

Page 12: JavaFX  2.0
Page 13: JavaFX  2.0

JavaFx 2.0

Page 14: JavaFX  2.0

(Quelle: fxexperience)

JavaFx 2.0

Page 15: JavaFX  2.0

JavaFx 2.0

Page 16: JavaFX  2.0

JavaFx 2.0

Page 17: JavaFX  2.0

JavaFx 2.0

Page 18: JavaFX  2.0

> Java API for JavaFX> Built-in UI Controls & Charts> Graphic Engine> Media Engine> Web Engine> „kind of“ Open Source

JavaFx 2.0

Page 19: JavaFX  2.0

JavaFx 2.0

Page 20: JavaFX  2.0

Kickstart

Page 21: JavaFX  2.0

Kickstart

Page 22: JavaFX  2.0

Kickstart

Page 23: JavaFX  2.0

> JavaFX Application> Stages & Scenes > Groups & Nodes> Effects & Animations

Kickstart

Page 24: JavaFX  2.0

// CREATE AN APPLICATION public class ColorfulCircles extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.show(); } }

Kickstart

Page 25: JavaFX  2.0

Kickstart

Page 26: JavaFX  2.0

// ADD A SCENE public 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(); } }

Kickstart

Page 27: JavaFX  2.0

// ADD A SCENE public 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(); } }

Kickstart

Wanna create something?

There is a Builder for it!

Page 28: JavaFX  2.0

@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(); } }

Kickstart

Page 29: JavaFX  2.0

Kickstart

Page 30: JavaFX  2.0

// ADD SOME GRAPHICS @Override public 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(); }

Kickstart

Page 31: JavaFX  2.0

Kickstart

Page 32: JavaFX  2.0

// ADD VISUAL EFFECTS @Override public 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(); }

Kickstart

Page 33: JavaFX  2.0

Kickstart

Page 34: JavaFX  2.0

// ADD GRADIENT Rectangle 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);

Kickstart

Page 35: JavaFX  2.0

Kickstart

Page 36: JavaFX  2.0

Kickstart

Page 37: JavaFX  2.0

root.getChildren().add(colors); root.getChildren().add(circles); // APPLY A BLEND MODE Group 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();

Kickstart

Page 38: JavaFX  2.0

Kickstart

Page 39: JavaFX  2.0

Kickstart

Page 40: JavaFX  2.0

// ADD ANIMATION Timeline 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 animation timeline.play();

Kickstart

Page 41: JavaFX  2.0

Kickstart

Page 42: JavaFX  2.0

JavaFxTooling

UI DesignHot

`r N

ot

?

Page 43: JavaFX  2.0

Java

FxTooling

UI DesignHot `r Not

?

Page 44: JavaFX  2.0

> 50+ Build-In Controls & Layouts> Model/View-Binding > Event Handling> Drag & Drop Support> Effects & Animations> FXML & CSS 2.1+

UI Design

Page 45: JavaFX  2.0

UI Controls

Page 46: JavaFX  2.0

> Label ... HTMLEditor ... Charts > extends Node> Animation, Effects, Transformation> Styling via CSS> Integration with Swing ( & SWT)

UI Controls

Page 47: JavaFX  2.0

> via Property & Binding Classes> IntegerProperty, DoubleProperty ...

> Bindings, NumberBindings, ...

> via Observable & Listener> Observable, ObservableValue

> Change- & InvalidationListener

> Lists, Maps, Collections

(UI) Binding

Page 48: JavaFX  2.0

(UI) Binding

Page 49: JavaFX  2.0

(UI) Binding

// String binding Label label = new Label(); label.textProperty().bind(dateField.textProperty());

Page 50: JavaFX  2.0

(UI) Binding

// String binding Label label = new Label(); label.textProperty().bind(dateField.textProperty());

!= dateField.getText( )

Page 51: JavaFX  2.0

(UI) Binding

// String binding Label label = new Label(); label.textProperty().bind(dateField.textProperty());

!= dateField.getText( )

// String binding Label label = new Label(); label.textProperty().bind(new StringBinding() { { bind(dateField.textProperty()); } @Override protected String computeValue() { Date date = format.parse(dateField.getText()); return "You were born " + format.format(date); } });

Page 52: JavaFX  2.0

> Drag, Key, Mouse, MyEvent ...> EventHandler, EventFilter> Event Delivery Process

> Target Selection

> Route Construction

> Event Capturing (for EventFilter)

> Event Bubbling (for EventHandler)

Event Handling

Page 53: JavaFX  2.0

> Blend, Bloom, Blur> Shadows, Reflection, Lighting> Translation, Rotation, Scaling> Transition, Timelines, Keyframes> Effect Chains

Effects & Animations

Page 54: JavaFX  2.0

Effects & Animations

(Quelle: glyphsoft)

Page 55: JavaFX  2.0

> UI Deklaration > XML-based, Scriptable> Controller „Binding“> Action „Binding“> @FXML Annotation

FXML & CSS 2.1+

Page 56: JavaFX  2.0

Kickstart II

Page 57: JavaFX  2.0

FXML & CSS 2.1+

(Quelle: glyphsoft)

Page 58: JavaFX  2.0

FXML & CSS 2.1+

> UI Declaration

Page 59: JavaFX  2.0

FXML & CSS 2.1+

> UI Declaration

<?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>

Page 60: JavaFX  2.0

FXML & CSS 2.1+

> Controller & Action Binding

Page 61: JavaFX  2.0

FXML & CSS 2.1+

> Controller & Action Binding

<?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>

Page 62: JavaFX  2.0

FXML & CSS 2.1+

> Scripting Language

Page 63: JavaFX  2.0

FXML & CSS 2.1+

> Scripting Language

<?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>

Page 64: JavaFX  2.0

FXML & CSS 2.1+

> CSS 2.1+

Page 65: JavaFX  2.0

Java

FxTooling

UI DesignHot `r Not

?

Page 66: JavaFX  2.0

JavaFxTooling

UI D

esig

n Hot `r Not

?

Page 67: JavaFX  2.0

> NetBeans 7.x > Eclipse 3.x/4.x via e(fx)clipse> IntelliJ Idea 10

TOOLING

Page 68: JavaFX  2.0

> NetBeans 7.x > Eclipse 3.x/4.x via e(fx)clipse> IntelliJ Idea 10

TOOLING

> JavaFX SceneBuilder

Page 69: JavaFX  2.0

SceneBuilder

Page 70: JavaFX  2.0

JavaFxTooling

UI D

esig

n Hot `r Not

?

Page 71: JavaFX  2.0

JavaFxTool

ing

UI DesignHot `r Not

?

Page 72: JavaFX  2.0
Page 73: JavaFX  2.0

JavaFx 2.x

Page 74: JavaFX  2.0

JavaFx Future7u6:² JRE an Mac complete² JavaFX 2.2 Integration² Linux ARM V6/V7² JavaFX on Mac & Linux

NetBeans 7.2:² JDK 7 Mac² JavaFX 2.2

Scene Builder 1.0:² Windows & Mac

2011 2012 2013 2014 2015

NetBeans 7.3:² ARM/Linux² Scene Buidler 1.1

Scene Builder 1.1:² Linux

NetBeans 8:² JDK 8² Scene Buidler 2.0

Scene Builder 2.0:² JavaFX 8² Enhanced IDE Support

JDK 8:² Lamda² JVM Convergence² JavaScript Interorp

JDK 9:² Jigsaw² Cloud² JavaFX JSRs

JavaFX 8:² Public UI Control API²Java SE Embedded² Enhanced HTML 5² Rich Text & Printing ² Muti-Touch, 3D, ...

NetBeans 9:² JDK 9² Scene Buidler 3.0

Scene Builder 3.0:² JavaFX 9

Page 75: JavaFX  2.0

JavaFx Future7u6:² JRE an Mac complete² JavaFX 2.2 Integration² Linux ARM V6/V7² JavaFX on Mac & Linux

NetBeans 7.2:² JDK 7 Mac² JavaFX 2.2

Scene Builder 1.0:² Windows & Mac

2011 2012 2013 2014 2015

NetBeans 7.3:² ARM/Linux² Scene Buidler 1.1

Scene Builder 1.1:² Linux

NetBeans 8:² JDK 8² Scene Buidler 2.0

Scene Builder 2.0:² JavaFX 8² Enhanced IDE Support

JDK 8:² Lamda² JVM Convergence² JavaScript Interorp

JDK 9:² Jigsaw² Cloud² JavaFX JSRs

JavaFX 8:² Public UI Control API²Java SE Embedded² Enhanced HTML 5² Rich Text & Printing ² Muti-Touch, 3D, ...

NetBeans 9:² JDK 9² Scene Buidler 3.0

Scene Builder 3.0:² JavaFX 9

Open SourceEnd of 2012

Page 76: JavaFX  2.0

JavaFx Future7u6:² JRE an Mac complete² JavaFX 2.2 Integration² Linux ARM V6/V7² JavaFX on Mac & Linux

NetBeans 7.2:² JDK 7 Mac² JavaFX 2.2

Scene Builder 1.0:² Windows & Mac

2011 2012 2013 2014 2015

NetBeans 7.3:² ARM/Linux² Scene Buidler 1.1

Scene Builder 1.1:² Linux

NetBeans 8:² JDK 8² Scene Buidler 2.0

Scene Builder 2.0:² JavaFX 8² Enhanced IDE Support

JDK 8:² Lamda² JVM Convergence² JavaScript Interorp

JDK 9:² Jigsaw² Cloud² JavaFX JSRs

JavaFX 8:² Public UI Control API²Java SE Embedded² Enhanced HTML 5² Rich Text & Printing ² Muti-Touch, 3D, ...

NetBeans 9:² JDK 9² Scene Buidler 3.0

Scene Builder 3.0:² JavaFX 9

Upps, sorry delayed until Q1 2013

Page 77: JavaFX  2.0

JavaFx Future7u6:² JRE an Mac complete² JavaFX 2.2 Integration² Linux ARM V6/V7² JavaFX on Mac & Linux

NetBeans 7.2:² JDK 7 Mac² JavaFX 2.2

Scene Builder 1.0:² Windows & Mac

2011 2012 2013 2014 2015

NetBeans 7.3:² ARM/Linux² Scene Buidler 1.1

Scene Builder 1.1:² Linux

NetBeans 8:² JDK 8² Scene Buidler 2.0

Scene Builder 2.0:² JavaFX 8² Enhanced IDE Support

JDK 8:² Lamda² JVM Convergence² JavaScript Interorp

JDK 9:² Jigsaw² Cloud² JavaFX JSRs

JavaFX 8:² Public UI Control API²Java SE Embedded² Enhanced HTML 5² Rich Text & Printing ² Muti-Touch, 3D, ...

NetBeans 9:² JDK 9² Scene Buidler 3.0

Scene Builder 3.0:² JavaFX 9

Upps, sorry delayed until Q1 2013

Page 78: JavaFX  2.0

JavaFx Future7u6:² JRE an Mac complete² JavaFX 2.2 Integration² Linux ARM V6/V7² JavaFX on Mac & Linux

NetBeans 7.2:² JDK 7 Mac² JavaFX 2.2

Scene Builder 1.0:² Windows & Mac

2011 2012 2013 2014 2015

NetBeans 7.3:² ARM/Linux² Scene Buidler 1.1

Scene Builder 1.1:² Linux

NetBeans 8:² JDK 8² Scene Buidler 2.0

Scene Builder 2.0:² JavaFX 8² Enhanced IDE Support

JDK 8:² Lamda² JVM Convergence² JavaScript Interorp

JDK 9:² Jigsaw² Cloud² JavaFX JSRs

JavaFX 8:² Public UI Control API²Java SE Embedded² Enhanced HTML 5² Rich Text & Printing ² Muti-Touch, 3D, ...

NetBeans 9:² JDK 9² Scene Buidler 3.0

Scene Builder 3.0:² JavaFX 9

Upps, sorry delayed until Q1 2013

Page 79: JavaFX  2.0

JavaFx 2.0

@mobileLarson @_openKnowledge

Lars Röwekamp | open knowledge GmbH