-----------android培訓、java培訓、java學習型技術部落格、期待與您交流！------------

GUI(使用者圖形介面)

一、概述

1、GUI：GraphicalUser Interface，即圖形使用者介面，用於計算機與使用者互動的一種方式。

2、計算機與使用者互動的兩種方式：GUI和CLI

        GUI： Graphical User Interface，圖形使用者介面，用圖形方式，來顯示計算機操作介面，方便直觀。

        CLI： Command LineUser Interface，命令列使用者介面，即常見的Dos命令列操作，須記住一些命令，操作不直觀。

3、java也將這種介面封裝為物件，其中的物件都放在了兩個包中：java.Awt包和javax.Swing包。

        java.Awt包：Abstract Window Toolkit，即抽象視窗工具包。要呼叫本地系統方法實現功能，屬重量級控制元件。

        javax.Swing包：在AWT的基礎上建立的一套圖形介面系統，其中提供了更多的元件，且完全由java實現，增強了移植性，屬輕量級控制元件。

在實際應用中，我們見到的許多應用介面都屬於GUI圖形型使用者介面。如：我們點選QQ圖示，就會彈出一個QQ登陸介面的對話方塊。這個QQ圖示就可以被稱作圖形化的使用者介面。

1、Command line UserInterface (命令列使用者介面）

就是常見的Dos命令列操作。

需要記憶一些常用的命令，操作不直觀。

舉例：

比如：建立資料夾，或者刪除資料夾等

例如MS-DOS

2、圖形使用者介面（GUI,Graphical User Interface ）是指以圖形化方式與使用者進行互動的程式執行介面，例如MicrosoftWindows、Word等。

   優點：更友好、更豐富，且提供靈活、強大的人機互動功能，成為當前應用程式設計的主流。

在ＧＵＩ程式設計中，元件（Component）是GUI的基本組成元素，凡是能夠以圖形化方式顯示在螢幕上並能與使用者互動的物件均為元件。

如下圖：均為ＧＵＩ介面的元件

   另外，在JDK的java.awt包中定義了多種GUI元件類，如Window、Menu、Button、Label、TextField、Scrollbar等。

這些抽象類，定義了GUI 元件的基本特性和功能

由上圖可以看出，ＧＵＩ中的元件可分為：

其中，需要注意的是：

　　１.　Container類描述了容器元件的所有性質；

２.它繼承於Component類，因此容器類物件本身也是一個元件，具有元件的所有性質，但反過來元件卻不一定是容器；

３.控制組件要想顯示出來必須放置在容器元件中

其中，容器型別的元件在java.awt包下可以見到。這裡，需要注意在AWT中存在兩種主要的容器型別：

１.　java.awt.Window
描述的是一個沒有邊框和選單欄、可自由停靠的頂層容器（是指不允許將其包含於其他的容器中），一般不直接使用該類，而是使用其子類Frame。

２.java.awt.Panel
最簡單而常用的容器，可作為容器包含其他元件，但不能獨立存在，必須被新增到其它容器中。

案例：

　　示例1：第一個GUI應用程式。

importjava.awt.*;
classTestFirstFrame{
      public static void main(String args[]){
       Frame frame=new Frame("第一個圖形使用者介面應用程式");／／容器
       Label lbl=new Label("這是我的第一個圖形使用者介面！");／／控制組件
       lbl.setBackground(Color.pink);
       frame.setLayout(new FlowLayout());
       frame.add(lbl);       ／／將控制組件新增到容器中
       frame.setSize(200,100);
       frame.setVisible(true);
      }
}

應注意的是：

１.　Frame 預設的大小為剛好容納下標題條和最小(大)化、關閉按鈕，setSize()可設定Frame大小。

２.Frame視窗預設是不可見的，可使用setVisible(true|false)方法使之可見或隱藏。

３．元件在容器中的擺放位置由佈局管理器決定，Frame使用setLayout()方法可以設定視窗的佈局。

４.FlowLayout—流式佈局管理，特點是元件在容器中按照加入次序逐行定位，行內從左到右，一行排滿後換行。

例項２.容器元件Panel的使用。

       Frame frame=new Frame("容器Panel的使用");

       Panel panel=new Panel();

       Button btn=new Button("確定");

       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);

這裡，應注意：

１.frame的預設佈局理器被取消，人工設定了panel的尺寸大小和在容器中的位置；

２.setSize()方法用於設定元件尺寸大小，即寬度和高度，單位為畫素；

３.setLocation()方法用於設定元件在容器中的位置，即元件的左上角，即元件的左上角頂點座標，單位也是畫素。

