《實(shí)驗(yàn)五 圖形用戶界面》由會(huì)員分享，可在線閱讀，更多相關(guān)《實(shí)驗(yàn)五 圖形用戶界面（17頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、實(shí)驗(yàn)五 圖形用戶界面【開發(fā)語言及實(shí)現(xiàn)平臺(tái)或?qū)嶒?yàn)環(huán)境】Windows2000 或XP，JDK1.6【實(shí)驗(yàn)?zāi)康摹?. 了解圖形用戶界面基本組件窗口、按鈕、文本框、選擇框、滾動(dòng)條等的使用方法，2. 了解如何使用布局管理器對組件進(jìn)行管理，以及如何使用Java 的事件處理機(jī)制。【實(shí)驗(yàn)要求】1. 掌握在Applet 容器中添加組件的方法，掌握使用布局管理器對組件進(jìn)行管理的方法。2. 理解Java 的事件處理機(jī)制，掌握為不同組件編寫事件處理程序的方法。3. 掌握編寫?yīng)毩⑦\(yùn)行的窗口界面的方法。4. 了解Java Swing 組件的使用方法。5. 了解對話框的使用方法?！緦?shí)驗(yàn)內(nèi)容】一創(chuàng)建圖形用戶界面圖形用戶界面

2、（Graphic User Interface ，簡稱GUI）是為方便用戶使用設(shè)計(jì)的窗口界面，在圖形用戶界面中用戶可以看到什么就操作什么，取代了在字符方式下知道是什么后才能操作什么的方式。組件（Component）是構(gòu)成GUI 的基本要素，通過對不同事件的響應(yīng)來完成和用戶的交互或組件之間的交互。組件一般作為一個(gè)對象放置在容器（Container）內(nèi)，容器是能容納和排列組件的對象，如Applet、Panel（面板）、Frame（窗口）等。通過容器的add 方法把組件加入到容器中。1 在Applet 中添加標(biāo)簽、按鈕并使用網(wǎng)格布局（1） 程序功能：在Applet 容器中添加組件標(biāo)簽、按鈕，并使用網(wǎng)

3、格布局管理器排列組件在容器中的位置。（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 個(gè)網(wǎng)格）l1=new Label(標(biāo)簽1);b1 = new Button(按鈕1);b2 = new Button(按鈕2);b3 =

4、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 的頁面文件LX5_1.html，在瀏覽器顯示結(jié)果如圖6.1 所示。2 在面板中添加組件（1） 程序功能：在Applet 中添加面板容器，并分別在Applet、面板容器中添加組件并使用不同的布局管理方式。（2） 編寫LX5_2.

