基于案例的软件构造教程（第2版） 课件 07GUI软件构造

第7章

GUI软件构造第7章GUI软件构造首先认识GUI及其基本元素，理解GUI的基本设计原则，学习GUI的设计模式、在GUI开发中广泛运用的编程范式——事件驱动编程，通过例子学习使用工具构造GUI软件。深入讨论GUI的其他设计原则，探讨GUI测试方法。2016秋数据科学与软件工程学院2第7章GUI软件构造故事8图形界面测试工具2016秋数据科学与软件工程学院3第7章GUI软件构造7.1GUI简介7.2GUI的基本元素与设计规范7.3JavaGUI设计模式7.4事件驱动编程7.5案例分析与实践7.6讨论与提高7.7思考与练习题2016秋数据科学与软件工程学院47.1GUI简介7.1.1GUI发展轨迹7.1.2JavaGUI的构造工具2016秋数据科学与软件工程学院57.1.1GUI发展轨迹2016秋数据科学与软件工程学院67.1.2JavaGUI的构造工具1．JavaSwing工具包Swing作为一个用于开发Java图形界面应用程序的经典开发工具包，jdk1.2即包含了Swing。2016秋数据科学与软件工程学院77.1.2JavaGUI的构造工具2016秋数据科学与软件工程学院87.1.2JavaGUI的构造工具2．JavaGUI可视化设计工具——WindowBuilder2016秋数据科学与软件工程学院97.2GUI的基本元素与设计规范7.2.1GUI的基本元素7.2.2GUI基本设计规范2016秋数据科学与软件工程学院107.2.1GUI的基本元素1．窗口与对话框“窗口”是一种容器类，而且是顶层容器类。所谓顶层容器类，即可以容纳其他容器或组件、本身可独立显示、不依赖其他容器类的类。窗口一般是指javax.swing.JFrame类，依次派生自java.awt.Window类、java.awt.Container类。2016秋数据科学与软件工程学院117.2.1GUI的基本元素“对话框”是一个与窗口类似的顶层容器类，对话框与普通窗口不同。对话框用于交互，一般会向用户提示一些信息并能获取用户的信息反馈。javax.swing.JDialog是一个对话框类，它依次派生自java.awt.JDialog类、java.awt.Window类，与jFrame类同源。另一个可以创建对话框的类JoptionPane，它有4个常用的静态方法，用于创建4种常用的对话框，如表7.2所示。2016秋数据科学与软件工程学院127.2.1GUI的基本元素2016秋数据科学与软件工程学院137.2.1GUI的基本元素2016秋数据科学与软件工程学院147.2.1GUI的基本元素2．菜单和工具条菜单包括菜单条（JMenuBar）、菜单（JMenu）和菜单项（JMenuItem）。JmenuBar是容器类，但不是顶层容器，因此需要放置在一个顶层容器中。工具条（JToolBar）是一个容器类，可以放置各种常用的工具或组件。2016秋数据科学与软件工程学院157.2.1GUI的基本元素3．图标在某些场合，使用图标（icon）比使用文字更加简洁、更加容易辨析。4．基本组件派生自Component的类称为“组件”，分三类（注意，这样分类并不完全）：顶层容器类（派生自Window），如窗口或对话框；非顶层容器类（如菜单条和工具条），称为中间容器类；必须放置在容器上的那些非容器类，称为“基本组件”，它们位于设计界面的“Components”组内。2016秋数据科学与软件工程学院167.2.1GUI的基本元素（1）标签（JLabel）（2）文本域（JTextField）（3）密码域（JPasswordField）（4）单选按钮（JRadioButton）（5）复选框（JCheckBox）（6）组合框（JComboBox）（7）文本区域（JTextArea）（8）按钮（JButton）还有进度条、滑块、多选列表等基本组件2016秋数据科学与软件工程学院177.2.2GUI基本设计规范1．界面合理合理的界面，要求有合理的布局和颜色搭配。窗口中的组件要排列整齐，既不能太拥挤，也不能太空旷，界面的颜色要与软件的功能、界面布局搭配协调，并且遵循人们对于颜色的习惯性理解。2016秋数据科学与软件工程学院187.2.2GUI基本设计规范2．风格一致GUI界面应使用标准的组件、明确定义的术语，与用户的习惯认知和知识领域一致。同时，界面信息表现方式也要前后一致，不同功能模块的操作方式、字体、标签风格、颜色方案、错误提示信息等方面应一致。2016秋数据科学与软件工程学院197.2.2GUI基本设计规范3．元素标准（1）窗口与对话框的标准。窗口能适应不同分辨率的屏幕，能正确地关闭和缩放；窗口中的组件在窗口缩放时应具有正确的位置；窗口中的组件应具有恰当的焦点顺序；要根据不同场合正确使用不同类型的对话框（如消息提示、确认、输入等类型）。2016秋数据科学与软件工程学院207.2.2GUI基本设计规范（2）菜单和工具条的标准。菜单应提供线索以帮助用户识别、而非强迫用户去记忆；菜单项措辞准确、顺序合理；菜单的层次不宜过多。工具条应具有最常用的功能，应允许用户自定义工具条的功能；工具条的功能按钮可采用图标或文字相结合的方式合理提示用户。2016秋数据科学与软件工程学院217.2.2GUI基本设计规范（3）图标的标准。图标应轮廓清晰、与背景区分明显，图标应采用能表达出实际功能的图形，避免过度抽象；图标的设置符合多数用户的表达习惯和使用习惯。2016秋数据科学与软件工程学院227.2.2GUI基本设计规范（4）基本组件的标准。组件间距合理、属于同组的组件区域明显；具有文本编辑区域的组件尺寸应符合大多数情况的文字长度；按钮的位置符合用户使用习惯，根据功能正确使用如单选按钮、复选框等不同的输入组件；当组件不可用或内容不可编辑时，要设置相应属性，以免误导用户。2016秋数据科学与软件工程学院237.3JavaGUI设计模式7.3.1观察者模式7.3.2MVC模式2016秋数据科学与软件工程学院247.3.1观察者模式在观察者模式中，把上文中那些状态将会发生改变的对象作为“被观察者”或“观察对象”（Subject），当被观察者的状态发生改变时，则会通知另一类被称为“观察者”（Observer）或“侦听器”（Listener）的对象，后者会根据新状态做出相应的反应。被观察者可以将不同的观察者加入到对不同状态变化的侦听对象列表中。2016秋数据科学与软件工程学院257.3.1观察者模式2016秋数据科学与软件工程学院267.3.1观察者模式弊端：观察者一方面接收状态变化的通知，另一方面还要做出相应的动作——执行相应的业务功能，这等于说在一个类当中整合了输入解析和业务逻辑两部分功能，不符合单一职责的设计原则。这种功能耦合的设计，使得观察者类把输入解析和业务逻辑捆绑在一起，不能使用同一个观察者类处理不同的业务逻辑。2016秋数据科学与软件工程学院277.3.2MVC模式2016秋数据科学与软件工程学院287.4事件驱动编程事件驱动编程主要用于GUI和其他为响应用户的交互做出特定动作的应用程序。在事件驱动编程的应用中，通常有一个监听事件的主循环，一旦监测到其中的一个事件，就触发一个函数调用，执行相应的动作。事件驱动编程可以理解为实现MVC模式的一种技术方案。2016秋数据科学与软件工程学院297.4事件驱动编程7.4.1事件捕捉与处理7.4.2焦点事件和Tab顺序7.4.3实例讲解2016秋数据科学与软件工程学院307.4.1事件捕捉与处理用户对于组件的动作或组件状态的改变都可以列入事件。而发生动作或状态改变的这个组件，就是事件源。在Swing中，采用事件类（Event）表示某种事件，采用了侦听器类（Listener）来捕捉与处理事件。侦听器类对不同的事件进行侦听，当发生特定事件时，即进行相应的处理。2016秋数据科学与软件工程学院317.4.1事件捕捉与处理Swing中常用的事件有窗口事件、动作事件、键盘事件、鼠标事件、文本事件、焦点事件等，如表7.3所示。2016秋数据科学与软件工程学院327.4.1事件捕捉与处理事件的处理可采用匿名类、适配器类等多种方式。即使是Java这种与平台无关的语言，其GUI的显示效果也取决于特定的操作系统。2016秋数据科学与软件工程学院337.4.2焦点事件和Tab顺序焦点就是获取键盘或鼠标输入的能力。组件获得焦点，即可获取键盘输入，而组件失去焦点，键盘输入的接收方也就随之改为其他组件。在多个不同组件当中，焦点如何切换呢？默认的方法是：（1）使用Tab键，每按一次Tab键，焦点按照一定的次序在组件之间切换；（2）使用鼠标单击组件，被单击的组件获得焦点，而原先获得焦点的组件则失去焦点。2016秋数据科学与软件工程学院347.4.2焦点事件和Tab顺序“默认焦点”指当GUI程序（或网页）运行时，无须用户操作而首先获得焦点的那个组件。默认焦点应当遵循以下两条设计原则。（1）默认焦点应当处于用户最经常选择的最先输入组件。（2）对于具有连续多个文本输入组件的界面，焦点切换顺序应当从第一项输入组件开始，按照从左至右、由上到下的顺序依次切换。2016秋数据科学与软件工程学院357.4.3实例讲解2016秋数据科学与软件工程学院367.5案例分析与实践7.5.1探路的GUI构造任务7.5.2重构GUI构造任务2016秋数据科学与软件工程学院377.6讨论与提高7.6.1GUI的设计原则7.6.2GUI的测试2016秋数据科学与软件工程学院387.6.1GUI的设计原则1．关注用户及其任务，而不是技术。设计界面时，不应首先关注用何种技术实现，而应当了解软件的用户、任务和工作的环境。2．首先考虑功能，然后才是表示。软件体现了特定的概念及概念间的关系，设计人员在向用户呈现一个“软件界面”前，首先应当完整地定义概念及其相互关系——开发、更新概念模型。用户界面是随概念模型的确定而设计出来的。2016秋数据科学与软件工程学院397.6.1GUI的设计原则3．对任务的看法与用户保持一致。按照用户的观点进行设计。（1）让用户自然地使用。（2）使用用户熟悉的词汇而不是计算机专业词汇。（3）软件的工作细节应当保留在内部。4．设计要符合常见情况软件界面设计应减少常用情况下的操作步骤。“常用”有两：一是使用该功能的用户多；二是使用该功能的频度高。对于多用户使用的功能，要置于明显处；对于使用频度高的功能，应当降低鼠标单击或按键次数。2016秋数据科学与软件工程学院407.6.1GUI的设计原则5．不要分散用户对目标的注意力软件的设计应当使用户专注于他们的任务和目标，而不要去考虑软件的运行、操作等方面。具体如下。（1）不能让用户解决额外问题；（2）不要让用户通过推理、猜测的方式使用程序，用户界面中的各项组件、命令、设置等功能和使用的词汇都应当清晰明确，避免用户靠猜测、推理、试探的方法使用软件。2016秋数据科学与软件工程学院417.6.1GUI的设计原则6．促进学习我们不应当指望所有用户通过阅读用户手册而学会使用软件。软件界面本身就应该能促进用户体验使用软件。我们应当显示明确的文字和按钮，使用自然易懂的图示，保持软件的一致性，降低用户出错的风险和纠错成本。2016秋数据科学与软件工程学院427.6.1GUI的设计原则7．传递信息，而不仅仅是数据。软件应当将用户的注意力集中到重要的数据，帮助他们提取信息，而不是把所有的数据一股脑地扔给用户。在设计界面时，应当注意，“屏幕属于用户”，焦点的转移、窗口的激活、鼠标的移动都应当由用户主动控制。2016秋数据科学与软件工程学院437.6.1GUI的设计原则8．设计应满足响应需求用户对于交互式软件的“响应”（response）会有很高的要求。即使用户执行的某项操作需要一定时间才能得出结果，也一定要尽快给出响应以表示“接受了用户操作”，而最终结果可以稍晚给出。9．通过用户试用发现并改正错误用户界面是否具有“易用性”，要靠实际用户参与试用才能获得检验。2016秋数据科学与软件工程学院447.6.2GUI的测试1．GUI测试的困难（1）程序流程不可预知。（2）输入空间大，测试用例多。（3）传统方法难以覆盖。2016秋数据科学与软件工程学院457.6.2GUI的测试2．GUI测试模型（1）基于有限状态自动机的测试模型。有限状态自动机（FiniteStateMachine，FSM）一个具有离散输入/输出的数学模型，在任何时刻都能处于某个特定状态。GUI组件中属性值的改变使得系统的状态发生改变，这些状态就可以描述为FSM模型的状态集合。状态转换图是FSM的图形化表示，提出的测试方法适用FSM。但是对于复杂的GUI程序，状态数量庞大，FSM建模成本很高、维护困难，降低了测试效率。2016秋数据科学与软件工程学院467.6.2GUI的测试（2）基于事件流图和交互图的测试模型。事件流图（EventFlowGraph，EFG）是一个有向图，它以GUI的窗口和事件为建模元素，顶点表示事件，边表示事件之