４.各個GUI容器都擁有自己的座標系統（計算機的顯示器螢幕也是一種GUI容器）

位置關係如圖：

通過上圖我們可以看到，佈局在ＧＵＩ程式設計中的地位是十分重要的。在ＧＵＩ程式設計中容器對其中所包含元件的排列方式，包括元件的位置和大小的設定，被稱為容器的佈局（Layout）。它是指系統事先定義好的若干容器佈局效果，使用它們可以方便地實現元件在容器的佈局管理，並能夠滿足各種常規需要。例如，FlowLayout等。

注意：

　每一個容器都有預設的佈局管理器，在建立一個容器物件時，同時也會建立一個相應的預設佈局管理器物件，使用者也可以隨時為容器建立和設定新的佈局管理器。 
方法：

容器物件.setLayout(佈局管理器物件) 
佈局管理器  容器物件.getLayout()

因此，瞭解常用佈局管理器就顯得十分重要

FlowLayout：流式佈局，是Panel（及其子類）型別容器的預設佈局管理器型別。

佈局效果：元件在容器中按照加入次序逐行定位，行內從左到右，一行排滿後換行。元件按原始大小進行顯示。

構造方法
public FlowLayout()／／預設居中對齊，5個畫素的水平和垂直間距
public FlowLayout(int align)／／指定對齊方式
public FlowLayout(int align,int hgap,int vgap)／／元件的水平和垂直間距

其中，對齊方式可以使用FlowLayout類中定義靜態常量來設定，主要包括：
FlowLayout.LEFT     左對齊
FlowLayout.RIGHT    右對齊
FlowLayout.CENTER     居中對齊

示例1：流式佈局的使用。

f.setLayout(new FlowLayout());

f.add(button1);

f.add(button2);

f.add(button3);

效果如圖：

注意：

當容器f的尺寸被重置時，其中元件的位置也隨之進行了調整，但元件的尺寸維持不變。

BorderLayout：邊界佈局，是Window及其子類型別容器的預設佈局管理器。

佈局效果：將整個容器範圍劃分成East、West、South、North、Center五個區域，元件只能被新增到指定的區域。

如圖：

值得注意的是：

　　１.　每個區域只能加入一個元件，如加入多個，則先前加入的元件會被遺棄 。

　　２.　在使用邊界佈局的容器中，元件的尺寸也被佈局管理器強行控制，即與其所在區域的尺寸相同。

構造方法
public BorderLayout()
public BorderLayout(int hgap,int vgap)

示例2：BorderLayout的使用。

f.setLayout(new BorderLayout());／／該語句去掉也可，Frame預設佈局為BorderLayout

／／向容器的不同方位新增元件，也可使用BorderLayout中定義的String常量來表示，例，NORTH、SOUTH、WEST、EAST等。

f.add(btnNorth,"North");

f.add(btnSouth,"South");

f.add(btnWest,"West");

f.add(btnEast,"East");

f.add(btnCenter,"Center");／／如不指名元件的加入位置，則預設加入到Center區域。

注意：

１．當容器的尺寸發生變化時，其中各元件相對位置不變，尺寸隨所在區域進行縮放調整；

２．調整原則：北、南兩個區域只能在水平方向縮放(寬度可調)，東、西兩個區域只能在垂直方向縮放(高度可調)，中部區域都可縮放。

在實際學習過程中，我們需要了解Conpoment類的基本屬性和操作方法：

事件監聽機制★★★

事件監聽機制的組成：

事件：使用者在介面上的某一個操作，通常使用各種輸入裝置，如滑鼠、鍵盤等。

事件源：產生事件的元件，例如在一個按鈕上的單擊就是事件源

監聽器：包含事件處理器，負責檢查事件是否發生，若發生則啟用事件處理器對其處理

事件處理：引發事件後的處理方式。

2、使用說明

        組成的前三個在java中都已將定義好了，直接獲取其物件來用即可，我們需要做的就是對產生的動作進行處理。

步驟：

        1）確定事件源（容器或元件）。通過事件源物件的addXXXListener()方法將監聽器註冊到該事件源上。該方法中接收XXXListener的子類物件，或者XXXListener的子類XXXAdapter的子類物件。

        2）一般用匿名內部類來表示。在覆蓋方法的時候，方法的引數一般是XXXEvent型別的變數接收。

如：

f.addWindowlistener(new WindowAdapter()  
{  
     public void windowClosing(WindowEvent e)  
     {  
          System.exit(0);//表示關閉視窗  
     }  
});  

