javafx 2.0
Post on 25-Jul-2015
1.165 Views
Preview:
TRANSCRIPT
JavaFx 2.0
@mobileLarson @_openKnowledge
Lars Röwekamp | open knowledge GmbH
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
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
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.
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
?
JavaFxTooling
UI DesignHot
`r N
ot
?
JavaFxTooling
UI DesignHot
`r N
ot
?
Demo(s)
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 Source
JavaFx 2.0
JavaFx 2.0
Kickstart
Kickstart
Kickstart
> JavaFX Application> Stages & Scenes > Groups & Nodes> Effects & Animations
Kickstart
// 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
Kickstart
// 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
// 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!
@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
Kickstart
// 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
Kickstart
// 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
Kickstart
// 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
Kickstart
Kickstart
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
Kickstart
Kickstart
// 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
Kickstart
JavaFxTooling
UI DesignHot
`r N
ot
?
Java
FxTooling
UI DesignHot `r Not
?
> 50+ Build-In Controls & Layouts> Model/View-Binding > Event Handling> Drag & Drop Support> Effects & Animations> FXML & CSS 2.1+
UI Design
UI Controls
> Label ... HTMLEditor ... Charts > extends Node> Animation, Effects, Transformation> Styling via CSS> Integration with Swing ( & SWT)
UI Controls
> via Property & Binding Classes> IntegerProperty, DoubleProperty ...
> Bindings, NumberBindings, ...
> via Observable & Listener> Observable, ObservableValue
> Change- & InvalidationListener
> Lists, Maps, Collections
(UI) Binding
(UI) Binding
(UI) Binding
// String binding Label label = new Label(); label.textProperty().bind(dateField.textProperty());
(UI) Binding
// String binding Label label = new Label(); label.textProperty().bind(dateField.textProperty());
!= dateField.getText( )
(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); } });
> Drag, Key, Mouse, MyEvent ...> EventHandler, EventFilter> Event Delivery Process
> Target Selection
> Route Construction
> Event Capturing (for EventFilter)
> Event Bubbling (for EventHandler)
Event Handling
> Blend, Bloom, Blur> Shadows, Reflection, Lighting> Translation, Rotation, Scaling> Transition, Timelines, Keyframes> Effect Chains
Effects & Animations
Effects & Animations
(Quelle: glyphsoft)
> UI Deklaration > XML-based, Scriptable> Controller „Binding“> Action „Binding“> @FXML Annotation
FXML & CSS 2.1+
Kickstart II
FXML & CSS 2.1+
(Quelle: glyphsoft)
FXML & CSS 2.1+
> UI Declaration
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>
FXML & CSS 2.1+
> Controller & Action Binding
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>
FXML & CSS 2.1+
> Scripting Language
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>
FXML & CSS 2.1+
> CSS 2.1+
Java
FxTooling
UI DesignHot `r Not
?
JavaFxTooling
UI D
esig
n Hot `r Not
?
> 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
TOOLING
> JavaFX SceneBuilder
SceneBuilder
JavaFxTooling
UI D
esig
n Hot `r Not
?
JavaFxTool
ing
UI DesignHot `r Not
?
JavaFx 2.x
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
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
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
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
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
JavaFx 2.0
@mobileLarson @_openKnowledge
Lars Röwekamp | open knowledge GmbH
top related