第9章 图形用户界面设计

1图形用户界面设计29.1概述9.1.1图形用户界面(GraphicsUserInterface)1、用户界面是用户和计算机之间进行信息交互的界面。2、用户界面分类：命令行界面和图形用户界面•字符界面–用字符串、命令行的方式与用户交互•图形用户界面（GUI）–用直观的图形来表示数据–用直观、方便的GUI标准组件来接收命令–GUI组成成分的标准化使用图形的方式借助菜单、按钮等标准界面元素和鼠标操作，来帮助用户方便地向计算机系统发出命令，启动操作，并将系统运行的结果同样以图形的方式显示给用户。33、用户界面设计原则•控制权在用户•界面与操作的风格一致性•宽容（容错）性•简洁与美观并重4、图形用户界面的建立•建立和添加组件形成图形界面的屏幕显示部分；•设置布局管理器，布局图形组件；•设计事件处理，完成相应的事件响应。45、界面构成用户自定义成分标准组件容器56、界面元素•容器是用来组织其他界面成分和元素的单元。–可以形成容器的层次，构筑复杂结构–Window（Frame、Applet、Dialog）•组件是图形用户界面的基本单位，它里面不再包含其他的成分。–GUI组件是图形用户界面标准化的结果。常用的组件有:选择类的:单选按钮、复选按钮、下拉列表；文字处理类的:文本框、文本区域命令类的:按钮、菜单等–GUI组件的作用是完成与用户的交互。包括接收用户的命令、文本或选择输入，向用户显示一段文本或一个图形等。66、界面元素•用户自定义成分–显示文字、绘制图形、显示图象…–不能像标准组件一样被系统识别和承认，只起装饰作用。–不能响应用户的动作，不具有交互功能。7图形用户界面的组件层次JTextField1JLabel1JTextField2JLabel2JButton1JButton2JFrameJPanel1JPanel2容器组件容器组件89.1.2AWT和Swing•AWT由java.awt提供，该包中包含了许多用来设计GUI的组件类。把由Container类的子类或间接子类所创建的对象称为一个容器，这里Container的子类是Window和panel。AWT的组件类有按钮类（Button）、标签类、菜单类、列表类、文本框类等。•Swing是由javax.swing提供，该包中包含了许多Swing的类和组件均由纯Java代码编写而成，这样也就使这些组件具有了可跨越操作系统平台性。9AWT与Swing分析SwingAWT推出时间新旧组件名以J开头平台相关性好稍差按钮和标签还能显示图形只能显示文字外形可以是圆形只为矩形行为和外形的改变通过方法调用和创建子类可实现Swing组件比AWT组件具有明显的优势。但Swing并不是用来替代原有的AWT，两者在功能上有很多重合之处。在事件的处理、版面的配置等方面还仍然使用AWT。可以将Swing和AWT看成是相辅相承的两大工具组，为开发出美观、友好、功能强大的GUI提供了可能。10从一个简单窗口开始•创建GUI应用程序–Frame必不可少它是带标题的顶层窗口,是构建应用程序图形界面的基础,它为应用程序实现人机交互提供了对话窗口•先来建一个简单的窗口应用:GUIDemo1.java–注意：一定要处理关闭窗口的事件11importjava.awt.event.*;importjavax.swing.*;publicclassGUIDemo1{publicstaticvoidmain(String[]args){JFrameframe=newJFrame(加油呀！);//创建视窗对象JLabellabel=newJLabel(学好java用处大！);//创建标签对象frame.getContentPane().add(label);//将标签添加到视窗对象中//定义事件处理frame.addWindowListener(newWindowAdapter(){publicvoidwindowClosing(WindowEvente){System.exit(0);}});frame.setSize(300,200);//设置视窗尺寸frame.setVisible(true);//将视窗设置为可见}}例9-1一个简单的窗口应用程序129.1.3GUI标准组件概述1、构建程序的图形用户界面的主要任务–创建各界面组件并排列成图形用户界面的外观–定义这些组件对不同事件的影响从而完成图形用户界面功能2、组成图形用户界面的成分–用户自定义类–容器:是能够容纳并排列其他组件的对象–组件:放置在容器中的对象在Java中，容器和组件是由AWT包中的对象来代表，这些对象间的层次关系如下图：133、AWT类层次关系图MenuComponentMenuMenuItemMenuBarComponentContainerPanelAppletWindowFrameDialogButtonTextFieldTextAreaTextComponentCheckbox其他组件144、基本组件•基本组件被安放在容器中的某位置，用来完成一种具体的与用户交互的功能，使用基本组件一般包括如下的步骤–创建某种基本组件类的新对象，指定该对象的属性比如：外观、大小等–将该组件对象加入到某个容器的合适位置–创建该组件对象的监听者，即实现以该组件为事件源的事件对应的监听者接口，也可以使现有的类实现该接口成为监听者。将该组件对象注册给此监听者，并在监听者内部实现监听者接口中定义的方法，对该组件可能引发的事件加以处理，定义新加入组件对象的交互性界面功能。比如：接收用户输入的文本、在屏幕显示输出等155、Component类Component是所有组件和容器的抽象父类–显示功能：paint(),update(),repaint()–显示效果控制：字体、颜色、位置、尺寸–图象处理：一般利用Canvas和Container来显示图像–事件处理机制：•addXXXListener()•removeXXXListener()165、Component类•add(PopupMenupopup)在组件上加入一弹出菜单•addFocusListener(FocusListenerl)将发生在本组件上的事件注册给监听者，以进行事件处理。•setSize(intwidth,intheight)设置组件尺寸•repaint(intx,inty,intwidth,intheight)重画组件•setFont(Fontf)设置组件字体•setBackground(Colorc)设置组件背景色•setVisible(booleanb)设置组件是否可见176、GUI标准组件•简单构件：人机交互的基本工具(控制)–Button,Checkbox,Label等–TextComponent(TextArea,TextField)–Canvas•复杂构件:–Container(安放排列其他构件的容器)–Panel–Window187、Container（容器）•排列其中包容的构件–定位布局策略set/getLayout()•包容其他基本构件–增加构件:add()–删除构件:remove()•控制是否显示容器及其中组件–setVisible(true/false)198、Container容器组件•Window—无边框、菜单的空白窗口。不需要其他组件支撑，独立显示。–Frame:用于Application，含边框、标题和菜单的独立窗口–Dialog:依赖于Frame的非独立窗口。没有菜单条，不能改变大小。•Panel(面板)—属于无边框容器。必须放在Window组件中(或Web浏览器窗口)才能显示。它为一矩形区域，在其中可摆放其他组件，可以有自己的布局管理器。–无边框容器包括Panel和Applet。其中Applet为Panel的子类•基本方法–add(Componentcomp)将指定组件放到容器中–getComponent(intindex)获取指定序号的组件–remove(Componentcomp)删除指定组件–setLayout(LayoutManagermgr)设置容器布局209.2布局管理9.2.1布局管理简介当一个容器组件上要添加多个组件时，就需要进行组件的布局管理。Java中用布局管理器来进行布局管理。1、布局管理器（layoutmanager)–用于控制组件在容器中的布局–负责确定组件在容器中的位置和大小。–调用容器的setLayout(布局管理器对象)方法，为容器指定某种布局。–当容器需要定位组件和确定组件大小时，就会给布局管理器对象发消息，让它完成该项工作。2、直接管理组件–调用容器的setLayout(null)方法，关闭布局管理器。–调用每一个组件的setLocation()方法决定组件位置。–调用每一个组件的setSize()方法决定其大小。213、布局管理器种类在Java的GUI界面设计中，布局控制是通过为容器设置布局编辑器来实现的。Java.awt包中共定义了五种布局编辑类，每一个布局编辑类对应一种布局策略：•FlowLayout：组件在一行中按加入的先后顺序从左至右水平排列，排满后折行，每行中的组件都居中排列。•BorderLayout：把容器空间划分为北、南、西、东、中五个区，每加入一个组件都应说明把这个组件加在那个区域中。•CardLayout：每一个组件作为一个卡片，容器仅显示多个卡片中的某一个•GridLayout：以行和列的网格形式安排组件•GridBagLayout：更复杂、功能更强的网格布局224、确定容器布局•缺省的布局管理器–Window、Frame、Dialog—BorderLayout–Panel、Applet—FlowLayout:•选择布局管理器的方法–建立布局管理器类的对象–利用容器的setLayout为容器指定布局(即指定一个布局管理器的对象)•改变缺省布局管理器的方法；例：BorderLayoutB=newBorderLayout();C1.setLayout(B);orC1.setLayout(newBorderLayout());例:将myFrame布局设定为FlowLayout类型myFrame.setLayout(newFlowLayout());239.2.2常用布局管理器1、FlowLayout布局管理器布局策略：从左到右，然后从上到下。构造方法：–FlowLayout();–publicFlowLayout(intalign);–FlowLayout(intalign,inthgap,intvgap)；align：对齐方式：LEFTCENTERRIGHThgap：组件水平间距（象素）vgap：组件垂直间距•无参数的构造方法创建的FlowLayout对象，其对齐方式为CENTER居中方式，组件间的横纵间距都为5个像素。24例9-2FlowLayout布局管理器importjava.awt.*;importjava.awt.event.*;publicclassFlowLayoutDemoextendsFrame{Framef=newFrame(FlowLayout);Buttonb1,b2,b3;publicFlowLayoutDemo(){f.setSize(400,300);//不起作用f.setBackground(Color.gray);f.setLayout(newFlowLayout(FlowLayout.LEFT,10,20));b1=newButton(button1);b2=newButton(button2);b3=newButton(button3);25f.add(b1);f.add(b2);f.add(b3);f.setVisible(true);f.pack();//询问布局管理器窗大小f.addWindowListener(newWindowAdapter(){publicvoidwindowClosing(WindowEvente){System.exit(0);}});}