Report.docx - University of Colorado Colorado Springs

looneyvillestaticΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 5 χρόνια και 3 μήνες)

390 εμφανίσεις

Exploring JavaFX

Chris Shuster

University of Colorado at Colorado Springs

Colorado Springs, CO

cshuster@uccs.edu

Abstract

As the internet grows and evolves more and more applications are becoming web based. This stems
from user’s increasing expectations that information is available from anywhere at any time. From this
shift in expectations the web has evolved from very sim
ple and often static applications to dynamic rich
applications. Furthermore there is a countless number of ways to implement a rich application. One of
the recent additions to the tools for creating rich internet applications is JavaFX. JavaFX stemming
from
Java’s write once run anywhere model presents exciting opportunities in the development of rich
internet applications. It is for this reason this
report

will explore

JavaFX.

1.

Overview

This section will provide an overview of the two main

types on inte
rnet applications.
Additionally this
section will give an overview of the constraints of this research report.

1.1

Thin Client Applications

While most would not consider a simple HTML based web page
to be
a thin client application that is
exactly what it is

Error! Reference source not
found.
. A simple HTML web page behave
s

in ways much
like dumb terminals connected to a mainframe
did
many years ago. A server does all the processing and
then sends t
he client the HTML document for it to display.

The document displayed by the client is
relatively static and if someth
ing needs to change the client must
submit a request to the server and
then

wait for the server to reply. This is how the internet that
exists today began.

This model has several advantages and disadvantages. Some of the advantages include the client web
browser could be relatively unsophisticated as the processing is done on the server and greater security
as all business logic is run on

the server
. While there are many disadvantages there are a few key
problem
s with this model. One of the biggest issues is this model is inefficient as every single request
must be sent to the server. Furthermore, at least from an end user’s perspective
, the perhaps biggest
problem is the content being displayed to the client is mostly static and un
-
engaging. The modern world
is arguably over
-
stimulated and as such end users have come to expect that multiple forms of media
converge together, such that v
ideo, audio and graphics as well as plain text are all presented together.
This has

culminated in the rise of rich internet applications.

1.2

Rich Internet Applications

Rich internet applications are the natur
al

evolution form thin client style applications.

Rich
internet

applications are much more similar to thick client applications but
are not the same thing. Rich internet
a
pplications move some but not all of the processing from the server to the client.
Furthermore they
still require significant inter
action with the web server.
Rich
internet
applications allow web
applications to behave more like
a
program

installed on the
client
computer.

While like any solution will have advantages and disadvantages as technology advances the advantages
of rich inte
rnet applications are increasingly outweighing the disadvantages.

It is however still worth
noting some of the key disadvantages. One of which is the client can’t be trusted as any logic ran on the
client can be tampered with and as such the server still

must validate the data coming from client. One
of other major disadvantages is the client’s web browser most be increasingly sophisticated and the
client’s system must be powerful enough to run the rich internet application. This disadvantage
however is

becoming less and less significant as computers are becoming more and more powerful by
the day.

The numerous advantages of rich internet applications easily outweigh the aforementioned
disadvantages. One such advantage is that a rich internet application

can utilize both the power of the
server and the client to run the application.

Furthermore while the client still has significant interactions
with the server the responsiveness of the application is increased as the client does not need to send
every r
equest to the server as it can handle some of the requests itself.

What is one of the most
important advantages to rich internet applications is that they allow applications that are dynamic and
engaging. These applications are capable of very easily int
egrating multimedia into a single place.
Fundamentally rich internet applications are a
llowing for a
significantly
enhanced

user
experience.

1.3

Research Constraints

The field of web applications is massive and covers many different aspects. As such
it
is
ne
cessary to

constrain
the topics
this
research re
port will cover. With the earlier discussions of the two types of web
applications it’s clear that both types are important. Thin client applications still remain common on the
internet to this very day. T
hin client applications are however slowly being displaced by rich internet
applications as rich internet applications are next evolution in web applications. As such this paper will
focus on rick internet applications specifically.

Rich internet applicat
ions is itself a massive field and as a consequence too large to cover in a single
research reports. There are many different platforms for creating rich internet applications in existence
today, including a fairly new technology called JavaFX. I
t is for

that reason this research report is
con
strained to the JavaFX platform specifically.

