图形用户界面设计

1、第9章 图形用户界面设计 1学习内容用AWT生成图形化用户界面AWT事件处理模型AWT组件库Java Applet Swing简介Swing容器和组件29.1 用AWT生成图形化用户界面抽象窗口工具包AWT (Abstract Window Toolkit) 是 API为Java 程序提供的建立图形用户界面GUI (Graphics User Interface)工具集，AWT可用于Java的applet和applications中。它支持图形用户界面编程的功能包括： 用户界面组件事件处理模型图形和图像工具布局管理器3java.awt包4java.awt包 (续)java.awt包提供了基本的

2、java程序的GUI设计工具。主要包括下述三个概念：组件Component容器Container布局管理器-LayoutManager5组件和容器 类java.awt.Component是许多组件类的父类。相应的成员方法包括：getComponentAt(int x, int y)getFont()getForeground()getName()getSize()paint(Graphics g)repaint()update()setVisible(boolean b)setSize(Dimension d)setName(String name)6组件和容器 (续)容器(Container

3、)也是一个类，实际上是Component的子类，因此容器本身也是一个组件，具有组件的所有性质，但是它的主要功能是容纳其它组件和容器。7组件和容器(续)布局管理器（LayoutManager）：每个容器都有一个布局管理器，当容器需要对某个组件进行定位或判断其大小尺寸时，就会调用其对应的布局管理器。 8常用容器有三种类型的容器：WindowPanelFrameApplet9Frame10Frame (续)Frame必须调用setSize()来设置大小。Frame必须调用setVisible(true)来设置该窗口为可见的。AWT中的Frame窗口不能关闭，必须添加关闭的事件处理。11Frame示例

4、public class MyFrame extends Frame public static void main(String args) / 构造方法MyFrame fr = new MyFrame(Hello Out There!);/ 设置Frame的大小，缺省为（0，0）fr.setSize(200, 200);/ 设置Frame的背景，缺省为红色fr.setBackground(Color.red);/ 设置Frame为可见，缺省为不可见fr.setVisible(true);public MyFrame(String str) super(str); / 调用父类的构造方法12

5、Panel13Panel 示例public static void main(String args) FrameWithPanel fr = new FrameWithPanel(Frame with Panel);Panel pan = new Panel();fr.setSize(200, 200);fr.setBackground(Color.red);/ 框架fr的背景颜色设置为红色fr.setLayout(null);/ 取消布局管理器pan.setSize(100, 100);pan.setBackground(Color.yellow);/ 设置面板pan的背景颜色为黄色fr.

6、add(pan); / 用add方法把面板pan添加到框架fr中fr.setVisible(true);14Panel 示例(续)示例请参照FrameWithPanel.java15布局管理器(LayoutManager) 布局管理器主要包括：FlowLayoutBorderLayoutGridLayoutCardLayoutGridBagLayout示例请参照ExGui.java16FlowLayout 构造方法主要下面几种：FlowLayout(FlowLayout.RIGHT,20,40); FlowLayout(FlowLayout.LEFT);FlowLayout();FlowLay

