javafx gui basic

7/30/2019 javafx gui basic

1/71

1

JavaFXJavaFXGUI BasicsGUI Basics

1


2/71

2

Disclaimer and Acknowledgement

Some slides of this presentation are created fromBuilding GUI Applications With JavaFX tutorial

> http://java.sun.com/javafx/1/tutorials/ui/


3/71

3

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


4/71

Quick JavaFX GUIQuick JavaFX GUI

OverviewOverview


5/71

5

User Interface Elements

Standard UI components you can create using thejavafx.ext.swing package.


6/71

6

Colors

Color patterns for all constants of thejavafx.scene.paint.Colorclass


7/717

Shapes and Fill Styles

javafx.scene.shape andjavafx.scene.paintpackages


8/718

Text

Different formatting styles applied to the same textstring


9/719

Effects

Effects can be applied to the JavaFX UI elements


10/7110

Transformation

Transformations can be performed for the graphics,images, or text


11/7111

Layout

There are several methods of laying out UI elementsusing the javafx.scene.layoutpackage.


12/7112

Cursors

Different views of cursor you can apply to any UIelement


13/71

Using Declarative SyntaxUsing Declarative Syntax(for Creating GUI)(for Creating GUI)


14/7114

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 codeeasily.

The order of elements you declare in the code matchesthe order in which they appear in the application.


15/71

Step by Step Process ofStep by Step Process ofCreating a Simple GUICreating a Simple GUI


16/7116

Step by Step Process of Creating a

simple GUI JavaFX application that renders a green rounded

rectangle and a white circle with red outline on the topof the rectangle


17/7117

Step by Step Process of Creating a

GUI1.Add necessary imports

2.Create an Application window

3.Set the Scene

4.Create a Rectangle

5.Create a Circle

6.Change the code (so that the Circle gets underneaththe Rectangle)


18/7118

1. Add Necessary Imports

import javafx.stage.Stage; // required to render a window

import javafx.scene.Scene; // required to display a circle and

// rectangle on a window

import javafx.scene.shape.Rectangle; // required to render the rectangleimport javafx.scene.paint.Color; // required to fill and stroke the

// rectangle and circle with color

import javafx.scene.shape.Circle; // required to render the circle


19/7119

2. Create an Application Window

In order to display the graphics, you need to createa window through Stage object literal

// Create a Stage object literal. Stage is required to render any object.

// The window should be big enough to display all of the rectangle and// the circle. In this example, the window is a rectangle of 249 by 251// pixels. To create a window of this size, with a "Declaring is Easy" title,// declare these values within the curly brackets using the following code:

Stage {title: "Declaring Is Easy!"width: 249height: 251visible: true

}


20/7120

3. Set the Scene

Within the stage, set the scene to hold Node objectssuch as a circle or a rectangle

The scene is a root area where you place objects of

the node type. The scene has contentvariable that is used to hold

the nodes.

There are many different kinds of nodes, such asgraphical objects, text, and GUI components.


21/71

21

3. Set the Scene (Continued)

// The content of the window becomes filled with white because// white is a default fill color for a scene. The scene is placed on top// of the window.

Stage {

...scene: Scene {

content: [ ]}

}


22/71

22

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: 150arcWidth: 15 arcHeight: 15

fill: Color.GREEN

}

]

}


23/71

23

5. Create a CircleStage {

...

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: 110radius: 83

fill: Color.WHITE

stroke: Color.RED

}

]}


24/71

24

6. Place Circle Underneath Rectangle

Stage {...

scene: Scene {

content: [

// Place the circle underneath the square. To do so, switch the order

// of the circle and squareCircle{

....

},

Rectangle {

...}

]

}

}


25/71

JavaFX ApplicationJavaFX Application

StructureStructure


26/71

26

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


27/71

27

Example: Stage

Stage {title: "Welcome to JavaFX!"scene: Scene {

content: [Text {

content: "Hello World!"x:25 y:25fill: Color.BLACKfont: Font{ size: 32 }

}]

}}


28/71

28

JavaFX Application Execution Model

Stage or Stage variables> Stage object

> Stage variables cannot create Stage objects in file with

class definition run() function

> Will be executed as thread

Main.fx