Due to the fact there are many facets to the JavaFX platform this report is further constrained to only
discuss the basic usage of JavaFX. Furthermore the discussion wil
l be limited to mostly multimedia
aspects of JavaFX. Additionally there are many perspectives in terms of developing rich internet
applications with JavaFX such as from the graphic artist’s perspective and the coder’s perspective. This
research report is

a computer science orientate
d

report and as such will be written from the perspective
of a coder.

2.

Application Platforms

This section will give a brief overview the two types of web application platforms before giving an
overview of the

Java and

JavaFX pla
tform
.

2.1

Executed by the Browser

While this report
is constrained to JavaFX which is executed by an
external

application, to be discussed
in the next section, it is important to have a basic understanding of both styles of web applications in
order to understand the
uniqueness of each.

Rich internet applications that are executed in browser are
exactly that. T
he application is executed by the browser’s internal JavaScript engine. The feature set
supported and the performance of the application varies greatly from browser to browser as each
browser has its own implementation of the JavaScript engine. Browser e
xecut
ed

applications are reliant
on the browser manufacturer’s standard compliance when creating their web browser. This
many times
has proven to be the A
chilles’ heel

of browser executed applications.

2.2

Executed by an External Application

A web application

executed by an external application instead of by the browser does not mean that the
application is not displayed and doesn’
t interact with the browser. The browser merely hands off
execution of the application to an external application. The external a
pplication usually takes the form
of a plug
-
in to the browser. While this does require additional software beyond just the browser to
execute the application it does simplify the implementation of a rich internet application. This is due to
the fact that

the external application is normally from a single manufacturer or has build based on using
far stricter standards. Furthermore the performance of a rich internet application tends to be better as
the external application is often optimized to take advan
tage of libraries like DirectX and OpenGL to
enhance the performance of multimedia such as the playback of video and animation.

2.2.1

Java

Java is a versatile, powerful and platform independent application

development platform

[2]
.

Java is
both a platform and programming language. Java applications fellow the credos of write once and run
anyway. This is achieved by running Java applications in a Java Virtual Machine (JV
M). The JVM
abstracts away platform specific details and provides a unified interface for the Java based application to
use. This has led to Java being adopted as a platform of choice for many web based applications.

Additionally Java utilizes a C like
syntax making it easier for a large portion of coders to transition from
languages like C and C++ to Java.
The problem with Java like many other progr
amming languages is it
requires significant effort to develop a rich application that utilizes multimedia
. There have been many
attempts to enhance Java with better multimedia and web support with the latest and best attempt
being JavaFX.

2.2.2

JavaFX

JavaFX is a new framework built on top of the Java platform. This allows JavaFX based applications to
take advant
age of the vast and
powerful capabilities
of

Java.
Additionally JavaFX further benefits from
Java
by the fact that Java is
a mature and highly optimized platform.

As such JavaFX runs on a JVM just
like any other Java application. This means that any enh
ancements to the JVM will directly benefit
JavaFX based applications as well as Java applications.

Creating user interfaces using multimedia and more specifically graphic user interfaces is often one of
the most complex parts of application development.
J
avaFX is
designed to
specifically to
simplify the
creation

of graphical user interfaces
. Additionally
JavaFX

bridge
s

the gap between graphic designers and
coders
[3]
.

This increases the efficiency of developing rich internet applications. This is achieved
by

JavaFX by simplifying the coding of a rich internet application
. JavaFX achieves this simplific
ation of
coding
by creating a
Java
derivative
language called JavaFX script.
JavaFX script is more forgiving then a
traditional programming
language

in order to enhance the reliability of the user
experience

[4]
.

Furthermore JavaFX script is a hybrid between declarative and object oriented methodologies.

3.

JavaFX Setup

The following sections will detail the steps required to be able to build and run JavaFX based
appl
ications.

3.1

Prerequisites

JavaFX

is a Java based
framework
and as such is operating system independent, with the caveat that
there must be a Java virtual machine available for the operating system. With that in mind it is assumed
that an appropriate operati
ng system is alr
eady installed and configured.

Additionally

it assumed an
unzipping tool such as 7zip and a web browser such as Mozilla Firefox
are

already installed.
It’s also
assumed

that

all necessary install
ation

files for each of the following steps

have already been
downloaded.

3.2

Notes

This exploration was done using a Windows XP Professional installed system. Additionally the Windows
XP
Professional install