7、out 是Panel，Applet的缺省布局管理器。其规律是从上到下、从左到右进行放置。17FlowLayout 示例示例请参照FlowLayoutSample.javapublic static void main(String args) Frame f = new Frame();f.setLayout(new FlowLayout();Button button1 = new Button(Ok);Button button2 = new Button(Open);Button button3 = new Button(Close);f.add(button1);f.add(butto

8、n2);f.add(button3);f.setSize(300, 100);f.setVisible(true);18BorderLayout BorderLayout布局管理器把容器分成5个区域：North，South，East，West和Center 。各个区域的位置及大小如下图所示：其变化规律为：组件的相对位置不变，大小发生变化。19BorderLayout 示例 public static void main(String args) Frame f = new Frame(BorderLayout); f.setLayout(new BorderLayout(); f.add(No

9、rth, new Button(North); / 第一个参数表示把按钮添加到容器的North区域 f.add(South, new Button(South); / 第一个参数表示把按钮添加到容器的South区域 f.add(East, new Button(East); / 第一个参数表示把按钮添加到容器的East区域 f.add(West, new Button(West); / 第一个参数表示把按钮添加到容器的West区域 f.add(Center, new Button(Center); / 第一个参数表示把按钮添加到容器的Center区域f.setSize(200, 200); f

10、.setVisible(true); 20BorderLayout 示例 (续)示例请参照BorderLayoutSample.java21BorderLayout 示例 (续)North和Center区域缺少组件 22BorderLayout 示例 (续)North区域缺少组件 23GridLayout 使容器中各个组件呈网格状布局，平均占据容器的空间。24GridLayout 示例public static void main(String args) Frame f = new Frame(GridLayout); f.setLayout(new GridLayout(3, 2); /

11、容器平均分成3行2列共6格 f.add(new Button(1); / 添加到第一行的第一格f.add(new Button(2); / 添加到第一行的下一格f.add(new Button(3); / 添加到第二行的第一格f.add(new Button(4); / 添加到第二行的下一格f.add(new Button(5); / 添加到第三行的第一格f.add(new Button(6); / 添加到第三行的下一格f.setSize(200, 200); f.setVisible(true); f.setSize(200, 200); f.setVisible(true); 25Grid

12、Layout 示例(续)示例请参照ButtonGrid.java26容器的嵌套 一个包含了多个组件的容器本身也可以作为一个组件加到另一个容器中去，容器中再添加容器，这样就形成了容器的嵌套。27容器的嵌套 示例public void go() f = new Frame(GUI example 3); bw = new Button(West); bc = new Button(Work space region); f.add(bw, West); f.add(bc, Center); p = new Panel(); f.add(p, North); bfile = new Button(F

13、ile); bhelp = new Button(Help); p.add(bfile); p.add(bhelp); f.pack(); f.setVisible(true); 28容器的嵌套 示例(续)示例请参照ExGui3.javaPanel容器,按钮在Panel容器内Frame容器内包含和一个Panel容器,有包含了West按钮和Work space region按钮。29小 结 Frame是一个顶级窗口。Frame的缺省布局管理器为BorderLayout。Panel 无法单独显示，必须添加到某个容器中。 Panel 的缺省布局管理器为FlowLayout。当把Panel 作为一个组

14、件添加到某个容器中后，该Panel 仍然可以有自己的布局管理器。因此，可以利用Panel 使得BorderLayout 中某个区域显示多个组件，达到设计复杂用户界面的目的 。309.2 AWT事件处理模型在事件处理的过程中，主要涉及三类对象：Event-事件，用户对界面操作在java语言上的描述，以类的形式出现，例如键盘操作对应的事件类是KeyEvent。Event Source-事件源，事件发生的场所，通常就是各个组件，例如按钮Button。Event handler-事件处理者，接收事件对象并对其进行处理的对象。31事件处理 示例public class TestButton public

15、 static void main(String args) Frame f = new Frame(Test);Button b = new Button(Press Me!);b.addActionListener(new ButtonHandler();f.setLayout(new FlowLayout(); f.add(b);f.setSize(200, 100);f.setVisible(true);class ButtonHandler implements ActionListener public void actionPerformed(ActionEvent e) Sys

16、tem.out.println(Action occurred);Button是事件源事件事件处理者32事件处理对于某种类型的事件XXXEvent, 要想接收并处理这类事件，必须定义相应的事件监听器类，该类需要实现与该事件相对应的接口XXXListener。 事件源实例化以后，必须进行授权，注册该类事件的监听器，使用addXXXListener(XXXListener ) 方法来注册监听器。 b.addActionListener(new ButtonHandler();33事件类 常见的事件有：ComponentEvent（ 组件事件：组件尺寸的变化，移动）ContainerEvent（ 容

17、器事件：组件增加，移动）WindowEvent（ 窗口事件：关闭窗口，窗口闭合，图标化）FocusEvent（ 焦点事件：焦点的获得和丢失）KeyEvent（ 键盘事件：键按下、释放）MouseEvent（ 鼠标事件：鼠标单击，移动） ActionEvent（动作事件：按钮按下，TextField中按Enter键）AdjustmentEvent（调节事件：在滚动条上移动滑块以调节数值）ItemEvent（项目事件：选择项目，不选择“项目改变”）TextEvent（文本事件，文本对象改变） 34事件监听器 每类事件都有对应的事件监听器，监听器是接口，根据动作来定义方法 。例如，与键盘事件KeyE

18、vent相对应的接口是： public interface KeyListener extends EventListener public void keyPressed(KeyEvent ev);public void keyReleased(KeyEvent ev);public void keyTyped(KeyEvent ev);35事件监听器 (续)例如窗口事件接口： public interface WindowListener extends EventListenerpublic void windowClosing(WindowEvent e); /把退出窗口的语句写在本方

19、法中public void windowOpened(WindowEvent e); /窗口打开时调用public void windowIconified(WindowEvent e); /窗口图标化时调用public void windowDeiconified(WindowEvent e); /窗口非图标化时调用public void windowClosed(WindowEvent e);/窗口关闭时调用public void windowActivated(WindowEvent e); /窗口激活时调用public void windowDeactivated(WindowEven

20、t e); /窗口非激活时调用36事件监听器 (续)AWT的组件类中提供注册和注销监听器的方法：注册监听器：public void add (listener); 注销监听器：public void remove (listener); 37AWT事件及其相应的监听器接口 38AWT事件及其相应的监听器接口(续)示例代码请参照ThreeListener.java结果：39AWT事件及其相应的监听器接口 小结1可以声明多个接口，接口之间用逗号隔开。implements MouseMotionListener, MouseListener, WindowListener；2可以由同一个对象监听一个

21、事件源上发生的多种事件：f.addMouseMotionListener(this);f.addMouseListener(this);f.addWindowListener(this);则对象f 上发生的多个事件都将被同一个监听器接收和处理。40AWT事件及其相应的监听器接口 小结(续)3事件处理者和事件源处在同一个类中。本例中事件源是Frame f，事件处理者是类ThreeListener，其中事件源Frame f是类ThreeListener的成员变量。4可以通过事件对象获得详细资料，比如本例中就通过事件对象获得了鼠标发生时的坐标值。public void mouseDragged(Mo

22、useEvent e) String s=Mouse dragging :X=+e.getX()+Y=+e.getY();tf.setText(s);41AWT事件及其相应的监听器接口 小结(续)5，对其不感兴趣的方法，也必须写，但可以方法体为空。这是作为实现接口规定。public void windowIconified(WindowEvent e) public void windowDeiconified(WindowEvent e) public void windowClosed(WindowEvent e) public void windowActivated(WindowEve

23、nt e) public void windowDeactivated(WindowEvent e) 42事件适配器 继承事件所对应的Adapter类，重写需要方法，无关方法不用实现。可以缩短程序代码。 Java的单一继承机制，限制只能监听器一个父类。不适用多种监听器作为父类。1事件适配器-EventAdapter2. 用内部类实现事件处理3匿名类（Anonymous Class）43事件适配器-EventAdapter 下例中采用了鼠标适配器：示例代码请参照ThreeListener2.javaimport java.awt.*;import java.awt.event.*;public

24、class MouseClickHandler extends MouseAdapter public void mouseClicked(MouseEvent e) /只实现需要的方法 44事件适配器-EventAdapter (续)public void mouseEntered(MouseEvent e) String s = The mouse entered;tf.setText(s);public void mouseExited(MouseEvent e) String s = The mouse has left the building;tf.setText(s);只适实现感

25、兴趣的方法，但是不能在通过继承它们的适配器来监听事件，如窗口的关闭45事件适配器-EventAdapter (续)java.awt.event包中定义的事件适配器类包括以下几个：1ComponentAdapter( 组件适配器)2ContainerAdapter( 容器适配器)3FocusAdapter( 焦点适配器)4KeyAdapter( 键盘适配器)5MouseAdapter( 鼠标适配器)6MouseMotionAdapter( 鼠标运动适配器)7WindowAdapter( 窗口适配器) 46用内部类实现事件处理 内部类（inner class）是被定义于另一个类中的类，使用内部类的

26、主要原因是由于：一个内部类的对象可访问外部类的成员方法和变量，包括私有的成员。实现事件监听器时，采用内部类、匿名类编程非常容易实现其功能。编写事件驱动程序，内部类很方便。因此内部类所能够应用的地方往往是在AWT的事件处理机制中。 示例请参照InnerClass.java47用内部类实现事件处理 (续)示例代码请参照InnerClass.java48匿名类（Anonymous Class） 示例代码请参照AnonymousClass.java内部类只使用一次时,可以使用匿名类。进一步简化代码。49常用的AWT组件按钮(Button)复选框(Checkbox)复选框组(CheckboxGroup)

27、下拉式菜单（Choice）单行文本输入区(TextField)文本输入区（TextArea）列表(List)50按钮(Button) 按钮是最常用的一个组件，其构造方法是：Button b = new Button(Quit);当按钮被点击后，会产生ActionEvent事件，需ActionListener接口进行监听和处理事件。51复选框 (Checkbox) 复选框提供简单的“on/off”开关，旁边显示文本标签。构造方法如下：setLayout(new GridLayout(3,1);add(new Checkbox(one,null,true);add(new Checkbox(two

28、);add(new Checkbox(three);52复选框 (Checkbox) 示例复选框用ItemListener 来监听ItemEvent事件，当复选框状态改变时用getStateChange()获取当前状态。示例代码请参照Handler.java53复选框组(CheckboxGroup) 使用复选框组，可以实现单选框的功能。方法如下：setLayout(new GridLayout(3, 1);CheckboxGroup cbg = new CheckboxGroup();add(new Checkbox(one, cbg, true);add(new Checkbox(two,

29、cbg, false);add(new Checkbox(three, cbg, false); 54复选框组(CheckboxGroup) 示例 55下拉式菜单（Choice）下拉式菜单每次只能选择其中的一项，它能够节省显示空间，适用于大量选项。Coice 用ItemListener接口来进行监听，可参考CheckBoxChoice colorchooser = new Choice();colorchooser.add(Green);colorchooser.add(Red);colorchooser.add(Blue);56单行文本输入区(TextField) 单行文本输入区构造方法如下

30、： TextField tf1,tf2,tf3,tf4:tf1 = new TextField(); tf2 = new TextField(,20); /显示区域为20列tf3 = new TextField(Hello!); /按文本区域大小显示tf4 = new TextField(Hello!,30); /初始文本为Hello!, 显示区域为30列57文本输入区（TextArea）TextArea可以显示多行多列的文本。可以通过以下构造方法来创建：/新建一个TextAreaTextArea( ) /新建一个包含给定行数和列数的TextAreaTextArea(int rows, int

31、 cols) / 新建一个包含给定字符串、行数和列数的TextAreaTextArea(String text, int rows, int cols) 58列表(List)列表中提供了多个文本选项，列表支持滚动条，可以浏览多项。List lst=new List(4,false); /两个参数分别表示显示的行数、是否允许多选lst.add(Venus);lst.add(Earth);lst.add(JavaSoft);lst.add(Mars);cnt.add(lst);599.4 Java Applet Java具有让Internet动起来的能力。具体地说，就是Java能创建一种特殊类型的

32、程序（通常称作小应用程序或者Applet），具备Java能力的Web浏览器可从网上下载这种程序，然后运行。60Applet示例：package ch01;import java.applet.Applet;import java.awt.Graphics;public class HelloWorldApplet extends Applet public String s;public void init() s = Hello World!;/ 生成一个字符串对象public void paint(Graphics g) g.drawString(s, 25, 25);/ 在浏览器中坐标为

33、（25，25）的位置显示字符串s61创建Html文件将XX.class嵌入到HTML页面中的标记中APPLET CODE=ch01. HelloWorldApplet.class WIDTH=200 HEIGHT=100 62案例演示在浏览器中浏览这个HTML页面：639.5 Swing简介AWT存在的问题：缺少剪贴板、打印支持、键盘导航等特性。 AWT组件外观总是与本机相关的。Swing的产生主要原因就是AWT不能满足图形化用户界面发展的需要。 AWT是Swing的基础 。Swing是由100%纯Java实现的，Swing组件是用Java实现的轻量级（ light-weight）组件，没有本

34、地代码，不依赖操作系统的支持，这是它与AWT组件的最大区别。 64Swing的类层次结构定义了两种类型的组件：顶层容器（JFrame，JApplet，JDialog和JWindow）和轻量级组件。65Swing组件的多样化 Swing是AWT的扩展，它提供了许多新的图形界面组件。Swing组件以J开头。 66Swing外观感觉 （Look and Feel）AWT组件外观具体平台相关。Swing组件外观具体平台无关。Swing组件的外观Metal风格、Motif风格、Windows风格 示例代码请参照LookFeel.java67Swing外观感觉 Metal风格UIManager.setLo

35、okAndFeel(javax.swing.plaf.metal.MetalLookAndFeel);68Swing外观感觉 Motif风格UIManager.setLookAndFeel(com.sun.java.swing.plaf.motif.MotifLookAndFeel);69Swing外观感觉 Windows风格 UIManager.setLookAndFeel(com.sun.java.swing.plaf.windows.WindowsLookAndFeel);70使用图标（Icon） Swing组件如按钮、标签，除了使用文字外，还可以使用图标修饰自己。71Swing程序结构

36、简介Swing的程序设计一般可按照下列流程进行：1 引入Swing包2 选择外观和感觉3 设置顶层容器4 设置按钮和标签5 向容器中添加组件6 在组件周围添加边界7 进行事件处理示例请参照SwingApplication.java729.6 Swing组件和容器 Swing中用轻量级的组件替代了AWT中的重量级的组件。Swing的按钮和标签可显示图标和文本。Swing中的大多数组件都是AWT组件名前面加了一个J。73使用Swing的基本规则把Swing组件放入一个顶层Swing容器的内容面板上避免使用非Swing的重量级组件与AWT组件不同，Swing组件不能直接添加到顶层容器中，它必须添加到

37、一个与Swing顶层容器相关联的内容面板（content pane）上。74使用Swing的基本规则(续)对JFrame添加组件有两种方式：1) 用getContentPane( )方法获得JFrame的内容面板，再对其加入组件：frame.getContentPane().add(childComponent)2) 建立一个Jpanel或 JDesktopPane之类的中间容器，把组件添加到容器中，用setContentPane()方法把该容器置为JFrame的内容面板：Jpanel contentPane=new Jpanel( );/把其它组件添加到Jpanel中;frame.setCo

38、ntentPane(contentPane); /把contentPane对象设置成为frame的内容面板75面板（JPanel） 面板（JPanel）是一个轻量容器组件，用法与Panel相同JPanel的缺省布局管理器是FlowLayout。76滚动窗口（JScrollPane） private JScrollPane getJScrollPane() if (jScrollPane = null) jScrollPane = new JScrollPane();jScrollPane.setViewportView(getJTable(); return jScrollPane;77滚动窗

39、口（JScrollPane）续JScrollPane是带滚动条的面板，主要是通过移动JViewport(视口)来实现的。JViewport是一种特殊的对象，用于查看基层组件，滚动条实际就是沿着组件移动视口，同时描绘出它在下面看到的内容。78按钮（JButton） 按钮是一个常用组件，按钮可以带标签或图象。 常用的构造方法有：示例代码请参照ButtonDemo.javaJButton(Icon icon) /按钮上显示图标JButton(String text) /按钮上显示字符JButton(String text, Icon icon) /按钮上既显示图标又显示字符 79复选框（JCheck

40、Box）复选框提供简单的“on/off”开关，旁边显示文本标签。常用的构造方法有： JCheckBox()JCheckBox(Icon icon)JCheckBox(Icon icon, boolean selected)JCheckBox(String text)JCheckBox(String text, boolean selected)JCheckBox(String text, Icon icon)JCheckBox(String text, Icon icon, boolean selected)80复选框（JCheckBox）示例示例代码请参照TestJCheckBox.java

41、CheckBox通过这个方法来处理被选中事件81单选框（JRadioButton）单选框JRadioButton与AWT中的复选框组功能类似。 常用的构造方法有： JRadioButton()JRadioButton(Icon icon)JRadioButton(Icon, boolean selected)JRadioButton(String text)JRadioButton(String text, boolean selected)JRadioButton(String text, Icon icon)JRadioButton(String text, Icon icon, boolean selected)82单选框（JRadioButton） 示例示例代码请参照TestJRadioBu