javafx.ppt [uyumluluk modu] -...

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All

rights reserved. 1

JavaFX Basics


rights reserved. 2

Motivations

JavaFX is a new framework for developing Java

GUI programs. The JavaFX API is an excellent

example of how the object-oriented principle is

applied. This chapter serves two purposes. First, it

presents the basics of JavaFX programming.

Second, it uses JavaFX to demonstrate OOP.

Specifically, this chapter introduces the framework

of JavaFX and discusses JavaFX GUI components

and their relationships.


rights reserved. 3

JavaFX vs Swing and AWT

Swing and AWT are replaced by the JavaFX platform for

developing rich Internet applications.

When Java was introduced, the GUI classes were bundled in alibrary known as the Abstract Windows Toolkit (AWT). AWT isfine for developing simple graphical user interfaces, but not fordeveloping comprehensive GUI projects. In addition, AWT isprone to platform-specific bugs. The AWT user-interfacecomponents were replaced by a more robust, versatile, andflexible library known as Swing components. Swing componentsare painted directly on canvases using Java code. Swingcomponents depend less on the target platform and use less of thenative GUI resource. With the release of Java 8, Swing isreplaced by a completely new GUI platform known as JavaFX.


rights reserved. 4

Installing JavaFX & Scene Builder

• e(fx)clipse is an extension for your Eclipse IDE

• Extensions like this can be installed using the "Install New

Software" wizard.

• Eclipse does not know about the location of the e(fx)clipse so you

need to add the repository as a software site.

• The address is:

http://download.eclipse.org/efxclipse/updates-released/1.2.0/site


rights reserved. 5


• In the tree of installable features, check only the entry corresponding to your

release:

• e(fx)clipse - IDE

• Also, make sure the "Contact all update sites during install to find required

software" is checked.

• You may, however, install the FX Runtime feature into your IDE but we

strongly recommend composing your own target platform.

• When requested, restart Eclipse.


rights reserved. 6

Installing JavaFX & Scene Builder• The JavaFX Scene Builder is available as a Windows package

(.msi) for the Windows platform, as a Debian package (.deb) or

.tar.gz file for the Linux platform, and as a disk image (.dmg) for

the Mac OS X platform.

• Download JavaFX Scene Builder from the Additional Resources

section of the Java SE Downloads page athttp://www.oracle.com/technetwork/java/javase/downloads/index.html

• By default, the JavaFX Scene Builder software is installed at

C:\Program Files\Oracle\JavaFX Scene Builder 2.0 on a Windows

platform. If you install JavaFX Scene Builder on a 64-bit

Windows machine, the default installation location is C:\Program

Files (x86)\Oracle\JavaFX Scene Builder 2.0.


rights reserved. 7



rights reserved. 8

Eclipse Configurations• We need to tell Eclipse to use JDK 8 and also where it will find

the Scene Builder:

1. Open the Eclipse Preferences and navigate to Java | Installed JREs.

2. Click Add..., select Standard VM and choose the installation Directory of

your JDK 8.

3. Remove the other JREs or JDKs so that the JDK 8 becomes the default.


rights reserved. 9

Eclipse Configurations4. Navigate to Java | Compiler. Set the Compiler compliance level to 1.8.


rights reserved. 10

Eclipse Configurations5. Navigate to the JavaFX preferences. Specify the path to your Scene

Builder executable.


rights reserved. 11

Basic Structure of JavaFX

�Application

�Override the start(Stage) method

�Stage, Scene, and Nodes

RunMyJavaFX

RunMultipleStageDemo

Stage

Scene

Button


rights reserved. 12

Basic Structure of JavaFXIt's like a theater play: The Stage is the main container which is

usually a Window with a border and the typical minimize,

maximize and close buttons. Inside the Stage you add a Scene

which can, of course, be switched out by another Scene. Inside the

Scene the actual JavaFX nodes like AnchorPane, TextBox, etc. are

added.


rights reserved. 13

Example JavaFX Types

Classes

o JavaFX Main Class

• Extends JavaFX ‘Application’

• Contains main() and launch()

• launch() will initialise and call

start() which must be defined

o FXML

• XML based language

• Describes UI appearance

• Controlled by Scene Builder

UI Layouts

o Rootpane

• Base for UI scene

• Can have a menu bar

o AnchorPane

• Used to ‘anchor’ components

o SplitPane

o TableView

o GridPane

o TilePane

o Hbox

• Sets box wrapper to contain

horizontal components


rights reserved. 14

JavaFX Classeso Stage

• Represents the main container and window

o Scene

• Adds features to Stage, representing FXML layouts

o FXMLLoader

• Handles parsing of FXML files into Java Class

• @FXML keyword links private Java variables to corresponding FXML

components• @FXML private TableView<person> personTable;

o JavaFX Collections

• Data Structures that have Event Listeners

• Can handle changes made in GUI automatically

• ObservableList is example of array with Listener


rights reserved. 15

What is FXML?• FXML is an XML-based language that provides the structure for

building a user interface separate from the application logic of

your code. This separation of the presentation and application

logic is attractive to web developers because they can assemble a

user interface that leverages Java components without mastering

the code for fetching and filling in the data.

• FXML does not have a schema, but it does have a basic

