GUI in Java--图形界面窗口

Slide 1: Welcome
In this session, we will learn how we can implement a graphical user interface or GUI in Java.

Slide2: Acknowledgements
The following book contributed to this session:

•    Introduction to Java Programming Language by Y. Daniel Liang

Slide 3:
Many Java applications use a graphical user interface or GUI. A GUI is a graphical window or a system of graphical windows presented by an application for interaction with the user. In addition to accepting input from the keyboard, GUIs typically accept input from a mouse, or a touch screen.

Slide 4:
A window in a GUI commonly consists of several controls that present data to the user and/or allow interaction with the application. Some of the common GUI controls are buttons, labels, text fields, check boxes, and radio buttons.

Slide 5:
When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT). AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects. In addition, AWT is prone to platform-specific bugs. The AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing. Swing components are painted directly on canvases using Java code. Swing components depend less on the target platform, and use less of the native GUI resources. Swing is designed for developing desktop GUI applications. It is now replaced by a completely new GUI platform known as JavaFX. JavaFX incorporates modern GUI technologies to enable you to develop rich GUI applications. In addition, JavaFX provides a multitouch support for touch-enabled devices such as tablets and smart phones.
JavaFX has a built-in 2D, 3D, animation support, and video and audio playback. Using thirdparty software, you can develop JavaFX programs to be deployed on devices running iOS or Android.

Slide 6:
So, JavaFX is a Java library for developing rich applications that employ graphics. You can use it to create:
•    GUI applications, as well as applications that display 2D and 3D graphics
•    standalone graphics applications that run on your local computer
•    applications that run from a remote server, and
•    applications that are embedded in a Web page
 
Slide 7:
JavaFX uses a theater metaphor to describe the structure of a GUI. A theater has a stage. On the stage, a scene is performed by actors.

Slide 8:
A stage (defined by the javafx.stage.Stage class) represents the top-level container and it is an empty window
Slide 9:
The individual controls (or components) are contained in a scene (defined by the javafx.scene.Scene class). An application can have more than one scenes, but only one of the scenes can be displayed on the stage at any given time.
So, the scene is a collection of GUI objects (controls) that are contained within the window. You can think of the GUI objects as the actors that make up the scene.
Slide 10:
The contents of a scene is represented in a hierarchical scene graph of nodes (defined by javafx.scene.Node).
In memory, the GUI objects in a scene are organized as nodes in a scene graph, which is a tree- like hierarchical data structure. A scene graph is a tree-like, hierarchical data structure that contains nodes
Slide 11:
A scene graph can have three types of nodes:

•    Root Node: The scene graph can have only one root node, which is the parent of all the other nodes in the scene graph. It is the first node in the structure.
•    Branch Node: A branch node can have other nodes as children.
•    Leaf Node: A leaf node cannot have children.

In a nutshell, the root node and branch nodes can have children, but leaf nodes cannot. But, how does that relate to components in a GUI? In JavaFX, a node that can have children is a container. It is a component that can hold other components inside of it.
Slide 12:
The Application class of the package javafx.application is the entry point of the application in JavaFX. To create a JavaFX application, you need to inherit this class and implement its abstract method start(). In this method, you need to write the entire code for the JavaFX graphics.
In the main method, you have to launch the application using the launch() method. This method internally calls the start() method of the Application class as shown in the following program.
 
The Application Class is

•    An abstract class that is the foundation of all JavaFX applications
•    JavaFX applications must extend the Application class
•    The Application class has an abstract method named start, which is the entry point for the application
•    Because the start method is abstract, you must override it

Slide 13:
General layout of a JavaFX program includes:
•    Various import statements
•    A class that extends the Application class
•    A start method, and
•    A main method

Slide 14:
This slide shows the necessary import statement.

Slide 15:
This class shows a class that extends the application class.

Slide 16:
The static main method calls the inherited launch method.

Slide 17:
A start method that accepts a Stage argument. This method is called by the inherited launch method.

Slide 18:
We begin by writing a simple JavaFX program that illustrates the basic structure of a JavaFX program. Every JavaFX program is defined in a class that extends javafx.application.Application, as shown in this slide.
The launch method (line 22) is a static method defined in the Application class for launching a stand- alone JavaFX application. The main method (lines 21–23) is not needed if you run the program from the command line. It may be needed to launch a JavaFX program from an IDE with a limited JavaFX support. When you run a JavaFX application without a main method, JVM automatically invokes the launch method to run the application. The main class overrides the start method defined in javafx.application.Application (line 8). After a JavaFX application is launched, the JVM constructs an instance of the class using its no-arg constructor and invokes its start method. The start method normally places UI controls in a scene and displays the scene in a stage as shown in this slide.
Line 10 creates a Button object and places it in a Scene object (line 11). A Scene object can be created using the constructor Scene(node, width, height). This constructor specifies the width and height of the scene and places the node in the scene. A Stage object is a window. A Stage object called primary stage is automatically created by the JVM when the application is launched. Line 13 sets the scene to the primary stage and line 14 displays the primary stage. JavaFX names the Stage
 
