《實驗五 圖形用戶界面》由會員分享，可在線閱讀，更多相關(guān)《實驗五 圖形用戶界面（17頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、實驗五 圖形用戶界面
【開發(fā)語言及實現(xiàn)平臺或?qū)嶒灜h(huán)境】
Windows2000 或XP，JDK1.6
【實驗?zāi)康摹?
1. 了解圖形用戶界面基本組件窗口、按鈕、文本框、選擇框、滾動條等的使用方法，
2. 了解如何使用布局管理器對組件進(jìn)行管理，以及如何使用Java 的事件處理機(jī)制。
【實驗要求】
1. 掌握在Applet 容器中添加組件的方法，掌握使用布局管理器對組件進(jìn)行管理的方法。
2. 理解Java 的事件處理機(jī)制，掌握為不同組件編寫事件處理程序的方法。
3. 掌握編寫?yīng)毩⑦\(yùn)行的窗口界面的方法。
4. 了解Java Swing 組件的使用方法。
5. 了解對話框的使用方法
2、。
【實驗內(nèi)容】
一．創(chuàng)建圖形用戶界面
圖形用戶界面（Graphic User Interface ，簡稱GUI）是為方便用戶使用設(shè)計的窗口界面，在圖形用戶界面中用戶可以看到什么就操作什么，取代了在字符方式下知道是什么后才能操作什么的方式。組件（Component）是構(gòu)成GUI 的基本要素，通過對不同事件的響應(yīng)來完成和用戶的交互或組件之間的交互。組件一般作為一個對象放置在容器（Container）內(nèi)，容器是能容納和排列組件的對象，如Applet、Panel（面板）、Frame（窗口）等。通過容器的add 方法把組件加入到容器中。
1． 在Applet 中添加標(biāo)簽、按鈕并使用網(wǎng)格布局
3、（1） 程序功能：在Applet 容器中添加組件標(biāo)簽、按鈕，并使用網(wǎng)格布局管理器排列組件在容器中的位置。
（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)); // 設(shè)置網(wǎng)格布局（3 行3 列共9 個網(wǎng)格）
l1=new La
4、bel("標(biāo)簽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("標(biāo)簽2"));
}
}
（3） 編譯程序LX5_1.java。
（4） 編寫顯示Applet 的
5、頁面文件LX5_1.html，在瀏覽器顯示結(jié)果如圖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() {
//設(shè)置最底層的 Applet 容器為順序布局
setFo
6、nt(new Font("Arial",Font.PLAIN,20));
Label l=new Label("這是最底層的 Applet 容器中的標(biāo)簽",Label.CENTER);
add(l);
Panel panel1=new Panel();
add( panel1);
panel1.setBackground(Color.blue);
panel1.setForeground(Color.red);
panel1.setLayout(new BorderLayout());//設(shè)置邊界布局
panel1.add("North", new Button("北"));
7、
panel1.add("South", new Button("南"));
panel1.add("East", new Button("東"));
panel1.add("West", new Button("西"));
panel1.add("Center", new Label("這是在 Panel1 面板 中部添加的標(biāo)簽"));
Panel panel2=new Panel();
add( panel2);
panel2.setLayout(new GridLayout(3,1)); //設(shè)置網(wǎng)格布局
Choice c=new Choice ();//創(chuàng)建下拉式列表
8、c.addItem("北京");
c.addItem("上海");
c.addItem("天津");
Label l1=new Label("這是在 Panel2 面板中的標(biāo)簽");
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，在瀏覽器顯示結(jié)果如圖6.2 所示。
二
9、．了解事件處理機(jī)制
在圖形用戶界面中，程序和用戶的交互是通過組件響應(yīng)各種事件來實現(xiàn)的。例如，用戶單擊了一個按鈕，意味著發(fā)生了按鈕的單擊事件；選中下拉框中的一個選項，意味著發(fā)生了一個選項事件。在Java 中能產(chǎn)生事件的組件叫做事件源，如按鈕。如果希望對單擊按鈕事件進(jìn)行處理，可給事件源（按鈕）注冊一個事件監(jiān)聽器（如包含按鈕的容器），如同簽訂了一個委托合同，當(dāng)事件源發(fā)生事件時，事件監(jiān)聽器就代替事件源對發(fā)生的事件進(jìn)行處理，這就是所謂的委托事件處理機(jī)制。
1．單擊按鈕的事件處理程序
（1）程序功能：使用手工布局設(shè)置組件標(biāo)簽、按鈕的位置，為按鈕編寫單擊事件處理方法。當(dāng)用戶用鼠標(biāo)單擊按鈕時，會聽到一聲
10、響聲。
（2）編寫LX5_3.java 程序文件，源代碼如下。
import java.awt.*;
import java.awt.event.*;
import java.applet.Applet;
public class LX5_3 extends Applet implements ActionListener { // 實現(xiàn)動作事件監(jiān)聽接口
public void init() {
setLayout(null);//關(guān)閉默認(rèn)的順序管理布局
Label l=new Label("按一下按鈕可聽到響聲！", Label.CENTER);
add(l);
l.se
11、tBounds(40,10,150,30);
Button b=new Button("按鈕");
add(b);
b.setBounds(60,50,60,40);
b.addActionListener (this); // 注冊事件源的動作監(jiān)聽者
}
public void actionPerformed(ActionEvent e) {//實現(xiàn)單擊事件接口的方法
Toolkit.getDefaultToolkit ().beep(); //單擊事件發(fā)生時作出的反應(yīng)
}
}
（3）編譯程序LX5_2.java。
（4）編寫顯示Applet 的頁面文件LX5_3.ht
12、ml，在瀏覽器顯示結(jié)果如圖6.3 所示。
2. 選擇復(fù)選框和單選框按鈕的事件處理程序
（1） 程序功能：在Applte 上創(chuàng)建復(fù)選框、單選框、文本區(qū)域、單行文本框等組件，并實現(xiàn)根據(jù)用戶輸入的10 進(jìn)制數(shù)，選擇不同選項可轉(zhuǎn)換為2、8、16 進(jìn)制數(shù)。
（2） 編寫LX5_4.java 程序文件，源代碼如下。
import java.applet.Applet;
import java.awt.*;
import java.awt.event.*;
public class LX5_4 extends Applet implements ItemListener {
TextAr
13、ea area=new TextArea(6,30);//創(chuàng)建文本區(qū)
String Item[]={"2 進(jìn)制","8 進(jìn)制","16 進(jìn)制","10 進(jìn)制"};
Checkbox cb[]=new Checkbox[5];
Checkbox radio[]=new Checkbox[5];
Label l=new Label("輸入10 進(jìn)制數(shù)");
TextField TF=new TextField(6);//創(chuàng)建單行文本框
public void init() {
add(l);add(TF);
add(area);
add(new Label(" 請選擇進(jìn)制："))
14、;
for(int i=0; i<4; i++) {
cb[i]=new Checkbox(Item[i]);
add(cb[i]);
cb[i].addItemListener(this);
}
CheckboxGroup cbGroup=new CheckboxGroup();//創(chuàng)建單選框
add(new Label("請選擇進(jìn)制："));
for(int i=0; i<4; i++) {
radio[i]=new Checkbox(Item[i],cbGroup,false);
add(radio[i]);
radio[i].addItemListener(thi
15、s);
}
}
public void itemStateChanged(ItemEvent e) {
int x=Integer.parseInt(TF.getText());
if (e.getItem ()=="2 進(jìn)制")
area.append ("你選擇的是"+e.getItem ()+ Integer.toBinaryString(x)+"\n");
if (e.getItem ()=="8 進(jìn)制")
area.append ("你選擇的是"+e.getItem ()+ Integer.toOctalString(x)+"\n");
if (e.getItem
16、()=="16 進(jìn)制")
area.append ("你選擇的是"+e.getItem ()+Integer.toHexString(x)+"\n");
if (e.getItem ()=="10 進(jìn)制")
area.append ("你選擇的是"+e.getItem ()+x+"\n");
}
}
（3） 編譯程序LX5_4.java。
（4） 編寫顯示Applet 的頁面文件LX5_4.html，在瀏覽器顯示結(jié)果如圖6.4 所示。
三．建立獨(dú)立運(yùn)行的窗口界面并使用匿名類
最常使用的包含組件的容器是窗口，在Java 中窗口由Frame 類生成。
1．創(chuàng)建一個窗口界面
17、
（1）程序功能：創(chuàng)建一個具有關(guān)閉功能的空白窗口。
（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("初始窗口");//創(chuàng)建窗口對象
f.setSize(350,200);//設(shè)置窗口大小
f.setVisible(true);//設(shè)置窗口是可視的
f.a
18、ddWindowListener(new WindowAdapter() {//為窗口添加窗口事件適配器
public void windowClosing(WindowEvent e) {//關(guān)閉窗口事件的方法
System.exit(0);
}
});
}
}
（3）編譯并運(yùn)行程序，會出現(xiàn)一個界面窗口如圖6.5 所示。它可以最大化、最小化，單擊×按鈕可以關(guān)閉該窗口。
2．在窗口中添加組件
（1）程序功能：在窗口中添加組件。
（2）編寫LX5_6.java 程序文件，源代碼如下。
import java.awt.*;
import java.awt.ev
19、ent.*;
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); //設(shè)置窗口大小
setL
20、ocation(200,200);//設(shè)置窗口顯示位置
setFont(new Font("Arial",Font.PLAIN,12)); //設(shè)置字體
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
21、(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
22、 (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();//只關(guān)閉當(dāng)前窗口,注銷該對象
}
23、}
}
（3）編譯并運(yùn)行程序，界面窗口如圖6.6 所示。
3．為窗口添加菜單
（1）程序功能：在窗口中添加菜單欄，在菜單欄添加菜單項，并添加下拉菜單和2 級菜單，通過選擇菜單項可以執(zhí)行不同操作，如“打開”可打開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 Bu
24、tton("退出");
MenuBar mb=new MenuBar(); // 以下生成菜單組件對象
Menu m1=new Menu("文件");
MenuItem open=new MenuItem("打開");
MenuItem close=new MenuItem("關(guān)閉");
MenuItem exit=new MenuItem("退出");
Menu m12=new Menu("編輯");
MenuItem copy=new MenuItem("復(fù)制");
MenuItem cut=new MenuItem("剪切");
MenuItem paste=new M
25、enuItem("粘貼");
Menu m2=new Menu("幫助");
MenuItem content=new MenuItem("目錄");
MenuItem index=new MenuItem("索引");
MenuItem about=new MenuItem("關(guān)于");
LX5_7() {
super("添加菜單的窗口");
setSize(350,200);
add("South",p);
p.add(b);
b.addActionListener(this);
m1.add(open); // 將菜單項加入到菜單m1 中
m1.add(close
26、);
m1.addSeparator(); //在菜單中添加分隔條
m1.add(exit);
open.addActionListener(this); //給菜單項open 注冊事件監(jiān)聽器
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();
27、m2.add(about);
mb.add(m2);
setMenuBar(mb); // 設(shè)置菜單欄為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）編譯并運(yùn)行程序，界面窗口如圖6.7
28、所示。
四．使用Swing 組件
在Java 中，能夠?qū)崿F(xiàn)圖形用戶界面的類庫有兩個：java.awt 和javax.swing。前者稱為抽象窗口工具庫AWT（Abstract Windows Toolkit），后者是Java 基礎(chǔ)類庫JFC（Java Foundation Classes）的一個組成部分，它提供了一套功能更強(qiáng)、數(shù)量更多、更美觀的圖形用戶界面組件。Swing 組件名稱和AWT 組件名稱基本相同，但以J 開頭，例如AWT 按鈕類的名稱是Button，在Swing 中的名稱則是JButton。
1．在JApplet 中添加Swing 組件
（1）程序功能：在JApplet
29、 中添加3 個帶有圖片的按鈕和一個帶有圖片的標(biāo)簽。
（2） 準(zhǔn)備圖片文件： 在當(dāng)前目錄下建立一個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;
30、
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 JButt
31、on(new ImageIcon("image/NextArrow.gif"));
label=new JLabel("圖像標(biāo)簽",
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("向上翻頁按鈕")
32、;
button2.setToolTipText("跳轉(zhuǎn)按鈕");
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 查看程序，結(jié)果如圖
33、6.8 所示。
2.在JFrame 窗口中添加組件
（1）程序功能：創(chuàng)建JFrame 窗口，并在其中添加工具欄。
（2）準(zhǔn)備圖片文件： 在當(dāng)前目錄下建立一個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 butt
34、on1,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)
35、;
}
});
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=ne
36、w 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(tool
37、Bar,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";
textAre
38、a.append(s);
}
}
（4）編譯LX5_9.java。
（5）運(yùn)行LX5_9.class，產(chǎn)生的窗口界面如圖6.9 所示。
五．使用自定義對話框與內(nèi)部類
對話框是GUI 中很常見的窗口對象，有著廣泛的應(yīng)用。對話框和普通窗口最大的不同就是對話框是依附在某個窗口上，一旦它所依附的窗口關(guān)閉了，對話框也要隨著關(guān)閉。Java 提供了Dialog 類用于制作自定義對話框，當(dāng)需要改變一些數(shù)據(jù)或需要一個提示窗口時可使用自定義對話框。
1．創(chuàng)建自定義對話框的應(yīng)用程序
（1）程序功能：創(chuàng)建一個帶有文本區(qū)及“對話框”按鈕的父窗口，單擊“對話框”按鈕可打開一個自定義對話框，從中可以定義
39、行和列的數(shù)值，關(guān)閉對話框其設(shè)置的設(shè)置會顯示在父窗口的文本區(qū)中。
（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("文本區(qū)行數(shù):"+row+"
40、 列數(shù):"+col, row, col);
JScrollPane scrollPane=new JScrollPane(ta);
Button exit=new Button("關(guān)閉");
Button dialog=new Button("對話框");
JPanel panel=new JPanel();
LX5_10() {
setContentPane(panel);
setTitle("帶有對話框的父窗口");
panel.setPreferredSize(new Dimension(500,200));
panel.setLayout(new BorderLayo
41、ut());
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(
42、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("請輸入行數(shù)");
Label label2=new Label("請輸入列數(shù)");
TextField rows=new TextField(50);
TextField co
43、lumns=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.s
44、etBounds(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)
45、;
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("文本區(qū)行數(shù):"+row+" 列數(shù):"+col)
46、;
show();}
dispose();}
}
}
2．編譯并運(yùn)行程序，在父窗口中單擊“對話框”按鈕會出現(xiàn)“自定義對話框”窗口，如圖6.10所示窗口。設(shè)置對話框中參數(shù)，單擊“確定”按鈕，可關(guān)閉自定義對話框，并可看到父窗口中出現(xiàn)的變化，如圖6.11 所示。
3．程序分析：本程序包括兩個類，一個是程序的主類LX5_10，另外一個是MyDialog 類，它是Dialog（對話框）派生的子類，它是作為LX5_10 的內(nèi)部類創(chuàng)建的，內(nèi)部類有一個好處就是可以隨意訪問主類的成員。在MyDialog 的構(gòu)造方法中，以主類為父窗口調(diào)用了父類的構(gòu)造方法，生成一個有模式對話框窗口。
此外，MyDialog 類中采用了手工布局方式來安排各組件的位置。兩個文本框用來顯示和輸入數(shù)值，點(diǎn)擊“確定”按鈕后，用這兩個數(shù)值設(shè)定主類中文本區(qū)的行列數(shù)。無論點(diǎn)擊“確定”還是“取消”，最后都調(diào)用dispose 方法來關(guān)閉自定義對話框。
【實習(xí)題】
1. 編寫Applet程序?qū)崿F(xiàn)一個計算器，包括10個數(shù)字（0~9）按鈕和4個運(yùn)算符（加，減，乘，除）按鈕，以及等號和清空兩個輔助按鈕，還有一個顯示輸入輸出的文本域。
本實驗需上交第二次上機(jī)報告
實驗五 圖形用戶界面
