JavaFX

By Chandani Thacker

[email protected]
www.attuneuniversity.com

Traditional Web application

Client

Server

Figure 1: Traditional Web Application Architecture

Traditional web applications have some limitations.

In traditional web applications, data resides on the server. So offline
usage is not possible. Plus all validation and preparation of data on
server side.
In traditional web applications, there is only one controller at the
server side, which handles the page. At each user interaction, the
whole page is computed by scratch and reloaded. Partial page
refreshment also not possible.

JavaFX 1

Overview of Rich Internet Applications

(RIAs)
A new kind of web applications came up to overcome these limitations:
Rich Internet Applications (RIAs)
RIAs are web applications.
The Word "rich" is used to take attention towards the difference to the
earlier generation of web applications.
RIA delivers the same features and functions as of desktop applications. At
the client side, RIAs give a similar look-and-feel as desktop applications.
Generally, RIA will divide processing across Internet/network.
User Interface and related activities and capability will be done at client side
and processing related to data manipulation operation will be done at
server side.
However this is general scenario! A developer can decide his own work
distribution way.
As client is also managing data and process both, network traffic will be
reduced. The client will not need to request to server for each and every
small data preparation.
So offline usage of application is also possible.
Traditional web applications has only one controller at the
Server side, that handles the page. When a client sends request handler will
handle it. And page will be reloaded after response.
RIA can have a second controller at client side.
That can handle computation and refreshment of a portion of a page. So
live validation, offline usage and page rearrangements are possible.

JavaFX

 In Traditional web app, On user request, browser sends HTTP

request to server. Page is refreshed when response comes back. So client
has to wait for response on each and every request. This is synchronous
communication. Which creates negative impact on usability.
While, RIAs use both synchronous and asynchronous communications.
So partial page refreshment, page rearrangement, display morphing are
possible

JavaFX 3

Introduction to JavaFX
Javafx is a set of graphics and media packages for developers to create RIA.
Project development life cycle includes design, create, test, debug, and
deploy phases of project.Developer can use JavaFX for all these phases.
JavaFX is created by oracle.
Java FX for ARM processors is in developer preview phase.
On desktops, the JavaFX supports Windows XP, Windows Vista,
Windows 7, Windows 8, Mac OS X and Linux operating systems. In
JavaFX 1.2, Oracle has released beta versions for OpenSolaris.
JavaFX Mobile 1.x is capable of running on multiple mobile
operating systems, including Symbian OS, Windows Mobile, and
proprietary real-time operating systems.
If a desktop can run JavaSE, it can run JavaFX Application.
If a mobile phone can run JavaME, it can run JavaFX Application.
If a browser can run JavaEE, it can run JavaFX Application.
JavaFX script was used before version 2.0.It is statically typed
declarative language. That is directly compiled to Java byte code.
JavaFX2.0 and later are Java library that consists of classes and
interfaces that are written in native Java code.
Developers can integrate advance graphics into JavaFx application
using plug ins of Adobe Photoshop and Illustrator. Developers can
then add animation or effects to the static graphics imported.
For end user its "Drag-to-Install. If any application running inside
browser, end user can drag the application & can drop it to desktop.
The application will be in same state and context even after browser
is closed.
SVG graphics converter tool is there to import graphics and
previewing assets after the conversion to JavaFX format
A designer can use scene builder to design GUI. Or he can use
FXML to code.It is XML based declarative markup language.
Scene Builder will generate FXML markup automatically .which can
be ported to an IDE.
4

JavaFX

 To embed a web page within JavaFX application, Web View is

there.it uses WebKitHTML technology.
Any JavaScript that is running in WebView,it can call Java APIs, and
Java APIs can call JavaScript running in WebView.
Existing Swing applications can be updated with new JavaFX features.
To develop a full featured application, so many controls are there.
And to design a designer can use CSS.
JavaFX provides support for multitouch operations.
If there is supported graphics card or graphics processing unit
(GPU),JavaFX offers smooth graphics. If system doesnt feature
GPUs supported by Javafx,then it wil default to java2D software
stack.
Deployment is easy with Self-contained application packages. It will
have all of the application resources and a private copy of the Java
and JavaFX runtimes.
Table 1 : History of JavaFX

Release Date
December 4, 2008
February 12, 2009
June 2, 2009
April 22, 2010
October 10, 2011
April 27, 2012
August 14, 2012
March 18,2914

