图形用户界面设计.ppt

第5章 图形用户界面设计,教学目标： 通过本章的学习，掌握常用容器组件的用法、容器组件的布局方式、组成界面的可视组件的功能与用法；掌握事件处理机制，能进行菜单设计，最终达到开发出智能化的图形界面应用程序的目的。,案例 学生信息注册界面设计解析 多数学校的学生档案信息都由计算机进行管理，在编写的档案管理应用程序中，有档案信息录入模块，该模块的功能是在图形化的界面下，用户把信息输入到计算机中。录入界面的大致样式及组件名称如图,设计上述程序界面并实现相应的功能，程序框架如下： public class InputData implements ActionListener Frame f; /声明框架对象 Label l1,l2,l3,l4; /声明标签对象 TextField t; /声明文本行对象 Checkbox r1,r2; /声明单选按钮对象 CheckboxGroup g; /声明组对象 Checkbox c1,c2,c3; Choice ch; /声明选择框对象 Button b; /声明按钮对象 TextArea ta; /声明文本区对象 Panel p1,p2,p3,p4,p5; /声明面板对象 int i=0;,public InputData( ) 对象实例化； ch.add(“济南“); /添加选择项 p1=new Panel( ); p1.setLayout(new FlowLayout(FlowLayout.LEFT); /设定面板布局样式 p1.add(l1); /在面板中加入组件 f.setLayout(new GridLayout(2,1); /设定框架布局样式 f.addWindowListener(new WindowAdapter( ) /注册事件监听器，匿名类实现接口 public void windowClosing(WindowEvent e) System.exit(0); ); f.setVisible(true); ,public void actionPerformed(ActionEvent e) /事件处理接口实现 /把输入内容显示到文本区中； public static void main(String args ) new InputData( ); 在上面的案例框架中，应用到了如下知识点。 (1) 组成界面的各种组件。 (2) 界面的布局样式。 (3) 事件处理机制。 下面将详细介绍相关的知识。,5.1 框架与面板,5.1.1 认识Component类 部分类的继承关系如图,Component类是其他组件类的父类，在此介绍该类的一些方法，这些方法可直接继承到子类中使用。 (1) setFont(Font f)：设置组件的字体。 (2) setForeground(Color r)：设置组件的前景色。 (3) setLocation(int x,int y)：设置组件的显示位置。 (4) setSize(int width, int height)：调整组件的大小，使其宽度为 width，高度为 height。 (5) setVisible(boolean b)：根据参数 b 的值显示或隐藏此组件。 (6) getForeground( )：获得组件的前景色。 (7) getFont( )：获得组件的字体。 (8) getBackground( )：获得组件的背景色。 (9) getHeight( )：返回组件的当前高度。 (10) invalidate( )：使此组件无效。 (11) getBounds( )：以Rectangle 对象的形式获得组件的边界。,5.1.2 框架 框架类Frame是一种带标题条并且可以改变大小的窗口，该类为容器类。 Frame类的构造方法及实例方法 :,5.1.3 面板 面板类Panel也是容器类。但与Frame类的区别是，面板是一种没有标题条的容器，在应用时只能把该类实例化的对象通过Container类的add方法加载到Window对象中。 该类的构造方法如下。 (1) public Panel( )：创建一个面板对象。 (2) public Panel(LayoutManager mgr)：创建一个面板对象且约定了添加到该面板中组件的布局样式。,5.2 布局管理器,5.2.1 边界布局 该布局将容器组件划分成了5个区域：南(South)、北(North)、东(East)、西(West)、中(Center)。 边界布局类 边界布局类为BorderLayout，该类的构造方法如下。 (1) public BorderLayout( )：创建一个边界布局管理类对象。 (2) public BorderLayout(int hgap, int vgap)：创建一个边界布局管理类对象。其中，hgap和vgap指定组件的水平和垂直间距，单位是像素，默认值为0。,若向容器中加入组件，可以通过以下两种形式实现。 (1) add(String s, Component comp)：其中s代表位置，位置用字符串“South”、“North”、“East”、“West”、“Center”表示。 (2) add(Component comp, int x)：其中x是代表位置的常量值，分别是BorderLayout. SOUTH、BorderLayout.NORTH、BorderLayout.EAST、BorderLayout.WEST、BorderLayout. CENTER。 说明：(1) 在边界布局中，若向框架加入组件，如果不指定位置，则默认把组件加到了“中”的区域。 (2) 若某个位置未被使用，则该位置将被其他组件占用。,5.2.2 流布局 该布局按从左至右、从上至下的方式将组件加入到容器中。 流布局类 流布局类为FlowLayout，该类的构造方法如下。 (1) public FlowLayout( )：创建一个流布局类对象。 (2) public FlowLayout(int align)：创建一个流布局类对象，其中align表示对齐方式，其值有3个，为FlowLayout .LEFT、FlowLayout .RIGHT、FlowLayout .CENTER，默认为FlowLayout .CENTER。 (3) public FlowLayout(int align, int hgap, int vgap)：其中align表示对齐方式；hgap和vgap指定组件的水平和垂直间距，单位是像素，默认值为5。,5.2.3 网格布局 该布局将容器划分成规则的行列网格样式，组件逐行加入到网格中，每个组件大小一致。但当容器中放置的组件数超过网格数时，则自动增加网格列数，行数不变。 1网格布局类 网格布局类为GridLayout，该类的构造方法如下。 (1) public GridLayout(int rows, int cols)：rows表示网格行数，cols表示网格列数。 (2) public GridLayout(int rows, int cols, int hgap, int vgap)：rows表示网格行数，cols表示网格列数；hgap和vgap指定组件的水平和垂直间距，单位是像素。,5.2.4 卡片布局 使用该布局样式布局容器中的组件时，组件就会像卡片一样排放在容器中，只有最上面的卡片可见。,5.3 按钮、标签、文本行、文本区,5.3.1 按钮(Button) 图形用户界面中，按钮常用于接收用户的单击事件。 1. 构造方法 (1) public Button( )：通过该构造方法创建按钮时，按钮上没有说明信息。 (2) public Button(String s)：通过该构造方法创建按钮时，按钮上的说明信息为s。 2. 常用方法 (1) public void setLabel(String s)：通过该方法，把按钮上的说明信息设为s。 (2) public String getLabel( )：通过该方法，获取按钮上的说明信息。,5.3.2 标签(Label) 标签的功能是显示静态文本，不能动态地编辑文本，作为提示信息通常由标签实现。 1构造方法 (1) public Label( )：通过该构造方法创建标签时，标签没有提示信息。 (2) public Label(String s)：通过该构造方法创建标签时，标签上显示的提示信息为s。 (3) public Label(String s, int align)：通过该构造方法创建标签时，标签上的提示信息为s，并设定了标签文本的对齐方式，分别为Label.LEFT(左对齐)、Label.RIGHT(右对齐)、Label.CENTER(居中对齐)，默认对齐方式为居中对齐。 2常用方法 (1) public void setText(String s)：通过该方法，把标签上的提示信息设为s。 (2) public String getLabel( )：通过该方法，获取标签上的提示信息。,5.3.3 文本行(TextField) 文本行用来输入单行文本。,5.3.4 文本区(TextArea) 文本区可以输入多行文本，且文本区带有滚动条。,5.4 事件处理机制,5.4.1 Java事件处理概述 引入事件处理机制后的编程基本方法如下。 (1) 在java.awt中，组件实现事件处理必须使用java.awt.event包，所以在程序开始处应加入import java.awt.event.*语句。 (2) 用如下语句设置事件监听者：事件源.addXxxListener(事件监听者)。 (3) 事件监听者所对应的类实现事件所对应的接口XxxListener，并重写接口中的全部方法。 这样就能处理图形用户界面中的对应事件。要删除事件监听者，可以使用语句：事件源.removeXxxLitener( )。,5.4.2 Java常用事件,5.4.3 事件适配器 Java为那些声明了多个方法的Listener接口提供了一个对应的适配器(Adapter)类，在该类中实现了对应接口的所有方法，只是方法体为空。,5.5 其他常用组件,5.5.1 选择框(Checkbox) 选择框分为复选框与单选按钮两种，在一组复选框中可选多项，但在一组单选按钮中只允许选一项。它们对应的类同为Checkbox。,5.5.2 选项框(Choice) 这是用户十分熟悉的一个组件，用户可以在下拉列表中看到第一个选项，在选项右侧有一个下拉箭头，当用户单击下拉箭头时，则选项列表打开，用户可选择其中的选项。,5.5.3 列表框(List) 列表框与选项框均是从提供的选项中选取选项，但显示形式不同，初始时选项框只显示一项选项，但列表框初始时可显示多个选项。当列表框不足以显示出所有列表项时，自动在右侧添加滚动条。选项框只允许用户选取一个选项，但列表框可供用户选多项。在此把列表框与选项框中一些不同的方法列出 .,5.6 菜 单 设 计,菜单系统由菜单条、菜单、菜单项组成。要创建一个菜单系统，首先要有一个框架，在框架上添加菜单条，然后在菜单条中添加若干个菜单，每个菜单再添加若干菜单项。 1菜单条(MenuBar) 菜单条是一个放置菜单的容器。 (1) 构造方法如下所示。 public MenuBar( )：创建一个菜单条。 (2) 常用方法如下所示。 public Menu add(Menu m)：将菜单加入到菜单条中。 在设计菜单时，通过使用Frame类的setMenuBar( )方法将菜单条加入到框架中标题条的下方。,2菜单(Menu) 菜单是一个放置菜单项或下一级菜单的容器。菜单对象放在菜单条对象里 .,3. 菜单项 (1) 构造方法如下所示。 MenuItem(String s)：创建一个标题信息为s的菜单项。 (2) 常用方法如下所示。 setEnable(boolean b)：设置菜单项的显示状态。当值为true时，菜单项显示，当值为false时，菜单项不显示。 说明：当菜单设计好后，要为菜单项注册事件监听器，无须为菜单条与菜单注册事件监听器，只要用户单击菜单，则自动弹出下级菜单。,4. 快捷菜单 快捷菜单也称为弹出式菜单，附着在某个组件上，当在附有快捷菜单的组件上单击鼠标右键时，即显示快捷菜单。 PopupMenu类用于创建快捷菜单，其构造方法为： public PopupMenu( ) 创建快捷菜单通常要进行如下几个步骤。 (1) 把快捷菜单加入到依附的组件。方法为：组件.add(PopupMenu popmenu)。 (2) 给依附的组件注册鼠标事件监听器。方法为：组件.addMouseListener(listener)。 (3) 实现鼠标事件接口中的方法。一般是在mouseClicked( )或mouseRealease( )方法中执行popmenu.show(组件, int x, int y)语句。其中组件是指弹出菜单所依附的组件，x、y设定弹出菜单的显示位置。,5.7 Swing组件介绍,Swing和AWT的关系： (1) Swing构件都是AWT的Container类的直接或间接子类。 (2) Swing是对AWT的扩展，AWT是Swing的基础。 (3) Swing和AWT构件的基本使用方法相同，事件处理机制相同。 在使用时，应注意以下几点。 (1) 大多数情况下在AWT组件前加一个J即为Swing组件。组件基本都包含在javax.