在Eclipse中安装JavaFX Script插件并运行JavaFX程序

在Eclipse中安装JavaFX Script插件并运行JavaFX程序

一．安装JavaFX Script插件

A JavaFX Script (hereinafter referred to as JavaFX) plugin for the Eclipse SDK can be downloaded and installed in your Eclipse SDK.

Prerequisites

The following software must be installed before you attempt to install the JavaFX plugin:

• Eclipse SDK version 3.2.2
• J2SE JDK 5.0 (Java SE Development Kit), which consists of the Java Runtime Environment plus developer tools for compiling, debugging, and running applications written in the Java language.

Downloading and Installing the Software

1. Start up your Java - Eclipse SDK.
2. From the main menu, select Help > Software Updates > Find and Install.
3. In the Install/Update dialog, choose Search for New Features to Install and click Next.
4. Click New Remote Site.
5. In the New Update Site dialog, type JavaFX in the Name field.
6. In the URL field, type http://download.java.net/general/openjfx/plugins/eclipse/site.xml
7. Click OK.
8. In the Install window, click Finish.
   The Update dialog appears.
9. In the Updates dialog, select JavaFX > JavaFX node > and click Next.
10. Accept the license and click Next.
11. Click Next and Finish
12. In the Verification dialog, select Install All.
13. Restart the SDK.

二．新建JavaFX工程

以上准备好了JavaFX Script的Eclipse开发环境，现在我们来实际开始JavaFX Script之旅。

我们需要创建一个Java工程来存放我们的JavaFX Script文件。

1. 从Eclipse的主菜单选择New > Project
2. 在选择工程向导窗口中选择Java Project
   
3. 点击Next
4. 输入Project Name为：JavaFXapp
5. 不需要添加JavaFX Script Lib，运行JavaFX Script程序时，Eclipse会自动添加并设置环境的。点击Finish，完成。
   
   现在JavaFXapp工程就创建好了，如下图：
   

创建我们第一个JavaFX程序

现在，开始用Eclipse创建我们第一个JavaFX HelloWorld 程序。

1. 右击JavaFXapp > New > Other
   
2. 在New窗口中选择JavaFX > JavaFX File，
   
3. 点击Next，在File name输入：HelloWorld.fx，
   
4. 点击Finish，HelloWorld.fx就被添加到JavaFXapp工程中，并且在右边自动被打开了。
   
5. 将下面代码粘贴到HelloWorld.fx中：

6.           import javafx.ui.*;

7.            

8.           Frame {

9.                title: "Hello World JavaFX"

10.            width: 200

11.            height: 50

12.            content: Label {

13.               text: "Hello World"

14.         }

15.            visible: true

}

运行我们的第一个JavaFX程序

现在让我们用Eclipse运行我们的第一个JavaFX程序。

1. 在Eclipse主菜单，选择Run > Run...：
   
2. 在Run窗口中，双击JavaFX Application：
   
3. 然后在Name输入：HelloWorld：
   
4. 点击Arguments，在Program arguments中输入我们的JavaFX程序名称：HelloWorld，这里的名称与Java类名一致，如果我们的HelloWorld存放在prac目录下，那们就输入prac.HelloWorld：
   
5. 点击Run，自动编译运行，将出现下面运行窗口：
   

恭喜，我们现在完成了第一个JavaFX程序。

 

 

三．用命令行编辑运行程序

The JavaFX family of technologies currently contains two products: the JavaFX Script and the JavaFX Mobile platforms. The latter is a platform for mobile phones and other mobile devices. The focus of this series of articles is the JavaFX Script programming language, a simple and elegant scripting language that leverages the power of the Java platform. More specifically, these articles cover compiled JavaFX Script, which is well along the way in the development cycle. You may already know that there is an interpreted version of JavaFX Script, which essentially served as a prototype for the compiled version. JavaFX Script is statically typed and fully object oriented.

As you'll see, JavaFX Script makes it easy to develop rich and responsive graphical user interfaces (GUIs). Part of its appeal is that graphical content developers can develop amazing user interfaces (UIs) even if they do not have an in-depth knowledge of programming.