說明：

        1）事件觸發後會把事件打包成物件傳遞給複寫方法中引數的變數。（其中包括事件源物件。通過getSource()或者，getComponent()獲取。）

        2）若用子類實現WindowListener介面，就需要覆蓋其中的7個方法，可只用到其中的關閉動作，其他動作未用到，但卻必須重寫全部。因為WindowLister的子類WindowAdapter（介面卡）已經實現此介面，並覆蓋了其中所有方法。那麼只需繼承WindowAdapter，覆蓋需要的方法即可。

        3）明確事件，並對事件進行處理，其實，新增什麼監聽器就需要新增什麼事件。

示例：

/* 
需求：讓窗體的關閉功能實現 
      讓按鈕也具備退出程式的功能 
*/  
  
import java.awt.*;  
import java.awt.event.*;  
  
class  AwtEventDemo  
{  
    //定義該圖形介面所需的元件的引用  
    private Frame f=null;  
    private Button but=null;  
  
    //初始建構函式  
    AwtEventDemo()  
    {  
        init();  
    }  
  
    //窗體建立與功能實現  
    public void init()  
    {  
        //例項化元件  
        f=new Frame("my Frame");  
        but=new Button("my Botton");  
  
        //視窗的基本設定  
        //f.setSize(500,300);//設定大小  
        //f.setLocation(300,200);//視窗初始顯示位置  
        f.setBounds(350,300,300,200);//一起設定窗體大小和位置  
        f.setLayout(new FlowLayout());//設定為流式佈局  
  
        //將按鈕元件新增進窗體  
        f.add(but);  
  
        //載入窗體上事件  
        myEvent();  
  
        //顯示窗體  
        f.setVisible(true);  
  
    }  
  
    //註冊事件  
    private void myEvent()  
    {  
        //窗體的關閉功能  
        f.addWindowListener(new WindowAdapter()  
        {  
            public void windowClosing(WindowEvent e)  
            {  
                System.out.println("視窗關閉");  
                System.exit(0);//關閉視窗程式  
            }  
        });  
  
        //讓按鈕具備退出程式的功能  
        /* 
        按鈕就是事件源。 
        那麼選擇哪個監聽器呢？ 
        通過關閉窗體示例瞭解到，想要知道哪個元件具備什麼樣的特有監聽器。 
        需要檢視該元件物件的功能。 
         通過查閱button的描述。發現按鈕支援一個特有監聽addActionListener。 
         */  
        but.addActionListener(new ActionListener()  
        {  
            public void actionPerformed(ActionEvent e)  
            {  
                System.out.println("按鈕控制視窗關閉");  
                System.exit(0);//關閉視窗程式  
            }  
        });  
    }  
  
    public static void main(String[] args)   
    {  
        //執行窗體程式  
        new AwtEventDemo();  
    }  
}

應用

一、對話方塊：Dialog

1、何時需要產生對話方塊：此物件時需要在呼叫時，才建立物件的，如：當在誤操作的時候，就會出現提示錯誤資訊的對話方塊，此時才建立的這個物件。

二、選單：Menu

1、Menu：選單，Menu extends MenuItem；有右三角的圖示存在，可新增Menu和MenuItem

2、MenuBar：選單欄，可新增選單和條目

3、MenuItem：條目，及選單專案，無右三角的圖示存在，是最終的選單項。

4、選單的事件處理和元件一樣，可以對型別為MenuItem和Menu的物件這個事件源新增活動監聽ActionListener，並進行相關的事件處理。

示例：

三、jar包雙擊執行：

既然是圖形化介面，就需要通過圖形化介面的形式執行程式，而不是是用Dos命令列執行，那麼如何通過雙擊程式就執行程式呢？這就需要將程式的class檔案打包，步驟如下：

1、首先要在java檔案中匯入一個包，沒有則需建立一個包，如package mymenu;

2、生成包：通過編譯javac -d c:\myclass MyMenu.java，此時則在c盤下的myclass資料夾下生成了所有的.class檔案

3、在此目錄下新建一個檔案，如1.txt或者其他任意名稱任意副檔名的檔案都可，然後在其中編輯固定的格式：“Main-Class: mymenu.MenuDemo”，只寫引號中的內容。需要需要在冒號後有一個空格，在檔案末尾要回車。

4、編譯：jar -cvfm my.jar 1.txt mymenu即可。如果想新增其他資訊，則直接編譯jar即可得出相應的命令

5、此時雙擊即可執行。

說明：

1）在固定格式中：

a.如果無空格：在編譯的時候，就會報IO異常，提示無效的頭欄位，即invalid header field。這說明1.txt在被IO流讀取。