Version
1.0
1.1
1.2
1.3
2.0
2.1
2.2
8

Platform
Windows And MacOS
Windows And MacOS
Windows ,MacOS,Linux,Solaris
Windows ,MacOS,Linux,Solaris
Windows
Windows ,MacOS
Windows ,MacOS,Linux
Windows ,MacOS,Linux

JavaFX 5

Exploring JavaFX API

If you want a separation of code and design, you have FXML to design the
interface and a Java program called a controller to handle to logic.
If you want style you now have a markup language that is amazingly similar
to CSS that can be used to customized the look and feel of your application.
If you want to render 2d or 3d graphics or animate things, JavaFx has a
canvas very similar to the HTML canvas and a whole subset of classes
designed to handle animation.
All in 1 download, all in 1 technology. !

JavaFX

Understanding JavaFX Scene Graph

Each visual element is called node here. Each position in the scene graph
tree known as a node.
Scene graph is hierarchical tree of nodes. It can be thought of as a family
tree of visual elements (e.g., UI controls, 2D shapes, images, video players
charts etc..)
A node will be in particular state. Like position or orientation.
A node can have effect like blurs, shadows, and color adjustment etc.
As in your family, your father is above you, and child below you.
The same way visual elements father would be above it child below it.
The root node(the top node) is the only node within the scene graph
without a parent node.

Branch Nodes Which have parent class and child class both. For
example, Group objects (a collection of nodes), Region objects
(i.e., StackPane, FlowPane) can have child nodes. But it also

JavaFX 7

includes Control objects (e.g., Button, ChoiceBox) which can't

have child nodes.
Leaf Nodes - These nodes cannot have child nodes. For example,
Shape objects (e.g, Circle, Rectangle), ImageView objects (for
displaying images) and MediaView objects (used for playing music
or video).

JavaFX

Comparing JavaFX with Swing

Oracle states:
JavaFX is replacing Swing as the new client UI library for Java SE.
However, Swing will remain part of the Java SE specification for the
foreseeable future, and therefore included in the JRE. While we
recommend developers to leverage JavaFX APIs as much as possible when
building new applications, it is possible to extend a Swing application with
JavaFX, allowing for a smoother transition.

JavaFX 9

How to create a JavaFX app With FXML

file?
Requirements:
JDK(The JavaFX SDK and Runtime are included in the JDK, starting with
Java SE 7 Update 2)
Eclipse IDE
(e(fx)clipse provides JavaFX tooling for the Eclipse IDE)
(http://www.eclipse.org/efxclipse/index.html)
Scene Builder
After installing all required software,
Open Eclipse
It will ask to set
workspace.
Browse the
location where
you want to
save your
projects. Then
press ok.

Figure 2: Set WorkSpace in eclipse

10

JavaFX

Figure 3: New - Other

Go to New
Other

Figure 4: Select JavaFX

Project

Expand
JavaFx

Select
JavaFx
Project
Click next

JavaFX 11

 Give name of
project
click finish

Figure 5: Name Of Project

Creating FXML File

There are two ways to add fxml file to your javafx project:
1) Add directly to project
2) Link to existing file

12

JavaFX

1)Add directly to project :

Right click
on
application
New
Other

Figure 6:Add FXML

JavaFX 13

 Select New
fxml
Document
Next

Figure 7: Select New FXML file

14

JavaFX

 Give name to
file. i.e
MyDemoFxm
l.
Select root
element
AnchorPane
And click
finish

Figure 8: Name of
FXML file

You can see your file is there in package explorer

Figure 9:FXML in Package Explorer

JavaFX 15

Code is shown in eclipse.

Right click on file name and open with SceneBuilder

Figure 10: Open the file

You will be able to see design view of file using scene builder

16

JavaFX

3) Link to existing file

Open SceneBuilder with shortcut created on desktop.
Drag and drop some controls on screen. Save the file(FxmlLinkDemo)

Figure 11: Create FXML Design

JavaFX 17

 Right click on
Application
New
File

Figure 12:Load FXML-1

Expand Advanced Setting

Check Link to Existing File
Browse the file you saved.

Figure 13:Load FXML-2

18

JavaFX

It will be added to your project. You can verify in your package explorer.

Figure 14: Package Explorer

You can Select file and open with SceneBuilder

Figure 15:Open with SceneBuilder

JavaFX 19