JAVA教程第3章(程序界面设计).ppt

第3章 程序界面设计,本章提要 用户界面类型 常用界面元素的使用 常用图形元素的使用,用户界面是系统提供给外界的用户接口，通过这一接口，我们可以对系统进行操作，指挥系统按照某种流程运行。 在诸如银行业务、飞机售票等这些业务中，每天都会有大量的事务处理。我们必须为办事人员提供操作方便，美观大方的操作界面。 例如，银行办事人员的帐号操作界面，应将各种输入框合理布局在界面中；为飞机票售票员提供的查询航班的界面，应以列表的形式显示航班次数，等等。 良好的用户界面将使得软件更加人性化,如应易于展现功能,且对于用户而言是必要的。,引子:软件的用户界面重要吗?,本章知识要点,用户界面的类型 Java中提供的GUI组件类 SWING高级组件 图形绘制 声音文件处理,任务1 设计产品信息处理界面,问题分析 知识学习 用户界面的类型 Java中提供的GUI组件类 任务实施,执行效果,问题分析,任务描述： 编写一个程序，能够实现产品信息处理界面 步骤分析： 了解Java程序用户界面类型 构建图形用户界面的方法 常用组件 设计产品信息处理界面，分析需要什么组件，及大小，形状 编写代码 编译执行,知识学习用户界面类型,用户界面分为两类： 字符用户界面（CUI） 图形用户界面（GUI）,知识学习AWT和SWING,AWT 和 SWING 是 Java 设计 GUI 用户界面的基础。 AWT为重量级组件，Swing 则大部分是轻量级组件。 AWT是Swing的基础，而基于图形化用户界面发展需要，采用纯Java实现了轻量级先进的组件，更为美观易用，且无本地代码，从而不依赖本地操作系统（AWT会因操作系统不同，出现不同显示效果）。 但有一些类是Swing无法代替的，实现用户界面时，可选择Swing绘制界面上的元素，而将AWT用于界面布局、图形绘制、字体设置、事件处理等。 进行界面元素的绘制时，不要混用AWT、Swing。,知识学习AWT和SWING,AWT： 在Java1.0版本中，图形元素包括在java.awt包中。Java的AWT包定义了窗口系统所显示的各种对象，既包括组织窗口屏幕元素所需的基本类，也包括图形处理，显示所需的基本类。,java.awt,java.awt.Event,Color,Font,Image,FlowLayout,CardLayout,BorderLayout,GridBagLayout,Graphics,Component,知识学习AWT和SWING,AWT：,知识学习AWT和SWING,SWING是原先AWT的扩充。它加入了广泛的、可完全移植的、类和库的集合。JFC作为Java平台的一部分，它有丰富的组件集合，这些都是完全平台独立的。Javax.swing.*,知识学习AWT和SWING,知识学习图形用户界面组成,容器 框架JFrame,面板JPanel,容器 面板JPanel,组件 文本框JText,姓名,组件 标签JLabel,提交,组件 按钮JButtonl,男,女,组件 单选JRadioButton,用户界面组成,蓝球,组件 复选JCheckBox,JFrame类：框架（JFrame）是带标题的顶层窗口 从类的层次上来看，它是Frame类的扩展，属于Container类。JFrame类的构造方法有两种： JFrame myFrame = new JFrame();/不带标题的窗体 JFrame myFrame = new JFrame(“MyFrame”);/带标题的窗体,知识学习SWING,例子： /创建窗体对象frame frame = new JFrame(“Hello Java“); /创建一文本标签 label = new JLabel(“Hello Java“); /初始化容器frame Container c=frame.getContentPane() /将文本标签添加到窗体（容器）上 c.add(label); /设置窗口的大小 frame.setSize(300,300); /设置窗口的可见性 frame.setVisible(true);,案例JFrameDemo.java,JPanel类 :JPanel类是一个大家会经常使用的容器类，被称为面板。 一般情况下，我们把所有的组件加入到面板，然后将面板加入到框架。 例子 ： JFrame frame = new JFrame(“JPanal Demo“); JButton b1 = new JButton(“Button1“); /创建panel对象 JPanel panel = new JPanel(); /将按钮添加到面板 panel.add(b1); /将面板添加到框架窗口 frame.getContentPane().add(panel); frame.setSize(300,300); frame.setVisible(true);,案例JPanelDemo.java,知识学习SWING,有了面板，就可以将很多不同的窗体页面做成不同的panel，那么在这种情况下，可以随时加载不同的panel达到页面转换的效果。 例子： /从框架中移除panel1，加载panel2 frame.remove(panel1); frame.getContentPane().add(panel2); frame.setVisible(true); frame.setSize(300,300);,知识学习SWING,标签:标签是用来在用户界面中显示静态的文本。 用JLabel类来创建一个标签控件。 JLabel label=new JLabel(“label”); 文本字段:用JTextField类来创建一个输入框控件。 getText（）方法来得到文本输入框中的内容 setText（）来设置文本输入框中的内容,知识学习SWING,案例JComponentDemo.java,列表框和组合框 JList（列表框）和JComboBox（组合框）类都属于多值控件，它允许用户在其所给的列表中进行选择。 列表框语法： String city = “北京“,“上海“,“广州“,“西安“; JList listCity = new JList(city); 组合框语法： String city = “北京“,“上海“,“广州“,“西安“; JComboBox comboObj = new JComboBox(city);,知识学习SWING,案例JComponentDemo.java,知识学习SWING,列表框常用方法,组合框常用方法,知识学习SWING,复选和单选按钮:复选按钮是通过JCheckBox来实现，单选按钮通过JRadioButton来实现。 JCheckBox语法： JCheckBox music; music = new JCheckBox(“音乐”); JRadioButton语法： JRadioButton grade,high; grade = new JRadioButton(“小学”); high = new JRadioButton(“中学”);,知识学习SWING,案例JComponentDemo.java,按钮组语法： ButtonGroup buttonGroup; buttonGroup = new ButtonGroup(); buttonGroup.add(grade); buttonGroup.add(high);,知识学习SWING,消息对话框: JOptionPane类能够定制出好几种不同的消息对话框： 普通的消息对话框 出错对话框 警告对话框 询问对话框等等。,知识学习SWING,JOptionPane.showMessageDialog(null,“alert“,“alert“,JOptionPane.ERROR_MESSAGE); 参数1：指定该对话框的父容器对象，如果没有可以指定为null，通常可以指定为已有的frame对象。 参数2：指定了对话框中显示的信息。 参数3：指定了对话框任务栏的标题。 参数4：指定了对话框显示的样式。,知识学习SWING,JOptionPane.showConfirmDialog(null,“choose one“,“choose one“, JOptionPane.YES_NO_OPTION); 参数1：指定该对话框的父容器对象，如果没有可以指定为null，通常可以指定为已有的frame对象。 参数2：指定了对话框中显示的信息。 参数3：指定了对话框任务栏的标题。 参数4：指定显示在对话框上面的按钮集。,知识学习SWING,JOptionPane.showInputDialog(“Please input a value“); 函数中参数是用来在输入对话框中显示的提示内容。,知识学习SWING,案例JComponentDemo.java,设计产品信息处理界面 根据要添入什么数据，什么样的图形元素用户会操作更简单的两个原则进行思考。 从产品的具体资料中可以得知：每一个信息都是要求用户进行输入的，所以对于这种情况，只需要将相应的信息对应一个文本输入框。对于每一个文本框前应该有相应提示，提示用户输入什么数据，所以要为每一个信息对应加入一个标签。然后再加入一个确定和一个取消按钮。 实现步骤 确定图形元素作为类属性 确定图形元素的大小 确定框架窗口的标题,任务实施,确定图形元素作为类属性,确定图形元素的大小,确定框架窗口的标题和大小 框架窗口的标题为“产品资料录入”；窗口大小为500*500像素 编写代码 编译执行,模仿例子,设计供应商录入界面,要求性别字段采用选择方式录入,所在区域的范围为广东、北京、上海、湖南、广西、湖北、江西，该怎么设计我们的用户界面。,动手练习,40分钟,拓展1SWING高级组件,用菜单组件显示下拉式菜单项 用表格组件显示数据记录 用树组件显示分级列表 用文件选择器选择文件,拓展1SWING高级组件,菜单组件类,拓展1SWING高级组件,JMenu,JMenuBar,JMenuItem,JToolBar,JPopupMenu,菜单组件,案例JMenuDemo.java JPopupMenu.java,拓展1SWING高级组件,用菜单组件显示下拉式菜单项 用表格组件显示数据记录 用树组件显示分级列表 用文件选择器选择文件,拓展1SWING高级组件,表格组件JTable:显示多行/列数据的表格,列名,数据记录,案例JTableDemo.java,拓展1SWING高级组件,用菜单组件显示下拉式菜单项 用表格组件显示数据记录 用树组件显示分级列表 用文件选择器选择文件,拓展1SWING高级组件,JTree组件 树提供了用树型结构分层显示数据的视图。树中有一根结点，所有其它结点为其子结点，每个结点表示一个数据项。,案例JTreeDemo.java,拓展1SWING高级组件,SystemTray意为桌面的系统托盘，在Windows下表现为任务状态栏的一个图标，在很多的应用中都有体现，如及时通讯软件（MSN、），监控类软件（杀毒软件）等。 在Java 6的java.awt包下提供了SystemTray和TrayIcon类，这两个类可以实现系统托盘功能。实现的流程：捕获关闭窗口事件、隐藏窗口、显示托盘图标，鼠标右击托盘图标、显示弹出菜单(自动)、选择菜单的显示窗口项，再显示窗口、隐藏托盘图标。,案例SystemTrayDemo.java?,拓展1SWING高级组件,用菜单组件显示下拉式菜单项 用表格组件显示数据记录 用树组件显示分级列表 用文件选择器选择文件,拓展1SWING高级组件,文件选择组件 JFileChooser ,利用该组件可实现打开/保存指定文件,案例JFileChooserDemo.java?,任务2 合理优化产品信息处理界面,问题分析 知识学习 布局管理器 任务实施,执行效果,问题分析,任务描述： 编写一个程序，能够实现产品信息处理界面优化 步骤分析： 了解Java中布局类型 常用布局管理器的应用方法 按照产品信息处理界面设计,选择合理的布局进行优化 编写代码 编译执行,布局管理是决定容器中组件的大小和位置的过程。 布局管理器（Layout Manager）负责管理容器中组件的布局。它指明了容器中构件的位置和尺寸大小。(由java.awt包提供) FlowLayout: 流布局管理器 BorderLayout：边界布局管理器 GridLayout：格子布局管理器 CardLayout：卡片布局管理器 GridBagLayout：GridBag布局管理器,知识学习布局管理器,知识学习布局管理器,FlowLayout类是流布局管理器类，它是缺省布局管理器。 流布局管理器可以自动依据窗口的大小，将组件由左到右、由上到下的顺序来排列。 FlowLayout构造方法如下所示： FlowLayout（） FlowLayout（int align） FlowLayout(int align, int hgap, int vgap),知识学习布局管理器,例子： import java.awt.*; import javax.swing.*; public class SampleLayout public SampleLayout() frame = new JFrame(“SampleLayout“); /创建流布局管理器 f1 = new FlowLayout(FlowLayout.LEFT); JPanel p1 = new JPanel(); frame.getContentPane().add(p1); /容器p1使用流布局管理器 p1.setLayout(f1); ,BorderLayout：边界布局管理器可以让我们按东、西、南、北、中的方位来布置组件。 BorderLayout类有以下构造函数： BorderLayout（）：创建边界布局管理器。 BorderLayout(int hgap, int vgap)：创建边界布局管理器，并指定控件的垂直与水平间隔。,知识学习布局管理器,例子： import java.awt.*; import javax.swing.*; public class SampleLayout2 public SampleLayout2() JFrame frame = new JFrame(“SampleLayout2“); JPanel panel = new JPanel(); panel.setLayout(new BorderLayout(); panel.add(new JButton(“North“), BorderLayout.NORTH); panel.add(new JButton(“South“), BorderLayout.SOUTH); panel.add(new JButton(“East“), BorderLayout.EAST); panel.add(new JButton(“West“), BorderLayout.WEST); panel.add(new JButton(“Center“), BorderLayout.CENTER); ,BorderLayout管理器布局图,GridLayout:格子布局管理器把显示区域编组为矩形格子组，然后将控件依次放入每个格子中，从左到右，自顶向下地放置。 GridLayout类有以下构造函数： GridLayout（int rows， int cols） GridLayout（int rows， int cols， int hgap， int vgap）,知识学习布局管理器,例子： import java.awt.*; import javax.swing.*; public class SampleLayout3 public SampleLayout3() JFrame frame = new JFrame(“SampleLayout3“); JPanel panel = new JPanel(); panel.setLayout(new GridLayout(3,2); panel.add(new JButton(“1“); panel.add(new JButton(“2“); panel.add(new JButton(“3“); panel.add(new JButton(“4“); panel.add(new JButton(“5“); panel.add(new JButton(“6“); ,GridLayout管理器布局图,CardLayout卡片布局管理器是一个比较复杂的布局管理器。 用这个管理器，可以使得容器象一个卡片盒，而容器中的页面象卡片盒中的卡片一样任意翻动显示。 CardLayout布局管理器有以下构造函数： CardLayout（）：创建一卡片布局管理器 CardLayout（int hgap, int vgap）：创建一卡片布局管理器，并指定左右边距和上下边距。,知识学习布局管理器,为了使得卡片能在容器中一个一个的显示，CardLayout类提供了以下方法 ：,例子： /使用卡片布局管理 cardLayout = new CardLayout(); panel1.setLayout(cardLayout); panel1.add(“card1“,panel3); panel1.add(“card2“,panel4); panel1.add(“card3“,panel5); panel1.add(“card4“,panel6);,例子： /当按下按钮的时候会触发这个方法 public void actionPerformed(ActionEvent evt) Object obj = evt.getSource(); if(obj = button1) cardLayout.first(panel1); if(obj = button2) cardLayout.next(panel1); if(obj = button3) cardLayout.previous(panel1); if(obj = button4) cardLayout.last(panel1); ,cardLayout管理器布局图,案例CardDemo.java,GridBag:布局管理器为AWT提供的最灵活、最复杂的布局管理器。 GridBagConstraints类来保存位置信息。 使用GridBagLayout类提供的setConstraints（）方法将GridBagConstraints类对象绑定到相应组件上。 实现布局的方法 用GridBagConstraints类的属性设置方位信息 利用GridBagLayout类提供的setConstraints（）方法将方位信息绑定到某组件上 将组件加到某容器中,知识学习布局管理器,例子：,案例GradBagDemo.java,fill属性:可以用来确定如何在它的显示区域内显示组件。,知识学习布局管理器,Weightx、weighty属性 weightx属性确定此组件是否要拉长，以水平地填入显示区。缺省值均为0（不拉长），另一效值为1（拉长）。 weighty属性确定此组件是否垂直拉长填入显示区。有效值相同。,知识学习布局管理器,gridwidth、weightx 属性 gridwidth属性指出组件显示区域中列的数目。这些属性的缺省值为1。 设置为GridBagConstraints.REMAINDER，表明该组件后面不能再摆放其他组件，或者说如果要继续摆放组件的话，只能在下一行摆放。 设置为GridBagConstraints.RELATIVE表明可以在后面继续摆放组件。 gridheight属性指出组件显示区域中行的数目。,知识学习布局管理器,anchor 属性 当组件小于其显示区域时使用该属性，为在显示区域内确定放置组件的位置。 其有效值为： GridBagConstraints.CENTER （default） GridBagConstraints.NORTH GridBagConstraints.NORTHEAST GridBagConstraints.EAST GridBagConstraints.SOUTHEAST GridBagConstraints.SOUTH GridBagConstraints.SOUTHWEST GridBagConstraints.WEST GridBagConstraints.NORTHWEST,知识学习布局管理器,gridx,gridy 属性 属性gridx和gridy分别指出放置组件的长方形网格的行与列的数目。长方形网格最左面列为gridx=0，最高顶部为gridy=0。相当于X,Y坐标。,知识学习布局管理器,设计产品信息处理界面布局 要求产品信息的内容靠左对齐 选择GridBag布局管理器 实现步骤 确定图形元素位置 使用GridBag实现界面布局,任务实施,模仿例子,合理优化供应商录入界面,要求靠左对齐,按钮在右下方。,动手练习,40分钟,任务3 美化产品信息处理界面,问题分析 知识学习 Java2D绘图机制 常用类和包 文本处理 图像处理 播放音频 任务实施,执行效果,问题分析,任务描述： 编写一个程序，能够达到产品信息处理界面美化要求 步骤分析： 了解Jav