实验五 图形用户界面

实验五 图形用户界面

【开发语言及实现平台或实验环境】

Windows2000 或XP，JDK1.6

【实验目的】

1. 了解图形用户界面基本组件窗口、按钮、文本框、选择框、滚动条等的使用方法， 2. 了解如何使用布局管理器对组件进行管理，以及如何使用Java 的事件处理机制。

【实验要求】

1. 掌握在Applet 容器中添加组件的方法，掌握使用布局管理器对组件进行管理的方法。

2. 理解Java 的事件处理机制，掌握为不同组件编写事件处理程序的方法。

3. 掌握编写独立运行的窗口界面的方法。

4. 了解Java Swing 组件的使用方法。

5. 了解对话框的使用方法。

【实验内容】

一．创建图形用户界面

图形用户界面（Graphic User Interface ，简称GUI）是为方便用户使用设计的窗口界面，在图形用户界面中用户可以看到什么就操作什么，取代了在字符方式下知道是什么后才能操作什么的方式。组件（Component）是构成GUI 的基本要素，通过对不同事件的响应来完成和用户的交互或组件之间的交互。组件一般作为一个对象放置在容器（Container）内，容器是能容纳和排列组件的对象，如Applet、Panel（面板）、Frame（窗口）等。通过容器的add 方法把组件加入到容器中。

1． 在Applet 中添加标签、按钮并使用网格布局

（1） 程序功能：在Applet 容器中添加组件标签、按钮，并使用网格布局管理器排列组件在容器中的位置。

（2） 编写LX5_1.java 程序文件，源代码如下。

import java.awt.*;

import java.applet.Applet;

public class LX5_1 extends Applet {

Label l1;

Button b1, b2, b3, b4, b5, b6;

public void init() {

setLayout(new GridLayout(3,3)); // 设置网格布局（3 行3 列共9 个网格） l1=new Label("标签1");

b1 = new Button("按钮1");

b2 = new Button("按钮2");

b3 = new Button("按钮3");

b4 = new Button("按钮4");

add(l1);

add(b1);

add(b2);

add(b3);

add(new Label());

add(b4);

add(new Button("按钮5"));

add( new Button("按钮6"));

add(new Label("标签2"));

}

}

（3） 编译程序LX5_1.java。

（4） 编写显示Applet 的页面文件LX5_1.html，在浏览器显示结果如图6.1 所示。

2． 在面板中添加组件

（1） 程序功能：在Applet 中添加面板容器，并分别在Applet、面板容器中添加组件并使用不同的布局管理方式。

（2） 编写LX5_2.java 程序文件，源代码如下。

import java.awt.*;

import java.awt.Color;

import java.applet.Applet;

public class LX5_2 extends Applet {

public void init() {

//设置最底层的 Applet 容器为顺序布局

setFont(new Font("Arial",Font.PLAIN,20));

Label l=new Label("这是最底层的 Applet 容器中的标签",Label.CENTER);

add(l);

Panel panel1=new Panel();

add( panel1);

panel1.setBackground(Color.blue);

panel1.setForeground(Color.red);

panel1.setLayout(new BorderLayout());//设置边界布局

panel1.add("North", new Button("北"));

panel1.add("South", new Button("南"));

panel1.add("East", new Button("东"));

panel1.add("West", new Button("西"));

panel1.add("Center", new Label("这是在 Panel1 面板 中部添加的标签"));

Panel panel2=new Panel();

add( panel2);

panel2.setLayout(new GridLayout(3,1)); //设置网格布局

Choice c=new Choice ();//创建下拉式列表

c.addItem("北京");

c.addItem("上海");

c.addItem("天津");

Label l1=new Label("这是在 Panel2 面板中的标签");

Button b1=new Button("Panel2 中的按钮");

panel2.setBackground(Color.green);

panel2.add(l1);

panel2.add(b1);

panel2.add(c);

}

}

（3） 编译程序LX5_2.java。

（4） 编写显示Applet 的页面文件LX5_2.html，在浏览器显示结果如图6.2 所示。

二．了解事件处理机制

