Java Swing Comes from originallyhttp://debut.cis.nctu.edu.tw/~ching/

AWT  AWT  AWT delegates the drawing operations to the underlying OS  Under Windows, we have a MS-Style window  Under MAC, we have a MAC-Style window

Swing  Swing 不使用 OS 的 toolkit 來建立使用者介面, 所有的元件都由 java 自己提供, 不管在哪一個平台上執行, 按鈕都長的一樣  如何使用 Swing ? 1. 組合預先建造好的元件 2. 把它們放到容器 (container) 中 3. 利用版面管理員製造更複雜的介面 Swing 利用版面管理員 (layout manager) 來管理容器內的元件, 控制它 們的大小及位置  相對位置取代絕對位置 ( 直接用座標控制 ): 好處是當使用者重新 改變視窗大小時, 你可以確定其元件可以在正確位置上出現

元件  Swing 元件必須放置在容器中才可以使用, 而容器負責將元件分類, 讓它們可以 被版面管理員顯示  所有的 Swing 元件都是抽象類別 javax.swing.JComponent 繼承而來的  如 JButton 是 AbstractButton 的子類別, 而 AbstractButton 又是 JComponent 的子類別  JComponent 是 Swing 元件階層的 root 我們可以說 Swing 是 AWT 的大延伸 因為 JComponent 類別是從 Container 類別繼承而來 所以他同時具備元件與容器的特性

JComponent 類別的功能分成兩類  控制外觀 : 顯形 / 隱形, 元件大小與位置, 字型與顏色  當元件顯示時, JComponent 負責與顯示裝置作關聯, 並處理繪圖  元件的行為 : 處理對使用者產生的事件作出反應  當使用者在元件的顯示區域作出動作, Swing 的執行緒會送出一個 事件來描述 [ 發生了甚麼事 ] [ 註冊 ] 若你被按下時, 請通知我 1 2 物件 1 物件 2 物件 1 物件 2 當使用者發出事件時, 根據註冊列表 傳送事件給聆聽者

事件 (Event)  當使用者按下一個按鈕時, 按鈕會傳送一個 ActionEvent 物 件給所有的註冊者  如果要接受這事件, 則必須要向該按鈕註冊 ( ActionListener )  事件接受者必須實作 method 來接受按鈕傳來的事件  特定的事件可以由不同種類元件產生  MouseEvent --> 滑鼠在元件區域中的行為  KeyEvent  鍵盤按鍵的行為  高階事件 (ex: ActionEvent)  代表使用者介面元件完成其工作

容器 的重大責任  負責排列它所包含的元件  若一個元件改變了大小或可見度, 則必須通知它的容器  容器則通知版面管理器來整理容器中的子元件 Swing 的元件同時也是容器 (Container) 容器可以直接排列管理它裡面的 JComponent 物件 你不需要知道這些物件是甚麼 ? 有何功用 ? 你可以自由抽換容器內的元件或組合更複雜的使用者介面元件

對等物  我們的元件必須包含原生方法的物件溝通, 才能與實際的 作業系統互動 (AWT 對等物介面 )  Ex. 要把資料顯示在螢幕上, 從輸入裝置讀取資料, 則必須由 Java 的世界跳到真實作業環境  AWT 使用許多對等物  一個元件對應一個對等物 Ex. 若你建立一個視窗, 在裡面加入 8 個按鈕 AWT 會建立 9 個對等物 : ( 一個視窗,8 個按鈕對等物 )  Swing 的元件幾乎是不對等的 ( 輕小元件 )  Swing 元件與 os 沒有互動  元件的繪製與 User 事件回應  由 parent container 負責處理

使用輕小元件的原因  因為是元件自己繪製自己的外框, 所以可以動態的決定如何繪製  Swing 支援不同的 Look and Feel  我們可以動態的改變外觀 ( 預設值是 Metal)  使用對等物的方式很難改變元件的特性  因為對等物是由 OS 提供  使用作業系統原生碼，將使程式移植變的困難  原生對等物沒有效率  Ex. 若使用 AWT 的 TextField 作為試算表的 cell, 建立數百個 TextFieldzPeer 非常沒有效率 為何不用 AWT

MVC 架構  Model/View/Control 架構的目的是建立一個可以重複使用 元件的方法  依照資料結構, 顯示方式, 行為區分成不同的部分  主要適用於 GUI 元件的設計上 ( 但也可以應用到設計上 )  MVC 的基本概念 :  把資料模型與資料顯示區隔開來  Ex. 試算表的資料可以用長條圖或圓餅圖表示, 其中資料  model, 不同 的表示方式  View  Control 則是控制元件的行為  當資料改變時, 顯示的部分亦要改變  detailed.html detailed.html

MVC architectural pattern

