跳轉到內容

使用者介面

Add links
100% developed
來自華夏公益教科書，開放的書籍，面向開放的世界

導航 使用者介面 主題：( v • d • e )


小程式和普通命令列執行程式的主要區別在於小程式允許擴充套件圖形使用者介面 (GUI)。

由於小程式提供了建立複雜 GUI 的能力，因此開發人員瞭解如何建立此類程式非常重要。

應用樣式和新增內容

[編輯 | 編輯原始碼]

在 Java 小程式中，圖形部分在兩個不同的區域初始化和新增。雖然物件在主類中初始化，但它們在 init() 方法中新增到小程式的佈局中。這是使用 add(<object>) 語法完成的。一個典型的 init() 方法看起來像這樣

Example 程式碼節 9.8：一個典型的 init() 方法 
...

public void init() {
    setFont(new Font("Times New Roman", Font.PLAIN, 24));
    setForeground(Color.white);
    setBackground(Color.black);
    setLayout(new GridLayout);
   
    ...
   
    add(label);
    add(button);
}

下面將介紹此方法的不同方面。

按鈕

[編輯 | 編輯原始碼]

許多小程式使用按鈕。小程式與使用者之間只有幾種聯絡方式，而使用按鈕是其中一種方式。建立按鈕的方式與大多數其他 Java 小程式物件相同

Example 程式碼節 9.9：建立按鈕 
Button submitButton = new Button("Submit");

在初始化按鈕時，有必要在給定引數中定義將在該按鈕上顯示的文字。在本例中，按鈕使用顯示在上面的“提交”一詞進行初始化。將按鈕新增到實際佈局是在 init() 方法中完成的，如上所述。

Example 程式碼節 9.10：顯示按鈕 
public void init() {
   
    ...
   
    add(submitButton);
}

讓按鈕執行任務或利用使用者的輸入要複雜一些。這些功能需要一個 ActionListener，將在 ActionListener 部分進行討論。


標籤

[編輯 | 編輯原始碼]

標籤是小程式中的區域，包含使用者無法編輯的文字。這通常非常適合描述（例如，“插入名稱：”）。標籤的初始化和新增到小程式佈局的方式與按鈕相同。此外，與按鈕一樣，標籤中的文字必須在初始化時識別。但是，如果標籤將接收其文字作為隨後函式的結果，並且應從空白開始，則不應該在引號之間放置文字。

Example 程式碼節 9.11：顯示標籤 
Label nameLabel = new Label("Name: ");

...

public void init() {
    add(nameLabel);
}


文字欄位

[編輯 | 編輯原始碼]

文字欄位是applet中允許使用者插入文字的區域。文字欄位的兩個引數是可選的，它們可以設定欄位中的預定義文字或設定文字欄位中允許的列數。以下是一些示例

Example 程式碼部分 9.12：文字欄位建立 
    TextField t1 = new TextField();                // Blank
    TextField t2 = new TextField(5);               // Blank in 5 columns
    TextField t3 = new TextField("Input here");    // Predefined text
    TextField t4 = new TextField("Input here", 5); // Predefined text in 5 columns

    ...

    public void init() {
        add(t1);
        add(t2);
        add(t3);
        add(t4);
        ...
    }


字型

[編輯 | 編輯原始碼]

在您的 Java applet 中使用時尚的字型可能很有必要，以幫助保持您的 Java applet 的吸引力。setFont() 允許定義整個 applet 中使用的字型，或者一次設定一個元素的字型。

設定字型的語法為 setFont(<fontName>, <fontStyle>, <fontSize>)。

要使 applet 中的所有字型為普通字型的 24 號 Times New Roman，應使用以下程式碼

Example 程式碼部分 9.13：字型設定 
Font f = new Font("Times New Roman", Font.PLAIN, 24);
setFont(f);

無需在兩行程式碼中初始化字型並設定字型。

Example 程式碼部分 9.14：直接字型設定 
setFont(new Font("Times New Roman", Font.PLAIN, 24));

但是，要使元素 a 的字型為普通字型的 24 號 Times New Roman，而元素 b 的字型為斜體的 28 號 Times New Roman，應使用以下程式碼

Example 程式碼部分 9.15：物件字型設定 
a.setFont(new Font("Times New Roman", Font.PLAIN, 24));
b.setFont(new Font("Times New Roman", Font.ITALIC, 28));

要設定 applet 中使用的字型的顏色，可以使用 setForeground(<color>) 方法。此方法已經包含了一些預定義的顏色，可以透過呼叫例如 setForeground(Color.white) 來使用。以下是所有預定義的顏色

  • Color.black
  • Color.blue
  • Color.cyan
  • Color.darkGray
  • Color.gray
  • Color.green
  • Color.red
  • Color.white
  • Color.yellow

要建立自定義顏色，可以將顏色的 RGB 值作為顏色引數傳入。例如，如果紅色不是預定義的顏色，則可以使用 setForeground(new Color(255, 0, 0)) 來定義紅色。

與字型樣式一樣，字型顏色也可以應用於單獨的元素。語法遵循相同的模式：a.setForeground(Color.white)。

