PART II Building Three-Tier Client–Server Applications 555 Chapter 8 Developing Java Web Applications to Access Databases 557
5.3.3 Build a Java FX Application Project
JavaFX is a Java platform for creating and delivering rich Internet applications that can run across a wide variety of connected devices. By using the JavaFX, developers can design and build applications for desktop, browser, and mobile phones.
5.3.3.1 Overview of Java FX
JavaFX builds on Java technology. To build JavaFX applications, developers use a stati- cally typed, declarative language called JavaFX Script; Java code can be integrated into JavaFX programs and compiled to Java bytecodes, so JavaFX applications run on any desktop and browser that runs the Java Runtime Environment ( JRE ) and on top of mobile phones running Java ME.
JavaFX is the best software for creating feature - rich applications that deliver secure and expressive cross - platform user experiences. With the JavaFX SDK, developers and designers now have the essential set of technologies, tools, and resources to easily create and deploy their content across browsers, desktops, mobile devices, TVs, and other con- nected devices.
Regularly, a JavaFX contains the following components:
1. JavaFX Composer — Preview
The JavaFX Composer is a visual layout tool for JavaFX applications, like the NetBeans GUI Builder is for Java SE applications. The JavaFX Composer is a plug - in for NetBeans IDE 6.8. It provides:
• Visual editor for a form - like UI using components in JavaFX 1.2.1 SDK • Dynamic design editing based on states
• Data access to Web Services, databases, and local storages • Support for JavaFX binding
• Simple animation editor • Multiscreen - size editing 2. JavaFX Script Editor
The JavaFX Script Editor brings you improved semantic and syntactic highlighting, source navigation, faster code completion, code folding, javadoc pop - ups, refactoring, and error detection and hints, such as fi xing import statements and packages. You can Go to Types , Find Usages , and navigate through code with hypertext links. The Palette allows you to drag and drop JavaFX structures for transformations, effects, animation, and more to your project. You can also let the code snippet generator surround selected lines or imple- ment abstract methods, then use the Preview button to display the output of your visual code live.
3. Full JavaFX Mobile Support
The JavaFX SDK 1.2.x supports JavaFX Mobile and comes with a JavaFX Mobile Emulator.
JavaFX Mobile applications run directly on the Java Micro Edition platform: Benefi t from Java ME ’ s ubiquity, security, and advanced APIs, including support for media, GPS, cameras, fi le system, networking, and Bluetooth.
4. JavaFX Debugging and Profi ling
The improved Debugger uses the common debugger infrastructure so you benefi t from better extensibility and performance. Use the integrated Profi ler for standard CPU or memory profi ling, or simple monitoring to optimize your JavaFX application ’ s speed and memory usage. The options have been preset to default values by experts, but you can customize settings for a specifi c application.
All of these components are included in the JavaFX SDK.
In addition to these components, you also need JavaFX Compiler and JavaFX Runtime to compile your source codes to the bytecodes and run them in your machine using the Java Virtual Machine (JVM or Java Interpreter). However, because we are using NetBeans IDE as our JavaFX development environment, these two components have been installed automatically by NetBeans IDE when we use plug - in to add JavaFX com- ponents into this IDE at the beginning time.
5.3.3.2 Java FX SDK
The JavaFX Software Development Kits (SDK) includes the following components (also included when you download NetBeans IDE for JavaFX):
• JavaFX Desktop Runtime
• JavaFX Mobile & TV Emulators (for Windows & Mac OS X) • JavaFX APIs
• JavaFX Compiler
• JavaFX API documentation • Samples
When you add JavaFX components into the NetBeans IDE by using plug - in, those components will be organized by the functionality to the different bundles based on dif- ferent applications. Figure 5.33 shows an example bundle for applications developed in NetBeans IDE.
The developer bundle contains the following tools:
• NetBeans IDE for JavaFX
The JavaFX technology is integrated with the NetBeans IDE, a mature and powerful devel- opment environment that makes it easy to build, preview, and debug JavaFX applications.
The NetBeans IDE for JavaFX is easy to learn, and it comes bundled with the JavaFX SDK and lots of sample applications. The NetBeans editor features a drag - and - drop palette to quickly add JavaFX statements, including transformations, effects, and animation. The new JavaFX Composer adds a visual editor for form - like user interfaces, along with support for animation, multiple screen sizes, and more.
• JavaFX Plug - In for NetBeans
If you are already using the NetBeans IDE, you can add the JavaFX plug - in to include support for developing JavaFX applications.
c05.indd 194
c05.indd 194 7/20/2011 11:11:16 AM7/20/2011 11:11:16 AM
www.traintelco.com
To develop and build a JavaFX application, you need to use the JavaFX Script pro- gramming language. Let ’ s have a closer look at this kind of language.
5.3.3.3 Java FX Script Language
JavaFX Script is a scripting language designed by Sun Microsystems, forming part of the JavaFX family of technologies on the Java Platform. JavaFX targets the Rich Internet Application domain (competing with Adobe Flex and Microsoft Silverlight), specializing in rapid development of visually rich applications for the desktop and mobile markets.
JavaFX Script works with integrated development environments, such as NetBeans and Eclipse. JavaFX is released under the GNU General Public License, via the Sun spon- sored OpenJFX project.
JavaFX Script used to be called F3 for Form Follows Function . Its name was changed to JavaFX Script, and it became open sourced at JavaOne in 2007.
JavaFX Script language has the following important properties:
• Statically typed — when type checking is performed during compile time as opposed to run time.
• Declarative programming — a programming paradigm that expresses the logic of a computa- tion without describing its control fl ow.
Like other OOP languages, JavaFX Script can be used to develop various targeting applications. The syntax used to create and apply variables, functions, and objects are similar to most other OOP languages. In the following sections, we will use an example to illustrate how easy it is to use JavaFX Script language to build a JavaFX application in NetBeans IDE 6.8.
5.3.3.4 Build a Java FX Script Application
In this section, we will develop a JavaFX Script application project JavaFXScriptCounter . The function of this project is simple and easy; it is used to perform simple counting between 0 and 9, and the output is the count result displayed in a single LED.
Figure 5.33. An example bundle for applications built in NetBeans IDE.
Developer Bundle
JavaFX Plugin for NetBeans
JavaFX SDK NetBeans IDE
for JavaFX
Let ’ s fi rst create a new JavaFX Script application project under NetBeans IDE 6.8.
5.3.3.4.1 Create a Java FX Script Application Project Launch the NetBeans IDE and choose File|New Project. When the new project wizard appears, choose JavaFX as the category and press the Next button to continue.
On the Name and Location page, type JavaFXScriptCounter for the Project
Name , specify your desired location for the project ’ s fi les in the Project Location text fi eld, and leave all the other default settings unchanged, as shown in Figure 5.34 .
Click on the Finish button to complete this new project creation process.
The JavaFXScriptCounter project opens in both the Projects window and the
Files window, and the Main.fx fi le opens in the source editor, as shown in Figure 5.35 . Notice that all JavaFX Script codes, including the codes created by the system or codes developed by the developer, are included within the Main.fx fi le by default. These codes include all operations to successfully perform a JavaFX Script application with declaring variables, creating functions and objects, and invoking functions. Several import statements and object literals such as Stage and Scene have been prewritten in this Main.
fx fi le. These Object literals represent key concepts within the JavaFX application, and are described in Table 5.4 .
It can be found from Figure 5.35 that four import statements are coded at the begin- ning of this script fi le to indicate the locations of associated packages that contain the related classes and components to be used in this project. Then the Stage and Scene
Figure 5.34. The fi nished Name and Location page.
c05.indd 196
c05.indd 196 7/20/2011 11:11:16 AM7/20/2011 11:11:16 AM
www.traintelco.com
objects are created and initialized with some default values, such as the title, width, height, and content of the Scene object. Also, the text font and starting values for both horizontal and vertical axes, x and y , are also set up for the Scene object.
Refer to Table 5.4 to get a more detailed description about these four components and their functionalities.
In addition to those components, JavaFX Script utilized different variables, functions, and objects. Table 5.5 lists syntax used to declare and create most popular variables, objects, and functions using JavaFX Script language.
Figure 5.35. The opened Main.fx fi le.
Table 5.4. Object literals created by default JavaFX Script projects
Object Literals Functions
Stage The top - level container window required to display any visible JavaFX objects. The default instance variables title, width, and height defi ne the text that appears on the window ’ s top border and its height and width. The scene variable defi nes an instance of the Scene object literal which sets the area in which you can place the JavaFX objects.
Scene Similar to a drawing surface for the graphical content of your
application. The scene instance variable has a content variable that is used to hold JavaFX graphical elements and defi nes the graphical content of your application. The instance variables, width, and height, defi ne the width and height of the content area.
Text Defi nes the graphical element that displays text in the scene.
Font Defi nes the font used to display the text in the scene.
Table 5.5. Syntax used to declare and create JavaFX script variables and objects
Syntax Functions
var variable_name;
var num1, num2;
var keyword is used to declare a new script variable without assigning any initial value, which means that this variable ’ s value can be assigned later.
def variable_name = value;
def num1 = 10;
def keyword is used to defi ne a new variable with an initial value.
The difference between the var and the def is that the variable ’ s value cannot be changed if it is declared with the def keyword.
class_name{
instance variable: value;
instance method: name;
}
To create a new object based on an existing class, use this syntax.
The point is that the defi nition of the class must have been created and located at a package, and the package has been imported into the project fi le.
function f_name() { function body … }
function add() {
var result = num1 + num2; }
Declare a new script function.
You can pass arguments to any script function. The syntax used to pass arguments to a function is: (arg_name: arg_type). For example, function add(num1:integer, num2:double) { … } f_name();
add();
To invoke a JavaFX script function. Just call that function with its name.
5.3.3.4.2 Add Graphical Images into the Java FX Script Project Since we need to use 0 ∼ 9 images to display the counting number for the single LED, we need to download those images and save them in our project. The popular way to do that is to use a
resources folder under our project folder to store any image or other resource fi les. To save time and space, we can download those 10 - digit image fi les and directly store them in our current project folder.
Download the 0.png ∼ 9.png image fi les from the folder Images that is located at the Wiley ftp site (refer to Figure 1.2 in Chapter 1 ), and save them in our project folder
javafxscriptcounter in which our Main.fx fi le is located, as shown in Figure 5.36 .
Figure 5.36. The stored 10 - digit image fi les.
c05.indd 198
c05.indd 198 7/20/2011 11:11:16 AM7/20/2011 11:11:16 AM
www.traintelco.com
Now we are ready to develop our JavaFX Script project using the JavaFX Script programming language in the Main.fx window.
5.3.3.4.3 Develop Java FX Script Language Codes Double click on our Main.fx project fi le from the Projects window to open it. Add code lines that are shown in Figure 5.37 into this fi le. The newly added coding lines have been highlighted in bold.
The purpose of this added coding line is to display the counting number in the single LED. As you know, to work with images in JavaFX applications, you need to use the
Image and ImageView classes. The Image class loads the image from the specifi ed loca- tion, and the ImageView class displays the image in your application. Create a variable
images to display 10 - digit images, 0.png ∼ 9.png .
A script for loop is used to continuously display 10 counting numbers. The location of those images is represented using a URL.
An error fl ag appears as soon as we added this coding line since we have not imported the associated packages to tell the compiler where those image components are located.
To fi x this error and import the desired package, perform the following operations:
1. Right click in any white space in the editor and select Fix Imports from the popup menu to remove the error fl ag. You need to select the type of Image by double clicking the javafx.scene.image.Image line
2. Similarly, select the type of ImageView by double clicking the javafx.scene.image.
ImageView line.
Two import statements have been added into the project fi le after you completed these two operations, which are:
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
If you run the project in this way, the number displayed in LED cannot be changed as you click on it since we need to set up a binding between each image fi le. On the opened Main.fx window, perform the modifi cations that are shown in Figure 5.38 .
Figure 5.37. The newly added codes to the Main.fx fi le.
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
def images = for(i in [0..9]){Image {url: "{__DIR__}{i}.png"};}
Stage {
title: "Application title"
scene: Scene { width: 250 height: 80
content: [ImageView {image: images[0]}
Let ’ s take a closer look at this piece of codes to see how it works.
A. In order to set up a connection between each click on the LED and the click event, we need to import the MouseEvent package in which a mouse click event source and event listener are involved.
B. The variable count is initialized to 0 as the starting number.
C. By assigning the image with the current count number to the current image variable, the current image with the current clicking number can be displayed.
D. By enlarging this number, we can make the height of the scene a little big.
E. By using the bind control, we bind the image object with the current image object together to enable the current image to be displayed in this image object.
F. If the onMouseClicked event occurs, which means that the mouse has been clicked by the user, and the listener function will be triggered to display the current clicking number and the current digit in the current image object.
Figure 5.38. The modifi ed codes for the Main.fx fi le.
……
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
var count = 0;
def images = for(i in [0..9]){Image {url: "{__DIR__}{i}.png"};}
var currImg = images[count];
Stage {
title: "Application title"
scene: Scene { width: 250 height: 100
content: [ImageView {image: bind currImg onMouseClicked:
function(e: MouseEvent) {
println("Click number {++count} ...");
currImg = images[count];
} } Text { font : Font { size : 16 }
x: 65 y: 30
content: "Click on the LED to Begin"
} ] } } A B C
D E F
G H
c05.indd 200
c05.indd 200 7/20/2011 11:11:17 AM7/20/2011 11:11:17 AM
www.traintelco.com
G. We move the starting point to display the content of this project horizontally to make it in the center of the script window.
H. The content is changed to work as a prompt to remind users to perform a click as the project runs.
Now we are ready to compile, build, and run our project to test its functionality. Click on the Clean and Build Main Project button to build our project.
5.3.3.4.4 Run the Java FX Script Project After building and compiling our project, right click on the Main.fx fi le from the projects window and click on the Run File item to run our JavaFX Script project. A running example of our project is shown in Figure 5.39 a.
Click on the LED and you can fi nd that the number displayed in the LED will increase one by one for each clicking. The output result is also displayed in the Output window, as shown in Figure 5.39 b.
Our JavaFX Script project is very successful!
Click on the Close button that is located at the upper - right corner of this window to close our project.
A complete JavaFX Script application project JavaFXScriptCounter can be found from the folder DBProjects\Chapter 5 that is located at the Wiley ftp site (refer to Figure 1.2 in Chapter 1 ). You can download this project from that site and run it in your computer with the following plug - in components in your NetBeans IDE:
• JavaFX Composer
• JavaFX Kit (including the JavaFX SDK) • JavaScript Debugger
You can add those plug - in components by selecting the Tools > Plugins menu item and select the Available Plugins tab, and then checking those components.
5.3.3.5 Build a Java FX Desktop Business Application
JavaFX Desktop Business Application is exactly based on the JavaFX Script Application template, and it uses the Standard Execution mode as the default running mode.
Figure 5.39. The running status of our JavaFX Script project.
(a) (b)
Additionally, it creates a design fi le with preset Desktop profi le and a 480 × 320 screen - size.
Relatively, the difference between a JavaFX Script Application and a JavaFX Desktop Business Application is that the former runs the application using command - line JavaFX executable with a default scene, and the latter uses a Standard Execution mode with a defi ne view or scene. Since the JavaFX Script Application does not provide any scene or view window as the project runs, a default scene window will be provided as the project runs. However, the JavaFX Desktop Business Application provides a design fi le with a design view scene to allow users to design and build this scene view using the JavaFX Composer; therefore, it is more professional compared with the former.
Now let ’ s create a new JavaFX Desktop Business Application project.
5.3.3.5.1 Create a Java FX Desktop Business Application Project In this JavaFX Desktop Business Application, we want to illustrate how to develop a simple but profes- sional JavaFX Desktop application to access a JavaDB Sample database named Sample and retrieve different columns from the CUSTOMER table in the Sample database.
To access a data source from a JavaFX Desktop Business Application, one needs to use the JDBC Data Source in the JavaFX Data Sources tool in the JavaFX composer. In fact, the JavaFX Composer, which is very similar to the Java Swing component, is a visual layout or container that contains all JavaFX GUI components to enable users to build a JavaFX Desktop application with a preset design scene or view.
To create a new JavaFX Desktop Business Application project, launch the NetBeans IDE 6.8 and choose File > New Project menu item and select the JavaFX from the
Categories list and the JavaFX Desktop Business Application item from the
Projects list, and then click on the Next button to continue.
In the Name and Location page, enter JavaFXDeskDSApp into the Project Name fi eld as the name for this project. You can set up the desired location to save this project in the Project Location fi eld as you want. In this application, we still use our default folder, which is C:\Book9\DBProjects\Chapter 5 . Keep all other settings unchanged and click on the Finish button. Your fi nished Name and Location page should match one that is shown in Figure 5.40 .
Figure 5.40. The fi nished Name and Location page.
c05.indd 202
c05.indd 202 7/20/2011 11:11:17 AM7/20/2011 11:11:17 AM
www.traintelco.com