以GUI為例了解物件以及Event Lecturer：曾學文

如何儘速學會現代程式語言 語言基礎 熟悉常用的Class Library中的class及相關API(Functions) 概念+語法 語法可能不太熟, 但概念務必正確 熟悉常用的Class Library中的class及相關API(Functions) 基礎類別:數學運算, I/O, 例外處理, 安全管理, 多緒執行…等相關類別 圖形使用者介面(Graphical User Interface, GUI): 按鈕, 文字區塊…等類別. 資料庫存取: 支援透過一致的介面存取不同型態的DBMS的相關類別. 網路連結: 無線的連結建立, 資料傳送, 分散式運算, 加密等類別. [學習態度] 學生:初步了解各部份用法為主, 軟體工程師:以需求為導向.

程式設計的方法 [純手工打造]vs.[使用API] C/C++: Java: 善用class及API 純手工打造: 僅使用cin/cout, print()/scanf() API and class C: string.h, math.h, ctype.h, stdib.h,… Turbo C/C++中所提供的繪圖, 數學運算函數 C++: STL中的container, iterator與algorithm Visual C++/Borland C++所提供的GUI, 繒圖, 多序執 行,等API. Java: 善用class及API

Class 如何了解一個class與相關的API class = data member +member functions 無法自己寫(或不熟), 至少試著看懂現成的類別規格, e.g., class Applet, Graphics 多練習, 以能run為原則

JAVA使用者介面簡介 AWT(abstract window Toolkit): AWT元件 Java環境中, 專供程式設計GUI之用的類別集合統稱之(package java.awt.*) e.g., class Button, TxetField (可import java.awt.Button, java.awt.TextField,…) AWT元件 基本控制元件:Button, CheckBox, Choice, List, Menu, TextField 什麼是元件(Component): 是指awt類別所生成的物件

JAVA使用者介面簡介 其他AWT類別 其他取得輸入的元件:Slider, ScollBar與TextArea 建立自己的元件: Canvas, 有圖案的按鈕 標籤(Lable) 元件的容器:可以利用add() Method 將元件(如Button)加入類別(物件)稱之 Window, Diglog, FileDiglog, Frame Panel, Applet 其他AWT類別 Java.awt.* Dimension, Insert, Point, Rectangle, Polygon:指定表示大小與形狀的類別 Java.awt.event.*

AWT元件階層圖

