JavaFX - Jetzt nun doch oder besser nicht?

JavaFx 2.0

@mobileLarson @_openKnowledge

Lars Röwekamp | open knowledge GmbH

775

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

775

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

775

JavaFx 2.0

775

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.

775

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

775

?

775

JavaFxTooling

UI DesignHot

`r N

ot

?

775

JavaFxTooling

UI DesignHot

`r N

ot

?

775

Demo(s)

775

JavaFx 2.0

775

775

JavaFx 2.0

775

(Quelle: fxexperience)

JavaFx 2.0

775

JavaFx 2.0

775

JavaFx 2.0

775

JavaFx 2.0

775

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

JavaFx 2.0

775

JavaFx 2.0

775

Kickstart

775

Kickstart

775

Kickstart

775

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

Kickstart

775

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

Kickstart

775

Kickstart

775

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

775

Kickstart

775

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

775

Kickstart

775

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

775

Kickstart

775

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

775

Kickstart

775

Kickstart

775

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

775

Kickstart

775

Kickstart

775

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

775

Kickstart

775

JavaFxTooling

UI DesignHot

`r N

ot

?

775

Java

FxTooling

UI DesignHot `r Not

?

775

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

UI Design

775

UI Controls

775

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

UI Controls

775

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

> Bindings, NumberBindings, ...

> via Observable & Listener> Observable, ObservableValue

> Change- & InvalidationListener

> Lists, Maps, Collections

(UI) Binding

775

(UI) Binding

775

(UI) Binding // 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); } });

775

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

> Target Selection

> Route Construction

> Event Capturing

> Event Bubbling

Event Handling

775

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

Effects & Animations

775

Effects & Animations

(Quelle: glyphsoft)

775

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

FXML & CSS 3

775

Kickstart II

775

FXML & CSS 3

(Quelle: glyphsoft)

775

FXML & CSS 3

> UI Declaration

775

FXML & CSS 3

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

775

FXML & CSS 3

> Controller & Action Binding

775

FXML & CSS 3

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

775

FXML & CSS 3

> Scripting Language

775

FXML & CSS 3

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

775

FXML & CSS 3

> CSS 3

775

Java

FxTooling

UI DesignHot `r Not

?

775

JavaFxTooling

UI D

esig

n Hot `r Not

?

775

> NetBeans 7.x > Eclipse> IntelliJ Idea

TOOLING

775

> NetBeans 7.x > Eclipse> IntelliJ Idea

TOOLING

> JavaFX SceneBuilder

775

SceneBuilder

775

JavaFxTooling

UI D

esig

n Hot `r Not

?

775

JavaFxTool

ing

UI DesignHot `r Not

?

JavaFx 2.0

775

775

> Improved UI Controls & Charts > Data Service Support> Enhancements to WebView > Modularization> Mulit-Touch & Sensor Support