javafx overview 90minutes
DESCRIPTION
Sang Shin at MUFIX JavaFX: Building RIA ApplicationsTRANSCRIPT
![Page 1: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/1.jpg)
1
JavaFX: Building RIAJavaFX: Building RIAApplicationApplication
Sang ShinSang Shinjavapassion.comjavapassion.com
1
![Page 2: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/2.jpg)
2
Topics• Things you can build with JavaFX• JavaFX script overview• Declarative GUI building• Scene graph• Animation• Media • Deployment• JavaFX Mobile• Web services
![Page 3: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/3.jpg)
Things You Can BuildThings You Can Buildwith JavaFXwith JavaFX
![Page 4: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/4.jpg)
4
Demo:Demo:JavaFX Sample AppsJavaFX Sample Apps
from javafx.comfrom javafx.com
![Page 5: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/5.jpg)
JavaFX ScriptJavaFX ScriptOverviewOverview
![Page 6: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/6.jpg)
6
Features of JavaFX Script• Declarative, statically-typed scripting language• Facilitates rapid GUI development• Runs on Virtual Machine for the Java™ platform• Deployment options same as Java programs• Fully utilizes Java class libraries behind the scenes• Cool, interesting language features for building
RIA apps> Object literal, Sequence, Data binding, Animation,
Media, etc.
![Page 7: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/7.jpg)
7
Class Definition
• Address class definition: The Address class declares street, city, state, and zip fields all of type Stringclass Address { var street: String; var city: String; var state: String; var zip: String;}
![Page 8: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/8.jpg)
8
Object Literal – Creating object• In the JavaFX Script programming language, an
object instance can be created with an object literal (like in JavaScript, unlike in Java)
• Example: The first word (Address) specifies the type of object, class, that you are creating. Address { street: "1 Main Street"; // separated by semi colons city: "Santa Clara"; state: "CA"; zip: "95050";}
![Page 9: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/9.jpg)
9
Nesting an Object inside Another Object
• Nesting Address object inside Customer object
def customer = Customer { firstName: "John"; lastName: "Doe"; phoneNum: "(408) 555-1212"; address: Address { street: "1 Main Street"; city: "Santa Clara"; state: "CA"; zip: "95050"; }}
![Page 10: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/10.jpg)
10
Binding• Cause and effect – responding to changes• bind operator allows dynamic content to be
expressed declaratively• Dependency based evaluation of any
expression• Automated by the JavaFX runtime rather
than manually wired by the programmer• Eliminates the listener pattern
![Page 11: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/11.jpg)
11
Binding to a Simple Expressionvar x = 0;
// Bind variable x to variable y. Whenever the value of x changes,// the value of variable y automatically changes as well.var y = bind x + 10;
x = 1;println("----y after x is changed to 1 = {y}"); // y now equals 11
x = 47;println("----y after x is changed to 47 = {y}"); // y now equals 57
![Page 12: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/12.jpg)
Using Declarative SyntaxUsing Declarative Syntax(for Creating GUI)(for Creating GUI)
![Page 13: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/13.jpg)
13
Example of JavaFX Applicationimport javafx.scene.paint.Color;import javafx.scene.Scene;import javafx.scene.shape.Circle;import javafx.stage.Stage;
Stage { title: "My circle" width: 100 height: 100 scene: Scene { content: [ Circle { centerX: 50, centerY: 50 radius: 40 fill: Color.RED } ] }}
![Page 14: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/14.jpg)
14
Why Declarative Syntax for Building GUI? • Because the structure of declared objects in
the code reflects the visual structure of the scene graph, and this enables you to understand and maintain the code easily.
• The order of elements you declare in the code matches the order in which they appear in the application.
![Page 15: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/15.jpg)
15
Demo:Demo:Building “HelloWorld”Building “HelloWorld”
JavaFX ApplicationJavaFX Application
http://www.javapassion.com/handsonlabs/javafx_lang/#Exercise_1http://www.javapassion.com/handsonlabs/javafx_lang/#Exercise_1
![Page 16: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/16.jpg)
Scene GraphScene Graph
![Page 17: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/17.jpg)
17
What is Scene Graph?• Scene Graph enables declarative GUI programming• The scene graph is a tree-like data structure which
defines a hierarchy of graphical objects in a scene. • A single element in the scene graph is called a node• You can apply the following GUI properties to any
node in Scene Graph tree> Effect> Animation> Transformation> User input
![Page 18: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/18.jpg)
18
Scene Graph: Group Group {
transforms: Translate {x:15, y, 15
}content: [
Text {x: 10, y: 50font: Font: {
size: 50}content: “Hello World”
}Circle {
centerX: 100, centerY: 100radius: 40fill: Color.BLACK
}]
}
Group
CircleText
x:15y:15
![Page 19: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/19.jpg)
EffectsEffects
![Page 20: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/20.jpg)
20
How Effect Works• Any Effect instance can be applied to a scene
graph Node by setting the Node.effect variable. • All Effect classes extend the abstract
javafx.scene.effect.Effect base class. • Each Effect subclass exposes a small number of
variables that control the visual appearance of the Node.
![Page 21: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/21.jpg)
Effects:Effects:DropShadowDropShadow
![Page 22: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/22.jpg)
22
Example: DropShadow class• DropShadow class provides 5 variables
> color: The shadow Color> default: Color.BLACK
> offsetX: The shadow offset in the x direction, in pixels. > default: 0.0
> offsetY: The shadow offset in the y direction, in pixels. > default: 0.0
> radius: The radius of the shadow blur kernel.> default: 10.0, max: 63.0
> spread: The spread of the shadow.> default: 0.0, max: 1.0, min: 0.0
![Page 23: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/23.jpg)
23
Example: DropShadow Text { effect: DropShadow { offsetY: 3 color: Color.color(0.4, 0.4, 0.4) }; ... }, Circle { effect: DropShadow { offsetY: 4 }, ... }
![Page 24: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/24.jpg)
24
Example: DropShadow Text { effect: DropShadow { offsetY: 3 color: Color.GREEN radius: 20.0 }; ... }, Circle { effect: DropShadow { offsetX: 10 offsetY: 20 color: Color.BLUE radius: 30.0 } ... }
![Page 25: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/25.jpg)
25
Example: DropShadow with Binding• Apply a DropShadow effect to a rounded
Rectangle and control its appearance through the magic of the bind operator.
Rectangle { effect: DropShadow { radius: bind radius } x: 50 y: 30 width: 150 height: 100 arcWidth: 40 arcHeight: 40 fill: Color.RED }
![Page 26: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/26.jpg)
26
Demo:Demo:DropShadow,DropShadow,
javapassion.com/handsonlabs/javafx_guibasics/index.html#7.1javapassion.com/handsonlabs/javafx_guibasics/index.html#7.1
DropShadow with Binding,DropShadow with Binding,javapassion.com/handsonlabs/javafx_customnodejavapassion.com/handsonlabs/javafx_customnode
EffectsPlaygroundEffectsPlaygroundhttp://javafx.com/samples/EffectsPlayground/index.htmlhttp://javafx.com/samples/EffectsPlayground/index.html
![Page 27: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/27.jpg)
27
JavaFXJavaFXGUI Basics II:GUI Basics II:Interaction, Interaction, Transformation,Transformation,Binding,Binding,Drag and drop,Drag and drop,Swing componentsSwing components
27
![Page 28: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/28.jpg)
28
Topics• Interaction• Transformation• Binding• Drag and drop• Swing components
![Page 29: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/29.jpg)
InteractionsInteractions
![Page 30: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/30.jpg)
30
Handling Events• All nodes have either mouse or keyboard
events> Override the appropriate method
• Mouse events – onMouseXXXX()> XXXX = Entered, Exited, Pressed, Dragged,
Moved, Clicked, Released, WheelMoved• Keyboard events – onKeyboardXXXX()
> XXXX = Pressed, Released, Typed• Indicate interactivity by changing cursor
> Set the cursor attribute
![Page 31: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/31.jpg)
31
Example: Handling Events• Mouse events change the color of an
rectanglevar rectangle:Rectangle = Rectangle { x: 20, y: 10 width: 150, height: 70 arcWidth: 50, arcHeight: 50 fill: Color.LIGHTBLUE stroke: Color.ROYALBLUE strokeWidth: 3 onMouseEntered: function( e: MouseEvent ):Void { rectangle.fill = Color.WHITESMOKE; } onMouseExited: function( e: MouseEvent ):Void { rectangle.fill = Color.LIGHTBLUE; }}
![Page 32: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/32.jpg)
32
Demo:Demo:Simple SketchSimple Sketch
gui2_interaction_Sketch_basic_3stepsgui2_interaction_Sketch_basic_3stepshttp://www.javapassion.com/handsonlabs/javafx_guibasics2/#1.3http://www.javapassion.com/handsonlabs/javafx_guibasics2/#1.3
![Page 33: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/33.jpg)
TransformationTransformation
![Page 34: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/34.jpg)
34
Transformation class• Provides functions to perform
> Rotating> Scaling> Shearing> Translation
![Page 35: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/35.jpg)
35
Rotate Transformation• Rotates coordinates around an anchor pointStage { title: "Welcome to JavaFX!" scene: Scene { width: 200 height: 200 content: [ Rectangle { transforms: Rotate { angle: bind angle pivotX: 10 pivotY: 10 } ... } ] }}
![Page 36: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/36.jpg)
36
Translation Transformation• Translates coordinates by the specified
factorsStage { title: "Transformation - Translate" width: 100 height: 100 scene: Scene { content: [ Rectangle { transforms: Translate { x: bind translateX y: bind translateY } x: 10 y: 10 width: 20 height: 20 fill: Color.GREEN onMouseEntered: function( e: MouseEvent ):Void { translateX = 20; translateY = 30 } onMouseExited: function( e: MouseEvent ):Void { translateX = 0.0; translateY = 0.0; } } ] }}
![Page 37: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/37.jpg)
37
Demo:Demo:TransformationTransformation
www.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_2www.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_2
![Page 38: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/38.jpg)
Bindings with Bindings with GUI ObjectsGUI Objects
![Page 39: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/39.jpg)
39
Binding with GUI objects• The power of binding really shows when it is
used with GUI objects> GUI objects can automatically change their
shape, characteristics, and behavior
![Page 40: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/40.jpg)
40
Demo:Demo:TransformationTransformation
gui2_binding_DropShadow_Mousegui2_binding_DropShadow_Mousewww.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_3www.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_3
![Page 41: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/41.jpg)
Animation Support inAnimation Support inJavaFXJavaFX
![Page 42: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/42.jpg)
42
Animation Support in JavaFX• Built in the language syntax
> Can animate any variable• Native support for time
> Duration class> Time literals – 1ms, 1s, 1m, 1h> Eg. var runFor = 500ms
![Page 43: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/43.jpg)
43
Two Types of Animation in JavaFX• Transition
> “Precanned” animation> Single purpose
• Animation> More flexible but more code
![Page 44: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/44.jpg)
TransitionsTransitions
![Page 45: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/45.jpg)
45
Transitions• Predefined animations to perform a specific
task> Position, rotation, opacity, etc.
• Out of the box transitions> RotateTranstion – rotation> FadeTransition – opacity> TranslateTransition – move a node along a
straight line> PathTransition – move an object along a defined
path> ScaleTranstion – grows or shrinks a node
![Page 46: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/46.jpg)
46
Using Transitions• Need to specify which node the transition is
performed on> Nodes – geometric shapes, images, text, Swing
components• Other attributes
> Duration – how long to perform the animation> Rate – the speed and direction> Interpolator – the acceleration and deceleration of the
animation• Can execute a function at the end of the animation
> Assign a function to action attribute
![Page 47: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/47.jpg)
47
RotationTransitionvar rotTransition = RotateTransition { duration: 3s node: node byAngle: 180 repeatCount:4 autoReverse: true}
var princess:ImageView = ImageView { image: Image { url: "{__DIR__}princess.png" } onMouseClicked: function( e: MouseEvent ):Void { rotTransition.play(); }}
![Page 48: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/48.jpg)
48
Path Transitionvar earth:ImageView = ImageView { x: sx y: sy image: Image { url: "{__DIR__}earth.png” }}def path = [
MoveTo { x: sx y: sy}ArcTo { x: 0 y: 200
radiusX: 50 radiusY: 50 sweepFlag: true}
];var aniPath:PathTransition = PathTransition { node: earth path: AnimationPath.createFromPath( Path {elements: path }) duration: 1500ms}
aniPath.playFromStart();
![Page 49: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/49.jpg)
49
Demo:Demo:TransitionsTransitions
http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_1http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_1http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_2http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_2
![Page 50: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/50.jpg)
KeyFrame basedKeyFrame basedAnimationAnimation
![Page 51: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/51.jpg)
51
Key Frame based Animation • What is Key Frame based animation?
> A declarative model in which programmer describes the animated state transitions of each "scene" by declaring "snapshots" (key frames) of state at certain points in time
• Two basic varieties of key frame animation> Discrete - Set of discrete key frames> Interpolated - Special interpolation functions
calculate the states that occur between animation frames
• Animation controls> Start, stop, pause, and resume
![Page 52: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/52.jpg)
52
Programming Model of Key Frame Animation • Animations occur along a timeline, represented
by a javafx.animation.Timeline object.• Each timeline contains two or more key frames,
represented by javafx.animation.KeyFrame objects.
• Each timeline supports> Animation attributes
> autoReverse, repeatCount, toggle, etc. > Playback controls
> start(), stop(), pause(), and resume()
![Page 53: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/53.jpg)
53
Example: Interpolator Based// The value of tx changes from 0 to 700// in 10 second period in linear fashionvar t = Timeline { keyFrames : [ KeyFrame { time: 0s values: [ tx => 0 ] action: function() { … }
}, KeyFrame { time: 10s values: [ tx => 700 tween Interpolator.LINEAR ] } ]}t.start();
![Page 54: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/54.jpg)
54
Example – Defining Key FramesTimeline {
keyFrames: [KeyFrame {
time: 0svalues: [ radius => 30 ]
}KeyFrame {
time: 5svalues: [
radius => 300 tween Interpolator.LINEAR]
}]
}
0s 1s 2s 3s 4s 5s 6s
Key valueradius = 30 radius = 300
Keyframes
How the value changes over time
![Page 55: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/55.jpg)
55
at() (Shorthand notation)var t = Timeline {
...keyFrames: [
KeyFrame {time: 0msvalues: [ radius => 30 ]
},KeyFrame {
time: 500ms values: [
radius => 300 tween Interpolator.LINEAR]
}]
};keyFrames: [
at(0ms) { radius => 30 }at(500ms) {
radius => 300 Interpolator.LINEAR}
]
![Page 56: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/56.jpg)
56
Animation through Bindingvar opa = 0.0;var street1:ImageView = ImageView { image: Image { url: "{__DIR__}street1.jpg" } opacity: bind opa onMouseClicked: function( e: MouseEvent ):Void { timeline.play(); }}var timeline:Timeline = Timeline { keyFrames: [ KeyFrame { time: 0s values: [ opa => 0.0,] }, KeyFrame { time: 1s values: [ opa => 1.0 tween Interpolator.LINEAR,] } ]}
![Page 57: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/57.jpg)
Custom NodeCustom Node
![Page 58: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/58.jpg)
58
Custom Node• Primary means of Scene Graph
encapsulation• Use it when extending existing GUI class is
not enough for your task• Simply override the create() method, which
returns a Node object
![Page 59: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/59.jpg)
59
Simple CustomNode• Extend CustomNode class and override
create()class Bars extends CustomNode { override function create():Node { return Group { content: for(x in [0..4]) { Rectangle { y: indexof x * 20 width: 100 height: 10 fill:Color.RED } } }; }}// Bars object literalBars { }
![Page 60: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/60.jpg)
60
Demo:Demo:Building “Under the Sea”Building “Under the Sea”
Step by StepStep by Stephttp://www.javapassion.com/handsonlabs/javafx_animation/index.html#4.1http://www.javapassion.com/handsonlabs/javafx_animation/index.html#4.1
![Page 61: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/61.jpg)
MediaMedia
![Page 62: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/62.jpg)
62
FX Media API Overview
• Simple model-view-controller design • All classes in javafx.scene.media package.• MediaView takes all cool features of SceneGraph
node, such as effects, transforming, clip, opacity, etc...
MediaMediaPlayer
MediaViewMediaView is
UI that extended from the
Node SceneGraph Node
![Page 63: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/63.jpg)
63
Example of Creating a Media Playervar video:Media = Media {
source: "http://..."
};
var player:MediaPlayer = MediaPlayer {
media: video
rate: 1.0
volume: 0.4
};
var view:MediaView = MediaView {
mediaPlayer: player
x:200
y:200
};
Stage {
title: "Media Player"
width: 700
height: 700
scene: Scene {
content: [view]
}
}
![Page 64: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/64.jpg)
64
Demo:Demo:MediaMedia
http://javafx.com/samples/SimpleVideoPlayer/index.htmlhttp://javafx.com/samples/SimpleVideoPlayer/index.html
![Page 65: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/65.jpg)
DeploymentDeployment
![Page 66: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/66.jpg)
66
Deployment Options• JavaFX 1.0 applications can be deployed using
the two standard Java deployment technologies > Java Plugin: A tool used for deploying Java applets
that run inside a web browser> Java Web Start: A tool used for deploying stand-alone
Java applications on the desktop, using JNLP (Java Network Launching Protocol).
• Or using mobile emulation> JavaFX Mobile Emulator: A tool provided with the
JavaFX SDK, which displays your applications as they would look on a typical mobile device.
![Page 67: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/67.jpg)
67
Execution Models• Standard, Web Start, Applet, Mobile emulator
![Page 68: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/68.jpg)
68
Demo:Demo:Draggable AppletDraggable Applet
![Page 69: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/69.jpg)
JavaFX MobileJavaFX Mobile
![Page 70: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/70.jpg)
70
Demo:Demo:JavaFX MobileJavaFX Mobile
http://javafx.com/samples/SimpleVideoPlayerMobile/index.htmlhttp://javafx.com/samples/SimpleVideoPlayerMobile/index.html
![Page 71: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/71.jpg)
Java Store Java Store
![Page 72: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/72.jpg)
72
• Online store for Java and JavaFX applications> Distribution channel delivering Java and JavaFX
applications to 1Billion Java enabled desktop and devices
• Provide an easy means for developers and ISVs to monetize their Java and JavaFX applications
What is Java Store?
![Page 73: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/73.jpg)
73
Java Store is Written in JavaFX
![Page 74: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/74.jpg)
74
DEVELOPERS
WEB DEVELOPERS
MARKETPLACE
WAREHOUSE STORES
END USER
Java StoreDesktop
•Developer Registration•Publishing•Testing•Content Management•Payment Settlement
Mobile StoreSP/OEM Branded
TV Store
Java Store End-to-End Architecture
![Page 75: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/75.jpg)
75
How People Get Java Store?
>store.java.com>Java auto-update>JRE/JDK downloads>Java.sun.com
![Page 76: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/76.jpg)
76
Demo: Java StoreDemo: Java Store
![Page 77: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/77.jpg)
WidgetFX WidgetFX
![Page 78: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/78.jpg)
78
Demo:Demo:WidgetFxWidgetFx
![Page 79: Javafx Overview 90minutes](https://reader034.vdocuments.us/reader034/viewer/2022042714/55561c59d8b42ae0238b5182/html5/thumbnails/79.jpg)
79
JavaFX TechnologyJavaFX TechnologyOverviewOverview
79