JavaFX 2.0
  • No tags were found...

JavaFX 2.pdf

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

About The PresenterJava developer since 1998Principal Software Engineer at OCICo-author of Pro JavaFX 2 PlatformSteering committee of St. Louis JUGLoud on the Internet at and @weiqigaoThursday, February 9, 12

AgendaA little historyA little architectureA lot of technologiesA lot of demos, code samples have moredetailsQuestions & AnswersThursday, February 9, 12

HistoryJavaFX 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

ArchitectureDeparture from AWT/SwingEmphasizes GPU, Media, HTML5Very regular public API (ScalaFX, GroovyFX,KawaFX, etc.)Thursday, February 9, 12

Scene GraphThe JavaFX runtime gives you a StageYou give the Stage a SceneYou give the Scene a Node that is a ParentThat Parent is the root of a tree of Nodes(the scene graph)You tell the Stage to show()Thursday, February 9, 12

Thursday, February 9, 12SceneGraphExample

ApplicationExamplejava com.weiqigao.stlouisjug.ApplicationExample --arg1=val1 --arg2=val2 -arg3 arg4Constructor called in "JavaFX-Launcher" threadinit() called in "JavaFX-Launcher" threadnamed parameters = {arg2=val2, arg1=val1}unnamed parameters = [-arg3, arg4]start() called in "JavaFX Application Thread" threadJavaFX application launcher: calling System.exitstop() called in "JavaFX Application Thread" threadThursday, February 9, 12

The Platform classisFxApplicationThread()isSupported(ConditionalFeature)exit()runLater(Runnable)Thursday, February 9, 12

The Stage ClassProperties: title, fullScreen, iconified,resizableOwns a SceneStyles: DECORATED, UNDECORATED,TRANSPARENT, UTILITYModality: NONE, WINDOW_MODAL,APPLICATION_MODALtoFront(), toBack(), show()Thursday, February 9, 12

Thursday, February 9, 12StageCoach Example

The Scene ClassReadOnlyProperties: x, y, width, height,windowProperties: root, fill, cursor, camera,eventDispatcherMany events: keyboard, mouse, drag&drop,context menu, input methodsroot must be set to Parent (which is a Node)Thursday, February 9, 12

Thursday, February 9, 12OneTheScene Example

The root in a SceneThe root must be a ParentThe Parent is a NodeThe Parent has four direct subclassesGroup is just a containerRegion lays out its contentControls are UI controls and skinnableWebView is, what else, a WebViewThursday, February 9, 12

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

LayoutLayout classes are called Panes in JavaFXThey all extend RegionStackPane, TilePane, FlowPane, HBox, VBox,GridPane, AnchorPaneExtend Region to create custom layoutThursday, February 9, 12

Layout ExamplesCenterUsingStackCustom RegionAlignUsingStackAndTileThursday, February 9, 12

ControlsLabel, Button, RadioButton, ToggleButtonCheckBox, ChoiceBoxTextField, PasswordField, TextArea, HyperlinkScrollBar, ScrollPane, Slider, ProgressBarListView, TableView, TreeView, HTMLEditorTabPane, SplitPane, TitledPane, AccordionMenuBar, MenuButton, ContextMenu, ToolBarTooltip, Separator, ProgressIndicator and moreThursday, February 9, 12

Thursday, February 9, 12StarterApp Example

Thursday, February 9, 12

Thursday, February 9, 12

Thursday, February 9, 12

Thursday, February 9, 12

Thursday, February 9, 12The WebView

Shapes and PathsShapes: Line, PolyLine, Polygon, Rectangle,Arc, Circle, Ellipse, QuadCurve, CubicCurve,Path, SVGPathPathElements: MoveTo, LineTo, HLineTo,VLineTo, ArcTo, QuadCurveTo, CubicCurveTo,ClosePathArcType, StrokeType, StrokeLineJoin,StrokeLineCap, FillRuleThursday, February 9, 12

Thursday, February 9, 12TrigonometryExample

Thursday, February 9, 12LissajousCurveExample

Thursday, February 9, 12Chart Examples

Audio and VideoSupported formats: mp3, aif, aiff, wav, fxm,flvVP6 video with MP3 audioMetadataIn memory uncompressed AudioClipMedia, MediaPlayer, MediaViewAudio equalizationThursday, February 9, 12