and Scene classes using the analogy from the theater. You may think of stage as the platform to support scenes, and nodes as actors to perform in the scenes.

Slide 19:
You can create additional stages if needed. The JavaFX program shown in this slide displays two stages.
Also By default, the user can resize the stage. To prevent the user from resizing the stage, invoke stage.setResizable(false).

Slide 20:
You can use container classes, called panes, for automatically laying out the nodes in a desired location and size. You place nodes inside a pane then place the pane into a scene. A node is a visual component such as a shape, an image view, a UI control, a group, or a pane. A shape refers to a text, line, circle, ellipse, rectangle, arc, polygon, polyline, and so on. A UI control refers to a label, button, check box, radio button, text field, text area, and so on. A group is a container that groups a collection of nodes. You can apply transformations or effects to a group, which automatically apply to all the children in the group. A scene can be displayed in a stage, as shown in (a). The relationship among Stage, Scene, Node, Control, Group, and Pane is illustrated in the UML diagram, as shown in (b). Note a Scene can contain a Control, Group, or a Pane, but not a Shape or an ImageView. A Pane or a Group can contain any subtype of Node. You can create a Scene using the constructor Scene(Parent, width, height) or Scene(Parent). The dimension of the scene is automatically decided in the latter constructor. Every subclass of Node has a no-arg constructor for creating a default node.

Slide 21:
The program creates a StackPane (line 11) and adds a button as a child of the pane (line 12). The getChildren() method Invoks add(e) adds an element to the list. The StackPane places the nodes in the center of the pane on top of each other. Here, there is only one node in the pane. The StackPane respects a node’s preferred size. Therefore, you see the button displayed in its preferred size.

Slide 22:
The program creates a Circle (line 12) and sets its center at (100, 100) (lines 13 and 14), which is also the center for the scene, since the scene is created with the width and height of 200 (line 24). The radius of the circle is set to 50 (line 15). Note the measurement units for graphics in Java are all in pixels. The stroke color (i.e., the color to draw the circle) is set to black (line 16). The fill color (i.e., the color to fill the circle) is set to white (line 17). You may set the color to null to specify that no color is set. The program creates a Pane (line 20) and places the circle in the pane (line 21). The pane is placed in the scene (line 24) and the scene is set in the stage (line 26). The circle is displayed in the center of the stage. However, if you resize the window, the circle is not centered. In order to display the circle centered as the window resizes, the x- and y-coordinates of the circle center need to be reset to the center of the pane. This can be done by using property binding.

Slide 23:
Note the coordinates of the upper-left corner of the pane is (0, 0) in the Java coordinate system, as shown in (a), as opposed to the conventional coordinate system, where (0, 0) is at the center of the window, as shown in (b). The x-coordinate increases from left to right, and the y-coordinate increases downward in the Java coordinate system.

Slide 24:
JavaFX introduces a new concept called property binding that enables a target object to be bound to a source object. If the value in the source object changes, the target object is also automatically changed. The target object is called a binding object or a binding property, and the source object is called a bindable object or observable object.
 
Slide 25:
The Circle class has the centerX property for representing the x-coordinate of the circle center. This property like many properties in JavaFX classes can be used both as target and source in a property binding. A binding property is an object that can be bound to a source object. A target listens to the changes in the source and automatically updates itself once a change is made in the source. A target binds with a source using the bind method as target.bind(source);

Slide 26:
Nodes share many common properties. We introduce two such properties: style and rotate. JavaFX style properties are similar to cascading style sheets (CSS) used to specify the styles for HTML elements in a Web page. Therefore, the style properties in JavaFX are called JavaFX CSS. In JavaFX, a style property is defined with a prefix –fx–. Each node has its own style properties. You can find these properties at the link shown in this slide. The syntax for setting a style is styleName:value.
Multiple style properties for a node can be set together separated by semicolon (;). For example, the statement shown in this slide sets two JavaFX CSS properties for a circle and is equivalent to the following two statements:
circle.setStroke(Color.BLACK); circle.setFill(Color.RED);
If an incorrect JavaFX CSS is used, your program will still compile and run, but the style will be ignored.
The rotate property enables you to specify an angle in degrees for rotating a node from its center. If the degree is positive, the rotation is performed clockwise; otherwise, it is performed counterclockwise. For example, the following code rotates a button 80 degrees: button.setRotate(80);

