第7章图形用户界面.doc

第7章 Java GUI（图形用户界面）应用程序设计教学目标: 学生通过本章学习应掌握Java图形用户界面编程工具集AWT中的基本组件类类的层次关系基本组件类的使用方法和用户界面布局设计Swing图形用户界面.一、 重点与难点: Java抽象窗口工具集, Java事件处理AWT组件Swing图形用户界面图形设计二、 教具: 可进行广播的教学或多媒体计算机局域网,投影仪及相关的软硬件. 三、 教学方法: 理论与实训相结合。四、 教学时数: 第5-6周 8小时五、 作业及上机练习: P.217- 1.12.7.1 Java抽象窗口工具集图形用户界面( Graphics User Interface GUI ),指使用图型的方式,借助菜单按钮等标准界面元素和鼠标操作向计算机系统发出指令启动操作,将运行结果以图形方式显示给用户。图形用户界面是当今流行的操作系统界面,其特点是界面美观漂亮操作简单方便,深受用户欢迎.因此Java语言为了适应发展趋势，也具有开发图形化用户界面的功能。早期的Java版本JDK1.0和JDK1.1采用 的是AWT组件。特点是简单、易于理解。Java 1.2版，图形用户界面功能被大幅度地扩展，形成了称为Java基础类库（Java Foundation Class，JFC）的一整套API集合，主要包括以下5个部分： AWT抽象窗口工具集； Swing图形界面类库； 支持二维图形的类库（Java 2D）； 支持拖放的类库（Drag and Drop）； 支持易用性的类库（Accessibility）。主要的部分是Swing图形界面类库。Swing组件是用纯Java实现的，在不同的平台上其表现是一致的。Swing组件没有本地代码，不依赖于具体的本机操作系统的支持，并且还有能力提供本地系统不支持的其它特性，这是它与AWT组件的最大区别。Swing组件实现了平台无关的Java语言。Swing组件是AWT组件的扩展，它提供了许多新的图形用户界面组件。大部分AWT组件都在Swing组件中进行了重写。1. AWT ( Abstract Window Toolkit - 抽象窗口工具集) 是Java语言提供的图形用户界面设计工具,它的核心是把GUI看作由一系列嵌套的组件构成。这些组件之间在外观上有包含相邻相交等物理关系,而且包含内部调用等逻辑关系. AWT组件被放在java.awt包中并有许多用来设计图形用户界面的类和接口，用于Java Application 和 Applet 的GUI设计. AWT组件相关类的层次关系如图7-1所示:Component组件Button-按钮Container-容器Label-标签Choice-下拉列表Text Component-文本框组件Panel-面板Window-窗口TextArea-多行钮TextField-单行Applet-面板Scollpane-滚动条板Dialog-对话框Frame-窗口（框架）AWT组件相关类的层次关系(1) 组件图形用户界面的各种元素称为组件Component , 它是一个图形化方式显示在屏幕上与用户交户的对象, 组件分容器类(Container )和非容器类组件, 容器类组件可包含其它组件,也可以是其它容器。非容器类组件不包含其它组件,提供人机交互如按钮类Button标签类LabelText Component-文本类.(2) 容器用来组织其它界面元素的单元，如窗口包含许多界面成分和元素，这些界面元素本身又可以是容器，这个容器再进一步包含它的界面成分和元素依此类推，形成复杂图形用户界面。 容器类分顶层容器和非顶层容器两类：顶层容器可以是独立窗口, 顶层容器类是Window其常用的子类为Frame-窗口（框架）类Dialog-对话框类,这两个类带有边框可移动放大缩小和关闭功能. 非顶层容器必须位于某个顶层容器窗口之内,不能独立存在。面板类属非顶层容器类如: Scollpane滚动面板子类, Applet面板子类，都是无边框的容器类. 容器特点：1容器有一定范围：一般为矩形边界有边框，有些无可见标记。2容器有一定位置：位置可是屏幕四角的绝对位置，也可是相对其它容器的相对位置3容器有一个背景：背景覆盖全部容器，可透明，也可以指定一幅图案，使界面生动活泼。4容器包含许多界面成分和元素：容器打开显示时，其上面的所有成分和元素被显示出来，关闭时被隐藏。5容器可按一定的物理规则排列它元素的相对位置和前后排列关系。容器是Component组件的子类，具有组件的所有性质，因此也是组件。Component类中定义了各种GUI组件对象所需的属性和方法。容器类对象可使用父类Component中的add()方法添加组件。Java中GUI容器类层次关系图：容器包含两个抽象类：Window类和Panel类，Window类可自由停泊在顶层窗口，Panel类为可容纳其它组件的非顶层容器，它不能独立存在，必须被添加到其它容器中，如Window或Applet容器，向容器中添加组件用add()方法，删除容器中的组件用removeAll( ) 方法或remove(Component c) 方法, 为保正在容器中正常显示组件，应调用validate( ) 方法.ObjectComponentContainerPanelAppletWindowFrameDialogJava中GUI容器类层次关系图Java组件在容器中的位置和尺寸由布局管理器决定，人工控制组件在容器中的位置和尺寸，可取消布局管理器，使用如下方法：public setLocation ( int x , int y ) 设置（移动）当前组件到一个新位置坐标点。public setSize ( int width , int height ) 设置组件大小。public setBounds (int x , int y, int width , int height ) 设置窗口在屏幕显示位置为距屏幕左面x像素，距上方y像素，宽度和高度。抽象Window类不能实例化，因此在子类Frame-框架类中实现1. Frame类的特点（1） Frame类是抽象类Window的子类。（2） Frame对象显示一个带标题和尺寸重置角标的窗口。（3） 默认为不可见。设置setVisible (ture) 为可视。（4） 默认布局管理器是BorderLayout（边界布局管理器），可使用setLayout( ) 方法改变其默认布局管理器, Frame类的层次关系如图：java.lang.Object java.awt. Component java.awt. Container java.awt. Window java.awt. Frame例 7-1 TestFrame.java 框架窗口应用import java.awt.*;public class TestFrame public static void main( String args) /创建标题为My Frame Test的框架窗口容器对象实例 Frame f = new Frame(My Frame Test); f.setSize( 170,100); /设置Frame组件窗口大小（宽高） f.setBackground( Color.blue); /设置Frame组件背景色为蓝色 f.setVisible( true); /设置Frame组件为可视编译为.class文件用JCreator执行2. Panel面板类的特点（1） Panel类是非顶层容器它不能独立存在，必须被添加到其它容器中，如Window或Applet（2） Panel类可容纳其它组件，在程序中用于布局和定位。（3） 可用所在容器的不同布局管理器布局。（4） 默认布局管理器为FlowLayout（流布局管理器），可使用setLayout( ) 方法改变其默认布局管理器。Panel类的层次关系如图：java.lang.Object java.awt. Component java.awt. Container java.awt. Panel例 7-2 TestFrameWithPanel .java 面板类的应用(面板类的默认布局管理器为FlowLayout布局)import java.awt.*;public class TestFrameWithPanel public static void main(String args) Frame f = new Frame(My FrameWithPanel Test ); /创建带标题的窗口容器组件对象实例 Panel pan = new Panel(); /在窗口容器上创建面板容器对象 f.setSize(180,100); /设置Frame组件窗口大小（宽高） f.setBackground(Color.blue); /设置Frame组件背景色为蓝色 f.setLayout(null); / 取消布局管理器（可同时看到窗口和面板组件） pan.setSize(100,60); /设置面板容器大小（宽高） pan.setBackground(Color.green); /设置面板容器组件背景色为绿色 f.add(pan); /在窗口容器组件中添加面板容器对象 f.setVisible(true); /设置Frame组件为可视 编译为.class文件用JCreator执行2-1ScrollPane类是Container 类的子类，因此也是一个容器称为滚动面板，经常将组件放到面板中，然后再添加到滚动面板中显示。ScrollPane有2个构造方法：（1）ScrollPane（）- 创建滚动面板，滚动条初始不可见，当组件范围大于滚动面板时，滚动条自动产生。（2）ScrollPane（int a）- 参数a指定滚动条的初始状态，有3个值。ScrollPane.SCROLLBARS_ALWAYS - 总是带滚动条ScrollPane.SCROLLBARS_AS_NEEDED 滚动条作为需要的ScrollPane.SCROLLBARS_NEVER-不需要滚动条【例 7.11】- Example7_11.java 流布局import java.awt.*;import java.awt.event.*;class WindoTen extends Frame implements ActionListener Panel p; /声明面板容器对象ScrollPane scrollpane; /声明滚动条面板容器对象WindoTen() /窗口构造函数setLayout(new FlowLayout(); /设为流布局p=new Panel(); /创建面板容器对象scrollpane=new ScrollPane(ScrollPane.SCROLLBARS_ALWAYS); /创建滚动条面板容器对象p.add(new Button(one); /添加4个按钮到面板容器对象中p.add(new Button(two);p.add(new Button(three);p.add(new Button(four);scrollpane.add(p); /将面板容器对象添加到滚动条面板容器对象中add(scrollpane); /将滚动条面板容器添加到窗口容器中setBounds(60,60,200,200); /设置窗口在屏幕显示位置为距屏幕左面60像素，距上方60像素，宽高各为200setVisible(true); /设置窗口可见validate(); /添加组件时调用validate()生效方法，保证组件在容器中正确显示public void actionPerformed(ActionEvent e) System.exit(0); public class Example7_11 public static void main(String args) new WindoTen(); /创建窗口对象并调用构造函数7.1.2 布局管理器为生成具有良好与平台无关性的图形用户界面，Java中提供了布局管理器工具（Container Layouts）来管理组件在容器中的布局，而不手动设置组件位置和大小。每个容器都有一个布局管理器，当容器需对组件定位或判断大小尺寸时，就会调用其对应的布局管理器。Java语言目前提供有FlowLayout，BorderLayout，GridLayout，BoxLayout ，CardLayout，GridBagLayout等布局管理器。(1) FlowLayout（流布局管理器）FlowLayout流布局管理器是Panel类的默认容器布局管理器。FlowLayout布局对组件逐行定位，行内从左到右，一行排满后换行，默认对齐为居中对齐。不改变组件的大小，按组件原有尺寸显示组件，可在构造方法中设置不同的组件间距，行距及对齐方式。FlowLayout的构造方法new FlowLayout(FlowLayout.RIGHT,20,40 ); / 右对齐，组件之间水平间距20个像素，竖直间距40个像素。new FlowLayout(FlowLayout.LEFT ); / 左对齐，水平间距和竖直间距为默认5个像素。new FlowLayout( ); / 居中对齐，水平间距和竖直间距为默认5个像素。例 7-3 TestFlowLayout.java - 流布局应用import java.awt.*;public class TestFlowLayout public static void main(String args) Frame f = new Frame(Flow Layout); /创建带标题的窗口容器组件对象实例 Button button1 = new Button(Ok); /创建3个按钮组件对象 Button button2 = new Button(Open); Button button3 = new Button(Close);/窗口设置为流布局管理器：居中对齐，水平间距和竖直间距为默认5个像素（），注意：Frame默认是BorderLayout（边界布局管理器）. f.setLayout(new FlowLayout(); /创建居中对齐的流布局对象并将窗口设置为流布局 f.add(button1); /将3个按钮添加到容器f中 f.add(button2); f.add(button3); f.setSize(100,100); /设置窗口（框架）容器大小 f.setVisible(true); /设置窗口容器为可视 编译为.class文件用JCreator执行（2）BorderLayout（边界布局管理器）BorderLayout（边界布局管理器）将整个容器的布局划分成东南西北中五个区域，组件只能被添加到指定的区域每个区域只能加入一个组件，后加入的组件会代替前组件，不指定组件区域默认放在Center区域。BorderLayout边界布局容器尺寸缩放原则：南北区域在水平方向缩放东西区域在垂直方向缩放中部区域在两个平方向缩放布局为：北N西W南 S中部C东E例 7-4 TestBorderLayout.java -边界布局管理器应用-Frame默认是BorderLayout（边界布局管理器）.import java.awt.*;public class TestBorderLayout public static void main(String args) Frame f;f = new Frame(Border Layout); /创建Frame窗口容器Button bn = new Button(BN); /创建5个对应按钮Button bs = new Button(BS);Button bw = new Button(BW);Button be = new Button(BE);Button bc = new Button(BC);f.add(bn, North); /添加五个组件按钮添加到窗口容器f中的边界布局东南西北中 f.add(bs, South);f.add(bw, West);f.add(be, East);f.add(bc, Center);f.setSize(200,200); /设置窗口容器尺寸f.setVisible(true); /设置窗口容器可视编译为.class文件用JCreator执行（3）GridLayout（网（栅）格布局管理器）GridLayout（网（栅）格布局管理器）将布局划分为矩形网格，每个单元格区域大小相等。组件被添加到每个单元格中，先从左到右添满换行，再从上到下：在GridLayout（）构造方法中指定分隔的行列数，如：New GridLayout（3,4）; /创建3行4例的网格布局例 7-5 TestGridLayout.java -网格布局管理器应用import java.awt.*;public class TestGridLayout public static void main(String args) Frame f = new Frame(GridLayout Example); /创建Frame窗口容器 Button b1 = new Button(b1); /创建6个按钮 Button b2 = new Button(b2); Button b3 = new Button(b3); Button b4 = new Button(b4); Button b5 = new Button(b5); Button b6 = new Button(b6); f.setLayout (new GridLayout(3,2); /设置窗口容器布局为3行2例的网格布局 f.add(b1); f.add(b2); /将 6个按钮添加到窗口3行2例网格布局中去 f.add(b3); f.add(b4); f.add(b5); f.add(b6); f.pack(); /设置窗口容器为紧凑格式f.setVisible(true); /设置窗口容器可视 编译为.class文件用JCreator执行【例 7.15】Example7_15.java - 网格布局import java.awt.*;import java.awt.event.*;class WinGrid extends Frame GridLayout grid; /声明网格布局对象 WinGrid() /构造方法 grid=new GridLayout(12,12); /创建12行列网格布局对象 setLayout(grid); /设置布局为网格布局 Label label=new Label1212; /创建一个标签类的12行列的二维数组label for(int i=0;i12;i+) /外层循环输出行i for(int j=0;j12;j+) /内层循环输出行列j labelij=new Label(); /创建标签对象存入二维数组 if(i+j)%2=0) /如果行列下标之和能被2整除 labelij.setBackground(Color.black); /设置标签对象颜色为黑色 else /否则 labelij.setBackground(Color.white); /设置标签对象颜色为白色 add(labelij); /添加标签对象到窗口容器中 /设置窗口在屏幕显示位置为距屏幕左面10像素，距上方10像素，宽高各为260 setBounds(10,10,260,260); setVisible(true); /设置窗口及标签对象可视 validate(); public class Example7_15 public static void main(String args) new WinGrid(); /创建窗口对象并调用构造函数 （4）BoxLayout 盒式布局管理器BoxLayout在java.swing.border包中，也是Container类中的一个子类，因此为盒式容器。构造方法：BoxLayout（Container con, int axis）con - 容器对象axis的值有：（1）BoxLayout.X_AXIS 行型布局 （2）BoxLayout.Y_AXIS 列型布局。组件加入的顺序是从左（上）到右（下）排列，容器的两端为剩余空间。与FlowLayout流布局局不同的是，它仅有一行（列），无论组件多少只排列在该行（列）中，因此组件可能被压缩变形。【例7.16】Example7_16.java布局import javax.swing.*; /引入swing.*import java.awt.*;import javax.swing.border.*;public class Example7_16 public static void main(String args) new WindowBox(); /创建窗口对象并调用构造方法 class WindowBox extends Frame /声明WindowBox子类继承Frame类 Box baseBox ,boxV1,boxV2; /声明行型盒式布局容器对象baseBox，列型盒式布局容器对象boxV1，boxV2引用变量 WindowBox() /构造方法 boxV1=Box.createVerticalBox(); /使用Box类的静态方法获得一个列型盒式布局容器对象boxV1 boxV1.add(new Label(姓名); /在容器中添加姓名标签组件 boxV1.add(Box.createVerticalStrut(8); /在容器中添加垂直支撑高度为8（控制组件间的垂直距离），宽度为0 boxV1.add(new Label(email); /在容器中添加email标签组件 boxV1.add(Box.createVerticalStrut(8); /在容器中添加垂直支撑高度为8，宽度为0 boxV1.add(new Label(职业); /在容器中添加职业标签组件boxV2=Box.createVerticalBox();/使用Box类的静态方法获得一个列型盒式布局容器对象boxV2 boxV2.add(new TextField(12); /在容器中添加单行文本输入框组件长度12个字符/在容器中添加垂直支撑高度为8（控制组件间的垂直距离），宽度为0 boxV2.add(Box.createVerticalStrut(8); boxV2.add(new TextField(12); boxV2.add(Box.createVerticalStrut(8); boxV2.add(new TextField(12);/使用Box类的静态方法获得一个行型盒式布局容器对象baseBox baseBox=Box.createHorizontalBox(); baseBox.add(boxV1); /在行型盒式布局容器中添加列型盒式布局容器对象boxV1/在容器中添加水平支撑高度为0，宽度为10（控制组件间的水平距离） baseBox.add(Box.createHorizontalStrut(10); /在行型盒式布局容器中添加列型盒式布局容器对象boxV2 baseBox.add(boxV2); setLayout(new FlowLayout(); /设置为流布局add(baseBox); /将行型盒式布局容器对象baseBox添加到窗口容器中/设置窗口在屏幕显示位置为距屏幕左面120像素，距上方125像素，宽250高为150 setBounds(120,125,250,150); setVisible(true); /设置窗口容器可视 执行结果：79 画布 Canvas类在java.awt中，使用Canvas类是在子类中创建画布类对象，然后调用paint()方法在画布上绘制图形，paint()方法是组件Component类的方法,在子类中重写这个方法，当重写时图型对象g自动实例化，调用它的相关方法绘图，repaint()方法是先清除paint()方法以前所画的内容，然后再调用paint()方法绘制图像【例7.18】Example7_18.java画布import java.awt.*;import java.awt.event.*;class Mycanvas extends Canvas int x,y,r; /声名圆坐标点x,y和圆半径变量 Mycanvas() /画布类构造函数 setBackground(Color.cyan); /设置画布背景色为青色 public void setX(int x) /设置圆的坐标点x,y this.x=x; public void setY(int y) this.y=y; public void setR(int r) /设置半径 this.r=r; public void paint(Graphics g) /绘制椭圆方法，在x,y左上角坐标处，绘制宽高为2*r的矩型的内接圆（或椭圆） g.drawOval(x,y,2*r,2*r); class WindowCanvas extends Frame implements ActionListener Mycanvas canvas; /定义一个画布类对象 TextField inputR,inputX,inputY; /定义一个输入圆半径x,y坐标点的文本框对象 Button b; /定义一个按钮对象 WindowCanvas() /窗口类构造函数 canvas=new Mycanvas(); /创建画布类对象并调用构造函数 inputR=new TextField(5); /创建3个单行文本输入框对象 inputX=new TextField(4); inputY=new TextField(4); Panel pNorth=new Panel(), /在北南区创建面板容器对象pNorth和pSouth pSouth=new Panel(); pNorth.add(new Label(圆的位置坐标：); /将标签“圆的位置坐标”组件添加到北区面板 pNorth.add(inputX); /将x,y坐标值输入框对象组件添加到北区面板 pNorth.add(inputY); pSouth.add(new Label(圆的半径：); /将标签“圆的半径：”添加到南区面板 pSouth.add(inputR); /将半径输入框对象组件添加到南区面板 b=new Button(确定); /创建确定按钮对象 b.addActionListener(this); /给按钮注册监听器 pSouth.add(b); /将按钮添加到下部面板中 add(canvas,BorderLayout.CENTER); /画布按边界布局添加到窗口中部 add(pNorth,BorderLayout.NORTH); /北面板按边界布局添加到窗口中上部 add(pSouth,BorderLayout.SOUTH); /南面板按边界布局添加到窗口下部/设置窗口在屏幕显示位置为距屏幕左面100像素，距上方100像素，宽300高为200 setBounds(100,100,300,200); setVisible(true); /设置窗口容器可视 public void actionPerformed(ActionEvent e) /按下确定按钮处理事件的方法 int x,y,r; try /从输入框对象中分别取的坐标及半径值转换为整型 x=Integer.parseInt(inputX.getText(); y=Integer.parseInt(inputY.getText(); r=Integer.parseInt(inputR.getText(); canvas.setX(x); /调用画布类的成员set方法分别对坐标及半径赋值 canvas.setY(y); canvas.setR(r); canvas.repaint(); /清除paint()方法以前所画的内容，然后再调用paint()方法重绘图像 catch(NumberFormatException ee) x=0;y=0;r=0; public class Example7_18 public static void main(String args) new WindowCanvas(); /创建窗口对象并调用窗口构造函数 （5）CardLayout -卡片布局管理器CardLayout（卡片布局管理器）能够帮助用户处理两个以至更多的组件成员共享同一显示空间，将组件像卡片一样前后依次排列，这钟布局在一张卡片中只能显示一个组件，因此可以使用容器嵌套方法显示多个组件。使用CardLayout布局常用到表7-1中的三个方法。表7-1CardLayout布局常用方法方 法功 能First (Container parent)显示布局设置为CardLayout的容器中的第一张卡片Last (Container parent)显示布局设置为CardLayout的容器中的最后张卡片Next (Container parent)显示当前卡片的下一张卡片在以下程序中，将小程序的显示区（Applet）设置为BorderLayout布局，放有两个面板容器，作为中间容器Panel对象p1和p2，pl面板容器采用CardLayout布局，放置有30个Canvas对象，p2面板容器采用默认FlowLayout布局，放置有三个Button按钮。例 7-6 TestCardLayout.java - 卡片布局管理器应用import java.applet.*; /引入applet包中所有类import java.awt.*; /引入awt包中所有图象类import java.awt.event.*; /引入event包中所有事件类class Mycanvas extends Canvas /定义子类Mycanvas继承画布Canvas类 int x,y; /声明画布坐标 Mycanvas(int a,int b) /构造函数形参ab代表画布大小宽高 x=a;y=b; /赋值给x,y坐标 getSize(); /取得画布大小 / paint()方法是组件Component类的方法,在子类中重写这个方法，当重写时图型对象g自动实例化，调用它的相关方法绘图，repaint()方法是先清除paint()方法以前所画的内容，然后再调用paint()方法绘制图像 public void paint(Graphics g) g.setColor(Color.red); /设置输出字体色为红色/g调用drawString()方法在画布坐标50,50绘制字符串 g.drawString(这是第 +x+卡片,50,50); public class TestCardLayout extends Applet implements ActionListener CardLayout mycard; /声明CardLayout布局对象引用变量 Button button1,button2,button3; /声明3个按钮对象引用变量 Mycanvas mycanvas; /声明Mycanvas画布类型数组对象 Panel p1; /声明面板类对象引用变量p1 public void init() /小程序初始化方法 setLayout(new BorderLayout(); /设置Applet的布局是BorderLayout mycard=new CardLayout(); /创建卡片布局对象实例 p1=new Panel(); /创建面板对象1实例 p1.setLayout(mycard); /p1的布局设置为卡片式布局 button1=new Button(第一张);button2=new Button(下一张); /创建3个按钮对象实例button3=new Button(最后一张); mycanvas=new Mycanvas31; /创建具有31个元素的画布数组对象for(int i=1;i=30;i+) / for循环添加30个画布对象/将在实参i,i坐标位置处的画布对象存入数组，并传实参给构造函数 mycanvasi=new Mycanvas(i,i); p1.add(第+ i ,mycanvasi); /向面板p1添加画布组件，先加入的是卡片式的第一张。 /注册按钮监听器，this代表主类TestCardLayout对象，将主类对象this作为事件源button1的监听器，因此该主类必须实现接口ActionListener中的actionPerformed()方法 button1.addActionListener(this); /为3个按钮注册（添加）监听器 button2.addActionListener(this); /注册（添加）监听器 button3.addActionListener(this); /注册监听器 Panel p2=new Panel(); /创建面板对象2实例默认为流布局FlowLayoutp2.add(button1); /添加3个按钮添加到面板对象2中p2.add(button2); p2.add(button3);add(p1,Center); /在中部添加面板对象1，布局为卡片式add(p2,South); /在南部（底部）添加面板对象2的3个按钮 public void actionPerformed(ActionEvent e) /点击按钮发生事件的处理方法 if(e.getSource()=button1) /取得事件源如果是button1 mycard.first(p1); /卡片布局对象调用显示面板容器1的第一张卡片 else if(e.getSource()=button2) mycard.next(p1); /卡片布局对象调用显示面板容器1的下一张卡片 else if(e.getSource()=button3) mycard.last(p1); /卡片布局对象调用显示面板容器1的最后一张卡片 在编译后有2个类Mycanvas.classTestCardLayout.class将主类嵌入到html 文件中在DOS下用小程序查看器appletviewer执行：appletviewer TestCardLayout