JavaFX2

JavaFX2.0 tutorial, introduction

JavaFX 2.0

JavaFX 2.0 is the next step in the evolution of Java as a rich client platform. It is designed to provide a lightweight, hardware-accelerated Java UI platform for enterprise and business applications.

Is JavaFX replacing Swing as the new client UI library for Java SE?

Yes and no. Swing will remain part of the Java SE specification for the foreseeable future, and is included in the JRE. On one hand, Swing is widely used in existing Java desktop applications, but relies on an old architecture, which requires a certain level of expertise and specialization. On the other hand, JavaFX features a set of modern UI controls that can be skinned using standard CSS techniques. While we recommend developers to leverage JavaFX APIs as much as possible when building new applications, it is possible to use Swing and JavaFX within the same application, allowing developers to extend existing Swing applications.

Does JavaFX 2.0 support JavaFX Script?

Starting with JavaFX 2.0, JavaFX Script is no longer supported. However, you can use other scripting languages that run on the JVM, such as Groovy or Scala, if you prefer to use a declarative language.

What platforms are supported by JavaFX?

• JavaFX 2.0 is currently (Aug 2011) available on 32-bit and 64-bit versions of Microsoft Windows XP, Windows Vista, and Windows 7.
• A developer preview of JavaFX 2.0 for Mac OS X is available for download on the Oracle Technology Network. It is expected to reach General Availability in the first half of 2012.
• The Linux version of JavaFX 2.0 will follow, with a General Availability expected in the second half of 2012.

Download and Installation (Windows)

Download from here .

Install JavaFX2.0 JDK to Directory: C:\Program Files\Oracle\JavaFX 2.0 SDK

Instal Java 7  JDK  to Directory: C:\Program Files\Java\jdk1.7.0

After installation,  there are no more javafxc and javafx in C:\Program Files\Oracle\JavaFX 2.0 SDK\bin. There is only javafxpackager (old javafxpackager for 1.3)left with us. However, since JAVAFX 2.0 is fully integrated into Java as another API, javac and java are the replacement of javafxc and javafx.

Good document for JAVAFX 2.0 is here. Deployment Guide is here.

Get Started

1. set up the environment, such as

set PATH=%PATH%;C:\Program Files\Java\jdk1.7.0\bin;C:\Program Files\Oracle\JavaFX 2.0 SDK\bin;.
set CLASSPATH=C:\Program Files\Java\jdk1.7.0\jre\lib;C:\Program Files\Java\jdk1.7.0\jre\lib\ext;C:\Program Files\Java\jdk1.7.0\lib;C:\Program Files\Java\jdk1.7.0\db\lib;C:\Program Files\Oracle\JavaFX Runtime 2.0\lib;.

2. notepad FirstApp.java

3. compile:    javac -cp “c:\progra~1\oracle\javafx runtime 2.0\lib\jfxrt.jar” FirstApp.java

4. execute:    java -cp “c:\progra~1\oracle\javafx runtime 2.0\lib\jfxrt.jar”;. FirstApp

what happen

The entry point for JavaFX applications is the Application class (javafx.application.Application) which extends java.lang.Object. The JavaFX runtime does the following, in order, whenever an application is launched:

• Constructs an instance of the specified Application class
• Calls the init() method
• Calls the start(javafx.stage.Stage) method
• Waits for the application to finish, which happens either when the last window has been closed, or the application calls Platform.exit()
• Calls the stop() method

Note that the start method is abstract and must be overridden. The init and stop methods have concrete implementations that do nothing.

Two ways to launch the Application class from Java:

 public static void main(String[] args) {
     Application.launch(FirstApp.class, args);
 }

or
 public static void main(String[] args) {
     Application.launch(args);
 }

Using javafxpackager (the lazy way)

1. alway put the source file in .\src           

                mkdir \test\src\javafxtest

                cd \test\src\

2. create your program using any editor

notepad Javafxtest.java

3. package the project using javafxpackager as below. It will compile (create jar) and deploy your project into project->dist directory structure

cd \test

javafxpackager -makeall -appclass javafxtest.Javafxtest -name “Javafx Test” -width 800 -height 600 -v

4. you can test your program by running \test\dist\dist.jar or browsing \test\dist\dist.html from your browser.

Exploring more…

