The beginning of Java GUI Program Design

In practical applications, many of the application interfaces we see belong to GUI. For example, click the QQ icon to bring up a dialog box on the QQ logon interface. This QQ icon can be called a graphical user interface.

In fact, there are two types of user interfaces: Command line UserInterface (Command line User Interface)

• Is a common doscommand line operation.

• You need to remember some common commands, which are not intuitive.

Example:

• For example, creating a folder or deleting a folder

Example MS-DOS

2. Graphical User Interface (GUI) is a program running Interface that interacts with users in a Graphical manner, such as Microsoft Windows and Word.

Advantages: it is more friendly and rich, and provides flexible and powerful human-computer interaction functions, becoming the mainstream of application design.

In the GUI program design, components are the basic components of the GUI. All objects that can be displayed on the screen in a graphical manner and can interact with users are components.

For example, all are GUI components.

 

In addition, multiple GUI component classes are defined in the JDK java. awt package, such as Window, Menu, Button, Label, TextField, and Scrollbar.

 

These abstract classes define the basic features and functions of GUI components.

It can be seen that the components in the GUI can be divided:

　
Note the following:

1. The Container class describes all the properties of Container components;

2. It inherits from the Component class, so the container class object itself is also a Component and has all the properties of the Component, but in turn the Component is not necessarily a container;

3. to display the control component, it must be placed in the container component.

The components of the container type can be seen under the java. awt package. Note that there are two main container types in AWT:

1. java. awt. Window
It describes a top-level container that has no borders or menu bar and can be freely docked (that is, it cannot be included in other containers). Generally, this class is not directly used, instead, it uses its subclass Frame.

2. java. awt. Panel
The simplest and most commonly used container can contain other components as a container, but it cannot exist independently and must be added to other containers.

Case:

Example 1: The first GUI application.

Importjava. awt .*;

ClassTestFirstFrame {

Public static void main (String args []) {

Frame frame = new Frame ("first graphic user interface application"); // container

Label lbl = new Label ("this is my first graphic user interface! "); // Control Component

Lbl. setBackground (Color. pink );

Frame. setLayout (new FlowLayout ());

Frame. add (lbl); // add the control component to the container

Frame. setSize (200,100 );

Frame. setVisible (true );

}

}

 

Note the following:

1. The default size of the Frame is to accommodate the title bar and the smallest (BIG), close button. setSize () can be used to set the Frame size.

2. The Frame window is invisible by default. You can use setVisible (true | false) to make it visible or hidden.

3. The placement position of components in the container is determined by the layout manager. Frame uses the setLayout () method to set the layout of the window.

4. FlowLayout-streaming layout management. The feature is that the component is located row by row in the container in order of adding. The line is left to right, and the line is full before the line is wrapped.

Instance 2. Use of the container component Panel.

Frame frame = new Frame ("use of container Panel ");

Panel panel = new Panel ();

Button btn = new Button ("OK ");

Panel. setBackground (Color. cyan );

Panel. setSize (100,50 );

Panel. setLocation (40, 40 );

Frame. setLayout (null );

Frame. add (panel );

Panel. add (btn );

Frame. setLocation (80,100 );

Frame. setSize (200,100 );

Frame. setVisible (true );

Note:

1. The default layout handler of the frame is canceled. The size and position of the panel are manually set in the container;

2. The setSize () method is used to set the component size, that is, the width and height, in pixels;

3. The setLocation () method is used to set the position of the component in the container, that is, the upper left corner of the component, that is, the vertex coordinate in the upper left corner of the component, and the Unit is pixel.

4. Each GUI container has its own coordinate system (the computer's display screen is also a GUI container)

 

Location relationship

 

We can see that layout is very important in GUI program design. In GUI programming, containers arrange the components contained in the container, including setting the position and size of the component, which is called the Layout of the container ). It refers to the layout effects of several containers defined in advance by the system, which can be used to conveniently manage components in the container layout and meet various general needs. For example, FlowLayout.

Note:

Each container has a default layout manager. When creating a container object, a corresponding default layout manager object is also created, you can also create and set a new layout manager for the container at any time.
Method:

 

Container object. setLayout (layout manager object)
Layout manager container object. getLayout ()

 

Therefore, it is very important to understand the common layout manager.

FlowLayout: streaming layout, which is the default layout manager type for Panel (and its subclass) containers.

 

Layout effect: the component is located row by row in the order of adding in the container. The line is left to right, and the line is full before the line is wrapped. The component is displayed in the original size.

 

Constructor
Public FlowLayout () // center alignment by default, horizontal and vertical spacing of 5 pixels
Public FlowLayout (int align) // specifies the alignment mode.
Public FlowLayout (int align, int hgap, int vgap) // horizontal and vertical spacing of components

 

The alignment mode can be set by defining static constants in the FlowLayout class, including:
FlowLayout. LEFT alignment
FlowLayout. RIGHT
FlowLayout. CENTER alignment

 

Example 1: Use of stream layout.

F. setLayout (new FlowLayout ());

F. add (button1 );

F. add (button2 );

F. add (button3 );

Effect

　　　　　　

Note:

When the size of container f is reset, the position of the component is adjusted, but the size of the component remains unchanged.

 

BorderLayout: border layout, which is the default layout manager for Windows and its sub-class containers.

Layout effect: the entire container is divided into five areas: East, West, South, North, and Center. The component can only be added to the specified area.

　　　

It is worth noting that:

1. Only one component can be added to each region. If more than one component is added, the previously added component will be abandoned.

2. In the container that uses the border layout, the component size is also forcibly controlled by the layout manager, that is, the size of the component is the same as that in the region where it is located.

 

Constructor
Public BorderLayout ()
Public BorderLayout (int hgap, int vgap)

 

Example 2: Use of BorderLayout.

F. setLayout (new BorderLayout (); // This statement can also be removed. The default Frame layout is BorderLayout.

// Add components to different orientations of the container. You can also use the String constants defined in BorderLayout, for example, NORTH, SOUTH, WEST, and EAST.

 

F. add (btnNorth, "North ");

F. add (btnSouth, "South ");

F. add (btnWest, "West ");

F. add (btnEast, "East ");

F. add (btnCenter, "Center"); // if the position of the component is not specified, the component is added to the Center area by default.

Note:

1. When the container size changes, the relative positions of each component remain unchanged, and the size scales with the region;

 

2. Adjustment Principle: The North and South regions can only be scaled in the horizontal direction (adjustable width), the east and west regions can only be scaled in the vertical direction (adjustable height), and the central region can be scaled.

 

 

In the actual learning process, we need to understand the basic attributes and operation methods of the Conpoment class:

 

Understanding these attributes and methods is very helpful for us to learn how to develop GUI.