was updated with Service Pack 3 and all available patches.
As such this setup
guide is geare
d towards setting up
the JavaFX

environment
on a Windows platform. However this setup
guide can be easily adapted to any platform. Additionally this setup guide is based on guides available
from
Sun Developer Network

[5]

and JavaFX Developing Rich Internet Applications

[6]
.

It’s important to be aware that due to
JavaF
X

being run under a
JVM

and the requirement to have
multiple applications running simultaneously memory demands placed on the
workstation
with be high.
As such it is important to ensure there is enough available memory available
for the workstation.
It’s

recommended to have at least 512MB of memory
in the workstation, though for optimal performance
more is recommends.

3.3

Java Development Kit

1.

Double click the JDK installer package.


2.

Accept the license agreement.

3.

Select all packages to install and u
se the def
ault install directory.


4.

When prompted during the installation for the Java Runtime Environment (JRE) installation
directory use the default.


5.

Allow the installation to run and once the installation is complete the following screen will be
displayed.



3.4

JavaFX Software Development Kit

1.

Double click the JavaFX SDK installer package.


2.

Accept the license agreement.

3.

Use the default install directory.


4.

Allow the installation to run and once the installation is complete the following screen will be
displayed.


3.5

Eclipse

1.

Right click the Eclipse installation ZIP file and select “Extract files…”


2.

Enter “C:
\
” into the “Extract to:” field and click “Ok”.


3.

Allow the files to be extracted and when the extraction is complete a “eclipse” directory will be
created on th
e C:
\

drive.


3.6

JavaFX Plug
-
in for Eclipse

The following section will detail installing the JavaFX plug
-
in for Eclipse. This plug
-
in is necessary for
Eclipse to correctly recognize and handle JavaFX files as JavaFX support is currently not included in
Ecli
pse.

1.

Start Eclipse.

2.

Select a workspace directory.

3.

Once Eclipse has started select “Install New Software…” menu item under the “Help” menu.


4.

Select the “Add…” button in the “Install” dialog.


5.

Enter “JavaFX” in the “Name:” field and “
http://javafx.com/down
loads/eclipse
-
plugin/
” in the
“Location:” field.


6.

Select the “JavaFX Features” checkbox in the dialog and click the “Next” button.


7.

Click the “Next” button on the “Install Details” screen.

8.

Accept the license agreement and click the “Finish” button.


9.

Ecl
ipse will proceed to install the JavaFX plugin.


10.

Once the plug
-
in is installed Eclipse will prompt to restart
,

select the “Yes” button to

allow
Eclipse to restart.

11.

Open the preferences dialog by navigating to the “Preferences” option under the “Window”
menu.


12.

Navigate to the “Classpath Variables” section under “Java > Build Path”

in the tree menu.


13.

Select the “JAVAFX_HOME” variable and click the “Edit…” button.

14.

The “Edit Variable Entry” dialog will be displayed. Click the “Folder…” button.


15.

The “Fold
er Selection” dialog will be displayed. Use it to navigate to the root of the JavaFX SDK
installation directory.


16.

Click the “OK” button on the “Folder Selection”, “Edit Variable Entry” and “Preferences” dialogs
to accept the changes.

3.7

Other Tools

There are alternatives tools available such as NetBeans that can be used in place of Eclipse. The
installation details of the tools can be found on the sources referenced in section
3.2

Notes
.

Additionally tools such as the
JavaFX 1.2 Production Suite

are available to facilitate workflows between
developers and graphics design
ers. These tools however are out of the scope of this report and will not
be detailed any further.

4.

Exploring JavaFX

This section will briefly demonstrate how to create a JavaFX project in Eclipse and how to create simple
multimedia applications. Since th
is is

mostly

an exploration of JavaFX and not a
complete
how to guide
the examples will be relatively brief and high level.

4.1

Eclipse JavaFX Project

The following steps will demonstrate how to create a

JavaFX project in Eclipse.

1.

Launch Eclipse and select a
directory to use as the Eclipse workspace.

2.

Once Eclipse is open select “
Java

Project” located under the “File” menu under the “New”
submenu.


3.

The “New Java Project” dialog will appear. Enter a name, such as “JavaFX Demo”, for the project
into the “Projec
t name:” field then click the “Finish” button.


4.

A new
empty

Java project will be displayed in the “Project Explorer” pane.


5.

Right click the new project and select “Add JavaFX Nature” under the “JavaFX” submenu.