predefined structure. What you can express in FXML, and how

it applies to constructing a scene graph, depends on the API of

the objects you are constructing. Because FXML maps directly

to Java, you can use the API documentation to understand what

elements and attributes are allowed. In general, most JavaFX

classes can be used as elements, and most Bean properties can

be used as attributes.


rights reserved. 16

FXML and Scene Builder• Just as some developers prefer to work directly in the XML code, other

developers prefer to use a tool to author their XML. The same is true with

FXML.

• If you prefer to use a tool, or if you want to create a quick prototype to get

feedback, then you might prefer to use JavaFX Scene Builder.

• Scene Builder is a design tool that generates the FXML source code as you

define the user interface for your application. Scene Builder can help you to

quickly create a prototype for an interactive application that connects

components to the application logic.

• Because Scene Builder uses XML as a serialization format, the produced

FXML code is very clear and you can further edit FXML files, generated by

Scene Builder, in any text or XML editor.


rights reserved. 17

Scene Builder


rights reserved. 18

FXML UI Components


rights reserved. 19

CSS Styling• Can style FXML features with CSS

• Edit appearance using controls for colour, background,

text and sizing

• Similar to using CSS with HTML


rights reserved. 20

Advanced JavaFX Componentso FileChooser

• Opens Directory Browser

o TreeView

• Creates hierarchical list views for nest features

o HTMLEditor

• Advanced text editor with HTML features

o WebViewer

• Inbuilt web display

• Handles HTML5, CSS, JavaScript, DOM, SVG


rights reserved. 21

Panes, UI Controls, and Shapes

RunButtonInPane


rights reserved. 22

Display a Shape

This example displays a circle in the center of the pane.

RunShowCircle

(0, 0) X Axis

Y Axis

(x, y)

x

y

Java

Coordinate System

X Axis

Conventional

Coordinate System

(0, 0)

Y Axis


rights reserved. 23

Binding Properties

JavaFX introduces a new concept called binding property

that enables a target object to be bound to a source object.

If the value in the source object changes, the target

property is also changed automatically. The target object is

simply called a binding object or a binding property.

RunShowCircleCentered


rights reserved. 24

Binding Property:

getter, setter, and property getter


rights reserved. 25

Common Properties and Methods

for Nodes

� style: set a JavaFX CSS style

� rotate: Rotate a node

RunNodeStyleRotateDemo


rights reserved. 26

The Color Class


rights reserved. 27

The Font Class

RunFontDemo


rights reserved. 28

The Image Class


rights reserved. 29

The ImageView Class

RunShowImage


rights reserved. 30

Layout Panes

JavaFX provides many types of panes for organizing nodes

in a container.


rights reserved. 31

FlowPane

RunShowFlowPane


rights reserved. 32

GridPane

Run

ShowGridPane


rights reserved. 33

BorderPane

RunShowBorderPane


rights reserved. 34

HBox


rights reserved. 35

VBox

RunShowHBoxVBox


rights reserved. 36

ShapesJavaFX provides many shape classes for drawing texts,

lines, circles, rectangles, ellipses, arcs, polygons, and

polylines.


rights reserved. 37

Text


rights reserved. 38

Text Example

RunShowText


rights reserved. 39

Line

Run

ShowLine


rights reserved. 40

Rectangle


rights reserved. 41

Rectangle Example

RunShowRectangle


rights reserved. 42

Circle


rights reserved. 43

Ellipse

(centerX, centerY)

radiusY

radiusX

Run

ShowEllipse


rights reserved. 44

Arc


rights reserved. 45

Arc Examples

RunShowArc

(centerX, centerY)

radiusX

radiusY

length

startAngle

0 degree

(a) Negative starting angle –30° and

negative spanning angle –20° (b) Negative starting angle –50°

and positive spanning angle 20°

–30°

–20°

–50°

20°


rights reserved. 46

Polygon and Polyline

RunShowArc


rights reserved. 47

Polygon

RunShowPolygon

javafx.scene.shape.Polygon

+Polygon()

+Polygon(double... points)

+getPoints(): ObservableList<Double>

Creates an empty polygon.

Creates a polygon with the given points.

Returns a list of double values as x- and y-coordinates of the points.

The getter and setter methods for property values and a getter for property

itself are provided in the class, but omitted in the UML diagram for brevity.


rights reserved. 48

Case Study: The ClockPane ClassThis case study develops a class that displays a clock on a

pane.

ClockPane

ClockPane

-hour: int

-minute: int

-second: int

+ClockPane()

+ClockPane(hour: int, minute: int, second: int)

+setCurrentTime(): void

+setWidth(width: double): void

+setHeightTime(height: double): void

javafx.scene.layout.Panel

The getter and setter methods for

these data fields are provided in the class, but omitted in the UML diagram for brevity.

The hour in the clock.

The minute in the clock.

The second in the clock.

Constructs a default clock for the current time.

Constructs a clock with the specified time.

Sets hour, minute, and second for current time. Sets clock pane’s width and repaint the clock,

Sets clock pane’s height and repaint the clock,


rights reserved. 49

Use the ClockPane Class

RunDisplayClock

javafx.ppt [uyumluluk modu] -...

Documents