Escolar Documentos
Profissional Documentos
Cultura Documentos
Topics
Quick JavaFX GUI Overview Using Declarative syntax for creating GUI Step by step process for creating a simple GUI JavaFX Application structure - Stage, Scene Scene Graph Custom node Graphical objects Effects Interactions
3
Colors
Color patterns for all constants of the javafx.scene.paint.Color class
Text
Different formatting styles applied to the same text string
Effects
Effects can be applied to the JavaFX UI elements
Transformation
Transformations can be performed for the graphics, images, or text
10
Layout
There are several methods of laying out UI elements using the javafx.scene.layout package.
11
Cursors
Different views of cursor you can apply to any UI element
12
14
16
18
19
21
4. Create a Rectangle
Stage { ... scene: Scene { content: [ // The x and y instance variables specify the pixel location of the // rectangle, arcWidth and arcHeight define the roundness of // corners, and the fill variable defines the color that fills the rectangle. Rectangle { x: 45 y: 35 width: 150 height: 150 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } 22
5. Create a Circle
Stage { ... scene: Scene { content: [ Rectangle { ... }, // Because the rectangle is declared before any other objects, it is painted // first. The rectangle will be behind any other objects painted later. Circle{ centerX: 118 centerY: 110 radius: 83 fill: Color.WHITE stroke: Color.RED } ] }
23
Stage
Top-level container for a scene
> Contains only one Scene
Potentially represented by
> JFrame on desktop > JApplet on web page > SVG player on mobile
Defines the characteristics like title, width, height, location, handling exit, etc
26
Example: Stage
Stage { title: "Welcome to JavaFX!" scene: Scene { content: [ Text { content: "Hello World!" x:25 y:25 fill: Color.BLACK font: Font{ size: 32 } } ] } }
27
class definition
run() function
> Will be executed as thread
Main.fx
Scene { ... } function run(): Void { ...
Displayed
Executed as a thread 28
Scene
Canvas upon which Scene Graph is displayed Can set multiple CSS stylesheets Can set background color (or set to null) Can set canvas width/height
29
Scene Graph
has no parent. > Each node is either a leaf node or a branch. > A leaf node has no children. > A branch node has zero or more children.
31
JavaFX Architecture
JavaFX Script Software
Project Scene Graph Effects Java 2D
Graphics hardware
32
shape > Effect type of effect, eg. blurring, shadowing, to apply > Events mouse, keyboard > Opacity setting the translucency
33
34
35
x : 1 5 y: 1 5
Text
Circle
36
Custom Node
Custom Node
Primary means of Scene Graph encapsulation
> All other nodes are not extendable
38
Shapes
Shapes
Arc Circle Ellipse Line Path Polygon Rectangle stroke strokeWidth fill smooth
40
Geometric Shapes
Arc, ellipse, line, polygon, circle, rectangle Very similar to text
Circle { centerX: 70, centerY: 70 radius: 50 fill: Color.PINK stroke: Color.RED strokeWidth: 3 strokeDashArray: [ 7 ] strokeDashOffset: 2 }
41
Custom Shapes
Two ways of defining custom shapes
> Combining existing shapes > Drawing a totally new shape
etc.
Example ShapeIntersect
ShapeIntersect { transforms: [ Translate { x: 170 } ] fill: Color.LIGHTGREEN stroke: Color.GREEN strokeWidth: 3 //Union of the 2 shapes a: [rectangle diamond ] }
43
Example Path
Path { fill: Color.LIGHTGRAY stroke: Color.GRAY strokeWidth: 3 elements: [ MoveTo { x: 15 y: 15 }, ArcTo { x: 50 y: 10 radiusX: 20 radiusY: 20 sweepFlag: true}, ArcTo { x: 70 y: 20 radiusX: 20 radiusY: 20 sweepFlag: true}, ArcTo { x: 50 y: 60 radiusX: 20 radiusY: 20 sweepFlag: true}, ArcTo { x: 20 y: 50 radiusX: 10 radiusY: 5 sweepFlag: false}, ArcTo { x: 15 y: 15 radiusX: 10 radiusY: 10 sweepFlag: true}, ] }
44
Text
x, y, TextOrigin By default, text positioned such that (x, y) is left baseline Fonts can be specified on Text Favor fill over stroke Supports multiple text Use Alignment to align multi-line text To center text, compute the center via layout bounds
46
Text
Defines a node for displaying text
Text { effect: DropShadow { offsetX: -10 offsetY: -10 } font: Font { name: DirtyBakersDozen size: 50 } fill: Color.ROYALBLUE stroke: Color.BLUE, strokeWidth: 3 x: 15, y: 80 content: "Hello World" }
47
Image
ImageView node shows images Image represents an in-memory image Image can load images in foreground thread or background thread Both ImageView and Image can scale
> Preserve ratio > Fit within a specific width/height > When fit on Image level, keeps smaller image in memory
48
Images
ImageView = ImageView { clip: Rectangle { y: 30 x: 50 width: 350 height: 100 } image: Image { url: "..."} }
49
TextBox
Used for text input Use CSS to style the TextBox text is changed to reflect the actual text in the TextBox value is changed when the text is committed via ENTER, TAB, etc action function is invoked when ENTER is pressed columns specifies the preferred width based on the font size and number of characters to display
50
Effects
53
Effects: DropShadow
> 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
55
Example: DropShadow
Text { effect: DropShadow { offsetY: 3 color: Color.color(0.4, 0.4, 0.4) }; ... }, Circle { effect: DropShadow { offsetY: 4 }, ... }
56
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 }
57
Effects: Lighting
Lighting Effect
effect: Lighting{ surfaceScale: 7 light: DistantLight{ azimuth: 90 elevation: 30 } }
effect: Lighting{ surfaceScale: 7 light: SpotLight { x: 0 y :0 z: 50 pointsAtX: 10 pointsAtY: 10 pointsAtZ: 0 color: Color.YELLOW } }
60
Effects: PerspectiveTransform
PerspectiveTransform Class
Used to provide a "faux" three-dimensional effect for otherwise two-dimensional content.
Group { effect: PerspectiveTransform { ulx: 10 uly: 10 urx: 310 ury: 40 lrx: 310 lry: 60 llx: 10 lly: 90 } cache: true content: [ Rectangle { x: 10 y: 10 width: 280 height: 80 fill: Color.BLUE }, Text { x: 20 y: 65 content: "Perspective" fill: Color.YELLOW font: Font.font(null, FontWeight.BOLD, 36); }, ]
62
Linear Gradients
startX, startY, endX, endY
> Define the direction of the gradient > On the unit square
64
Original image
66
Interactions
Handling Events
All nodes have either mouse or keyboard events
> Override the appropriate method
Released, WheelMoved
69
70
71