1. A basic application frame:  to demostrate very basic application framework of javafx2.0: the scene graph is the starting point of the application. It is a hierarchical tree of nodes that represents all of the visual elements of the application’s user interface. It can handle input and can be rendered. In this application, it has stage (window) -> scene (frame) -> objects in tree group (GUI objects will be presented in next few examples).
2. Draw a first object (a rectangle): to draw a rectangle into the tree. The individual items held within the JavaFX scene graph are known as nodes. Each node is classified as either a branch node (meaning that it can have children), or a leaf node (meaning that it cannot have children). The first node in the tree is always called the root node, and it never has a parent.The javafx.scenepackage defines more than a dozen classes, but three in particular are most important when it comes to learning how the API is structured:
   • Node: The abstract base class for all scene graph nodes.  The leaf node classes are defined throughout a number of additional packages, such as javafx.scene.shape and javafx.scene.text.
   • Parent: The abstract base class for all branch nodes. (This class directly extends Node), such as Control, Group, Region, and WebView
   • Scene: The base container class for all content in the scene graph. These base classes define important functionality that will subsequently be inherited by subclasses, including paint order, visibility, composition of transformations, support for CSS styling, and so on.
3. Animate the rectangle: Because the graphical objects are managed by the scene graph, we can achieve some interesting effects with very little extra code. For example, you could easily animate the rectangle to bounce back and forth across the screen while rotating, changing its size, and transitioning its color from red to blue.
4. Animate the rectangle by using TransitionBuilder: We can achieve the same effect by using TransitionBuilder.
5. Draw a border layout: The BorderPane layout pane provides five regions in which to place nodes: top, bottom, left, right, and center.
6. Draw a HBox:The HBox layout pane provides an easy way for arranging a series of nodes in a single row. In this example, I put two buttons on a HBox on top of a Border Pane.
7. Draw a VBox: The VBox layout pane is similar to the HBox layout pane, except that the nodes are arranged in a single column.
8. Draw a StackPane: The StackPane layout pane places all of the nodes within a single stack with each new node added on top of the previous node. This layout model provides an easy way to overlay text on a shape or image or to overlap common shapes to create a complex shape. This example shows a help icon that is created by stacking a question mark on top of a rectangle with a gradient background.
9. Draw a GridPane: The GridPane layout pane enables you to create a flexible grid of rows and columns in which to lay out nodes. Nodes can be placed in any cell in the grid and can span cells as needed. A grid pane is useful for creating forms or any layout that is organized in rows and columns. The example shows a grid pane that contains an icon, title, subtitle, text and a pie chart. Use whatever images / graphics to replace them.
10. Draw a FlowPane: The nodes within a FlowPane layout pane are laid out consecutively and wrap at the boundary set for the pane. Nodes can flow vertically (in columns) or horizontally (in rows). A vertical flow pane wraps at the height boundary for the pane. A horizontal flow pane wraps at the width boundary for the pane.  The example limits one node per column and as a result, the icon image will be flow vertically.
11. Draw a TilePane: A tile pane is similar to a flow pane. The TilePane layout pane places all of the nodes in a grid in which each cell, or tile, is the same size. Nodes can be laid out horizontally (in rows) or vertically (in columns). Horizontal tiling wraps the tiles at the tile pane’s width boundary and vertical tiling wraps them at the height boundary. Use the prefColumns and prefRows properties to establish the preferred size of the tile pane.
12. DrawAll: put the all objects from 5 to 11 together and also explore the AnchorPane.  The AnchorPane layout pane enables you to anchor nodes to the top, bottom, left side, right side, or center of the pane. As the window is resized, the nodes maintain their position relative to their anchor point. Nodes can be anchored to more than one position and more than one node can be anchored to the same position.
13. Animate An OK Button: Because UI controls from the javafx.scene.control package are all extensions of the Node class, they can be integrated with the scene graph rendering, animation, transformations, and animated transitions. Consider the task of creating a button, applying a reflection to it, and animating the button by altering its opacity from its maximum value to its minimum value. The example creates and starts an indefinite timeline, where within a key frame of 600 milliseconds the button’s opacity changes from its default value (1.0) to 0.0. The setAutoReverse method enables the reverse order.
14. Display Text: It shows how to manipulate the text effect: rotate, zoom, move, and display other effects of  the text.
15. KeyEventTest.java: It demonstrates three typical key events, and viewlists.
16. CursorTest.java: It shows all different cursors.
17. AccordionTest.java: It tests the Accordion Control in JavaFX20.
18. MouseEventsTest.java:It tests various mouse events.
19. TabTest.java: shows how to create tabs in JavaFX.

Some basic Java Samples

Java Basic and Java Notes by Fred Swartz