diap-JavaFX 2

5/26/2018 diap-JavaFX 2

1/55

JavaFX 2.0Weiqi Gao, February 9, 2012St. Louis Java Users Group

Thursday, February 9, 12


2/55

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

http://www.weiqigao.com/bloghttp://www.weiqigao.com/bloghttp://www.weiqigao.com/bloghttp://www.weiqigao.com/bloghttp://www.weiqigao.com/bloghttp://www.weiqigao.com/blog


3/55

Agenda

A little history

A little architecture

A lot of technologies

A lot of demos, code samples have moredetails

Questions & Answers



4/55

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)



5/55

Architecture

Departure from AWT/Swing

Emphasizes GPU, Media, HTML5Very regular public API (ScalaFX, GroovyFX,KawaFX, etc.)



6/55

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



7/55

SceneGraphExample



8/55

The Application Class

You extend it in order to be injected a Stage

Lifecycle methods: init(), start(), stop(); onlystart() is abstract and must be overridden

Static methods launch(args), launch(appClass,args)

Static methods getHostServices(),getParameters(),notifyPreloader( reloaerNotification)



9/55

ApplicationExample

java com.weiqigao.stlouisjug.ApplicationExample --arg1=val1 --arg2=val2 -arg3 arg4

Constructor called in "JavaFX-Launcher" thread

init() called in "JavaFX-Launcher" threadnamed parameters = {arg2=val2, arg1=val1}unnamed parameters = [-arg3, arg4]start() called in "JavaFX Application Thread" thread

JavaFX application launcher: calling System.exitstop() called in "JavaFX Application Thread" thread



10/55

The Platform classisFxApplicationThread()

isSupported(ConditionalFeature)

exit()

runLater(Runnable)



11/55

The Stage ClassProperties: title, fullScreen, iconified,resizable

Owns a Scene

Styles: DECORATED, UNDECORATED,TRANSPARENT, UTILITY

Modality: NONE, WINDOW_MODAL,APPLICATION_MODAL

toFront(), toBack(), show()



12/55

StageCoach Example



13/55

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)



14/55

OneTheScene Example



15/55

The root in a SceneThe root must be a Parent

The Parent is a Node

The Parent has four direct subclassesGroup is just a container

Region lays out its content

Controls are UI controls and skinnable

WebView is, what else, a WebView



16/55

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



17/55

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



18/55

Layout Examples

CenterUsingStack

AlignUsingStackAndTile

Custom Region



19/55

ControlsLabel, Button, RadioButton, ToggleButton

CheckBox, ChoiceBox

TextField, PasswordField, TextArea, HyperlinkScrollBar, ScrollPane, Slider, ProgressBar

ListView, TableView, TreeView, HTMLEditor

TabPane, SplitPane, TitledPane, Accordion

MenuBar, MenuButton, ContextMenu, ToolBar

Tooltip, Separator, ProgressIndicator and moreThursday, February 9, 12


20/55

StarterApp Example



21/55Thursday, February 9, 12


25/55

The WebView



26/55

Shapes and Paths

Shapes: Line, PolyLine, Polygon, Rectangle,Arc, Circle, Ellipse, QuadCurve, CubicCurve,

Path, SVGPath

PathElements: MoveTo, LineTo, HLineTo,VLineTo, ArcTo, QuadCurveTo, CubicCurveTo,

ClosePathArcType, StrokeType, StrokeLineJoin,StrokeLineCap, FillRule



27/55

TrigonometryExample



28/55

LissajousCurveExample



29/55

Charts

BarChart

XYChart: BarChart, LineChart, AreaChart,ScatterChart, BubbleChart

Title, Legend, Axis, CategoryAxis,

ValueAxis, NumberAxis

Series, BarChart.Data, XYChart.Data



30/55

Chart Examples



31/55

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



32/55

Audio Player Example



33/55

Effects

Can apply to any Node