Thursday, February 9, 12Audio Player Example

EffectsCan apply to any NodeShadow, PerspectiveTransform, ColorInput,Bloom, Lighting, Glow, DropShadow,ImageInput, MotionBlur, SepiaTone,Reflection, GaussianBlur, Blend, InnerShadow,BoxBlur, ColorAdjust, DisplacementMapThursday, February 9, 12

Thursday, February 9, 12VanishingCircle Example

TransformsCan apply to any NodeTranslate, Scale, Rotate, Affine, ShearCan apply more than one transforms(composition)Convenience properties: translateX, scaleX,etc.Thursday, February 9, 12

Thursday, February 9, 12Observable

PropertiesObservable: InvalidationListener (lazy)ObservableValue: ChangeListener (ov, old,new)ReadOnlyProperty, Property: Boolean,Integer, Long, Float, Double, String, ObjectOwner, nameThursday, February 9, 12

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...Thursday, February 9, 12

BindingsPropergate changesfoo.barProperty().bind(baz.quuxProperty());foo.barProperty().bindBidirectional(baz.quuxProperty());unbind(), unbindBidirectional()Factory methods in Bindings classFluent Interface APIThursday, February 9, 12

HeronsFormulaExampleDoubleProperty 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 CollectionsObservableList, ListChangeListener,ListChangeListener.Change (rich information)ObservableMap, MapChangeListener,MapChangeListener.Change (not so rich)FXCollections is similar to CollectionsIt has factory methods for ObservableListand ObservableMap, and utility methods forObservableList that generate one ChangeThursday, February 9, 12

ThreadingThe “main” threadThe “JavaFX-Launcher” threadThe “JavaFX Application Thread” threadThe “QuantumRenderer-0” threadThe “JFXMedia Player EventQueue” threadThe pulse event synchronizes scene torendering engine. It’s throttled at 60/sThursday, February 9, 12

Thursday, February 9, 12JavaFXThreadsExample

Worker ThreadingWorker interface has properties: title,message, running, state, totalWork,workDone, progress, value, exceptionProperties are published on the JavaFXApplication ThreadTask and Service abstract classesimplements the Worker interfaceTask is one use only, Service can be reusedREADY, SCHEDULED, RUNNING, SUCCEEDED,CANCELED, FAILEDThursday, February 9, 12

WorkerAndTaskExampleServiceExampleThursday, February 9, 12

AnimationKeyFrame based Timeline animationInterpolation.LINEAR, EASYIN, EASEOUTcycleCount, repeat properties of TimelineTimelineBuilder.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

TransitionsConvenient animationsRotateTransition, FadeTransition,PauseTransition, PathTransition,StrokeTransition, TranslateTransition,ParallelTransition, ScaleTransition,SequentialTransition, FillTransitionThursday, February 9, 12

Styling with CSSLoad 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 friendThursday, February 9, 12

FXMLXML representation of JavaFX 2.0 scenegraphFXML can be hooked up to Controller classesto effect behaviorDo you want to write XML by hand? I don’tBut it will be a boon for the SceneBuilderThursday, February 9, 12

Load FXML, Get NodeParent root = FXMLLoader.load(getClass().getResource("AdoptionForm.fxml"));

DeploymentJava app, Java Webstart, Java appletThe Java Deployment Toolkit is recommendedSource it from host it from your own siteNetBeans 7.1 makes all of these easyjavafxpackager.exe and ant-javafx.jarThursday, February 9, 12

Useful (Official site: new releases, APIdocs, examples)JavaFX forums (Official support) (Richard Bair, Jasper Potts,Jonathon Giles from JavaFX team) (Mike Heinrich’s blog) (Jim Weaver’s blog)Thursday, February 9, 12

Useful Resources (Cont.) (Amy Fowler’sblog, layouts, etc.) (Stephen Chin’s blog) (Dean Iversion’s blog,GroovyFX, etc.) (e(fx)clipse, JavaFX 2 plugin forEclipse)Thursday, February 9, 12

Useful Resources (Cont.) (GroovyFX) (ScalaFX) (Visage, formerlyJavaFX Script) (DataFX) (JFXtras, extra stuff for JavaFX)Thursday, February 9, 12

Thursday, February 9, 12Q & A

More magazines by this user
Similar magazines