Slide 27:
This slide gives an example that creates a button, sets its style, and adds it to a pane. It then rotates the pane 45 degrees and sets its style with border color red and background color light gray.
The Node class contains many useful methods that can be applied to all nodes. For example, you can use the contains(double x, double y) method to test whether a point (x, y) is inside the boundary of a node and use the setScaleX(double scale) and setScaleY(double scale) methods to scale a node.

Slide 28:
JavaFX defines the abstract Paint class for painting a node. The javafx.scene.paint.Color is a concrete subclass of Paint, which is used to encapsulate colors, as shown in this slide.

Slide 29:
A Font describes font name, weight, and size. You can set fonts for rendering the text. The javafx.scene.text.Font class is used to create fonts, as shown in this slide.

Slide 30:
After running the code shown in this slide, a label is on top of a circle displayed in the center of the scene.

Slide 31:
The javafx.scene.image.Image class represents a graphical image and is used for loading an image from a specified filename or a URL.
For example, new Image("image/us.gif") creates an Image object for the image file us.gif under the directory image in the Java class directory

Slide 32:
The javafx.scene.image.ImageView is a node for displaying an image. An ImageView can be created from an Image object.
 
Slide 33:
After running the code shown in this slide, an image is displayed in three image views placed in a pane.

Slide 34:
Panes and groups are the containers for holding nodes. The Group class is often used to group nodes and to perform transformation and scale as a group. Panes and UI control objects are resizable, but group, shape, and text objects are not resizable. JavaFX provides many types of panes for organizing nodes in a container, as shown in this slide.
A Pane is usually used as a canvas for displaying shapes. Pane is the base class for all specialized panes.

Slide 35:
FlowPane arranges the nodes in the pane horizontally from left to right, or vertically from top to bottom, in the order in which they were added. When one row or one column is filled, a new row or column is started. You can specify the way the nodes are placed horizontally or vertically using one of two constants: Orientation.HORIZONTAL or Orientation. VERTICAL. You can also specify the gap between the nodes in pixels.

Slide 36:
After running the code shown in this slide, The nodes fill in the rows in the FlowPane one after another.

Slide 37:
The program creates a FlowPane (line 13) and sets its padding property with an Insets object (line 14). An Insets object specifies the size of the border of a pane. The constructor Insets(11, 12, 13, 14) creates an Insets with the border sizes for top (11), right (12), bottom (13), and left (14) in pixels, as shown in this slide. You can also use the constructor Insets(value) to create an Insets with the same value for all four sides. The hGap and vGap properties are in lines 15 and 16 to specify the horizontal gap and vertical gap, respectively, between two nodes in the pane.

Slide 38:
A GridPane arranges nodes in a grid (matrix) formation. The nodes are placed in the specified column and row indices. The class diagram for GridPane is shown in this slide.

Slide 39:
This slide illustrates how GridPane arranges its content in a grid with columns and rows. The columns and rows are identified by indexes.

Slide 40:
You add controls to the container using the add method and specifying the column and the row.

Slide 41:
This slide shows how you add labels to GridPane container.

Slide 42:
You can also use setHgap and setVgap methods to add horizontal and vertical spacing between the columns and the rows.

Slide 43:
The GridPane container also has a setPadding method to set the padding around the container’s inside edge.
 
Slide 44:
After running the code shown in this slide, The GridPane places the nodes in a grid with a specified column and row indices.

Slide 45:
A BorderPane can place nodes in five regions: top, bottom, left, right, and center, using the setTop(node), setBottom(node), setLeft(node), setRight(node), and setCenter(node) methods. The class diagram for BorderPane is shown in this slide.

Slide 46:
An HBox lays out its children in a single horizontal row. A VBox lays out its children in a single vertical column. Recall that a FlowPane can lay out its children in multiple rows or multiple columns, but an HBox or a VBox can lay out children only in one row or one column. The class diagram for HBox is shown in this slide.

Slide 47:
The class diagram for VBox is shown in this slide.

Slide 48:
The program shown in this slide places two buttons and an image view in an HBox and five labels in a VBox.

Slide 49:
As we have seen in the previous slides, to get the particular screen layout that you desire, you will sometimes have to nest layout containers.