b.如果無回車：在列表清單.MF中不會加入相應的載入主類的資訊，也就是說配置清單的屬性主類名稱不會載入進清單中，也就不會執行。

2）jar檔案必須在系統中註冊，才能執行。註冊方法如下：

A.對於XP系統：

   a.開啟任意對話方塊，在選單欄點選工具按鈕，選擇資料夾選項

   b.選擇新建--->副檔名，將副檔名設定為jar，確定

   c.選擇高階，可更改圖示，然後點選新建，命名為open，

   d.在用於可執行應用程式中，點瀏覽，將jdk下的bin的整個檔案路徑新增進來，並在路徑後新增-jar即可。

B.對於win7系統：

   a.改變開啟方式：右擊.jar檔案，點選開啟方式，選擇預設程式為jdk下bin中的javaw.exe應用程式。

   b.修改關聯程式的登錄檔：開啟登錄檔（win+r），找到登錄檔路徑\HKEY_CLASSES_ROOT\Aplications\javaw.exe\shell\open\command下的字串值，右擊點修改，將值改為："C:\Program Files\Java\jre6\bin\javaw.exe" -jar "%1"其中-jar前的路徑就是javaw.exe的路徑。儲存

   c.雙擊即可執行jar程式，如果仍不能執行，則需下載最新版的jdk。

示例一：

開啟指定目錄下的目錄條目

import java.awt.*;  
import java.awt.event.*;  
import java.io.*;  
  
class  MyWindowDemo  
{  
    //建立全域性變數  
    private Frame f;  
    private Button but;  
    private TextField tf;  
    private TextArea ta;  
  
    private Dialog d;  
    private Label lab;  
    private Button okBut;  
  
    //建構函式，初始化窗體  
    MyWindowDemo()  
    {  
        init();  
    }  
    //建立窗體和元件，並將事件新增進來  
    public void init()  
    {  
        //設定窗體  
        f = new Frame("my window");  
        f.setBounds(300,200,600,500);  
        f.setLayout(new FlowLayout());  
        //建立元件  
        but = new Button("轉到");  
        tf = new TextField(60);  
        ta = new TextArea(25,75);  
  
        d = new Dialog(f,"提示資訊-self",true);  
        d.setBounds(300,100,300,150);  
        d.setLayout(new FlowLayout());  
        lab = new Label();  
        okBut = new Button("確定");  
  
        //將元件新增到窗體  
        f.add(tf);  
        f.add(but);  
        f.add(ta);  
          
        d.add(lab);  
        d.add(okBut);  
  
        //新增事件  
        myEvent();  
        //設定窗體可見  
        f.setVisible(true);  
    }  
    //常見引發的時間  
    private void myEvent()  
    {  
        //給but新增一個活動監聽器  
        but.addActionListener(new ActionListener()  
        {  
            public void actionPerformed(ActionEvent e)  
            {  
                showInfo();  
            }  
        });  
        okBut.addActionListener(new ActionListener()  
        {  
            public void actionPerformed(ActionEvent e)  
            {  
                d.setVisible(false);  
            }  
        });  
        //給文字框新增鍵盤事件  
        tf.addKeyListener(new KeyAdapter()  
        {  
            public void keyPressed(KeyEvent e)  
            {  
                if(e.getKeyCode()==KeyEvent.VK_ENTER)  
                    showInfo();  
            }  
        });  
        //關閉窗體事件  
        f.addWindowListener(new WindowAdapter()  
        {  
            public void windowClosing(WindowEvent e)  
            {  
                System.exit(0);  
            }  
        });  
        //給對話方塊新增一個監聽器，關閉對話方塊事件  
        d.addWindowListener(new WindowAdapter()  
        {  
            public void windowClosing(WindowEvent e)  
            {  
                d.setVisible(false);  
            }  
        });  
    }  
    //操作檔案，對資料夾的內容讀取  
    private void showInfo()  
    {  
        String dirPath = tf.getText();  
        File file = new File(dirPath);  
        if(file.exists()&&file.isDirectory())  
        {  
            ta.setText("");  
            String[] names = file.list();  
            for(String name : names)  
            {  
                ta.append(name + "\r\n");  
            }  
        }  
        else  
        {  
            String info = "您輸入的:“"+dirPath+"”是錯誤的路徑，請重輸";  
            lab.setText(info);  
            d.setVisible(true);  
        }  
    }  
  
    public static void main(String[] args)   
    {  
        new MyWindowDemo();  
    }  
} 

示例二：

開啟檔案，將內容顯示在文字框中，並將寫入文字框中的內容儲存