在图形用户界面中，程序和用户的交互是通过组件响应各种事件来实现的。例如，用户单击了一个按钮，意味着发生了按钮的单击事件；选中下拉框中的一个选项，意味着发生了一个选项事件。在Java 中能产生事件的组件叫做事件源，如按钮。如果希望对单击按钮事件进行处理，可给事件源（按钮）注册一个事件监听器（如包含按钮的容器），如同签订了一个委托合同，当事件源发生事件时，事件监听器就代替事件源对发生的事件进行处理，这就是所谓的委托事件处理机制。

1．单击按钮的事件处理程序

（1）程序功能：使用手工布局设置组件标签、按钮的位置，为按钮编写单击事件处理方法。当用户用鼠标单击按钮时，会听到一声响声。

（2）编写LX5_3.java 程序文件，源代码如下。

import java.awt.*;

import java.awt.event.*;

import java.applet.Applet;

public class LX5_3 extends Applet implements ActionListener { // 实现动作事件监听接口

public void init() {

setLayout(null);//关闭默认的顺序管理布局

Label l=new Label("按一下按钮可听到响声！", Label.CENTER);

add(l);

l.setBounds(40,10,150,30);

Button b=new Button("按钮");

add(b);

b.setBounds(60,50,60,40);

b.addActionListener (this); // 注册事件源的动作监听者

}

public void actionPerformed(ActionEvent e) {//实现单击事件接口的方法

Toolkit.getDefaultToolkit ().beep(); //单击事件发生时作出的反应

}

}

（3）编译程序LX5_2.java。

（4）编写显示Applet 的页面文件LX5_3.html，在浏览器显示结果如图6.3 所示。

2. 选择复选框和单选框按钮的事件处理程序

（1） 程序功能：在Applte 上创建复选框、单选框、文本区域、单行文本框等组件，并实现根据用户输入的10 进制数，选择不同选项可转换为2、8、16 进制数。

（2） 编写LX5_4.java 程序文件，源代码如下。

import java.applet.Applet;

import java.awt.*;

import java.awt.event.*;

public class LX5_4 extends Applet implements ItemListener {

TextArea area=new TextArea(6,30);//创建文本区

String Item[]={"2 进制","8 进制","16 进制","10 进制"};

Checkbox cb[]=new Checkbox[5];

Checkbox radio[]=new Checkbox[5];

Label l=new Label("输入10 进制数");

TextField TF=new TextField(6);//创建单行文本框

public void init() {

add(l);add(TF);

add(area);

add(new Label(" 请选择进制："));

for(int i=0; i<4; i++) {

cb[i]=new Checkbox(Item[i]);

add(cb[i]);

cb[i].addItemListener(this);

}

CheckboxGroup cbGroup=new CheckboxGroup();//创建单选框

add(new Label("请选择进制："));

for(int i=0; i<4; i++) {

radio[i]=new Checkbox(Item[i],cbGroup,false);

add(radio[i]);

radio[i].addItemListener(this);

}

}

public void itemStateChanged(ItemEvent e) {

int x=Integer.parseInt(TF.getText());

if (e.getItem ()=="2 进制")

area.append ("你选择的是"+e.getItem ()+ Integer.toBinaryString(x)+"\n"); if (e.getItem ()=="8 进制")

area.append ("你选择的是"+e.getItem ()+ Integer.toOctalString(x)+"\n"); if (e.getItem ()=="16 进制")

area.append ("你选择的是"+e.getItem ()+Integer.toHexString(x)+"\n");

if (e.getItem ()=="10 进制")

area.append ("你选择的是"+e.getItem ()+x+"\n");

}

}

（3） 编译程序LX5_4.java。

（4） 编写显示Applet 的页面文件LX5_4.html，在浏览器显示结果如图6.4 所示。

三．建立独立运行的窗口界面并使用匿名类

最常使用的包含组件的容器是窗口，在Java 中窗口由Frame 类生成。

1．创建一个窗口界面

（1）程序功能：创建一个具有关闭功能的空白窗口。

（2）编写LX5_5_W.java 程序文件，源代码如下。

import java.awt.*;

import java.awt.event.*;

public class LX5_5_W {

public static void main(String[] args) {

new LX5_5_W();

}

LX5_5_W(){

Frame f=new Frame("初始窗口");//创建窗口对象

f.setSize(350,200);//设置窗口大小

f.setVisible(true);//设置窗口是可视的

f.addWindowListener(new WindowAdapter() {//为窗口添加窗口事件适配器

public void windowClosing(WindowEvent e) {//关闭窗口事件的方法

System.exit(0);

}

});

}

}

