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,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,例子：/创建窗体对象frameframe=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，加载panel2frame.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.javaJPopupMenu.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(intalign,inthgap,intvgap),知识学习布局管理器,例子：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(inthgap,intvgap)：创建边界布局管理器，并指定控件的垂直与水平间隔。,知识学习布局管理器,例子：import java.awt.*;import javax.swing.*;public class SampleLayout2public 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 SampleLayout3public 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（inthgap,intvgap）：创建一卡片布局管理器，并指定左右边距和上下边距。,知识学习布局管理器,为了使得卡片能在容器中一个一个的显示，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.NORTHGridBagConstraints.NORTHEASTGridBagConstraints.EASTGridBagConstraints.SOUTHEASTGridBagConstraints.SOUTHGridBagConstraints.SOUTHWESTGridBagConstraints.WESTGridBagConstraints.NORTHWEST,知识学习布局管理器,gridx,gridy 属性属性gridx和gridy分别指出放置组件的长方形网格的行与列的数目。长方形网格最左面列为gridx=0，最高顶部为gridy=0。相当于X,Y坐标。,知识学习布局管理器,设计产品信息处理界面布局要求产品信息的内容靠左对齐选择GridBag布局管理器实现步骤确定图形元素位置使用GridBag实现界面布局,任务实施,模仿例子,合理优化供应商录入界面,要求靠左对齐,按钮在右下方。,动手练习,40分钟,任务3 美化产品信息处理界面,问题分析 知识学习Java2D绘图机制常用类和包文本处理图像处理播放音频任务实施,执行效果,问题分析,任务描述：编写一个程序，能够达到产品信息处理界面美化要求步骤分析：了解Java2D绘图机制设置字体，加载图片的方法按照产品信息处理界面设计,选择图片，字体进行界面美化编写代码编译执行,绘图界面AWT中的Canvas组件，用于创建画布SWING中则可直接在顶层窗体，如JFrame,JApplet，或者JPanel进行绘制绘图坐标,知识学习Java2D绘图机制,（0，0）,X轴,Y轴,+x,+y,（x，y）,屏幕左上角,单位：像素pix,绘图机制每个Java组件都有一个与之相关的图形环境，即图形上下文，类是图形上下文的抽象基类，用于管理图形上下文，绘制图形（如线条、矩形等）的像素；允许应用程序将图形绘制到组件上或空闲屏幕的映像中类是抽象类，应用时需要创建其子类，以实现绘图功能,知识学习Java2D绘图机制,知识学习Java2D绘图机制,类中的方法,绘图相关类(颜色类Color):Java 中的颜色是RGB值来设定，R、G、B分别是红、绿、蓝三种颜色的色量，三种色量组合构建多种颜色，定义了一些标准颜色，以及操作颜色的方法,知识学习Java2D绘图机制,绘图相关类(字体类Font):Java 中的字体控制类为,定义字体名、字号、风格，字体度量类,封装了字高、宽等数据，每个图形上下文中都包含一个Font和FontMetrics对象字体类构造函数：Font(String name,int style,int size)字体名：Monospaced,SansSerif,Serif,Dialog,DialogInput字体风格：PLAIN（普通）,BOLD（粗体）,ITALIC（斜体）,知识学习Java2D绘图机制,小 结,GUI元素大致分为两类：容器类和非容器类。Java1.0版本中，用户界面用AWT（抽象窗口工具箱）创建。用AWT创建的用户界面在不同的操作平台上有不同的表现。Java基础类是原先AWT的扩充。它加入了广泛的、可完全移植的、类和库的集合。它所包含的主要包之一是javax.swing包。javax.swing包提供了用户接口组件（如：窗口、对话框、按钮、复选框、列表框、菜单、滚动条、文本输入框）类的集合。,