GUI程式剖析 手寫版 <Frame1.java> public class Frame1 { public static void main(String[] args) { Frame frame = new Frame("First Window Program"); frame.setLayout(new GridLayout(7, 1)); frame.add(new Label("喜好選擇(可複選)：")); // Label元件 frame.add(new Checkbox("音樂")); // Checkbox元件 frame.add(new Checkbox("體育")); frame.add(new Checkbox("美術")); Choice c1 = new Choice(); // Choice元件 c1.add("Green"); c1.add("Red"); c1.add("Blue"); frame.add(c1); List ls1 = new List(3, false); // List元件 ls1.add("一年級"); ls1.add("二年級"); ls1.add("三年級"); frame.add(ls1); frame.add(new Button("測試按鈕")); // Button元件 frame.pack(); //調整視窗大小以容納所有元件 frame.setVisible(true); //顯示視窗 System.out.println("結束視窗程式，請按下CTRL+C"); }

事件的處理過程 public class Frame1 extends Frame implements ActionListener { TextField tf = new TextField(); Button b = new Button("Hi"); public static void main(String[] args) { Frame1 mf = new Frame1(); mf.setBounds(10,10,150,100); mf.setVisible(true); } public Frame1(){ this.setLayout(null); tf.setBounds(30,30,80,30); b.setBounds(new Rectangle(30,80,50,30)); b.addActionListener(this); add(tf); add(b); public void actionPerformed(ActionEvent e) { tf.setText("Hello");

更清楚顯示事件的處理過程 class EventSourceFrame extends Frame{ Button b = new Button("Hi"); public void registerEventListener(ActionListener AL) { b.addActionListener(AL); } public EventSourceFrame(){ this.setLayout(null); b.setBounds(new Rectangle(30,30,50,30)); this.add(b); public class Frame1 { public static void main(String[] args) { MyFrame mf = new MyFrame(); EventSourceFrame esf = new EventSourceFrame(); mf.setBounds(10,10,150,100); esf.setBounds(180,10,100,100); esf.registerEventListener(mf); mf.setVisible(true); esf.setVisible(true); } class MyFrame extends Frame implements ActionListener { TextField tf = new TextField(); public MyFrame(){ this.setLayout(null); tf.setBounds(30,30,80,30); add(tf); public void actionPerformed(ActionEvent e) { tf.setText("Hello");

使用JBuilder視覺化設計工具 private void jbInit() throws Exception { public class Frame1 extends JFrame { Button button1 = new Button(); TextField textField1 = new TextField(); public Frame1() { try { jbInit(); } catch(Exception e) { e.printStackTrace(); public static void main(String[] args) { Frame1 frame1 = new Frame1(); frame1.setSize(200,100); frame1.setVisible(true); private void jbInit() throws Exception { button1.setLabel("button1"); button1.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(ActionEvent e) { button1_actionPerformed(e); } }); textField1.setText("textField1"); this.getContentPane().add(button1, BorderLayout.NORTH); this.getContentPane().add(textField1, BorderLayout.CENTER); void button1_actionPerformed(ActionEvent e) { textField1.setText("Hi");

討論 用那一種好? 視覺化程式設計的迷失 (程式產生器, program generator)

Event (事件) 當我們在寫程式時，多半會需要與使用者互動或回應其指令 Java 的awt 則採用event-drivenprogramming 的方法來達成此目的，當某個特定的事件發生，就會驅動程式去執行某些特定的動作，而可與使用者產生即時的互動 三個要素 Event – 意指某個特定的事件、動作，也就是「發生了什麼事件」。例如：視窗關閉、滑鼠移動。 Event Source – 產生、觸發事件的元件。例如：Button Event Handler – 負責接收Event object 並作處理的Method EventSource，產生了某個Event object ，而由Event Listener負責處理這個Event

Events 以物件來表示 所有的事件都是 EventObject的子類別 所有的訊息都包含在java.awt.event類別庫內

以GUI為例了解物件以及Event 以MyGUI了解Event (MyGUI.class、MyGUI.form) public MyGUI() //MyGUI.java { buttonPlus.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { int varA = Integer.parseInt(textA.getText()); int varB = Integer.parseInt(textB.getText()); Integer varC = new Integer(varA+varB); textC.setText(varC.toString()); } });

委派事件模型 1. 事先有註冊 按鈕 buttonPlus actionListener 3. 根據物件的種類 指派給事件處理者 2.按下按鈕產生一個 Event物件傳給actionListner 3. 根據物件的種類 指派給事件處理者 actionPerformed

系統實際運作狀況 當事件發生時，會有一個事件ID產生 GUI元件使用這個ID碼，呼叫對應的事件方法 假如收到有ActionEvent這種物件規格 從全部已註冊的ActionListeners中，選出欲呼叫的actionPerformed() 方法

另一個版本 class MyListener implements ActionListener //介面 { public void actionPerformed(ActionEvent e) //實現這個介面一定要 { //實作actionPerformed int varA = Integer.parseInt(textA.getText()); int varB = Integer.parseInt(textB.getText()); Integer varC = new Integer(varA+varB); textC.setText(varC.toString()); } public MyGUI2() // MyGUI2.java MyListener listener = new MyListener(); // buttonPlus.addActionListener(listener);

Event的註冊 Event 產生時，只會通知有註冊過的Listener。所以對必須要先把Event『註冊』給要負責處理的Listner 註冊所有想要擷取的事件，而當使用者啟動的事件並不是我們所想要的事件時，就不加以理會 程式上以XX.addXXListener 來完成註冊 button.addActionListener(new ActionListener() … 一個event source 可以被好幾個listener 所註冊，同樣地，一個listener 也可以註冊好幾個event source 所有的Event Listener 都是一種interface，裡面只有定義這個Listener所提供的抽象method 必須去實作出此listener interface 內所有的method

事件物件說明 事件名稱 發生事件的原因 ActionEvent 按下按鈕、或是在輸入文字方塊/選擇清單方塊時按下Enter AdjustmentEvent 移動捲軸物件時 ItemEvent 選取核取方塊、選項鈕、下拉式清單和清單方塊 TextEvent 輸入的文字內容改變 ComponentEvent 隱藏、移動、顯示和調整元件時 ContainerEvent 新增或刪除元件 FocusEvent 元件取得或失去焦點時 KeyEvent 鍵盤按下、放開和輸入字元 MouseEvent 與滑鼠有關的行為 WindowEvent 視窗的操作，包括開、關、調整大小 PaintEvent 與繪圖有關的動作 InputEvent 它是KeyEvent和MouseEvent的父抽象類別

ActionListener ActionListener 都是EventListener的子類別 Action Type ComponentEvent ComponentListener FocusEvent FocusListener KeyEvent KeyListener ContainerEvent ContainerListener WindowEvent WindowListener ItemEvent ItemListener AdjustEvent AdjustListener TextEvent TextListener ActionEvent

處理的方法 Button CheckBox Component

Your Turn 實作出MyCalc小算盤 (MyCalc.class、MyCalc.form) Form已經建好了 完成計算機功能 @代表 00 S取平方根 % 例如 50*10% 5

如何撰寫滑鼠移動監聽器(MouseMotionListener) [需求]:想攔截滑鼠事件(MouseEvent)->實作MouseListener public class Myclass implements MouseListener{ someObject.addMouseListener(this); public void mouseClicked(MouseEvent e){…} public void mouseEnetered(MouseEvent e){…} public void mouseExited(MouseEvent e){…} public void mousePressed(MouseEvent e){…} public void mouseReleased(MouseEvent e){…} }

使用轉接類別(Adapter Class)來簡化監聽者的負擔 public void MouseAdapter implements MouseListener { public void mouseClicked(MouseEvent e){…} public void mouseEnetered(MouseEvent e){…} public void mouseExited(MouseEvent e){…} public void mousePressed(MouseEvent e){…} public void mouseReleased(MouseEvent e){…} } public class MyClass extends MouseAdapter{ 缺點?

如何撰寫按鍵監聽器(KeyListener) implements KeyListener public interface KeyListener { public void keyPressed(KeyEvent e){…} public void keyReleased(KeyEvent e){…} public void keyTyped(KeyEvent e){…} } 使用class KeyAdapter

Example public class Frame1 extends Frame { Button button1 = new Button(); public Frame1() { try { jbInit(); } catch(Exception e) { e.printStackTrace(); public static void main(String[] args) { Frame1 f1 = new Frame1(); f1.setBounds(10,10,400,200); f1.setVisible(true); private void jbInit() throws Exception { button1.setLabel("Hello"); button1.setBounds(new Rectangle(109, 86, 144, 48)); button1.addMouseListener(new java.awt.event.MouseAdapter() { public void mouseClicked(MouseEvent e) { button1_mouseClicked(e); public void mousePressed(MouseEvent e) { button1_mousePressed(e); }); button1.addKeyListener(new java.awt.event.KeyAdapter() { public void keyPress(KeyEvent e){ button1_keyPressed(e); } ); this.setLayout(null); this.addKeyListener(new java.awt.event.KeyAdapter() { public void keyReleased(KeyEvent e) { this_keyReleased(e); public void keyTyped(KeyEvent e) { this_keyTyped(e); }); this.add(button1, null);

Example void button1_mouseClicked(MouseEvent e) { Point p = button1.getLocation(); button1.setLocation((int)(p.getX()+50),(int)(p.getY())); } void button1_mousePressed(MouseEvent e) { button1.setLocation((int)(p.getX()),(int)(p.getY()+50)); void this_keyTyped(KeyEvent e) { public void button1_keyPressed(KeyEvent e){ Point p = button1.getLocation(); if(e.getKeyChar()==(char)'i') { button1.setLocation((int)(p.getX()+50),(int)(p.getY())); } else if(e.getKeyChar()==(char)'j') button1.setLocation((int)(p.getX()-50),(int)(p.getY())); void this_keyReleased(KeyEvent e) {

Swing元件 Swing不是某些字的縮寫 Why Swing? java.awt.*的缺點: Swing package 不夠用: 如表格 事件處理模式與使用的作業平台相關性太高 (heavy weight components), 需要lightweight components來修正awt的缺點 Swing package javax.swing.*; class JButton, JTextField, JeditorPane, JSlider, … class JFrame, JApplet, … class JList, JComboBox, JTable, JTree, … Javax.swing.event:

Example private void jbInit() throws Exception { jButton1.setText("jButton1"); jButton1.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(ActionEvent e) { jButton1_actionPerformed(e); } }); jTextPane1.setText("jTextPane1"); this.getContentPane().setBackground(Color.red); this.getContentPane().add(jButton1, BorderLayout.NORTH); this.getContentPane().add(jTextPane1, BorderLayout.CENTER); void jButton1_actionPerformed(ActionEvent e) { jTextPane1.setText(jTextPane1.getText()+"Hello"); public class Frame1 extends JFrame { JButton jButton1 = new JButton(); JTextPane jTextPane1 = new JTextPane(); public Frame1() { try { jbInit(); } catch(Exception e) { e.printStackTrace(); public static void main(String[] args) { Frame1 frame1 = new Frame1(); frame1.setSize(200,200); frame1.setVisible(true);

討論 swing慢慢的取代awt, 直接學swing? swing是架在awt上面發展的, 所以awt不會消失, 只是少用而已.

提示 GUI元件的使用，必須靠類別庫中的類別以產生可以實際應用的物件。在以下的文章中，凡是提到GUI元件時，我們不嚴格區分類別、元件與物件三個名詞，並將此三個名詞交替著使用。 AWT類別庫裏的類別因為與原來平台的GUI介面息息相關，因此我們將之稱為重量級(heavy-weighted)；Swing類別因為不倚賴原來平台的GUI介面，因此我們將之稱為輕量級(light-weighted)。

使用AWT元件 AWT元件都是class component的子類別 注意大小寫 使用元件的一般規則 除了Windows類別會自動顯示在螢幕上之外,其他屬於class component的物件都必須先加入container物件之中 Frame與Diglog物件屬於最上職的元件容器, 視為不能加到container物件之中的元件

AWT共同父類別介紹 Class component 基本繒圖:paint(), update(), repaint() 字型與顏色控制 某元件呼叫repaint()->AWT(系統)回應:呼叫paint(), update() 只有Applet, Canvas, Panel需要呼叫repaint() 字型與顏色控制 setForground(), setBackground(), … 可見度控制 setVisible(boolean b); 開啟或關閉元件 setEnable(boolean); 事件處理 外觀控制

AWT共同父類別介紹 Class container add(Component component) class MyFrame extends Frame implements ActionListener { TextField tf = new TextField(); public MyFrame(){ this.setLayout(null); tf.setBounds(30,30,80,30); add(tf); }

按鈕(Button)元件 (1/8) 按鈕元件的使用必須透過java.awt類別庫中的Button類別，Button類別的建構函數與其他方法的用法如下：

按鈕(Button)元件(2/8) 以下範例程式說明按鈕元件的應用： 範例程式(檔名:按鈕測試1 .java) import java.applet.Applet; //引入Applet類別 import java.awt.Button; //引入Button類別 public class 按鈕測試1 extends Applet { public void init() { Button 按鈕=new Button("歡迎來到Java世界"); add(按鈕); /* 以上二行可以使用下列一個敘述即可以達到同樣效果 add(new Button("歡迎來到Java世界")); */ } //方法:init() 定義區塊結束 } //類別:按鈕測試1 定義區塊結束

按鈕(Button)元件(3/8) 網頁檔案(檔名：按鈕測試1網頁.html) <applet code="按鈕測試1.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer 按鈕測試1網頁.html)

按鈕(Button)元件(4/8) 在範例程式按鈕測試1.java中，我們撰寫了一個小程式(applet)，並使用init()方法，在小程式顯示視窗中安排一個按鈕(Button)，而且此按鈕上有"歡迎來到Java世界"的標記。我們可將滑鼠游標移到此按鈕上並按下滑鼠左鍵，這會有一個按鈕被按下的感覺，但按鈕被按下後卻沒有什麼特別的狀況發生，這是因為尚未將按鈕被按下的事件(event)加以指定處理程序之故。Java的事件處理我們將留到下一章中介紹。 在第7行我們使用new運算子產生一個Button類別的物件 按鈕，在第8行使用add(按鈕) 將此物件加入小程式顯示視窗中。add是Applet類別中的一個方法，用以將元件物件加入小程式顯示視窗中。

按鈕(Button)元件(5/8) Applet類別的add方法用法摘要如下：

按鈕(Button)元件(6/8) 範例程式(檔名: 按鈕測試2.java) //檔名：按鈕測試2.java import java.applet.Applet; //引入Applet類別 import java.awt.Button; //引入Button類別 public class 按鈕測試2 extends Applet { public void init() { add( new Button("按鈕1") ); add( new Button("按鈕2") );

按鈕(Button)元件(7/8) 網頁檔案(檔名：按鈕測試2網頁.html) add( new Button("按鈕3") ); add( new Button("按鈕4") ); add( new Button("按鈕5") ); add( new Button("按鈕6") ); add( new Button("按鈕7") ); add( new Button("按鈕8") ); } //方法:init() 定義區塊結束 } //類別:按鈕測試2 定義區塊結束 網頁檔案(檔名：按鈕測試2網頁.html) <html> <applet code="按鈕測試2.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer 按鈕測試2網頁.html)

按鈕(Button)元件(8/8) 在範例程式按鈕測試2.java中，我們使用8個add方法加入8個按鈕元件於小程式顯示視窗中，這8個按鈕元件的標記分別為"按鈕1"、"按鈕2"…、"按鈕8"。讀者可以移動一下小程式的顯示視窗，你可以發現這些按鈕元件會依顯示視窗的大小自動調整按鈕的擺置。

版面配置 (1/16) 元件於顯示視窗中的不同位置配置稱為版面配置(layout)，Java語言支援許多不同的版面配置方式，以下我們即介紹一些常用的版面配置方式。 Applet類別的setLayout方法可以指定版面配置方式，setLayout方法的參數，必需是屬於版面配置管理類別的物件，Java語言提供許多版面配置管理的類別，以下我們介紹其中三種： FlowLayout(順序型)、Borderlayout(邊界型)及GridLayout(方格型)。

版面配置 (2/16) 順序型FlowLayout版面配置是預設的版面配置方式，就如同範例程式按鈕測試2.java中，當我們並未指定版面配置方式時，則自動採用此種配置。FlowLayout由左而右，由上而下一顯示視窗可以容納的方式配置所有的元件。 類別FlowLayout屬java.awt類別庫，其建構方法有以下三種 FlowLayout() FlowLayout(int 對齋方式) FlowLayout(int 對齊方式, int 水平間距, int 垂直間距)

版面配置 (3/16) 第一種建構方法是建立一個預設的版面配置，它會將元件置中，而且每個元件之水平與垂直方向保留5個像素(pixel)的間隔，第二種方式可以指定元件的對齊方式，對齊方式的值已在FlowLayout類別中定義，有以下三種： FlowLayout.LEFT (表示向左對齊) FlowLayout.CENTER (表示向中對齊) FlowLayout.RIGHT (表示向右對齊)

版面配置 (4/16) 則所有的按鈕元件都會向右靠齊，其結果如下圖所示： 例如，若我們在程式按鈕測試2.java中第7行之前加入 setLayout(new FlowLayout(FlowLayout.RIGHT)); 則所有的按鈕元件都會向右靠齊，其結果如下圖所示：

版面配置 (5/16) 第三種的FlowLayout類別的建構方法除了可以指定元件的對齊方式外，也可以指定元件之間水平與垂直的間距，間距以像素為計算單位。 例如，若我們在程式按鈕測試2.java中第7行之前加入 setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20)); 除了可以指定所有的按鈕元件向左靠齊外，也可以指定元件間水平間距是10像素，垂直間距是30像素，其結果如下圖所示：

版面配置 (6/16)

版面配置 (7/16) 類別GridLayout則可以將元件以二維格狀的方式排列，GridLayout的建構方法如下： GridLayout(int 列數, int 欄數) GridLayout(int 列數, int 欄數, int 水平間距, int 垂直間距) 第一個建構方法是建立單一列的方格配置，而欄數則為任意，第二個建構方法則會建立列數欄數的方格配置，注意，若元件元素超過(或不足)列數欄數則方格配置會符合列數的要求，而欄位數則會自行調整而不依照欄數所指定之值。另外，列數及欄數之值皆可設為0(但非同時)，此二參數設為0時表示列數或欄數可隨元件之多寡自動調整。

版面配置 (8/16) 例如，在按鈕測試3.java中的第10行，我們使用敘述 來將所有的按鈕以4列2欄的格狀來安排版面配置。 setLayout(new GridLayout(4,2)); 來將所有的按鈕以4列2欄的格狀來安排版面配置。 範例程式(檔名: 按鈕測試3.java) //檔名：按鈕測試3.java //說明：在小程式顯示視窗中以4列2欄的格狀加入八個按鈕(Button)元件 import java.applet.Applet; //引入Applet類別 import java.awt.Button; //引入Button類別 import java.awt.GridLayout; //引入GridLayout類別

版面配置 (9/16) public class 按鈕測試3 extends Applet { public void init() { setLayout(new GridLayout(4,2) ); add( new Button("按鈕1") ); add( new Button("按鈕2") ); add( new Button("按鈕3") ); add( new Button("按鈕4") ); add( new Button("按鈕5") ); add( new Button("按鈕6") ); add( new Button("按鈕7") ); add( new Button("按鈕8") ); } //方法:init() 定義區塊結束 } //類別:按鈕測試3定義區塊結束

版面配置 (10/16) 網頁檔案(檔名：按鈕測試3網頁.html) <applet code="按鈕測試3.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer 按鈕測試3網頁.html)

版面配置 (11/16) GridLayout類別的第三個建構方法則可以指定元件間之水平間距與垂直間距，例如 setLayout(new GridLayout(4,2,10,5)); 可以指定4列2欄的元件配置，而且元件間水平間隔10像素而其垂直間隔5像素。 類別BorderLayout則可以指定元件在版面的四週邊界及中央的版面配置，顯示視窗的四週的邊界分別稱為North、South、East及West，而中央則稱為Center，BorderLayout具有以下二個建構方法： BorderLayout() BorderLayout(int 水平間距, int 垂直間距)

版面配置 (12/16) 第一個建構方法可以建立預設的邊界版面配置，而第二個建構方法可以指定元件間之水平間距及垂直間距。在使用Borderlayout時，我們配合使用二個參數的add方法來將元素加入小程式顯示視窗中，其用法為 add(方向字串, 元件); 其中方向字串可能之值為"North"、"South"、"East"、"West"及"Center"(請注意大小寫)。我們使用以下的範例說明BorderLayout類別的使用。

版面配置 (13/16) 範例程式(檔名: 按鈕測試4.java) //檔名：按鈕測試4.java //說明：在小程式顯示視窗中以邊界配置方式加入五個按鈕(Button)元件 import java.applet.Applet; //引入Applet類別 import java.awt.Button; //引入Button類別 import java.awt.BorderLayout; //引入BorderLayout類別 public class 按鈕測試4 extends Applet { public void init() { setLayout(new BorderLayout() ); add("East",new Button("東按鈕")); add("South",new Button("南按鈕"));

版面配置 (14/16) 網頁檔案(檔名：按鈕測試4網頁.html) add("West",new Button("西按鈕")); add("North",new Button("北按鈕")); add("Center",new Button("中按鈕")); } //方法:init() 定義區塊結束 } //類別:按鈕測試4定義區塊結束 網頁檔案(檔名：按鈕測試4網頁.html) <html> <applet code="按鈕測試4.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer 按鈕測試4網頁.html)

版面配置 (15/16) 在範例程式按鈕測試4.java中，我們在第8行以setLayout(new BorderLayout());敘述指定版面配置為邊界模式，而在第9行，以 add("East",new Button("東按鈕")); 將一個標記為"東按鈕"的按鈕元件加入版面的東方("East")，同樣的，第10至第13行則使用相同的方式，使用add()方法將其他的4個按鈕分別加入版面的南方、西方、北方及中央。 另外，若將第8行改為 setLayout(new BorderLayout(5,15)); 則可在各元件間指出5像素的水平間距及15像素的垂直間距，其執行情形如下所示：

版面配置 (16/16)

標記(Label)元件 (1/5) 標記(Label)元件主要用來顯示單行的文字訊息，一般將之用來顯示說明文字。Label類別的建構方法及常用的方法摘要說明如下： 標記元件的使用必須透過java.awt類別庫中的Label類別，Label類別的建構函數與其他方法的用法如下：

標記(Label)元件 (2/5)

標記(Label)元件 (3/5) 以下是類別Label所屬方法的綜合應用程式： 範例程式(檔名: 標記測試.java) //說明:各種標記方法之綜合應用 import java.applet.Applet; //引入Applet類別 import java.awt.Label; //引入Label類別 import java.awt.GridLayout; //引入GridLayout類別 public class 標記測試 extends Applet{ public void init() { Label 標記1=new Label();

標記(Label)元件 (4/5) Label 標記2=new Label("向中靠"); Label 標記3=new Label("向右靠",2); //2可以使用Label.RIGHT取代 標記1.setText("向左靠"); 標記1.setAlignment(0); //0可以使用Label.LEFT取代 標記2.setAlignment(1); //1可以使用Label.CENTER取代 setLayout(new GridLayout(3,1)); add(標記1); add(標記2); add(標記3); } //方法:init() 定義區塊結束 } //類別:標記測試 定義區塊結束

標記(Label)元件 (5/5) 網頁檔案(檔名：標記測試網頁.html) <applet code="標記測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer 標記測試網頁.html)

選項(Checkbox)元件 (1/6) 選項(Checkbox)元件可用來列出選項並由使用者決定該選項是否被選取(設為true)。選項元件也可以設定為屬於同一個選項群(CheckboxGroup)，被設定為同一個選項群的選項中同時只能有一個被選取，這類似多選一的單選動作，若選項未被設為屬於任何選項群，則他們可任意獨立的被選取。 Checkbox類別的建構方法及其常用的方法摘要描述如下：

選項(Checkbox)元件 (2/6)

選項(Checkbox)元件 (3/6)

選項(Checkbox)元件 (4/6) 以下是類別Checkbox所屬方法的綜合應用範例程式： 範例程式(檔名: 選項測試.java) public class 選項測試 extends Applet{ public void init() { Label 標記=new Label("請選擇以下一項"); CheckboxGroup 選項群=new CheckboxGroup(); Checkbox 選項1=new Checkbox(); Checkbox 選項2=new Checkbox("第二項"); Checkbox 選項3=new Checkbox("第三項",false); Checkbox 選項4=new Checkbox("第四項",false,選項群);

選項(Checkbox)元件 (5/6) Checkbox 選項5=new Checkbox("第五項",選項群,false); 選項1.setLabel("第一項"); 選項1.setCheckboxGroup(選項群); 選項2.setCheckboxGroup(選項群); 選項3.setCheckboxGroup(選項群); 選項1.setState(true); 選項2.setState(false); setLayout(new GridLayout(6,1)); add(標記); add(選項1);

選項(Checkbox)元件 (6/6) 網頁檔案(檔名：選項測試網頁.html) add(選項2); add(選項3); add(選項4); add(選項5); } //方法:init() 定義區塊結束 } //類別:選項測試 定義區塊結束 網頁檔案(檔名：選項測試網頁.html) <html> <applet code="選項測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer選項測試網頁.html)

選單(Choice)元件 (1/6) 選單(Choice)元件與選項(Checkbox)元件類似，都是可以用來指出元件選取狀態，不同的是Choice元件是使用下拉式清單的方式來列出所有的選項，而Checkbox是以一項一項列出的方式來列出所有的選項。 Choice類別的建構方法及其他常用的方法摘要如下：

選單(Choice)元件 (2/6)

選單(Choice)元件 (3/6)

選單(Choice)元件 (4/6) 以下是類別Choice所屬方法的綜合應用程式： 範例程式(檔名: 選單測試.java) import java.awt.Label; //引入Label類別 import java.awt.Choice; //引入Choice類別 import java.awt.GridLayout; //引入GridLayout類別 public class 選單測試 extends Applet{ public void init() { Label 標記=new Label("請選擇以下一項"); Choice 選單=new Choice(); 選單.add("第1項");

選單(Choice)元件 (5/6) 選單.addItem("第2項"); 選單.addItem("第3項"); 選單.insert("第2.1項",2); 選單.select("第2項"); 選單.select(1); String 訊息字串="(選單一共有"+選單.getItemCount()+ "項，由0開始編號，編號為5的項目為"+選單.getItem(5)+")"; Label 訊息標記=new Label(訊息字串); add(標記);

選單(Choice)元件 (6/6) 網頁檔案(檔名：選單測試網頁.html) add(訊息標記); add(選單); } //方法:init() 定義區塊結束 } //類別:選單測試 定義區塊結束 網頁檔案(檔名：選單測試網頁.html) <html> <applet code="選單測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer選單測試網頁.html)

清單(List)元件 (1/7) 清單(List)元件也是可以用來選取項目的元件，只是List元件可以將被選擇項目直接以清單的方式表列出來供選擇而已，List元件可以設定為多重選擇。 List類別的建構方法及其他常用的方法摘要如下：

清單(List)元件 (2/7)

清單(List)元件 (3/7)

清單(List)元件 (4/7) 以下是類別List所屬方法的綜合應用程式： 範例程式(檔名: 清單測試.java) import java.applet.Applet; //引入Applet類別 import java.awt.Label; //引入Label類別 import java.awt.List; //引入List類別 import java.awt.GridLayout; //引入GridLayout類別 public class 清單測試 extends Applet{ public void init() {

清單(List)元件 (5/7) Label 標記=new Label("請選擇以下一項"); List 清單=new List(5); 清單.setMultipleMode(true); 清單.add("第1項"); 清單.add("第2項"); 清單.add("第3項"); 清單.add("第4項"); 清單.add("第5項"); 清單.add("第2.1項",2); 清單.select(1); 清單.select(3);

清單(List)元件 (6/7) 清單.select(5); String 訊息字串="(清單一共有"+清單.getItemCount()+ Label 訊息標記=new Label(訊息字串); add(標記); add(訊息標記); add(清單); } //方法:init() 定義區塊結束 } //類別:清單測試 定義區塊結束

清單(List)元件 (7/7) 網頁檔案(檔名：清單測試網頁.html) <applet code="清單測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer清單測試網頁.html)

文字欄(TextField)元件(1/3) 文字欄(TextField)元件提供一個可輸入單列文字的編輯區域，使用者可以在文字欄中輸入文字，一般作為輸入資料之用。TextField亦也可以將輸入的內容隱藏起來，而以設定的字元(如＊或＃等字元)來顯示，這種功能在輸入密碼時特別有效。 TextField類別的建構方法及其他常用的方法摘要如下：

文字欄(TextField)元件(2/3)

文字欄(TextField)元件(3/3) 類別TextField所屬方法的說明將於下一小節再介紹。

文字區(TextArea)元件 (1/) 文字區(TextArea)元件提供一個多列的可編輯空間，在文字區裏的內容可以設定為唯讀或是可編輯的，而作業平台上所提供的剪下、複製、貼上等功能均可直接使用，TextArea類別的建構方法即常用的方法敘述如下： TextArea類別的建構方法及其他常用的方法摘要如下：

文字區(TextArea)元件 (2/)

文字區(TextArea)元件 (3/)

文字區(TextArea)元件 (4/)

文字區(TextArea)元件 (5/) 以下是類別TextField及類別TextArea所屬方法的綜合應用程式： 範例程式(檔名: 文字欄文字區測試.java) //檔名:文字欄文字區測試.java //說明:文字欄(TextField)文字區(TextArea)各種方法之綜合應用 import java.applet.Applet; //引入Applet類別 import java.awt.*; //引入java.awt類別庫之所有類別 public class 文字欄文字區測試 extends Applet{ public void init() { TextField 文字欄1=new TextField("這是文字欄1裡的文字",30); TextField 文字欄2=new TextField(); 文字欄2.setColumns(30); 文字欄2.setText("這是文字欄2裡的文字");

文字區(TextArea)元件 (6/) 文字欄2.setEchoChar('*'); TextArea 文字區=new TextArea(5,10); 文字區.setText("歡迎來到Java世界\n你現在看到的是\n「文字區」元件"); 文字區.selectAll(); add(new Label("文字欄1") ); add(文字欄1); add(new Label("文字欄2") ); add(文字欄2); add(new Label("文字區") ); add(文字區); } //方法:init() 定義區塊結束 } //類別:文字欄文字區測試 定義區塊結束

文字區(TextArea)元件 (7/) 網頁檔案(檔名：文字欄文字區測試網頁.html) <applet code="文字欄文字區測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer文字欄文字區測試網頁.html)

捲軸(Scrollbar)元件 (1/7) 捲軸(Scrollbar)元件可以利用使用者對捲軸的操控以取得一個預定範圍內的數值，捲軸可分為水平捲軸與垂直捲軸二種。 Scrollbar類別的建構方法及其他常用的方法摘要如下：

捲軸(Scrollbar)元件(2/7)

捲軸(Scrollbar)元件(3/7)

捲軸(Scrollbar)元件(4/7)

捲軸(Scrollbar)元件(5/7) 以下是類別Scrollbar所屬方法的綜合應用程式： 範例程式(檔名: 捲軸測試.java) import java.applet.Applet; //引入Applet類別 import java.awt.*; //引入java.awt類別庫之所有類別 public class 捲軸測試 extends Applet{ public void init() { Scrollbar 捲軸1=new Scrollbar(); Scrollbar 捲軸2=new Scrollbar(Scrollbar.VERTICAL); Scrollbar 捲軸3=new Scrollbar(Scrollbar.HORIZONTAL,100,50,0,100); Scrollbar 捲軸4=new Scrollbar();

捲軸(Scrollbar)元件(6/7) 捲軸2.setValues(100,10,0,100); 捲軸4.setOrientation(Scrollbar.HORIZONTAL); 捲軸4.setValue(50); 捲軸4.setVisibleAmount(25); 捲軸4.setBlockIncrement(25); 捲軸4.setUnitIncrement(10); 捲軸4.setMinimum(0); 捲軸4.setMaximum(100); setLayout(new BorderLayout()); add("West",捲軸1); add("East",捲軸2); add("North",捲軸3); add("South",捲軸4); } //方法:init() 定義區塊結束 } //類別:捲軸測試 定義區塊結束

捲軸(Scrollbar)元件(7/7) 網頁檔案(檔名：捲軸測試網頁.html) <applet code="捲軸測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer捲軸測試網頁.html)

容器(Container)相關類別(1/5) 容器(Container)類別是許多元件類別的超類別，我們可以在以Container類別為超類別的元件，再容納其他元件。屬於Container類別的衍生類別的元件包括：面板(Panel)元件、捲軸面板(ScrollPane)元件、視窗(Window)元件、對話框(Dialog)元件、檔案對話框(FileDialog)元件及窗框(Frame)元件等。 Container類別的衍生類別，都由Container類別繼承了許多相同的方法，以下我們僅介紹Container類別中常用的方法，而不再針對個別的Container類別的衍生類別加以介紹。儘管如此，我們仍然在範例程式中使用了許多常用的Container類別的衍生類別元件，包括面板(Panel)元件、對話框(Dialog)元件、檔案對話框(FileDialog)元件及窗框(Frame)元件等。這些元件的常用方法摘要請讀者直接查閱Java語言的API說明文件。

容器(Container)相關類別(2/5)

容器(Container)相關類別(3/5) 範例程式(檔名: 容器測試.java) //檔名:容器測試.java //說明:容器(Container) 類別的衍生類別的綜合應用 import java.applet.Applet; //引入Applet類別 import java.awt.*; //引入java.awt類別庫之所有類別 public class 容器測試 extends Applet{ public void init() { Frame 窗框=new Frame("窗框"); Dialog 對話框=new Dialog(窗框,"對話框"); FileDialog 檔案對話框=new FileDialog(窗框,"檔案對話框"); Panel 面板1=new Panel();

容器(Container)相關類別(4/5) Panel 面板2=new Panel(); 窗框.setSize(300,300); 窗框.setLocation(200,200); 對話框.setSize(200,100); 對話框.setLocation(50,50); 面板1.setBackground(Color.red); 面板2.setBackground(Color.blue); 面板1.add(new Label("紅色")); 面板2.add(new Label("藍色")); 對話框.setLayout(new GridLayout(2,1,0,0)); 對話框.add(面板1); 對話框.add(面板2);

容器(Container)相關類別(5/5) 窗框.setVisible(true); 對話框.setVisible(true); 檔案對話框.setVisible(true); } //方法:init() 定義區塊結束 } //類別:容器測試 定義區塊結束 網頁檔案(檔名：容器測試網頁.html) <html> <applet code="容器測試.class" width="800" height="600"> </applet> </html> 執行結果(命令視窗指令：appletviewer 容器測試網頁.html)

功能表(Menu)相關元件 (1/7) 功能表(Menu)相關元件包括功能表區(MenuBar)元件、功能表(Menu)元件、功能表項目(MenuItem)元件、選項功能表項目(checkboxMenuItem)元件及彈出式功能表(popupMenu)元件等，這些元件都是繼承自MenuComponent類別。 藉由上述的元件，我們可以在窗框(frame)的功能表區(menubar)中加入功能表(menu)或選項功能表項目(checkbox menu item)，或按滑鼠右鍵以便能顯示出彈出式功能表(popup menu)。

功能表(Menu)相關元件 (2/7) MenuComponent類別的衍生類別，都由MenuComponent類別繼承了許多相同的方法，以下我們僅介紹MenuComponent類別中常用的方法，而不再針對個別的MenuComponent類別的衍生類別加以介紹。 儘管如此，我們仍然在範例程式中使用了許多常用的MenuComponent類別的衍生類別元件，包括功能表區(MenuBar)元件、功能表(Menu)元件、功能表項目(MenuItem)元件、選項功能表項目(checkboxMenuItem)元件，這些元件的常用方法摘要請讀者直接查閱Java語言的API說明文件。

功能表(Menu)相關元件 (3/7)

功能表(Menu)相關元件 (4/7) 以下是MenuComponent類別衍生類別的綜合應用範例程式： 範例程式(檔名: 功能表測試.java) //檔名:功能表測試.java //說明:功能表(Menu)相關元件的綜合應用 import java.applet.Applet; //引入Applet類別 import java.awt.*; //引入awt的所有類別 public class 功能表測試 extends Applet { Frame 窗框 = new Frame("一個包含功能表的測試窗框"); Menu 功能表1 = new Menu("檔案"); Menu 功能表2 = new Menu("設定"); Menu 功能表21 = new Menu("色彩"); Menu 功能表22 = new Menu("樣式");

功能表(Menu)相關元件 (5/7) CheckboxMenuItem 功能表221 = new CheckboxMenuItem("粗體",true); CheckboxMenuItem 功能表222 = new CheckboxMenuItem("斜體"); CheckboxMenuItem 功能表223 = new CheckboxMenuItem("底線"); Menu 功能表3 = new Menu("說明"); MenuBar 功能表區 = new MenuBar(); public void init() { 功能表1.add("建新檔"); 功能表1.add("開舊檔"); 功能表1.add("存檔"); 功能表1.addSeparator(); 功能表1.add("離開"); 功能表2.add(功能表21);

功能表(Menu)相關元件 (6/7) 功能表2.add(功能表22); 功能表21.add("紅"); 功能表21.add("綠"); 功能表3.addSeparator(); 功能表3.add("關於本軟體"); 功能表區.add(功能表1);

功能表(Menu)相關元件 (7/7) 網頁檔案(檔名：容器測試網頁.html) 功能表區.add(功能表2); 功能表區.setHelpMenu(功能表3); 窗框.setMenuBar(功能表區); 窗框.setSize(250,250); 窗框.setResizable(true); 窗框.setVisible(true); } //方法:init() 定義區塊結束 } //類別:功能表測試 定義區塊結束 網頁檔案(檔名：容器測試網頁.html) <html> <applet code="容器測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer 容器測試網頁.html)

Example public class Frame1 extends Frame { String passwd = "1234"; CheckboxGroup checkboxGroup1 = new CheckboxGroup(); Checkbox checkbox1 = new Checkbox(); Checkbox checkbox2 = new Checkbox(); TextField textField1 = new TextField(); TextField textField2 = new TextField(); Label label1 = new Label(); Label label2 = new Label(); Button button1 = new Button(); TextArea textArea1 = new TextArea(); Checkbox checkbox3 = new Checkbox(); Checkbox checkbox4 = new Checkbox(); Label label3 = new Label(); public Frame1() { try { jbInit(); } catch(Exception e) { e.printStackTrace(); checkbox1.setCheckboxGroup(checkboxGroup1); checkbox2.setCheckboxGroup(checkboxGroup1); public static void main(String[] args) { Frame1 frame1 = new Frame1(); frame1.setBounds(50,50,360,250); frame1.setVisible(true);

Example private void jbInit() throws Exception { checkbox1.setLabel("套餐一(480)"); checkbox1.setBounds(new Rectangle(57, 94, 83, 27)); this.setLayout(null); checkbox2.setLabel("套餐二(550)"); checkbox2.setBounds(new Rectangle(55, 120, 82, 25)); textField1.setEchoChar('*'); textField1.setBounds(new Rectangle(81, 156, 100, 29)); textField2.setBounds(new Rectangle(80, 202, 99, 31)); label1.setText("密碼"); label1.setBounds(new Rectangle(34, 164, 34, 25)); label2.setText("金額"); label2.setBounds(new Rectangle(33, 202, 35, 27)); button1.setLabel("結算"); button1.setBounds(new Rectangle(80, 242, 104, 47)); button1.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(ActionEvent e) { button1_actionPerformed(e); } });

Example void button1_actionPerformed(ActionEvent e) { int money =0; if(checkbox3.getState())money+=480; if(checkbox4.getState())money+=550; if(checkboxGroup1.getSelectedCheckbox()==checkbox1) { if(textField1.getText().equals(passwd)) textField2.setText(""+money*0.8); textArea1.setText(textArea1.getText()+"會員打八折!\n"); } else textArea1.setText(textArea1.getText()+"會員:密碼錯誤!\n"); else{ textField2.setText(""+money*0.95); textArea1.setText(textArea1.getText()+"非會員打八折!\n"); textArea1.setBounds(new Rectangle(207, 99, 124, 128)); checkbox3.setLabel("會員"); checkbox3.setBounds(new Rectangle(40, 64, 60, 18)); checkbox4.setLabel("非會員"); checkbox4.setBounds(new Rectangle(104, 65, 85, 17)); label3.setText("訊息欄"); label3.setBounds(new Rectangle(223, 61, 71, 20)); this.add(button1, null); this.add(textField2, null); this.add(checkbox1, null); this.add(checkbox2, null); this.add(textField1, null); this.add(label2, null); this.add(label1, null); this.add(checkbox4, null); this.add(checkbox3, null); this.add(textArea1, null); this.add(label3, null); }