Chapter 6 Building Java GUIs

MVC Model View Controller The model passes its data to the view for rendering The view determines which events are passed to the controller The controller updates the model based on the events received

MVC in Swing Model View Controller The GUI Program Logic The Application

Calculator

Abstract Window Toolkit (AWT) 可用于 Java applets 和 applications 组件 –Component –MenuComponent 容器 –Container Panel Window

java.awt Package

容器 Containers add() ：在容器中添加组件 components Window – 独立窗口 Panel – 存放在其他容器中 window, panel or applet

构建 GUI Graphical User Interfaces

窗口类 Frames Window 的子类 初始状态不可见，使用 setVisible(true) 使其可见 默认布局 –BorderLayout

FrameExample.java import java.awt.*; public class FrameExample { private Frame f; public FrameExample() { f = new Frame("Hello Out There!"); } public void launchFrame() { f.setSize(170,170); f.setBackground(Color.blue); f.setVisible(true); } public static void main(String args[]) { FrameExample guiWindow = new FrameExample(); guiWindow.launchFrame(); }

Panels 提供空间给组件 内部可以放置其他的 panel 对象

FrameWithPanel.java import java.awt.*; public class FrameWithPanel { private Frame f; Panel pan; public FrameWithPanel(String title) { f = new Frame(title); pan = new Panel(); } public void launchFrame() { f.setSize(200,200); f.setBackground(Color.blue); f.setLayout(null); // Override default layout mgr pan.setSize(100,100); pan.setBackground(Color.yellow); f.add(pan); f.setVisible(true); } public static void main(String args[]) { FrameWithPanel guiWindow = new FrameWithPanel("Frame with Panel"); guiWindow.launchFrame(); } }

Container Layouts 布局管理 layout – 组件的尺寸与在容器中的位置 –setLocation() –setSize() –setBounds() 主要的 Layout ： –FlowLayout –BorderLayout –GridLayout –CardLayout –GridBagLayout

默认布局 Default Layout Managers

A Simple FlowLayout Example

BorderLayout Manager Frame 类的默认布 局 可调整区域 : –North, South,Center 水 平调整 –East, West,Center 垂直 调整

BorderExample.java

GridLayout Manager 组件可以从左到右，从上到下添加 – 所有区域面积相同 – 构造方法定义行列

public void launchFrame() { f.setLayout (new GridLayout(3,2)); f.add(b1); f.add(b2); f.add(b3); f.add(b4); f.add(b5); f.add(b6); f.pack(); f.setVisible(true); } public static void main(String args[]) { GridExample grid = new GridExample(); grid.launchFrame(); } GridExample.java import java.awt.*; public class GridExample { private Frame f; private Button b1, b2, b3, b4, b5, b6; public GridExample() { f = new Frame("Grid Example"); b1 = new Button("1"); b2 = new Button("2"); b3 = new Button("3"); b4 = new Button("4"); b5 = new Button("5"); b6 = new Button("6"); }

CardExample.java import java.awt.*; import java.awt.event.*; public class CardExample implements MouseListener { private Panel p1, p2, p3, p4, p5; private Label lb1, lb2, lb3, lb4, lb5; // Declare a CardLayout object to call its methods. private CardLayout myCard; private Frame f; public CardExample() { f = new Frame ("Card Test"); myCard = new CardLayout(); // Create the panels that I want to use as cards. p1 = new Panel(); p2 = new Panel(); p3 = new Panel(); p4 = new Panel(); p5 = new Panel(); // Create a label to attach to each panel lb1 = new Label("This is the first Panel"); lb2 = new Label("This is the second Panel"); lb3 = new Label("This is the third Panel"); lb4 = new Label("This is the fourth Panel"); lb5 = new Label("This is the fifth Panel"); }

Con. public void launchFrame() { f.setLayout(myCard); p1.setBackground(Color.yellow); p1.add(lb1); p2.setBackground(Color.green); p2.add(lb2); p3.setBackground(Color.magenta); p3.add(lb3); p4.setBackground(Color.white); p4.add(lb4); p5.setBackground(Color.cyan); p5.add(lb5); p1.addMouseListener(this); p2.addMouseListener(this); p3.addMouseListener(this); p4.addMouseListener(this); p5.addMouseListener(this); // Add panels to my CardLayout f.add(p1, "First"); f.add(p2, "Second"); f.add(p3, "Third"); f.add(p4, "Fourth"); f.add(p5, "Fifth"); // Display the first panel. myCard.show(f, "First"); f.setSize(200,200); f.setVisible(true); }

Con. public void mousePressed(MouseEvent e) { myCard.next(f); } public void mouseReleased(MouseEvent e) { } public void mouseClicked(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } public static void main (String args[]) { CardExample ct = new CardExample(); ct.launchFrame(); }

Drawing in AWT 任何组件都可以绘画 –Graphics 对象 Canvas –paint() – 每次组件出现就要调用 paint() 刷新

事件处理 GUI Event Handling

主要内容 定义事件和事件处理程序 适配型类 (adapter classes) 事件对象 确定事件类型与接口关系 定义内部类和匿名类

What Is an Event? Events ：事件 Event sources ：事件发源 Event handlers ：处理事件的方法

事件委托处理模式 一个事件可以交给多个程序处理 处理事件的程序：注册组件以及组 件产生的事件

example

GUI 组件只触发与事件类型相符的处理 程序 – 大多数组件可以触发多种事件

事件分类

Java GUI 事件

Con.

Example

Con.

多个事件监听器 多个监听器使程序中相互间无关的部分 被同一个事件激活 当某事件发生，监听该事件的多个注册 监听器的处理程序被调用

事件适配类定义 Event Adapters 1 import java.awt.*; 2 import java.awt.event.*; 3 4 public class MouseClickHandler extends MouseAdapter { 5 6 // We just need the mouseClick handler, so we use 7 // the an adapter to avoid having to write all the 8 // event handler methods 9 10 public void mouseClicked(MouseEvent e) { 11 // Do stuff with the mouse click } 13 }

内部类 Inner Classes

Con.

匿名类

AWT Components

Component Events

How to Create a Menu 1. 创建 MenuBar 对象, 放入 menu 容器：如 Frame. 2. 创建一个或多个 Menu 对象, 将它们添加到 menu bar 对象. 3. 创建一个或多个 MenuItem 对象, 将它们添加到 menu 对象.

Creating a MenuBar 1 Frame f = new Frame("MenuBar"); 2 MenuBar mb = new MenuBar(); 3 f.setMenuBar(mb);

Creating a Menu Frame f = new Frame("Menu"); MenuBar mb = new MenuBar(); Menu m1 = new Menu("File"); Menu m2 = new Menu("Edit"); Menu m3 = new Menu("Help"); mb.add(m1); mb.add(m2); mb.setHelpMenu(m3); f.setMenuBar(mb);

Creating a MenuItem 1 MenuItem mi1 = new MenuItem("New"); 2 MenuItem mi2 = new MenuItem("Save"); 3 MenuItem mi3 = new MenuItem("Load"); 4 MenuItem mi4 = new MenuItem("Quit"); 5 mi1.addActionListener(this); 6 mi2.addActionListener(this); 7 mi3.addActionListener(this); 8 mi4.addActionListener(this); 9 m1.add(mi1); 10 m1.add(mi2); 11 m1.add(mi3); 12 m1.addSeparator(); 13 m1.add(mi4);

Creating a CheckBoxMenuItem MenuBar mb = new MenuBar(); Menu m1 = new Menu("File"); Menu m2 = new Menu("Edit"); Menu m3 = new Menu("Help"); mb.add(m1); mb.add(m2); mb.setHelpMenu(m3); f.setMenuBar(mb);..... MenuItem mi2 = new MenuItem("Save"); mi2.addActionListener(this); m1.add(mi2); CheckboxMenuItem mi5 = new CheckboxMenuItem("Persistent"); mi5.addItemListener(this); m1.add(mi5);

UML Model of the SalesOrder GUI

SalesOrderGUI code:

Application Code

Applet Code

javax.swingjavax.swing

Swing Swing 第 2 代 GUI 工具包 基于 AWT, 组件为轻量型的 增加组件 : –JTable –JTree, –JComboBox –…….

Swing Hierarchy Swing classes derived from JComponent will be lightweight, written entirely in Java. The top-level Swing windows are heavyweight. They depend on the native system. javax.swing Component Container Panel Window Frame Dialog Object java.lang JApplet java.awt java.applet Applet JDialog JFrame JWindow JComponent Class extends Key Abstract Class implements Interface Package

Swing Hierarchy (Part II) Swing components names start with ‘J’. JButton JMenuItem Class extends Key Abstract Class implements Interface Package Object java.lang JComponent java.awt Component Container avax.swing AbstractButton JToggleButton JMenu JLabel JTextComponent JTextField JTextArea JPasswordField JCheckbox JRadioButton JPopupMenu JPanel JMenuBar JScrollPane JList JOptionPane

GUI Packages AWT –java.awt –java.awt.color –java.awt.datatransfer –java.awt.event –java.awt.font –java.awt.geom –java.awt.image –... Swing –javax.accessibility –javax.swing –javax.swing.colorchooser –javax.swing.event –javax.swing.filechooser –javax.swing.plaf –javax.swing.table –javax.swing.text.html –javax.swing.tree –...

What to Import –java.awt.* –java.awt.event.* –javax.swing.*

GUI Layout Layout Process: 1.Create the outer frame (JFrame) 2.Create the panel (JPanel) 3.Layout the panel 4.Create the components 5.Place the components on the Panel 6.Place the panel on the Frame 7.Size and display the Frame

FirstFrame.java import javax.swing.*; class FirstFrame extends JFrame { public FirstFrame() { setTitle("FirstFrame"); setSize(300, 200); setVisible(true); } public static void main(String[] args) { JFrame frame = new FirstFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

LabelTest import javax.swing.*; import java.awt.*; public class LabelTest extends JFrame { public LabelTest() { setTitle("Label Test"); JLabel helloLabel = new JLabel("Hello"); Container c = getContentPane(); c.add( helloLabel); setSize(300, 200); setVisible(true); } public static void main(String[] args) { LabelTest t = new LabelTest(); t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

ButtonTest public class ButtonTest extends JFrame { public ButtonTest() { setTitle("Button Test"); JButton helloButton = new JButton("Hello"); Container c = getContentPane(); c.add( helloButton); ButtonHandler handler = new ButtonHandler(); helloButton.addActionListener( handler ); setSize(300, 200); setVisible(true); }

Con. private class ButtonHandler implements ActionListener { public void actionPerformed( ActionEvent event ) { JOptionPane.showMessageDialog( null, "You pressed: " + event.getActionCommand() ); } public static void main(String[] args) { ButtonTest t = new ButtonTest(); t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

No inner class public class ButtonTest2 extends JFrame implements ActionListener{ public ButtonTest2() { setTitle("Button Test"); JButton helloButton = new JButton("Hello"); Container c = getContentPane(); c.add( helloButton); helloButton.addActionListener( this ); setSize(300, 200); setVisible(true); } public void actionPerformed( ActionEvent event ) { JOptionPane.showMessageDialog( null, "You pressed: " + event.getActionCommand() ); } public static void main(String[] args) { ButtonTest2 t = new ButtonTest2(); t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

How to write a Swing applet Extend JApplet Implement required framework methods: –init(), called when applet is first loaded –start(), start running –stop(), stop running –destroy(), clean up and terminate In many cases, only init() is needed