佈局

[編輯 | 編輯原始碼]

佈局使 applet 可見。如果沒有佈局，將不會顯示任何內容。有五種不同的佈局型別可供選擇 - 一些非常簡單，而另一些則很複雜。

流式佈局

[編輯 | 編輯原始碼]

此佈局將元件從左到右放置，使用所需的空間。流式佈局是 applet 的預設佈局，因此無需設定。但是，為了清楚起見，可以將 applet 佈局指定為流式佈局，方法是在 init() 方法的頂部放置此行程式碼

Example 程式碼部分 9.16：流式佈局 
setLayout(new FlowLayout());

新增到佈局中的後續元件將按新增順序放置在螢幕上。

Example 程式碼部分 9.17：元件顯示 
public void init() {
    setLayout(new FlowLayout());
    add(nameLabel);
    add(t1);
    add(submitButton);
}

假設這些變數與上面的定義相同，這些程式碼行將建立一個由標籤、文字欄位和按鈕組成的 applet 佈局。如果視窗允許，它們將全部顯示在一行上。透過更改視窗的寬度，流式佈局將相應地收縮和擴充套件元件。


網格佈局

[編輯 | 編輯原始碼]

此佈局以表格（網格）的形式排列元件。建構函式中指定了網格中的行數和列數。如果存在，另外兩個引數指定了元件之間的垂直和水平填充。

Computer code 程式碼清單 9.4：GridLayoutApplet.java 
import java.applet.Applet;
import java.awt.Button;
import java.awt.GridLayout;
import java.awt.Label;
import java.awt.TextField;

public class GridLayoutApplet extends Applet {

    Button submitButton = new Button("Submit");
    TextField t1 = new TextField();                // Blank
    TextField t2 = new TextField(5);               // Blank in 5 columns
    TextField t3 = new TextField("Input here");    // Predefined text
    TextField t4 = new TextField("Input here", 5); // Predefined text in 5 columns
    Label nameLabel = new Label("Name: ");

    /**
     * Init.
     */
    public void init() {
        // 3 rows, 4 columns, 2 pixel spacing
        setLayout(new GridLayout(3, 4, 2, 2));
        add(nameLabel);
        add(t1);
        add(t2);
        add(t3);
        add(t4);
        add(submitButton);
    }
}


這些專案已按以下順序顯示

 1st   2nd 
 3th   4th 
 5th   6th 

我們看到佈局已配置為從左到右填充網格，然後從上到下填充，並且最後兩列被忽略（它們甚至不存在）。它們被忽略是因為沒有足夠的專案來填充它們，並且行數優先於列數。這意味著，當您指定一個非零行數時，列數將被簡單地忽略。您應該指定零行，以便考慮列數。

網格佈局建立大小相同的單元格。因此，它不僅可以用於以網格形式顯示專案，還可以用於顯示兩個寬度或高度相同的專案。

邊框佈局

[編輯 | 編輯原始碼]

此佈局將一個大型元件放置在中心，並在邊緣放置最多四個元件。當使用此佈局向容器新增內容時，您需要將位置指定為第二個引數，例如，中心位置使用 BorderLayout.CENTER，邊緣位置使用一個世界方向（BorderLayout.NORTH 指向頂部邊緣）。

Example 程式碼部分 9.19：邊框佈局 
import java.awt.*;

Container container = getContentPane();
container.setLayout(new BorderLayout());

JButton b2 = new JButton("two");
// Add the button to the right edge.
container.add(b2, BorderLayout.EAST);
...


如果您有兩個元件，將第一個元件放在北部，第二個元件放在中心，與將第一個元件放在中心，第二個元件放在南部是不一樣的。在第一種情況下，佈局將計算元件的大小，第二個元件將佔用所有剩餘的空間。在第二種情況下，情況相反。

卡片佈局

[編輯 | 編輯原始碼]
一堆卡片

卡片佈局一次僅顯示一個專案，並且僅在互動性時才有趣。其他專案儲存在堆疊中，顯示的專案是堆疊中的一個專案。卡片佈局的名稱是指一副玩牌，您可以在其中看到堆疊頂部的牌，也可以將一張牌放在頂部。卡片佈局的不同之處在於堆疊中的專案保持其順序。當您使用此佈局時，您必須使用此方法將專案新增到容器中，即 applet

void add(String itemId, Component item) 將專案新增到容器中，並將專案與 ID 關聯。

卡片佈局有多種方法可以更改當前顯示的專案

void first(Container container) 顯示堆疊中的第一個專案。
void next(Container container) 顯示位於顯示專案之後堆疊中的專案。
void previous(Container container) 顯示位於顯示專案之前堆疊中的專案。
void last(Container container) 顯示堆疊中的最後一個專案。
void show(Container container, String itemId) 按 ID 顯示專案。
Computer code 程式碼清單 9.5：CardLayoutApplet.java 
import java.applet.Applet;
import java.awt.CardLayout;
import java.awt.Label;

public class CardLayoutApplet extends Applet {

    static final String COMPONENT_POSITION_TOP = "TOP";
    static final String COMPONENT_POSITION_MIDDLE = "MIDDLE";
    static final String COMPONENT_POSITION_BOTTOM = "BOTTOM";