6.

The Java project is now a JavaFX project.

4.2

Hello World

This section will demonstrate a very simple graphical user interface (GUI) “Hello World” application.

This demonstration shows the relative ease in which GUI can be created in JavaFX.

1.

Right click the desired package of the JavaFX project and
select “Empty JavaFX Script” under the
“New” submenu.


2.

Enter a name for the script file, such as “Hello World”, in the “Name:”

field and click the “Finish”
button.


3.

Use the following code to create a basic “Hello World” application.

package

demo;


import

javafx.stage.Stage;

import

javafx.scene.Scene;

import

javafx.scene.paint.Color;

import

javafx.ext.swing.SwingTextField;

import

javafx.scene.text.Text;

import

javafx.scene.text.Font;


Stage

{


title :
"Hello World"


scene: Scene


{


width:
160


height:
45


fill: Color.BLACK


content: Text


{


font: Font


{


size:
25


},


fill: Color.GREEN,


x:
10
,


y:
30


content:
"Hello Wo
rld"


}


}

}

4.

The cod
e in the previous step produces a window that says “Hello World”
.


4.3

Drawing Simple Graphics

This section will expand on the
“Hello World” application

by demonstrating drawing simple graphics on
the screen.

1.

Use the following code to add simple graphics to the application from the previous
section.

package

demo;


import

javafx.stage.Stage;

import

javafx.scene.Scene;

import

javafx.scene.paint.Color;

import

javafx.ext.swing.SwingTextField;

import

javafx.scene.text.Text;

import

javafx.scene.text.Font;

import

javafx.scene.shape.Circle;

import

javafx.scene.shape.Rectangle;

import

javafx.scene.shape.Line;


Stage

{


title :
"Hello World"


scene: Scene


{


width:
160


height:
250


fill: Color.BLACK


content:


[



Text



{



font: Font



{



size:
25



},



fill: Color.GREEN,



x:
10
,



y:
30



content:
"Hello World"



},



Circle



{





centerX:
100
,


centerY:
100
,


radius:
40
,


fill: Color.BLUE




},




Rectangle {





x:
10
,





y:
150
,





width:
140
,





height:
90
,





fill:

Color.RED




},




Line {





startX:
10
,





startY:
50
,





endX:
50
,





endY:
125
,





strokeWidth:
1
,





stroke: Color.YELLOW




}


]


}

}

2.

The code in the previous step produces a window that says “Hello World”

and has simple shapes
drawn on it.


4.4

Effects

The following subsections further build on the original “Hello World” application by demonstrating some
of the effects JavaFX can apply to elements on the GUI.

4.4.1

Lighting

One of the effects JavaFX support is ligh
ting. Lighting is generally a complex effect to apply but as this
demonstration shows JavaFX makes applying lighting effects extremely simple.

1.

T
he following code add
s

lighting effects to the “Hello World” application.

package

demo;


import

javafx.stage.Stage;

import

javafx.scene.Scene;

import

javafx.scene.paint.Color;

import

javafx.ext.swing.SwingTextField;

import

javafx.scene.text.Text;

import

javafx.scene.text.Font;

import

javafx.scene.effect.Lighting;

import

javafx.scene.effect.light.PointLight;

import

javafx.scene.effect.light.SpotLight;

import

javafx.scene.effect.light.DistantLight;

import

javafx.scene.shape.Circle;

import

javafx.scene.shape.Rectangle;

import

javafx.scene.shape.Line;

import

javafx.animation
.Interpolator;


Stage

{


title :
"Hello World"


scene: Scene


{


width:
160


height:
250


fill: Color.BLACK


content:


[



Text



{



font: Font



{



size:
25



},



fill: Color.GREEN,



x:
10
,



y:
30
,



effect: Lighting



{



light: PointLight



{




x:
0
,




y:
-
50
,




z:
100



}



}



content:
"Hello World"



},



Circle



{





centerX:
100
,


centerY:
100
,


radius:
40
,


fill: Color.BLUE


effect: Lighting


{



light: DistantLight



{




azimuth:
90
,




elevation:
45



}


}




},




Rectangle {





x:
10
,





y:
150
,





width:
140
,





height:
90
,





fill: Color.RED





effect: Lighting





{






light: SpotLight






{







x:
0
,







y:
150
,







z:
50
,







pointsAtX:
200
,







pointsAtY:
0
,







pointsAtZ:
0
,







specularExponent:
4






}





}




},




Line {





startX:
10
,





startY:
50
,





endX:
50
,





endY:
125
,





strokeWidth:
1
,





stroke: Color.YELLOW




}


]


}

}