（3）编译并运行程序，会出现一个界面窗口如图6.5 所示。它可以最大化、最小化，单击×按钮可以关闭该窗口。

2．在窗口中添加组件

（1）程序功能：在窗口中添加组件。

（2）编写LX5_6.java 程序文件，源代码如下。

import java.awt.*;

import java.awt.event.*;

public class LX5_6 extends Frame implements ActionListener {

Button btn1, btn2;

TextField f,tf1,tf2;

TextArea Area;

LX5_6() {

super("添加组件的窗口");

addWindowListener(new WindowAdapter() {

public void windowClosing(WindowEvent e) {

System.exit(0);

}

});

setSize(350,250); //设置窗口大小

setLocation(200,200);//设置窗口显示位置

setFont(new Font("Arial",Font.PLAIN,12)); //设置字体

setLayout(new FlowLayout());

Area=new TextArea (6,40);

tf1=new TextField(10); tf2=new TextField(10);

btn1=new Button("显示"); btn2=new Button("退出");

f=new TextField(20);

add(Area); add(new Label("用户名"));

add(tf1); add(new Label("电话"));

add(tf2); add(f); add(btn1); add(btn2);

tf1.addActionListener(this); tf2.addActionListener(this);

btn1.addActionListener(this); btn2.addActionListener(this);

show();

}

public static void main(String args[]) {

new LX5_6();

}

public void actionPerformed(ActionEvent e) {

if (e.getSource()==btn1)

f.setText("你按下了“" + e.getActionCommand() + "”按钮");

if (e.getSource()==tf1)

Area.append("用户名："+tf1.getText()+"\n");

if (e.getSource()==tf2)

Area.append("电 话："+tf2.getText()+"\n");

if (e.getSource()==btn2) {

for (int i=0; i<100000000; i++);

dispose();//只关闭当前窗口,注销该对象

}

}

}

（3）编译并运行程序，界面窗口如图6.6 所示。

3．为窗口添加菜单

（1）程序功能：在窗口中添加菜单栏，在菜单栏添加菜单项，并添加下拉菜单和2 级菜单，通过选择菜单项可以执行不同操作，如“打开”可打开LX5_6 类生成的窗口。

（2）编写LX5_7.java 程序文件，源代码如下。

import java.awt.*;

import java.awt.event.*;