/* 
選單練習 
 
*/  
package mymenu;  
import java.awt.*;  
import java.awt.event.*;  
import java.io.*;  
public class MenuDemo   
{  
    //設定全域性變數  
    private Frame f;  
    private MenuBar bar;  
    private TextArea ta;  
    private Menu fileMenu;  
    private MenuItem closeMT,submu,openItem,saveItem;  
  
    private FileDialog openDia,saveDia;  
  
    private File file;  
      
    //初始化選單項  
    MenuDemo()  
    {  
        init();  
    }  
    //初始化窗體和元件  
    public void init()  
    {  
        //初始化窗體frame  
        f = new Frame("my Menu");  
        f.setBounds(300,100,600,500);  
          
        //初始化選單項  
        bar = new MenuBar();  
        ta = new TextArea();  
        fileMenu = new Menu("檔案");  
        submu = new MenuItem("子條目");  
        openItem = new MenuItem("開啟");  
        saveItem = new MenuItem("儲存");  
        closeMT = new MenuItem("退出");  
          
        //將元件加入到檔案選單這個容器元件中  
        fileMenu.add(submu);  
        fileMenu.add(openItem);  
        fileMenu.add(saveItem);  
        bar.add(fileMenu);  
        f.setMenuBar(bar);  
        fileMenu.add(closeMT);  
  
        openDia = new FileDialog(f,"我要開啟",FileDialog.LOAD);  
        saveDia = new FileDialog(f,"我要儲存",FileDialog.SAVE);  
          
        f.add(ta);  
        //新增事件  
        myEvent();  
        //設定窗體可見性  
        f.setVisible(true);  
    }  
      
    //新增事件  
    private void myEvent()  
    {  
        //新增窗體監聽，關閉按鈕  
        f.addWindowListener(new WindowAdapter()  
        {  
            public void windowClosing(WindowEvent e)  
            {  
                System.exit(0);  
            }  
        });  
        //新增退出選單專案的監聽，退出程式  
        closeMT.addActionListener(new ActionListener()  
        {  
            public void actionPerformed(ActionEvent e)  
            {  
                System.exit(0);  
            }  
        });  
        //新增開啟和儲存檔案的監聽，獲取檔案  
        //開啟事件  
        openItem.addActionListener(new ActionListener()  
        {  
            public void actionPerformed(ActionEvent e)  
            {  
                //顯示對話方塊，並獲取檔案路徑及檔名  
                openDia.setVisible(true);  
                String dirPath = openDia.getDirectory();  
                String fileName = openDia.getFile();  
                //判斷檔案及路徑是否存在  
                if(dirPath==null || fileName==null)  
                    return ;  
                //在開啟一個檔案前先清空文字框的內容  
                ta.setText("");  
                file = new File(dirPath,fileName);  
                BufferedReader bufr = null;  
                try  
                {  
                    //讀取檔案中的內容  
                    bufr = new BufferedReader(new FileReader(file));  
                    String line = null;  
                    while((line=bufr.readLine())!=null)  
                    {  
                        ta.append(line+"\r\n");  
                    }  
                }  
                catch (IOException ex)  
                {  
                    throw new RuntimeException("讀取失敗");  
                }  
                finally  
                {  
                    try  
                    {  
                        if(bufr!=null)  
                            bufr.close();  
                    }  
                    catch (IOException ex)  
                    {  
                        throw new RuntimeException("關閉流失敗");  
                    }  
                }  
            }  
        });  
  
        //儲存事件  
        saveItem.addActionListener(new ActionListener()  
        {  
            public void actionPerformed(ActionEvent e)  
            {  
                if(file==null)  
                {  
                    //顯示對話方塊，並獲取檔名及路徑  
                    saveDia.setVisible(true);  
                    String dirPath = saveDia.getDirectory();  
                    String fileName = saveDia.getFile();  
                    if(dirPath==null || fileName==null)  
                        return ;  
                    file = new File(dirPath,fileName);  
                    BufferedWriter bufw = null;  
                    try  
                    {  
                        //寫入文字框中的內容  
                        bufw = new BufferedWriter(new FileWriter(file));  
                        String text = ta.getText();  
                        bufw.write(text);  
                        bufw.flush();                             
                    }  
                    catch (IOException ex)  
                    {  
                        throw new RuntimeException("寫入失敗");  
                    }  
                    finally  
                    {  
                        try  
                        {  
                            if(bufw!=null)  
                                bufw.close();  
                        }  
                        catch (IOException ex)  
                        {  
                            throw new RuntimeException("關閉流失敗");  
                        }  
                    }  
                }  
            }  
        });  
  
    }  
    public static void main(String[] args)   
    {  
        new MenuDemo();  
    }  
}