Scene {

...

}

function run(): Void {

...

Displayed

Executed as a thread


29/71

29

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


30/71

Scene GraphScene Graph


31/71

31

What is Scene Graph?

The scene graph is a tree-like data structure whichdefines a hierarchy of graphical objects in a scene.

A single element in the scene graph is called a node.

> Each node has one parent except for the root node, whichhas 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.


32/71

32

JavaFX Architecture

Graphics hardware

Java 2D

Effects

Project Scene Graph

JavaFX Script Software

Models a GUIpart of aJavaFXapplication


33/71

33

Basic Graphical Objects

Graphical objects as examples of Nodes

> Text, geometric shapes, text, Swing components

Some common attributes in nodes

> Transformation translate, shear, rotate, scale

> Clip displaying only part of the node based on a geometricshape

>

Effect type of effect, eg. blurring, shadowing, to apply> Events mouse, keyboard

> Opacity setting the translucency


34/71

34

What is Scene Graph?

A hierarchical representation of graphical objects> Tree like structure

> Basis of JavaFX graphics engine

Scene graph elements

> Nodes images, text, Swing widgets

> State visibility, opacity, transformation

> Events mouse, keyboard, node updates

>Animation varying properties over time

A scene graph knows how to render itself!!

> JavaFX scene graph engine is available athttp://scenegraph.dev.java.net

> Usable from Java
http://scenegraph.dev.java.net/http://scenegraph.dev.java.net/


35/71

35

Scene Graph: Group

Group stands a set of Nodes which may have sameeffect

Group itself is a Node, so can be nested


36/71

36

Scene Graph: Group

Group {

transforms: Translate {

x:15, y, 15

}

content: [

Text {

x: 10, y: 50

font: Font: {

size: 50

}

content: Hello World

}

Circle {

centerX: 100, centerY: 100

radius: 40

fill: Color.BLACK

}

]

}

Group

CircleText

x:1

5y:15


37/71

Custom NodeCustom Node


38/71

38

Custom Node

Primary means of Scene Graph encapsulation

> All other nodes are not extendable

Simply override the create() method, which returns a

Node object


39/71

ShapesShapes


40/71

40

Shapes

Arc

Circle

Ellipse

Line

Path

Polygon

Rectangle

stroke

strokeWidth

fill

smooth


41/71

41

Geometric Shapes

Arc, ellipse, line, polygon, circle, rectangle Very similar to text

Circle {

centerX: 70, centerY: 70radius: 50

fill: Color.PINK

stroke: Color.RED

strokeWidth: 3

strokeDashArray: [ 7 ]strokeDashOffset: 2

}


42/71

42

Custom Shapes

Two ways of defining custom shapes> Combining existing shapes

> Drawing a totally new shape

Combine existing shape with ShapeIntersectorShapeSubtract

> Either add or subtract from shape

Draw new shapes with Path and path elements> Path elements include MoveTo, ArcTo, HLine, VLine, QuadCurve,

etc.

Can be manipulated like a regular geometric shape


43/71

43

Example ShapeIntersect

ShapeIntersect {transforms: [ Translate { x: 170 } ]

fill: Color.LIGHTGREENstroke: Color.GREEN

strokeWidth: 3

//Union of the 2 shapesa: [rectangle diamond ]

}


44/71

44

Example Path

Path {fill: Color.LIGHTGRAY

stroke: Color.GRAY

strokeWidth: 3

elements: [

MoveTo { x: 15 y: 15 },

ArcTo { x: 50 y: 10 radiusX: 20radiusY: 20 sweepFlag: true},

ArcTo { x: 70 y: 20 radiusX: 20

radiusY: 20 sweepFlag: true},



ArcTo { x: 20 y: 50 radiusX: 10radiusY: 5 sweepFlag: false},



]

}


45/71

Other Graphical ObjectsOther Graphical Objects


46/71

46

Text

x, y, TextOrigin

By default, text positioned such that (x, y) is leftbaseline

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


47/71

47

Text

Defines a node for displaying textText {

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"

}


48/71

48

Image

ImageViewnode 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


49/71

49

Images

ImageView = ImageView {

clip: Rectangle {

y: 30 x: 50

width: 350 height: 100

}image: Image { url: "..."}

}


50/71

50

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 viaENTER, TAB, etc

action function is invoked when ENTER is pressed

columns specifies the preferred width based on thefont size and number of characters to display


51/71

EffectsEffects


52/71

52

How Effect Works

javafx.scene.effectpackage API.

All of the core filter effect classes extend the abstractjavafx.scene.effect.Effectbase class.

Any Effect instance can be applied to a scene graphNode by setting the Node.effectvariable.

Each Effect subclass exposes a small number of

variables that control the visual appearance of theNode.

In addition, most Effect subclasses provide one or moreinput variables that can be used to "chain" effects


53/71

53

Variables In a Effect Class

Each variable is generally documented with default,minimum, maximum, and identity values, which makesit easy to see the acceptable range of values.

Developer only need to concern yourself with turningthe values of these variables.

The effects framework does all the heavy lifting for you,such as painting the Node into an offscreen image atthe appropriate resolution, manipulating the pixels inone of the CPU and/or GPU accelerated backends, andautomatically repainting the affected portion of the

scene.


54/71

Effects:Effects:DropShadowDropShadow


55/71

55

Example: DropShadow class

DropShadowclass 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


56/71

56

Example: DropShadow

Text {effect: DropShadow {

offsetY: 3color: Color.color(0.4, 0.4, 0.4)

};...

},Circle {

effect: DropShadow {

offsetY: 4},...

}


57/71

57

Example: DropShadow

Text {effect: DropShadow {

offsetY: 3color: Color.GREEN

radius: 20.0

};...

},Circle {

effect: DropShadow { offsetX: 10

offsetY: 20color: Color.BLUE

radius: 30.0

}


58/71

58

Example: DropShadow Class

Apply a DropShadow effect to a rounded Rectangle andcontrol its appearance through the magic of the bindoperator.

Rectangle { effect: DropShadow {

radius: bind radius

}

x: 50 y: 30 width: 150 height: 100

arcWidth: 40 arcHeight: 40

fill: Color.RED

}


59/71

Effects:Effects:LightingLighting


60/71

60

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

}

}