public class LX5_7 extends Frame implements ActionListener {

Panel p=new Panel();

Button b=new Button("退出");

MenuBar mb=new MenuBar(); // 以下生成菜单组件对象

Menu m1=new Menu("文件");

MenuItem open=new MenuItem("打开");

MenuItem close=new MenuItem("关闭");

MenuItem exit=new MenuItem("退出");

Menu m12=new Menu("编辑");

MenuItem copy=new MenuItem("复制");

MenuItem cut=new MenuItem("剪切");

MenuItem paste=new MenuItem("粘贴");

Menu m2=new Menu("帮助");

MenuItem content=new MenuItem("目录");

MenuItem index=new MenuItem("索引");

MenuItem about=new MenuItem("关于");

LX5_7() {

super("添加菜单的窗口");

setSize(350,200);

add("South",p);

p.add(b);

b.addActionListener(this);

m1.add(open); // 将菜单项加入到菜单m1 中

m1.add(close);

m1.addSeparator(); //在菜单中添加分隔条

m1.add(exit);

open.addActionListener(this); //给菜单项open 注册事件监听器

exit.addActionListener(this);

mb.add(m1); // 将菜单m1 加入到菜单栏mb 中

m12.add(copy); m12.add(cut); m12.add(paste);

m1.add(m12);//将m12 作为2 级菜单添加到m1 菜单项中

m2.add(content); m2.add(index); m2.addSeparator(); m2.add(about);

mb.add(m2);

setMenuBar(mb); // 设置菜单栏为mb

show();// 显示组件}

public static void main(String args[]) {

new LX5_7();}

public void actionPerformed(ActionEvent e) {

if (e.getActionCommand()=="退出")

System.exit(0);

if (e.getActionCommand()=="打开")

new LX5_6();}

}

（3）编译并运行程序，界面窗口如图6.7 所示。

四．使用Swing 组件

在Java 中，能够实现图形用户界面的类库有两个：java.awt 和javax.swing。前者称为抽象窗口工具库AWT（Abstract Windows Toolkit），后者是Java 基础类库JFC（Java Foundation Classes）的一个组成部分，它提供了一套功能更强、数量更多、更美观的图形用户界面组件。Swing 组件名称和AWT 组件名称基本相同，但以J 开头，例如AWT 按钮类的名称是Button，在Swing 中的名称则是JButton。

1．在JApplet 中添加Swing 组件

（1）程序功能：在JApplet 中添加3 个带有图片的按钮和一个带有图片的标签。

（2） 准备图片文件： 在当前目录下建立一个image 文件夹， 存放4 个图片文件，PreviousArrow.gif。

（3）编写LX5_8.java 程序文件，源代码如下。

import javax.swing.*;

import java.awt.*;

import java.awt.Color;

public class LX5_8 extends JApplet {

Container pane;

JPanel panel1,panel2;

JButton button1,button2,button3;

JLabel label;

public void init() {

pane=getContentPane();

panel1=new JPanel(new FlowLayout());

panel2=new JPanel(new FlowLayout());

ImageIcon icon = new ImageIcon("image/PreviousArrow.gif"," ");

button1=new JButton(icon);

button2=new JButton(new ImageIcon("image/go.GIF"));

button3=new JButton(new ImageIcon("image/NextArrow.gif"));

label=new JLabel("图像标签",

new ImageIcon("image/Candl02.gif"),SwingConstants.CENTER);

pane.setBackground(new Color(255,255,200));

panel1.setBackground(new Color(255,255,104));

panel2.setBackground(new Color(255,255,214));

button1.setToolTipText("向上翻页按钮");

button2.setToolTipText("跳转按钮");

button3.setToolTipText("向下翻页按钮");

pane.add("North",panel1);

pane.add(panel2,BorderLayout.SOUTH);

panel1.add(button1);

panel1.add(button2);

panel1.add(button3);

panel2.add(label);

}

} 例如

（4）编译LX5_8.java。

（5）编写显示LX5_8.class 的页面文件。

（6）使用appletviewer 查看程序，结果如图6.8 所示。

2.在JFrame 窗口中添加组件

（1）程序功能：创建JFrame 窗口，并在其中添加工具栏。

（2）准备图片文件： 在当前目录下建立一个image 文件夹， 存放3 个图片文件， 例如PreviousArrow.gif。

（3）编写LX5_9.java 程序文件，源代码如下。

import javax.swing.*;

import java.awt.*;

import java.awt.event.*;

public class LX5_9 extends JFrame implements ActionListener {

JButton button1,button2,button3;

JToolBar toolBar;

JTextArea textArea;

JScrollPane scrollPane;

JPanel panel;

public static void main(String[] args) {

new LX5_9();

}

public LX5_9() {

super("带有工具栏按钮的窗口");

addWindowListener(new WindowAdapter() {

public void windowClosing(WindowEvent e) {

System.exit(0);

}

});

button1=new JButton(new ImageIcon("image/PreviousArrow.gif"));

button2=new JButton(new ImageIcon("image/go.GIF"));

button3=new JButton(new ImageIcon("image/NextArrow.gif"));

button1.addActionListener(this);

button2.addActionListener(this);

button3.addActionListener(this);

toolBar=new JToolBar();

toolBar.add(button1);

toolBar.add(button2);

toolBar.add(button3);

textArea=new JTextArea(6,30);

scrollPane=new JScrollPane(textArea);

panel=new JPanel();

setContentPane(panel);

panel.setLayout(new BorderLayout());

panel.setPreferredSize(new Dimension(300,150));

panel.add(toolBar,BorderLayout.NORTH);

panel.add(scrollPane,BorderLayout.CENTER);

pack();

show();

}

public void actionPerformed(ActionEvent e) {

String s="";

if (e.getSource()==button1)

s="左按钮被单击\n";

else if (e.getSource()==button2)

s="中按钮被单击\n";

else if (e.getSource()==button3)

s="右按钮被单击\n";

textArea.append(s);

}

}

（4）编译LX5_9.java。

（5）运行LX5_9.class，产生的窗口界面如图6.9 所示。

五．使用自定义对话框与内部类

对话框是GUI 中很常见的窗口对象，有着广泛的应用。对话框和普通窗口最大的不同就是对话框是依附在某个窗口上，一旦它所依附的窗口关闭了，对话框也要随着关闭。Java 提供了Dialog 类用于制作自定义对话框，当需要改变一些数据或需要一个提示窗口时可使用自定义对话框。

1．创建自定义对话框的应用程序

（1）程序功能：创建一个带有文本区及“对话框”按钮的父窗口，单击“对话框”按钮可打开一个自定义对话框，从中可以定义行和列的数值，关闭对话框其设置的设置会显示在父窗口的文本区中。

（2）编写LX5_10.java 程序文件，源代码如下。

import javax.swing.*;

import java.awt.*;

import java.awt.event.*;

public class LX5_10 extends JFrame implements ActionListener {

int row=10, col=40;

JPanel p1=new JPanel(), p2=new JPanel();

JTextArea ta=new JTextArea("文本区行数:"+row+" 列数:"+col, row, col); JScrollPane scrollPane=new JScrollPane(ta);

Button exit=new Button("关闭");

Button dialog=new Button("对话框");

JPanel panel=new JPanel();

LX5_10() {

setContentPane(panel);

setTitle("带有对话框的父窗口");

panel.setPreferredSize(new Dimension(500,200));

panel.setLayout(new BorderLayout());

panel.add("Center", p1); panel.add("South", p2);

p1.add(scrollPane);

p2.add(exit); p2.add(dialog);

exit.addActionListener(this);

dialog.addActionListener(this);

pack();

show();

//setVisible(true);}

public static void main(String args[]) {

new LX5_10();}

public void actionPerformed(ActionEvent e) {

if (e.getSource()==exit)

System.exit(0);

else {

MyDialog dlg=new MyDialog(this, true);

dlg.show();}

}

class MyDialog extends Dialog implements ActionListener {

Label label1=new Label("请输入行数");

Label label2=new Label("请输入列数");

TextField rows=new TextField(50);

TextField columns=new TextField(50);

Button OK=new Button("确定");

Button Cancel=new Button("取消");

MyDialog(LX5_10 parent, boolean modal) {

super(parent,modal);

setTitle("自定义对话框");

setSize(260,140);

setResizable(false);

setLayout(null);

add(label1);

add(label2);

label1.setBounds(50,30,65,20);

label2.setBounds(50,60,65,20);

add(rows);

add(columns);

rows.setText(Integer.toString(ta.getRows()));

columns.setText(Integer.toString(ta.getColumns()));

rows.setBounds(120,30,90,20);

columns.setBounds(120,60,90,20);

add(OK);

add(Cancel);

OK.setBounds(60,100,60,25);

Cancel.setBounds(140,100,60,25);

OK.addActionListener(this);

Cancel.addActionListener(this);}

public void actionPerformed(ActionEvent e) {

if(e.getSource()==OK) {

int row=Integer.parseInt(rows.getText());

int col=Integer.parseInt(columns.getText());

ta.setRows(row);

ta.setColumns(col);

ta.setText("文本区行数:"+row+" 列数:"+col);

show();}

dispose();}

}

}

2．编译并运行程序，在父窗口中单击“对话框”按钮会出现“自定义对话框”窗口，如图

6.10所示窗口。设置对话框中参数，单击“确定”按钮，可关闭自定义对话框，并可看到父窗口中出现的变化，如图6.11 所示。

3．程序分析：本程序包括两个类，一个是程序的主类LX5_10，另外一个是MyDialog 类，它是Dialog（对话框）派生的子类，它是作为LX5_10 的内部类创建的，内部类有一个好处就

是可以随意访问主类的成员。在MyDialog 的构造方法中，以主类为父窗口调用了父类的构造方法，生成一个有模式对话框窗口。

此外，MyDialog 类中采用了手工布局方式来安排各组件的位置。两个文本框用来显示和输入数值，点击“确定”按钮后，用这两个数值设定主类中文本区的行列数。无论点击“确定”还是“取消”，最后都调用dispose 方法来关闭自定义对话框。

【实习题】

1. 编写Applet程序实现一个计算器，包括10个数字（0~9）按钮和4

个运算符（加，减，乘，除）按钮，以及等号和清空两个辅助按钮，还有一个显示输入输出的文本域。

本实验需上交第二次上机报告

本文来源：https://www.bwwdw.com/article/8k11.html