繪圖  Swing 元件可能在任何時候被要求重畫外觀  Ex: 當一個視窗將元件蓋住, 之後又離開. 這時 swing 的執行緒將會要求元 件重畫外觀  Swing 是藉由 paint ( ) method 進行重畫的動作  paint 可能在任何時後被呼叫  一個元件需要被重畫時, 改由透過 repaint() method 來安排呼叫 paint()  有效率的繪圖  同時有太多重畫的要求或對同一個元件有許多的要求, 執行緒會重新安排 並想辦法解化成一個 paint 呼叫  repaint 亦可以自訂一定時間內畫面要被更新  無論是 paint 或 paintComponent() 都有一個參數  Graphics 物件 => 代表元件的繪圖內容, 他提供了基本繪圖與圖片處理的方 法

Swing 元件自己負責它的繪圖  Swing 元件可以容納其他的元件, 故有必要告知他所容納的 所有元件作出重畫 public void paint(Graphics g) { super.paint(g); // 呼叫子元件重畫 … } 一個簡單的例子 : 1.Frame 先畫自己 2.content pane first paints its background, then ask its child, JPanel, to paint. 3. JPanel a. background b. border c. children 4. JButton a. background b. text c. focus 5. JLabel

Custom Painting  Your custom painting code belongs in a method named paintComponent class ImagePanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); //paint background //Draw image at its natural size first. g.drawImage(image, 0, 0, this); //85x62 image //Now draw the image scaled. g.drawImage(image, 90, 0, 300, 62, this); } ImageDisplayer.java

Enable the component  每個標準的 Swing 元件都有 setEnabled() 決定 enable or disable  Ex: 當 JButton 或 JTextField 的元件被 disable, 將不接受任何的輸入反應  如何製作一個只被使用一次的元件  當我們按下 JButton 時, 它會產生一個 ActionEvent  這個事件會傳送給聆聽者的 actionPerformed() 方法  聆聽者利用 getSource() 方法來找到產生事件的元件 public boolean void actionPerformed(ActionEvent e) { … ((JComponent) e.getSource()).setEnabled(false); } 聆聽者

Focus  元件焦點 : 指的是目前被選取的輸入元件  為了要接受鍵盤上的事件, 元件通常會有鍵盤焦點  我們可以用 JComponent 的 requestFocus() 要求取得焦點  JTextField, JTextArea 等文字元件, 在其區域中按下滑鼠則會自動取得焦 點  若你希望某個元件得到焦點後, 通知你則必須實做 FocusListener 介 面  Ex: 當元件被選擇後, 改變滑鼠的樣式  當使用者按下 [tab], 焦點會轉移到下一個可用的元件上  JComponent 提供 transferFocus(), setNextFocusableComponent(), setFocusTraverable().

Swing 元件的一些 method Container getParent() 傳回包含該元件的容器 String getName() void setName(string name) 指定一個字串作為該元件的名稱 ( 該名稱會由 toString() 方法傳回 ) void setVisible(boolean visible) 決定該元件在容器中是否可見 設定及取得元件的前景和背景顏色 ( 對傳給 paint() 和 paintComponent() 的 Graphics 物件來說, 前景  繪圖顏色 背景  元件區域被 update () 時填滿的顏色 ) Color getForeground() void setForeground(Color c) Color getBackground() void setBackground(Color c)

取得及設定元件的大小 ( 版面管理員會改變元件大小 ) Dimension getSize() void setSize(int W, int H) 版面管理員 會嘗試使用最佳元件尺寸設定元件 Dimension getPreferredSize() void setPreferredSize(Dimension preferedsize) 取得及設定滑鼠樣式 Cursor getCursor() void setCursor(Cursor cursor) Ex: JComponent myComponent = …; Cursor crossHairs= Cursor.getPredefinedCursor(Cursor.CROSSHAIR_CURSOR) myComponent.setCursor(crossHairs);

容器 (Container)  容器是一種元件用來管理以及容納其他元件  JComponent 繼承 Container  是容器  最常用的三種容器  JFrame, JPanel, JApplet JFrame 最上層的視窗 最上層的視窗 JPanel 用來管理 JFrame 與 JPanel 中的元件

每個容器都有一個列表, 紀錄所有的 child 元件  除了 JFrame 和 JWindow 外, 其他元件和容 器都是 lightweight  大部分的元件要加入容器並顯示出來才有 作用 add

版面管理員 (Layout manager)  控制容器中元件的大小及位置  預設管理員 : 每個容器都有預設管理員  可使用 setLayout() 方法使用其他的管理員 元件預設版面管理員描述 JPanelFlowLayout 排列元件 : 由左到右 由上到下 JFrameBorderLayout 排列元件 : 把元件依照方位排列 在視窗中 ( NORTH, SOUTH, CENTER) EX: myContainer.add(myComponent, BorderLayout.NORTH);

Case Study: 陽春月曆  Check CalendarPanel.java