61/71

Effects:Effects:PerspectiveTransformPerspectiveTransform


62/71

62

PerspectiveTransform Class

Used to provide a "faux" three-dimensional effect forotherwise 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);

},

]


63/71

Effects:Effects:Linear GradientsLinear Gradients


64/71

64

Linear Gradients

startX, startY, endX, endY> Define the direction of the gradient

> On the unit square

Stops define each step in the gradient. Each stop

> Has an offset between 0...1

> Has a color


65/71

Effects:Effects:Glow, Reflection,Glow, Reflection,GaussianBlurGaussianBlur


66/71

66

Some Effects Supported In JavaFX

effect: SepiaTone { level: 0.5 }

effect: Glow { level: 0.7 }

effect: GaussianBlur {

input: SepiaTone {

level: 0.5 }

radius: 10.0

}

effect: Reflection {

fraction: 0.7 }

Original image


67/71

InteractionsInteractions


68/71

68

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


69/71

69

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.LIGHTBLUEstroke: Color.ROYALBLUE

strokeWidth: 3

onMouseEntered: function( e: MouseEvent ):Void {

rectangle.fill = Color.WHITESMOKE;

}

onMouseExited: function( e: MouseEvent ):Void {

rectangle.fill = Color.LIGHTBLUE;

}

}


70/71

70

Drag and Drop

Drag an object around the screenvar sx:Number = 0; var dx:Number = 0;

var sy:Number = 0; var dy:Number = 0;

var rectangle:Rectangle = Rectangle {

x:bind dx y:bind dy

width: 150 height: 70 arcWidth: 50, arcHeight: 50fill: Color.LIGHTBLUE

stroke: Color.ROYALBLUE strokeWidth: 3

cursor: Cursor.HAND

onMousePressed: function( e: MouseEvent ):Void {

sx = e.dragX - dx;

sy = e.dragY - dy;

}

onMouseDragged: function( e: MouseEvent ):Void {

dx = e.dragX - sx;

dy = e.dragY - sy;

}

}


71/71

JavaFXJavaFXGUI BasicsGUI Basics

javafx gui basic

Documents