    Label topLabel = new Label("At the top");
    Label middleLabel = new Label("In the middle");
    Label bottomLabel = new Label("At the bottom");

    /**
     * Init.
     */
    public void init() {
        setLayout(new CardLayout());
        add(COMPONENT_POSITION_TOP, topLabel);
        add(COMPONENT_POSITION_MIDDLE, middleLabel);
        add(COMPONENT_POSITION_BOTTOM, bottomLabel);
        ((CardLayout)getLayout()).show(this, COMPONENT_POSITION_MIDDLE);
    }
}


面板

[編輯 | 編輯原始碼]

佈局的主要優點是您可以將它們相互組合，並且可以使用面板做到這一點。面板是一個包含其他元件的元件。然後可以將面板新增到頂層元件（框架或 applet）或另一個面板中，並根據此父元件的佈局和約束將其本身放置。它有自己的佈局，通常用於放置一組相關的元件，例如按鈕

圖 9.16：Java applet 示例。
測試您的知識

問題 9.5：我們想要建立一個基本的 FTP（檔案傳輸協議）軟體，其外觀如下

應用程式名稱
工具
工具
工具
工具
工具
工具
工具
工具
工具
本地資料夾
遠端資料夾




狀態列

在頂部，它應該顯示軟體的名稱。在名稱下方，它應該顯示從左到右顯示的工具按鈕，如果按鈕到達右邊界，則按鈕的順序將被換行。在按鈕下方，它應該顯示兩個檔案列表。這兩個列表的寬度應相同，並且應使用應用程式的全部寬度。在這兩個列表下方，它應該顯示一個狀態列。

在 applet 上建立此顯示。

答案

首先，我們必須分析顯示。我們有四個獨立的元件區域

  • 名稱區域
  • 工具區域
  • 資料夾區域
  • 狀態區域

因此，我們必須首先將這些區域分開，然後我們將這些區域拆分為元件。

Computer code 答案 9.5：Answer5.java 
import java.applet.Applet;
import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.awt.Label;
import java.awt.Panel;

public class Answer5 extends Applet {

    Label applicationNameLabel = new Label("Wikibooks FTP");
    Button tool1Button = new Button("Tool");
    Button tool2Button = new Button("Tool");
    Button tool3Button = new Button("Tool");
    Button tool4Button = new Button("Tool");
    Button tool5Button = new Button("Tool");
    Button tool6Button = new Button("Tool");
    Button tool7Button = new Button("Tool");
    Button tool8Button = new Button("Tool");
    Button tool9Button = new Button("Tool");
    Label localFolderLabel = new Label("5 files");
    Label remoteFolderLabel = new Label("3 files");
    Label statusBarLabel = new Label("Available");

    /**
     * Init.
     */
    public void init() {
        setLayout(new BorderLayout());

        // The application name
        add(applicationNameLabel, BorderLayout.NORTH);

        // The center
        Panel centerPanel = new Panel();
        centerPanel.setLayout(new BorderLayout());

        // The buttons
        Panel buttonPanel = new Panel();
        buttonPanel.setLayout(new FlowLayout(FlowLayout.LEFT));
        buttonPanel.add(tool1Button);
        buttonPanel.add(tool2Button);
        buttonPanel.add(tool3Button);
        buttonPanel.add(tool4Button);
        buttonPanel.add(tool5Button);
        buttonPanel.add(tool6Button);
        buttonPanel.add(tool7Button);
        buttonPanel.add(tool8Button);
        buttonPanel.add(tool9Button);
        centerPanel.add(buttonPanel, BorderLayout.CENTER);

        // The local and remote folders
        Panel folderPanel = new Panel();
        folderPanel.setLayout(new GridLayout(0, 2, 2, 2));
        folderPanel.add(localFolderLabel);
        folderPanel.add(remoteFolderLabel);
        centerPanel.add(folderPanel, BorderLayout.SOUTH);

        add(centerPanel, BorderLayout.CENTER);

        // The status bar
        add(statusBarLabel, BorderLayout.SOUTH);
    }
}
  1. 所有元件都放在邊框佈局中，以便我們有三個垂直的元素區域。
  2. 北部的區域是標題區域。
  3. 中心區域包含按鈕和資料夾，稍後將被拆分。
  4. 南部的區域是狀態列區域。
  5. 中心區域現在使用邊框佈局拆分為中心按鈕區域和南部的資料夾區域。
  6. 按鈕區域然後使用流式佈局拆分。
  7. 資料夾區域現在使用網格佈局拆分。


我們使用網格佈局來顯示資料夾，以便兩個元件之間具有相同的寬度。 我們不能使用網格佈局來分隔名稱、按鈕、資料夾和狀態列，因為這些區域的高度不一致。 按鈕必須位於邊框佈局的中心，因為按鈕行數的計算會不準確，導致最後一行的按鈕不會顯示。

摘自 "https://wikibook.tw/w/index.php?title=Java_Programming/Applets/User_Interface&oldid=4404544"
華夏公益教科書