2.

The code from the previous step will place a point of light to be placed near the upper right
hand corner of the “Hello World” text, it will place a distant light on the circle and will place a
spot light on the bottom of the rectangle.


4.5

Shadowing

Shadowi
ng like lighting can affect the look of graphics significantly and like lighting it’s generally not easy
to implement. JavaFX addresses this by making shadowing effects very easy to apply.

1.

The following code adds shadow effects to the “Hello World” applic
ation.

package

demo;


import

javafx.stage.Stage;

import

javafx.scene.Scene;

import

javafx.scene.paint.Color;

import

javafx.ext.swing.SwingTextField;

import

javafx.scene.text.Text;

import

javafx.scene.text.Font;

import

javafx.scene.effect.DropShadow;

import

javafx.scene.effect.InnerShadow;

import

javafx.scene.effect.Shadow;

import

javafx.scene.shape.Circle;

import

javafx.scene.shape.Rectangle;

import

javafx.scene.shape.Line;

import

javafx.animation.Interpolator;


Stage

{


title :
"Hello World"


scene: Scene


{


width:
160


height:
250


fill: Color.WHITE


content:


[



Text



{



font: Font



{



size:
25



},



fill: Color.GREEN,



x:
10
,



y:
30
,



effect: DropShadow



{



offsetX:
5
,



offsetY:
5



}



content:
"Hello World"



},



Circle



{





centerX:
100
,


centerY:
100
,


radius:
40
,


fill: Color.BLUE


effect: InnerShadow


{


offsetX:
5
,


offsetY:
5


}




},




Rectangle {





x:

10
,





y:
150
,





width:
140
,





height:
90
,





fill: Color.RED





effect: Shadow





{






radius:
15





}




},




Line {





startX:
10
,





startY:
50
,





endX:
50
,





endY:
125
,





strokeWidth:
1
,





stroke: Color.YELLOW




}


]


}

}

2.

The code from the previous step puts a drop shadow on the text, an inner shadow on the circle
and makes the rectangle become a shadow.


4.6

Others

There are several more effects and multimedia capabilities
supported by JavaFX that weren’t covered in
this section. Additional effects such as color adjustment, gradients and blending are supported as well
as other features like standard GUI widgets, media playback and animation all have support built into
JavaF
X be default.

These additional capabilities were not explored in this report as the intention is to
demonstrate some of the basic capabilities of JavaFX and to quickly demonstrate the ease and
expediency rich applications can be created with JavaFX.

5.

Futur
e Research

The subject of rick applications in general is massive and even reducing it down to rich internet
applications does little to reduce the size of subject. As such this report was only able to cover a small
portion of rich applications. Furtherm
ore this report was restricted to only covering JavaFX specifically
and even then only a limited portion of JavaFX was covered. The limited scope of this research report
leaves plenty of room for future research. It is for that reason the following topic
s are for future
research.



Java

o

Fully explore the JavaFX platform.

o

Explorer other Java technologies outside of JavaFX.



JSP



JSF



Other Rich Internet Applications Platforms

o

Explore Adobe Flash.

o

Explore AJAX based applications.

6.

References

[1]

Jim Clarke, Jim
Connors, and Eric Bruno, "JavaFX Developing Rich Internet Applications", Sun
Microsystems, Inc, 2009, pp. XVI
-
XVII

[2]

java.com. 2010.

Learn about Java Technology

http://www.java.com/en/about/

[3]

Jim Clarke, Jim Connors, and Eric Bruno, "JavaFX Developing Rich In
ternet Applications", Sun
Microsystems, Inc, 2009, pp. XVI

[4]

Jim Clarke, Jim Connors, and Eric Bruno, "JavaFX Developing Rich Internet Applications", Sun
Micros
ystems, Inc, 2009, pp. 33

[5]

Sun Developer Network (SDN)
. 2010.

Developer Resources for Java Technolo
gy

http://java.sun.com/

[6]

Jim Clarke, Jim Connors, and Eric Bruno, "JavaFX Developing Rich Internet Applications", Sun
Micros
yst
ems, Inc, 2009, pp. 1
-
18