JavaFX

By Chandani Thacker

contact@attuneuniversity.com www.attuneuniversity.com

JavaFX 1

Traditional Web application

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.

Figure 1: Traditional Web Application Architecture

Client Server

2 JavaFX

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 3

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

4 JavaFX

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 it’s "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.

JavaFX 5

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 doesn’t 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 Version Platform

December 4, 2008 1.0 Windows And MacOS

February 12, 2009 1.1 Windows And MacOS

June 2, 2009 1.2 Windows ,MacOS,Linux,Solaris

April 22, 2010 1.3 Windows ,MacOS,Linux,Solaris

October 10, 2011 2.0 Windows

April 27, 2012 2.1 Windows ,MacOS

August 14, 2012 2.2 Windows ,MacOS,Linux

March 18,2914 8 Windows ,MacOS,Linux

6 JavaFX

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 7

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

8 JavaFX

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 9

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

10 JavaFX

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

JavaFX 11

Go to New

Other

Expand JavaFx

Select JavaFx Project

Click next

Figure 3: New - Other

Figure 4: Select JavaFX

Project

12 JavaFX

Give name of project

click finish

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

Figure 5: Name Of Project

JavaFX 13

1)Add directly to project :

Right click on application

New

Other

Figure 6:Add FXML

14 JavaFX

Select New fxml Document

Next

Figure 7: Select New FXML file

JavaFX 15

Give name to file. i.e MyDemoFxml .

Select root element AnchorPane

And click finish

You can see your file is there in package explorer

Figure 9:FXML in Package Explorer

Figure 8: Name of

FXML file

16 JavaFX

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

JavaFX 17

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

18 JavaFX

Right click on Application

New

File

Expand Advanced Setting

Check Link to Existing File

Browse the file you saved.

Figure 12:Load FXML-1

Figure 13:Load FXML-2

JavaFX 19

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