5、java 程序文件，源代碼如下。import java.awt.*;import java.awt.Color;import java.applet.Applet;public class LX5_2 extends Applet public void init() /設(shè)置最底層的 Applet 容器為順序布局setFont(new Font(Arial,Font.PLAIN,20);Label l=new Label(這是最底層的 Applet 容器中的標(biāo)簽,Label.CENTER);add(l);Panel panel1=new Panel();add( panel1);panel1.

6、setBackground(Color.blue);panel1.setForeground(Color.red);panel1.setLayout(new BorderLayout();/設(shè)置邊界布局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 面板 中部添加的標(biāo)簽);Panel panel2=new Pane

7、l();add( panel2);panel2.setLayout(new GridLayout(3,1); /設(shè)置網(wǎng)格布局Choice c=new Choice ();/創(chuàng)建下拉式列表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.j

8、ava。（4） 編寫顯示Applet 的頁面文件LX5_2.html，在瀏覽器顯示結(jié)果如圖6.2 所示。二了解事件處理機(jī)制在圖形用戶界面中，程序和用戶的交互是通過組件響應(yīng)各種事件來實(shí)現(xiàn)的。例如，用戶單擊了一個(gè)按鈕，意味著發(fā)生了按鈕的單擊事件；選中下拉框中的一個(gè)選項(xiàng)，意味著發(fā)生了一個(gè)選項(xiàng)事件。在Java 中能產(chǎn)生事件的組件叫做事件源，如按鈕。如果希望對單擊按鈕事件進(jìn)行處理，可給事件源（按鈕）注冊一個(gè)事件監(jiān)聽器（如包含按鈕的容器），如同簽訂了一個(gè)委托合同，當(dāng)事件源發(fā)生事件時(shí)，事件監(jiān)聽器就代替事件源對發(fā)生的事件進(jìn)行處理，這就是所謂的委托事件處理機(jī)制。1單擊按鈕的事件處理程序（1）程序功能：使用手工布

9、局設(shè)置組件標(biāo)簽、按鈕的位置，為按鈕編寫單擊事件處理方法。當(dāng)用戶用鼠標(biāo)單擊按鈕時(shí)，會(huì)聽到一聲響聲。（2）編寫LX5_3.java 程序文件，源代碼如下。import java.awt.*;import java.awt.event.*;import java.applet.Applet;public class LX5_3 extends Applet implements ActionListener / 實(shí)現(xiàn)動(dòng)作事件監(jiān)聽接口public void init() setLayout(null);/關(guān)閉默認(rèn)的順序管理布局Label l=new Label(按一下按鈕可聽到響聲！, Label.C

10、ENTER);add(l);l.setBounds(40,10,150,30);Button b=new Button(按鈕);add(b);b.setBounds(60,50,60,40);b.addActionListener (this); / 注冊事件源的動(dòng)作監(jiān)聽者public void actionPerformed(ActionEvent e) /實(shí)現(xiàn)單擊事件接口的方法Toolkit.getDefaultToolkit ().beep(); /單擊事件發(fā)生時(shí)作出的反應(yīng)（3）編譯程序LX5_2.java。（4）編寫顯示Applet 的頁面文件LX5_3.html，在瀏覽器顯示結(jié)果如圖

11、6.3 所示。2. 選擇復(fù)選框和單選框按鈕的事件處理程序（1） 程序功能：在Applte 上創(chuàng)建復(fù)選框、單選框、文本區(qū)域、單行文本框等組件，并實(shí)現(xiàn)根據(jù)用戶輸入的10 進(jìn)制數(shù)，選擇不同選項(xiàng)可轉(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 TextArea area=new TextArea(6,30);/創(chuàng)建文本

12、區(qū)String Item=2 進(jìn)制,8 進(jìn)制,16 進(jìn)制,10 進(jìn)制;Checkbox cb=new Checkbox5;Checkbox radio=new Checkbox5;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)制：);for(int i=0; i4; i+) cbi=new Checkbox(Itemi);add(cbi);cbi.addItemListener(thi

13、s);CheckboxGroup cbGroup=new CheckboxGroup();/創(chuàng)建單選框add(new Label(請選擇進(jìn)制：);for(int i=0; i4; i+) radioi=new Checkbox(Itemi,cbGroup,false);add(radioi);radioi.addItemListener(this);public void itemStateChanged(ItemEvent e) int x=Integer.parseInt(TF.getText();if (e.getItem ()=2 進(jìn)制)area.append (你選擇的是+e.get

14、Item ()+ Integer.toBinaryString(x)+n);if (e.getItem ()=8 進(jìn)制)area.append (你選擇的是+e.getItem ()+ Integer.toOctalString(x)+n);if (e.getItem ()=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 的頁面文

15、件LX5_4.html，在瀏覽器顯示結(jié)果如圖6.4 所示。三建立獨(dú)立運(yùn)行的窗口界面并使用匿名類最常使用的包含組件的容器是窗口，在Java 中窗口由Frame 類生成。1創(chuàng)建一個(gè)窗口界面（1）程序功能：創(chuàng)建一個(gè)具有關(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

16、.setSize(350,200);/設(shè)置窗口大小f.setVisible(true);/設(shè)置窗口是可視的f.addWindowListener(new WindowAdapter() /為窗口添加窗口事件適配器public void windowClosing(WindowEvent e) /關(guān)閉窗口事件的方法System.exit(0); ); （3）編譯并運(yùn)行程序，會(huì)出現(xiàn)一個(gè)界面窗口如圖6.5 所示。它可以最大化、最小化，單擊按鈕可以關(guān)閉該窗口。2在窗口中添加組件（1）程序功能：在窗口中添加組件。（2）編寫LX5_6.java 程序文件，源代碼如下。import java.awt.*;i

17、mport 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); /設(shè)置窗口大小setLocation(200,200);/

18、設(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(new Label(電話);add(tf2); add(f); add(btn1); add

19、(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.get

20、Source()=tf1)Area.append(用戶名：+tf1.getText()+n);if (e.getSource()=tf2)Area.append(電 話：+tf2.getText()+n);if (e.getSource()=btn2) for (int i=0; i100000000; i+);dispose();/只關(guān)閉當(dāng)前窗口,注銷該對象（3）編譯并運(yùn)行程序，界面窗口如圖6.6 所示。3為窗口添加菜單（1）程序功能：在窗口中添加菜單欄，在菜單欄添加菜單項(xiàng)，并添加下拉菜單和2 級菜單，通過選擇菜單項(xiàng)可以執(zhí)行不同操作，如“打開”可打開LX5_6 類生成的窗口。（2）編寫LX5

21、_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(關(guān)閉);MenuItem exit=

22、new MenuItem(退出);Menu m12=new Menu(編輯);MenuItem copy=new MenuItem(復(fù)制);MenuItem cut=new MenuItem(剪切);MenuItem paste=new MenuItem(粘貼);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

23、,p);p.add(b);b.addActionListener(this);m1.add(open); / 將菜單項(xiàng)加入到菜單m1 中m1.add(close);m1.addSeparator(); /在菜單中添加分隔條m1.add(exit);open.addActionListener(this); /給菜單項(xiàng)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 級菜單添

24、加到m1 菜單項(xiàng)中m2.add(content); m2.add(index); m2.addSeparator(); m2.add(about);mb.add(m2);setMenuBar(mb); / 設(shè)置菜單欄為mbshow();/ 顯示組件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();（

25、3）編譯并運(yùn)行程序，界面窗口如圖6.7 所示。四使用Swing 組件在Java 中，能夠?qū)崿F(xiàn)圖形用戶界面的類庫有兩個(gè)：java.awt 和javax.swing。前者稱為抽象窗口工具庫AWT（Abstract Windows Toolkit），后者是Java 基礎(chǔ)類庫JFC（Java Foundation Classes）的一個(gè)組成部分，它提供了一套功能更強(qiáng)、數(shù)量更多、更美觀的圖形用戶界面組件。Swing 組件名稱和AWT 組件名稱基本相同，但以J 開頭，例如AWT 按鈕類的名稱是Button，在Swing 中的名稱則是JButton。1在JApplet 中添加Swing 組件（1）程序功能：

26、在JApplet 中添加3 個(gè)帶有圖片的按鈕和一個(gè)帶有圖片的標(biāo)簽。（2） 準(zhǔn)備圖片文件： 在當(dāng)前目錄下建立一個(gè)image 文件夾， 存放4 個(gè)圖片文件， 例如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

27、;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);l

28、abel=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(向上翻頁按鈕);button2.setToolTipText(跳轉(zhuǎn)按鈕);button3.setToolTipText(向下翻頁按鈕);pa

29、ne.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é)果如圖6.8 所示。2.在JFrame 窗口中添加組件（1）程序功能：創(chuàng)建JFrame 窗口，并在其中添加工具欄。（2）準(zhǔn)備圖片文件： 在當(dāng)前目錄下建立一個(gè)image 文件夾， 存放3 個(gè)圖片文件，

30、例如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(St

31、ring 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/N

32、extArrow.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(pane

33、l);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=

34、中按鈕被單擊n;else if (e.getSource()=button3)s=右按鈕被單擊n;textArea.append(s);（4）編譯LX5_9.java。（5）運(yùn)行LX5_9.class，產(chǎn)生的窗口界面如圖6.9 所示。五使用自定義對話框與內(nèi)部類對話框是GUI 中很常見的窗口對象，有著廣泛的應(yīng)用。對話框和普通窗口最大的不同就是對話框是依附在某個(gè)窗口上，一旦它所依附的窗口關(guān)閉了，對話框也要隨著關(guān)閉。Java 提供了Dialog 類用于制作自定義對話框，當(dāng)需要改變一些數(shù)據(jù)或需要一個(gè)提示窗口時(shí)可使用自定義對話框。1創(chuàng)建自定義對話框的應(yīng)用程序（1）程序功能：創(chuàng)建一個(gè)帶有文本區(qū)及“對話框”

35、按鈕的父窗口，單擊“對話框”按鈕可打開一個(gè)自定義對話框，從中可以定義行和列的數(shù)值，關(guān)閉對話框其設(shè)置的設(shè)置會(huì)顯示在父窗口的文本區(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 JTextAr

36、ea(文本區(qū)行數(shù):+row+ 列數(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 BorderLayout();panel.ad

37、d(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.e

38、xit(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 columns=new TextField(50);Button OK=new Button(確定);Button Cancel=new Button(取消);

39、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(Integ

40、er.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=In

41、teger.parseInt(rows.getText();int col=Integer.parseInt(columns.getText();ta.setRows(row);ta.setColumns(col);ta.setText(文本區(qū)行數(shù):+row+ 列數(shù):+col);show();dispose();2編譯并運(yùn)行程序，在父窗口中單擊“對話框”按鈕會(huì)出現(xiàn)“自定義對話框”窗口，如圖6.10所示窗口。設(shè)置對話框中參數(shù)，單擊“確定”按鈕，可關(guān)閉自定義對話框，并可看到父窗口中出現(xiàn)的變化，如圖6.11 所示。3程序分析：本程序包括兩個(gè)類，一個(gè)是程序的主類LX5_10，另外一個(gè)是MyDialog

42、 類，它是Dialog（對話框）派生的子類，它是作為LX5_10 的內(nèi)部類創(chuàng)建的，內(nèi)部類有一個(gè)好處就是可以隨意訪問主類的成員。在MyDialog 的構(gòu)造方法中，以主類為父窗口調(diào)用了父類的構(gòu)造方法，生成一個(gè)有模式對話框窗口。 此外，MyDialog 類中采用了手工布局方式來安排各組件的位置。兩個(gè)文本框用來顯示和輸入數(shù)值，點(diǎn)擊“確定”按鈕后，用這兩個(gè)數(shù)值設(shè)定主類中文本區(qū)的行列數(shù)。無論點(diǎn)擊“確定”還是“取消”，最后都調(diào)用dispose 方法來關(guān)閉自定義對話框。【實(shí)習(xí)題】1. 編寫Applet程序?qū)崿F(xiàn)一個(gè)計(jì)算器，包括10個(gè)數(shù)字（09）按鈕和4個(gè)運(yùn)算符（加，減，乘，除）按鈕，以及等號(hào)和清空兩個(gè)輔助按鈕，還有一個(gè)顯示輸入輸出的文本域。本實(shí)驗(yàn)需上交第二次上機(jī)報(bào)告