在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
- Start up your Java - Eclipse SDK.
- From the main menu, select Help > Software Updates > Find and Install.
- In the Install/Update dialog, choose Search for New Features to Install and click Next.
- Click New Remote Site.
- In the New Update Site dialog, type JavaFX in the Name field.
- In the URL field, type http://download.java.net/general/openjfx/plugins/eclipse/site.xml
- Click OK.
- In the Install window, click Finish.
The Update dialog appears. - In the Updates dialog, select JavaFX > JavaFX node > and click Next.
- Accept the license and click Next.
- Click Next and Finish
- In the Verification dialog, select Install All.
- Restart the SDK.
以上准备好了JavaFX Script的Eclipse开发环境，现在我们来实际开始JavaFX Script之旅。
我们需要创建一个Java工程来存放我们的JavaFX Script文件。
- 从Eclipse的主菜单选择New > Project
- 在选择工程向导窗口中选择Java Project
- 点击Next
- 输入Project Name为：JavaFXapp
- 不需要添加JavaFX Script Lib，运行JavaFX Script程序时，Eclipse会自动添加并设置环境的。点击Finish，完成。
现在JavaFXapp工程就创建好了，如下图：
现在，开始用Eclipse创建我们第一个JavaFX HelloWorld 程序。
- 右击JavaFXapp > New > Other
- 在New窗口中选择JavaFX > JavaFX File，
- 点击Next，在File name输入：HelloWorld.fx，
- 点击Finish，HelloWorld.fx就被添加到JavaFXapp工程中，并且在右边自动被打开了。
- 将下面代码粘贴到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
}
现在让我们用Eclipse运行我们的第一个JavaFX程序。
- 在Eclipse主菜单，选择Run > Run...：
- 在Run窗口中，双击JavaFX Application：
- 然后在Name输入：HelloWorld：
- 点击Arguments，在Program arguments中输入我们的JavaFX程序名称：HelloWorld，这里的名称与Java类名一致，如果我们的HelloWorld存放在prac目录下，那们就输入prac.HelloWorld：
- 点击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.
- Download the latest compiler build.
- Expand the archive.ip file into a directory on your system.
- 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.
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.
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.
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.
|
|