Java SE 6 Update N, often abbreviated as 6uN, is the name for some updates in progress to the Java Platform, Standard Edition 6 (Java SE 6) that enable the deployment of the latest JVM* as well as radically increase the speed at which Java applets and applications launch. This, coupled with the fact that JavaFX Script is compiled to JVM bytecode, will provide us with quickly deployed, fast executing, graphically rich clients.

Now that you have a basic understanding of what JavaFX technology and Java SE 6 Update N are, let's look at some compiled JavaFX Script code that is slightly more sophisticated than a typical Hello World program. This will give you a taste for how you can easily create compiled JavaFX programs that contain UI components and 2D graphics. The next sections will show you how to compile and run this example program.

Obtaining the JavaFX Script Compiler

Before you can compile and run a JavaFX Script program, you must first obtain the latest build of the JavaFX compiler. Here are the steps to accomplish this.

 Note: You must have JRE 5 or later to compile and run JavaFX Script programs.

1. Download the latest compiler build.
2. Expand the archive.ip file into a directory on your system.
3. Set the PATH environment variable to include the archive/openjfx-compiler/dist/bin subdirectory of the directory into which you expanded the archive.zip file.

Compiling and Running the HelloCompiledJavaFX Program

Because this program has a package statement, the source code must be located in a directory with the same name as the package. Save this program in a directory named mypackage, in a file named HelloCompiledJavaFX.fx. To compile the program, set your current directory to the mypackage directory and execute the javafxc command script, entering the following command:

javafxc HelloCompiledJavaFX.fx

To run the program, go up one directory to where the base of the package is, and enter the following command:

javafx mypackage.HelloCompiledJavaFX

 

Figure 1 shows the window that should appear.

Figure 1: The Application's Main Window

 

When you activate the Click Me button, you should see the dialog box shown in Figure 2.

Figure 2: The Message Dialog

 

Code Sample 1 shows the source code for this simple JavaFX Script program.

Code Sample 1

