Introduction to javafx

The most popular Java Community recently is the release of javafx script, and Sun also published the open-source website of javafx Script: openjfx. javafx script is Sun's ria solution, it is a simpler scripting language for compiling application software that can run on PCs and mobile phones that support Java. Its programs can run directly on the Java Virtual Machine (Java 1.5 or above). From the perspective of its running environment and method, this is the best competitor of Adobe Apollo, you can view the official demo program for its running effect (Note: JRE 1.5 is required). The effect is amazing. The following is a demonstration:

From the perspective of syntax, javafx script is a mixture of Java and Fig. It has both the advantages of Java (Object-Oriented, inheritance, etc.) and the advantages of VRML (Graphical description ). In terms of IDE support, although the plug-ins of netbeans and eclipse are not very powerful, I believe that IDE support will continue to be enhanced when javafx script is officially released, for example, visual UI editing and syntax prompts.

Openjfx officially launched a javafx script based on netbeans. Considering the use of eclipse (flexbuilder) In Flex development, we will start our javafx script discovery Tour Based on idea e. In addition to using netbeans to eclipse in the original text, other documents are translated from the official documents.

To complete our journey today, you must install eclipse 3.2.2 and flexbuilder. If your JRE version is earlier than 1.5, upgrade it.

Install the javafx script for Eclipse plug-in

First, install the javafx script for Eclipse plug-in. The official installation instructions are as follows:

Start Eclipse/flexbuilder;
Choose Help> Software Updates> Find and install from the main menu;
In the install/update dialog box, select search for new features to install and click Next;
Click new remote site;
In the new update site dialog box, enter javafx in name;
Enter:Http://download.java.net/general/openjfx/plugins/eclipse/site.xml;
Click OK;
Click Finish in the install window;
In the updates dialog box, select javafx> javafx node> and click Next;
Accept the agreement and click Next;
Click Next and finish;
In the verification dialog box, select install all;
After the installation is complete, restart eclipse and install the javafx script Eclipse plug-in.

Create a javafx Project

The above is the eclipse development environment for javafx script. Now let's start our javafx script journey.

We need to create a Java project to store our javafx script file.

Select New> project from the main menu of eclipse
In the select Project Wizard window, select Java Project

Click Next
The input project name is javafxapp.
You do not need to add javafx script Lib. Eclipse automatically adds and sets the environment when running the javafx script program. Click Finish.

Now the javafxapp project has been created, for example:

Create our first javafx Program

Now, we start to use eclipse to create our first javafx helloworld program.

Right-click javafxapp> New> Other

In the new window, select javafx> javafx file,

Click Next and enter helloworld. FX in file name,

Click Finish. helloworld. FX is added to the javafxapp project and automatically opened on the right.

Paste the following code into helloworld. FX:

import javafx.ui.*;
        
Frame {
  title: "Hello World JavaFX"
  width: 200
  height: 50
  content: Label {
     text: "Hello World"
  }
  visible: true
}

Run our first javafx Program

Now let's use eclipse to run our first javafx program.
On the eclipse Main Menu, choose run> Run ...:

In the run window, double-click javafx application:

Enter helloworld in name:

Click arguments and enter the javafx program name helloworld in program arguments. The name is the same as the Java class name. If helloworld is stored in the prac directory, enter prac. helloworld:

Click Run to automatically compile and run. The following running window is displayed:

Congratulations, we have completed the first javafx program.

Syntax explanation

As you can see in the previous chapter, javafx provides a declarative syntax (declarative syntax) used to express the structure and content of user interface components ). To help you understand what happened, we use a pure program similar to swing (like as3) to rewrite the above Code:

var win = new Frame();
win.title = "Hello World JavaFX";
win.width = 200;
var label = new Label();
label.text = "Hello World";
win.content = label;
win.visible = true;

The above source code is also the correct javafx program and has the same running effect as the previous one.

The following describes what happened to the above declarative and Procedural Code:

Call the frame class constructor to create a new frame.
Assign values to the title, width, visible, and content attributes of the frame.
During the content attribute assignment process, the label class constructor is called to create a new label and assign a value to its text attribute.
However, even in such an extremely simple example, the consciousness of the program written in descriptive syntax is easier to understand.

Because Declarative Programming can create a program from a single expression, as shown in the first example above, the root of an expression is generally an object allocation expression (constructor) of an object graph that generates a program ).
Add dynamic behavior)

The above "Hello World" program has no dynamic behavior. Create a graphical user interface with dynamic behavior in javafx, that is, create a graphical user interface component whose attributes depend on the attribute values of other objects (consistent with the concept bound in flex ). These other objects can be any object that you think is suitable for your application status. Because the attributes of the GUI Component depend on another object, it automatically reflects your modifications to another object at any time. Correspondingly, the GUI component is the view, and the other object is the model. below is the model/view version of the "Hello World" program:

import javafx.ui.*;

class HelloWorldModel {
  attribute saying: String;
}

var model = HelloWorldModel {
  saying: "Hello World"
};

var win = Frame {
  title: "Hello World JavaFX"
  width: 200
  height: 50                
  content: Label {
    text: bind model.saying
  }
  visible: true
};

The running program is shown as follows:

If the saying of the model object is changed to the following:

model.saying = "Goodbye Cruel World!";

The running result is as follows:

Note that this example initializes the text attribute of label to the saying attribute of mode through the BIND operation of javafx. Here, the BIND operation declares incremental update. This means that when model. Saying changes, the text attribute of the label will be updated to the same value.

For input components, such as buttons, check boxes, and text input fields, the connection between mode attributes and GUI components can be bidirectional.

Consider the following example:

import javafx.ui.*;

class HelloWorldModel {
  attribute saying: String;
}

var model = HelloWorldModel {
  saying: "Hello World"
};

var win = Frame {
  title: bind "{model.saying} JavaFX"
  width: 200
  height: 50
  content: TextField {
  value: bind model.saying
}
  visible: true
};

Run the program as follows:

If you enter other content in the text input field and press enter, the title of the window will change accordingly:

In this case, the value update of the text field is the result of user input (implemented by the textfield class ). When the saying attribute of the model is updated to the same value as the text field, because the title attribute of the window specified by this expression depends on the saying attribute of the model, the expression is recalculated and the title attribute of the window is updated to the above result. However, such content expression is still a statement.