Shadow, PerspectiveTransform, ColorInput,Bloom, Lighting, Glow, DropShadow,ImageInput, MotionBlur, SepiaTone,

Reflection, GaussianBlur, Blend, InnerShadow,BoxBlur, ColorAdjust, DisplacementMap



34/55

VanishingCircle Example



35/55

Transforms

Can apply to any Node

Translate, Scale, Rotate, Affine, Shear

Can apply more than one transforms(composition)

Convenience properties: translateX, scaleX,etc.



36/55

Observable



37/55

Properties

Observable: InvalidationListener (lazy)

ObservableValue: ChangeListener (ov, old,new)

ReadOnlyProperty, Property: Boolean,

Integer, Long, Float, Double, String, Object

Owner, name



38/55

JavaFX 2.0 Beanspublic 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 unnecessaryinstantiations of properties objects: waituntil...



39/55

Bindings

Propergate changes

foo.barProperty().bind(baz.quuxProperty());foo.barProperty().bindBidirectional(baz.quuxProperty());

unbind(), unbindBidirectional()

Factory methods in Bindings class

Fluent Interface API



40/55

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



41/55

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 ObservableListand ObservableMap, and utility methods forObservableList that enerate one Chan e



42/55

ThreadingThe 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 torendering engine. Its throttled at 60/s



43/55

JavaFXThreadsExample



44/55

Worker Threading

Worker interface has properties: title,message, running, state, totalWork,workDone, progress, value, exception

Properties are published on the JavaFXApplication Thread

Task and Service abstract classesimplements the Worker interface

Task is one use only, Service can be reused

READY, SCHEDULED, RUNNING, SUCCEEDED,

CANCELED, FAILEDThursday, February 9, 12


45/55

WorkerAndTaskExample

ServiceExample



46/55

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



47/55

Transitions

Convenient animations

RotateTransition, FadeTransition,PauseTransition, PathTransition,StrokeTransition, TranslateTransition,

ParallelTransition, ScaleTransition,SequentialTransition, FillTransition



48/55

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

node.setId(a)

node.getStyleClass().add(b)

caspian.css from the jfxrt.jar is your friend



49/55

FXML

XML representation of JavaFX 2.0 scenegraph

FXML can be hooked up to Controller classesto effect behavior

Do you want to write XML by hand? I dont

But it will be a boon for the SceneBuilder



50/55

Load FXML, Get Node


51/55

Deployment

Java app, Java Webstart, Java applet

The Java Deployment Toolkit is recommended

Source it from http://java.com/js/dtjava.jsor host it from your own site

NetBeans 7.1 makes all of these easy

javafxpackager.exe and ant-javafx.jar

http://java.com/js/dtjava.jshttp://java.com/js/dtjava.jshttp://java.com/js/dtjava.js


52/55

Useful Resources

javafx.com (Official site: new releases, APIdocs, examples)

JavaFX forums (Official support)

fxexperience.com (Richard Bair, Jasper Potts,

Jonathon Giles from JavaFX team)blog.netopyr.com (Mike Heinrichs blog)

javafxpert.com (Jim Weavers blog)



53/55

Useful Resources (Cont.)

amyfowlersblog.blogspot.com (Amy Fowlersblog, layouts, etc.)

steveonjava.com (Stephen Chins blog)

pleasingsoftware.com (Dean Iversions blog,GroovyFX, etc.)

efxclipse.org (e(fx)clipse, JavaFX 2 plugin forEclipse)



54/55

Useful Resources (Cont.)

groovyfx-project.github.com (GroovyFX)

code.google.com/p/scalafx/ (ScalaFX)code.google.com/p/visage/(Visage, formerly

JavaFX Script)

www.javafxdata.org (DataFX)

jfxtras.org (JFXtras, extra stuff for JavaFX)

http://www.javafxdata.org/http://www.javafxdata.org/http://www.javafxdata.org/


55/55

Q & A

diap-JavaFX 2

Documents

Transcript of diap-JavaFX 2