/*  *  HelloCompiledJavaFX.fx - A "Hello World" style, but slightly more  *                           sophisticated, compiled JavaFX Script example  *  *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)  *  to serve as a compiled JavaFX Script example.  */ package mypackage;   import javafx.ui.*; import javafx.ui.canvas.*;   Frame {   title: "Hello Rich Internet Applications!"   width: 550   height: 200   background: Color.WHITE   visible: true   content:     BorderPanel {       top:         FlowPanel {           content:             Button {               text: "Click Me"               action:                 function():Void {                   MessageDialog {                     title: "JavaFX Script Rocks!"                     // This string has a newline in the source code                     message: "JavaFX Script is Simple, Elegant, and Leverages the Power of Java"                     visible: true                   }                 }             }         }       center:         Canvas {           content:             Text {               font:                 Font {                   faceName: "Sans Serif"                   style: FontStyle.BOLD                   size: 24                 }               x: 20               y: 40               stroke: Color.BLUE               fill: Color.BLUE               content: "JavaFX Script Makes RIA Development Easy"             }         }     } }

 

Let's examine the details of the source code.

Understanding the HelloCompiledJavaFX Application Code

As in the Java programming language, JavaFX technology contains two types of comments: multiline comments and single-line comments.

• Multiline comments begin with the two characters /* and end with the same two characters in reverse order (*/). Anything in between will be ignored. The beginning of Code Sample 1 shows an example of a multiline comment.
• Single-line comments begin with the two characters //. Anything that follows these two characters on a single line will be ignored. An example of a single-line comment is shown near the middle of Code Sample 1, and repeated below for your convenience:
  
  // This string has a newline in the source code.

The package declaration, as in Java technology, is analogous to folders in a file system. It provides a way to logically organize an application's source-code files. The package in this example is mypackage, which indicates that the HelloCompiledJavaFX.fx source code is located in a folder named mypackage. Package names may consist of more than one node. For example, the package name com.sun.foo indicates that the source-code file is located in a folder named foo, which is located in a folder named sun, which is located in a folder named com. Note that the package name usually begins with the domain name of the company or organization that developed the application -- in reverse order, beginning with the top-level domain name, such as com or org. The package declaration is optional, but using it in all but the most trivial programs is a good practice. If used, the package statement must appear at the top of the source code, excluding white space and comments.

Continuing to leverage your knowledge of the Java programming language, you will see that import statements are a part of the JavaFX Script language as well. JavaFX programs typically use libraries that consist of JavaFX -- and optionally Java -- code. In this example, each import statement indicates the location or package of the JavaFX classes that the code in the rest of this HelloCompiledJavaFX.fx file depends on for outputting widgets and drawing to the screen. An import statement can end with an asterisk (*), indicating that the program may use any of the classes in the package. An alternative form is to specifically name each class being used, as in the following example:

import javafx.ui.Frame;

 

All but the most trivial applications should organize their source code through package declarations. A source-code file uses import statements to indicate its use of classes that are contained in source-code files that have a different package statement.

Declarative Code That Defines the User Interface

One of the most exciting features of JavaFX technology is its ability to express a graphical user interface (GUI) in a simple, consistent, and powerful declarative syntax. Declarative programming consists of a single expression, whereas procedural programming consists of multiple expressions that are executed sequentially. JavaFX Script supports both types of programming, but the use of declarative syntax whenever possible is good practice.

Most of the example program in Code Sample 1 is declarative: It consists of one expression. This declarative expression begins by defining a Frame object followed by an open curly brace, and it ends with the matching curly brace in the program's last line. Nested within that are attributes of the Frame object, including the content attribute, which is assigned a BorderPanel layout widget, a GUI component that is governed by the Java platform's BorderLayout. Nested within that are the top and center attributes of the BorderPanel widget, which are assigned a FlowPanel layout widget and a Canvas widget, respectively. This continues until the UI containment hierarchy is completely expressed.

Declarative code automatically creates an instance -- also known as an object -- of each JavaFX class in the expression. It also assigns values to the attributes of the new instance. For example, look at the portion of code that creates an instance of the Font class:

Font {   faceName: "Sans Serif"   style: FontStyle.BOLD   size: 24 }

 

This code creates an instance of the JavaFX Font class and assigns the value Sans Serif to the faceName attribute of the new Font instance. It also assigns the value of the FontStyle.BOLD constant, a static attribute, to the style attribute, and 24 to the size attribute. Notice that each attribute name is followed by a colon (:), which in JavaFX declarative syntax means "assign the value of the expression on the right to the attribute on the left." These same concepts are true for the remaining classes in this program: Frame, BorderPanel, FlowPanel, Button, MessageDialog, Canvas, and Text. Let's look at each of these classes individually.

Using the Frame Class

A Frame represents a GUI window, which has its own border and can contain other GUI components within it.

As with most classes, the Frame class has a set of attributes. The set of attributes that Frame widgets have, as shown in Code Sample 1, are as follows:

• A title that appears in the window's title bar.
• A height and width attribute in pixels that determine the window's initial dimensions.
• A background attribute that specifies the background color for the Frame.
• A visible attribute that controls whether the Frame object is to appear on the screen.
• A content attribute that defines what the contents of the Frame object will be. In this case, the Frame object will contain a BorderPanel layout widget that contains other widgets.

Creating String Literals

One of the data types in JavaFX technology is the String, which consists of zero or more characters strung together. As shown in the following title attribute of the Frame object, a String literal is defined by enclosing a set of characters in double quotation marks:

title: "Hello Rich Internet Applications!"

 

To embed a newline character into a string, simply continue the string on a new line as shown in the following code from this example:

message: "JavaFX Script is Simple, Elegant, and Leverages the Power of Java"

 

Alternatively, you can enclose String literals in single quotation marks.

Using Layout Widgets

One very compelling feature of JavaFX Script is the ability to express a GUI, including its layout, in simple declarative code. This is enabled by the fact that JavaFX Script uses layout widgets, which are UI components, instead of requiring you to create instances of layout managers and associate them with UI components, as in Java technology. Figure 3 illustrates the layout strategy used in this application.

Figure 3: The Main Window with Layout Widgets Identified

 

Compare Figure 3 with the source code in Code Sample 1, and you'll gain an appreciation for how straightforward it is to define complex cross-platform UIs in JavaFX technology. The behavior of the BorderPanel layout widget is the same as a Java UI container governed by a Java BorderLayout manager: The UI widgets may be associated with the top, left, right, bottom and center attributes. The top, left, right, and bottom areas will take up only the room required to hold their respective widgets, with the center area occupying any remaining room. As with the Java BorderLayout manager, widgets placed in a BorderPanel are stretched to the size of the area in which they are placed.

Similarly, the FlowPanel behaves the same as a Java UI container governed by a Java FlowLayout manager: It allows the widgets placed within it to flow from left to right, wrapping within the FlowPanel if necessary. As with the Java FlowLayout manager, widgets placed in a FlowPanel retain their preferred sizes, rather than being stretched as they are in a BorderPanel.

Handling Events and Displaying a Message Dialog Box

Take a look at the declarative code block that starts with the instantiation of the Button class:

Button {   text: "Click Me"   action:     function():Void {       MessageDialog {         title: "JavaFX Script Rocks!"         // This string has a newline in the source code         message: "JavaFX Script is Simple, Elegant,          and Leverages the Power of Java"         visible: true        }      } }

 

When the user activates the button, the anonymous function assigned to the action attribute is called, which in this case creates an instance of the MessageDialog class. Because the visible attribute is true, the new MessageDialog instance appears on the screen with the desired title and message, as shown in Figure 4, which repeats the screen capture of Figure 1 for your convenience:

Figure 3: The Main Window with Layout Widgets Identified

 

Figure 4: The Message Dialog

 

Note that the message is broken up into two lines in the dialog box because of the way that it is assigned to the attribute, as previously described in the Creating String Literals section.

Drawing on the Canvas

Now look at the Canvas-related code, keeping in mind that the Canvas is assigned to the center of the BorderPanel. You saw previously that declarative code is used to express the widgets in a UI containment hierarchy. Now you'll see that declarative code is also used to draw 2D graphics on a Canvas. You use the Text class, one of the JavaFX Script 2D graphics classes, to draw text on a Canvas. The x and y attributes express the location, in pixels, at which the upper left corner of the text should appear. The content attribute of the Text class contains the string that will be drawn, and the font attribute specifies the appearance of the text that will be drawn.

Canvas {   content:     Text {       font:        Font {           faceName: "Sans Serif"           style: FontStyle.BOLD           size: 24         }       x: 20       y: 40       stroke: Color.BLUE       fill: Color.BLUE       content: "JavaFX Script Makes RIA Development Easy"     } }

 

Defining Fonts

And finally, in the preceding code snippet, at the innermost level of the declarative script that defines the UI for this application, you find the Font class . This class is used to specify the characteristics of the Text object using the faceName, style, and size attributes shown.

Summary

In this article, you have learned the following:

• JavaFX Script makes it easy to develop rich and responsive cross-platforms GUIs, and Java SE 6 Update N will solve cross-platform and speed-related deployment problems.
• JavaFX Script enables you to express complex, cross-platform GUIs with simple declarative syntax. You can easily express GUI widgets, layout widgets, and 2D graphics.
• JavaFX Script is statically typed and fully object oriented.
• JavaFX Script comments, as well as package and import statements, are the same as in the Java programming language.
• Events are handled through anonymous functions that are assigned to attributes, as you saw in the action attribute of the Button class.
• The latest build of the JavaFX Script compiler may be downloaded and used to compile and run your JavaFX Script programs.

^* As used on this web site, the terms "Java Virtual Machine" or "JVM" mean a virtual machine for the Java platform.

 

转载于:https://my.oschina.net/abcijkxyz/blog/720479