Feb 9, 2012 ... About The Presenter. Java developer since 1998. Principal Software Engineer at
OCI. Co-author of Pro JavaFX 2 Platform. Steering committee ...
JavaFX 2.0 Weiqi Gao, February 9, 2012 St. Louis Java Users Group
Thursday, February 9, 12
About The Presenter Java developer since 1998 Principal Software Engineer at OCI Co-author of Pro JavaFX 2 Platform Steering committee of St. Louis JUG Loud on the Internet at http:// www.weiqigao.com/blog and @weiqigao
Thursday, February 9, 12
Agenda A little history A little architecture A lot of technologies A lot of demos, code samples have more details Questions & Answers
Thursday, February 9, 12
History JavaFX 1.0 (12/08, JavaFX Script, Win, Mac) JavaFX 1.1 (02/09, Mobile) JavaFX 1.2 (06/09, Linux/Solaris, Charting) JavaFX 1.3 (04/10, End of line for 1.x) JavaFX 2.0 (10/11, Java API, WebView, FXML) JavaFX 2.1 (RSN, Mac support)
Thursday, February 9, 12
Architecture
Departure from AWT/Swing Emphasizes GPU, Media, HTML5 Very regular public API (ScalaFX, GroovyFX, KawaFX, etc.)
Thursday, February 9, 12
Scene Graph The JavaFX runtime gives you a Stage You give the Stage a Scene You give the Scene a Node that is a Parent That Parent is the root of a tree of Nodes (the scene graph) You tell the Stage to show()
Thursday, February 9, 12
SceneGraphExample
Thursday, February 9, 12
The Application Class You extend it in order to be injected a Stage Lifecycle methods: init(), start(), stop(); only start() is abstract and must be overridden Static methods launch(args), launch(appClass, args) Static methods getHostServices(), getParameters(), notifyPreloader(preloaerNotification) Thursday, February 9, 12
ApplicationExample java com.weiqigao.stlouisjug.ApplicationExample --arg1=val1 --arg2=val2 -arg3 arg4 Constructor called in "JavaFX-Launcher" thread init() called in "JavaFX-Launcher" thread named parameters = {arg2=val2, arg1=val1} unnamed parameters = [-arg3, arg4] start() called in "JavaFX Application Thread" thread JavaFX application launcher: calling System.exit stop() called in "JavaFX Application Thread" thread
Thursday, February 9, 12
The Platform class isFxApplicationThread() isSupported(ConditionalFeature) exit() runLater(Runnable)
Thursday, February 9, 12
The Stage Class Properties: title, fullScreen, iconified, resizable Owns a Scene Styles: DECORATED, UNDECORATED, TRANSPARENT, UTILITY Modality: NONE, WINDOW_MODAL, APPLICATION_MODAL toFront(), toBack(), show()
Thursday, February 9, 12
StageCoach Example
Thursday, February 9, 12
The Scene Class ReadOnlyProperties: x, y, width, height, window Properties: root, fill, cursor, camera, eventDispatcher Many events: keyboard, mouse, drag&drop, context menu, input methods root must be set to Parent (which is a Node)
Thursday, February 9, 12
OneTheScene Example
Thursday, February 9, 12
The root in a Scene The root must be a Parent The Parent is a Node The Parent has four direct subclasses Group is just a container Region lays out its content Controls are UI controls and skinnable WebView is, what else, a WebView
Thursday, February 9, 12
CenterUsingBind Example Text text = new Text("JavaFX Reversi"); text.setTextOrigin(VPos.TOP); text.setFont(Font.font(null, FontWeight.BOLD, 18)); Scene scene = new Scene(new Group(text), 400, 100); text.layoutXProperty().bind(scene.widthProperty().subtract(text.prefWidth(0)) .divide(2)); text.layoutYProperty().bind(scene.heightProperty().subtract(text.prefHeight(0)) .divide(2));
Thursday, February 9, 12
Layout Layout classes are called Panes in JavaFX They all extend Region StackPane, TilePane, FlowPane, HBox, VBox, GridPane, AnchorPane Extend Region to create custom layout
Thursday, February 9, 12
Layout Examples
CenterUsingStack
Custom Region
AlignUsingStackAndTile
Thursday, February 9, 12
Controls Label, Button, RadioButton, ToggleButton CheckBox, ChoiceBox TextField, PasswordField, TextArea, Hyperlink ScrollBar, ScrollPane, Slider, ProgressBar ListView, TableView, TreeView, HTMLEditor TabPane, SplitPane, TitledPane, Accordion MenuBar, MenuButton, ContextMenu, ToolBar Tooltip, Separator, ProgressIndicator and more Thursday, February 9, 12
StarterApp Example
Thursday, February 9, 12
Thursday, February 9, 12
Thursday, February 9, 12
Thursday, February 9, 12
Thursday, February 9, 12
The WebView
Thursday, February 9, 12
Shapes and Paths Shapes: Line, PolyLine, Polygon, Rectangle, Arc, Circle, Ellipse, QuadCurve, CubicCurve, Path, SVGPath PathElements: MoveTo, LineTo, HLineTo, VLineTo, ArcTo, QuadCurveTo, CubicCurveTo, ClosePath ArcType, StrokeType, StrokeLineJoin, StrokeLineCap, FillRule
Thursday, February 9, 12
TrigonometryExample
Thursday, February 9, 12
LissajousCurveExample
Thursday, February 9, 12
Charts BarChart XYChart: BarChart, LineChart, AreaChart, ScatterChart, BubbleChart Title, Legend, Axis, CategoryAxis, ValueAxis, NumberAxis Series, BarChart.Data, XYChart.Data
Thursday, February 9, 12
Chart Examples
Thursday, February 9, 12
Audio and Video Supported formats: mp3, aif, aiff, wav, fxm, flv VP6 video with MP3 audio Metadata In memory uncompressed AudioClip Media, MediaPlayer, MediaView Audio equalization Thursday, February 9, 12
Audio Player Example
Thursday, February 9, 12
Effects Can apply to any Node Shadow, PerspectiveTransform, ColorInput, Bloom, Lighting, Glow, DropShadow, ImageInput, MotionBlur, SepiaTone, Reflection, GaussianBlur, Blend, InnerShadow, BoxBlur, ColorAdjust, DisplacementMap
Thursday, February 9, 12
VanishingCircle Example
Thursday, February 9, 12
Transforms Can apply to any Node Translate, Scale, Rotate, Affine, Shear Can apply more than one transforms (composition) Convenience properties: translateX, scaleX, etc.
Thursday, February 9, 12
Observable
Thursday, February 9, 12
Properties Observable: InvalidationListener (lazy) ObservableValue: ChangeListener (ov, old, new) ReadOnlyProperty, Property: Boolean, Integer, Long, Float, Double, String, Object Owner, name
Thursday, February 9, 12
JavaFX 2.0 Beans public class Foo { private IntegerProperty bar = new SimpleIntegerProperty(this, “bar”, 0); public final int getBar() { return bar.get(); } public final void setBar(int newValue) { bar.set(newValue); } public IntegerProperty barProperty() { return bar; } }
Strategies for avoiding unnecessary instantiations of properties objects: wait until... Thursday, February 9, 12
Bindings Propergate changes foo.barProperty().bind(baz.quuxProperty()); foo.barProperty().bindBidirectional(baz.quuxP roperty()); unbind(), unbindBidirectional() Factory methods in Bindings class Fluent Interface API Thursday, February 9, 12
HeronsFormulaExample DoubleProperty a = new SimpleDoubleProperty(0); DoubleProperty b = new SimpleDoubleProperty(0); DoubleProperty c = new SimpleDoubleProperty(0); DoubleBinding s = a.add(b).add(c).divide(2.0D); final DoubleBinding areaSquared = new When(a.add(b).greaterThan(c) .and(b.add(c).greaterThan(a)) .and(c.add(a).greaterThan(b))) .then(s.multiply(s.subtract(a)) .multiply(s.subtract(b)) .multiply(s.subtract(c))) .otherwise(0.0D);
Thursday, February 9, 12
Observable Collections ObservableList, ListChangeListener, ListChangeListener.Change (rich information) ObservableMap, MapChangeListener, MapChangeListener.Change (not so rich) FXCollections is similar to Collections It has factory methods for ObservableList and ObservableMap, and utility methods for ObservableList that generate one Change Thursday, February 9, 12
Threading The “main” thread The “JavaFX-Launcher” thread The “JavaFX Application Thread” thread The “QuantumRenderer-0” thread The “JFXMedia Player EventQueue” thread The pulse event synchronizes scene to rendering engine. It’s throttled at 60/s
Thursday, February 9, 12
JavaFXThreadsExample
Thursday, February 9, 12
Worker Threading Worker interface has properties: title, message, running, state, totalWork, workDone, progress, value, exception Properties are published on the JavaFX Application Thread Task and Service abstract classes implements the Worker interface Task is one use only, Service can be reused READY, SCHEDULED, RUNNING, SUCCEEDED, CANCELED, FAILED Thursday, February 9, 12
WorkerAndTaskExample ServiceExample
Thursday, February 9, 12
Animation KeyFrame based Timeline animation Interpolation.LINEAR, EASYIN, EASEOUT cycleCount, repeat properties of Timeline TimelineBuilder.create() .keyFrames( new KeyFrame(Duration.seconds(0), new KeyValue(a, 2)), new KeyFrame(Duration.seconds(3), new KeyValue(a, 6)) ) .build() .play();
Thursday, February 9, 12
Transitions Convenient animations RotateTransition, FadeTransition, PauseTransition, PathTransition, StrokeTransition, TranslateTransition, ParallelTransition, ScaleTransition, SequentialTransition, FillTransition
Thursday, February 9, 12
Styling with CSS Load CSS files from the class path: URL css = getClass().getResource("my.css"); scene.getStylesheets().add(css.toString()); All CSS rules apply, all styles start with -fxnode.setId(“a”) node.getStyleClass().add(“b”) caspian.css from the jfxrt.jar is your friend
Thursday, February 9, 12
FXML XML representation of JavaFX 2.0 scene graph FXML can be hooked up to Controller classes to effect behavior Do you want to write XML by hand? I don’t But it will be a boon for the SceneBuilder
Thursday, February 9, 12
Load FXML, Get Node Parent root = FXMLLoader.load(getClass().getResource("AdoptionForm.fxml"));
