图形界面设计 福州大学阳光学院 张海歆.

Presentation on theme: "图形界面设计 福州大学阳光学院 张海歆."— Presentation transcript:

1 图形界面设计 福州大学阳光学院 张海歆

2 图形界面设计概述 图形用户界面（Graphical User Interface，简称 GUI，又称图形用户接口）是指采用图形方式显示的计算机操作用户界面。 GUI的优点： 能实现复杂的交互功能； 直观的人机交互； 减少用户的认知负担 ； 满足不同目标用户的创意需求； …..

3 AWT/Swing AWT（Abstract Window Toolkit）：抽象窗口工具集
“抽象窗口”的目标是使得开发人员设计的界面独立于具体的界面实现； AWT是依靠本地方法实现的，是重量级组件。 AWT的功能仍然不是很完善，并未实现真正的平台独立性。 AWT简单高效，适合嵌入式系统或功能相对简单的桌面系统。

4 AWT/Swing Swing是1997年Sun公司和Netscape公司合作创建的图形用户界面库。
Swing是在AWT基础上发展来的，是AWT的改进。 Swing组件完全由Java语言实现，没有采用任何本地代码，因此具有平台独立的API和平台独立的实现。 Swing和AWT相比，一个重要改进在于Swing把一个组件的处理分为图形部分和数据部分（MVC结构）。 Swing组件通常是以“J”开头。如AWT的按钮为Button，Swing按钮为JButton。 Swing虽然比AWT先进，但并不能完全取代AWT。

5 java.awt包 java.awt包提供了基本的java程序的GUI设计工具。主要包括下述三个概念： 组件--Component
容器--Container 布局管理器--LayoutManager

6 Component（组件） Java的图形用户界面的最基本组成部分是组件，组件是一个可以以图形化的方式显示在屏幕上并能与用户进行交互的对象，例如一个按钮，一个标签等。 非容器组件不能独立地显示出来，必须将组件放在一定的容器中才可以显示出来。 组件的一般功能 外形控制 大小和位置控制 组件的状态控制

7 Container（容器） 容器(Container)实际上是Component的子类，因此容器本身也是一个组件，具有组件的所有性质，另外还具有容纳其它组件和容器的功能。 主要功能 组件的管理 布局管理

8 Container（容器） 容器分为顶层容器和非顶层容器。
顶层容器：可以独立的窗口，顶层容器的类是Window，其重要子类是Frame和Dialog。 可以通过JInternalFrame实现内部Frame Dialog分为模式对话框和非模式对话框 可以通过构造方法设置： JDialog(Frame owner, boolean modal) 或者setModal(boolean modal) 方法设置 非顶层容器：不能独立显示，必须位于窗口之内，非顶层容器包括Panl和ScrollPanll等。

9 Componet类体系结构 Component Button Checkbox Container Choice Canvas
TextComponent Label Panel Window Applet Frame Dialog TextArea TextField

10 Swing的几个常用的组件 javax.swing.JComponent javax.swing.JLabel
javax.swing.AbstractButton javax.swing.JButton javax.swing.JToggleButton javax.swing.JCheckBox javax.swing.JRadioButton javax.swing.text.JTextComponent javax.swing.JTextField javax.swing.JTextArea javax.swing.JComboBox javax.swing.JList

11 标签_JLabel 标签是用于显示一行文本、一个图标或者两者皆有。 1 常用的构造方法：
(2) JLabel(Icon image) :创建包含指定图标的标签。 (3) JLabel(String text) :创建包含指定文本的标签。 (4) JLabel(Icon image,int horizontalAlinment) 创建指定图标与水平对齐方式的标签。 (5) JLabel(String text,int horizontalAlinment) 创建指定文本与水平对齐方式的标签。 (6)JLabel(String text,Icon icon,int horizontalAlinment) 创建标签同时指定文本、图标与水平对齐方式。

12 标签_JLabel 2 实例方法： (1) setText(String text) 设置标签的文本字符串。
(2) String getText( ) 返回标签的文本字符串。 (3) setIcon(Icon icon) 设置标签的图标。 (4) setDisabledIcon(Icon disabledIcon) 设置标签不可用时要显示的图标。

13 按钮_JButton 按钮是一种JButton对象，也称为命令按钮，它用于完成某个特定的功能。按钮被单击是将引发ActionEvent事件。程序代码可以为按钮创建一个合适的ActionListener型监听器，用以监听处理这种事件，从而完成按钮特定的功能。

14 按钮_JButton 创建按钮时可以指定一个文本标题或一个图标． 常用方法： (1) JBotton( ):创建按钮不包含文本标题和图标
(2) JBotton(String s):创建按钮包含文本标题 (3) JBotton(Icon icon ):创建按钮包含指定图标 (4) JBotton(String text, Icon icon) 创建按钮包含文本标题 和指定图标 (5) setText(String s):设置按钮文本标题 (6) String getText( ):返回按钮文本标题 (7) setIcon(Icon defaultIcon):设置按钮图标 (8) Icon getIcon( ):返回按钮图标 (9) addActionListener(ActionListener) 注册ActionListener型监听器

15 单选钮__JRadioButton / ButtonGroup
单选钮总是成组出现，且其中只能有一个单选钮选中。 当选中一个新的按钮时，组中原先被选中的单选钮自动变成false状态。 JradioButton组件之间本身并不会排他选择； ButtonGroup组件之间具有排他选择。 单选钮组也会引发ActionEvent事件和ItemEvent 。程序可以为单选钮创建并注册合适的监听器监听处理、处理这类事件。

16 单选钮__JRadioButton / ButtonGroup
(1) JradioButton(String text)：指定文本标题，默认为false. (2) JradioButton(String text,boolean selected) 指定文本标题和默认状态。 (3) JradioButton(Icon icon)：指定图标，默认为false. (4) JradioButton(Icon icon,boolean selected) 指定图标和默认状态。 (5) JradioButton(String text,Icon icon) 同时指定文本标题和图标。 ButtonGroup类方法： (1) void add(AbstractButton b):向组中添加一个按钮。 (2) void remove(AbstractButton b):从组中移去一个按钮。

17 复选框——JCheckBox 复选框是一种JCheckBox对象，用于让用户在两种状态中选择一种。
利用isSelected方法可以测试一个复选框的当前状态（true / false）。 复选框被单击时，其状态将改变，此时将引发ActionEvent事件和ItemEvent事件。

18 复选框——JCheckBox 1 常用的构造方法： (1) JCheckBox(String text):指定文本标题，默认为。
(2) JCheckBox(String text, boolean selected) 指定文本标题和默认状态。 (3) JCheckBox(Icon icon):指定图标，默认状态为。 (4) JCheckBox(Icon icon, boolean selected) 指定图标和默认状态。 (5) JCheckBox(String text, Icon icon) 同时指定文本标题和图标。

19 复选框——JCheckBox 2 实例方法： (1) void setSelected(boolean b):设置复选框的状态。
(2) boolean isSelected( ):返回复选框的状态。 (3) void setText(String text):设置复选框的文本标题。 (4) String getText( ):返回复选框的文本标题。 (5) void setIcon(Icon defaultIcon) 设置复选框未被选中时的图标。 (6) void setSelectedIcon(Icon selectedIcon) 设置复选框被选中时的图标。 (7) void addActionListener(ActionListener l) 注册型ActionListener监听器。 (8) void addItemListener(ItemListener l) 注册型ItemListener监听器。

20 文本域__JTextField 文本域是一种JTextField对象，用于显示和编辑单行文本。 在创建文本域可以指定显示字符数。
文本域聚焦的情况下按Enter键，将引发Actionevent事件。 构造方法： (1) JTextField( ):初始文本为空串、列数为0。 (2) JTextField(String text):初始文本为text 、列数为0。 (3) JTextField(int columns) 初始文本为空串、列数为columns。 (4) JTextField(String text,int columns) 指定初始文本和列数。

21 文本域__JTextField 常用方法： (1) void setHorizontalAlignment(int alignment)
指定文本内容在文本域显示区域内的对齐方式,左,中,右. (2) addActionListener(ActionListener l) 向文本域注册ActionListener型监听器 (3) Document getDocument( ):返回文本组件的模型对象 (4) String getText( ):返回文本组件的当前文本 (5) void setText( ):设置文本组的当前文本 接口Document描述了所有文本组件模型对象的一些共同行为方法: (1) int getLength( ):返回Document对象中文本内容的字符数。 (2) String getText(int offset,int length)throws BadLocationException 返回指定位置上的文本字符串。 (3) void addDocumentListener(DocumentListener listener) 向Document模型对象注册一个DocumentListener监听器。

22 文本区 __JTextArea 文本区是一种JTextArea对象用于显示和编辑多行文本。 创建文本区时可以指定初始文本和行、列数。
构造方法： (1) JTextArea( ): 初始文本为空串，行列数为０。 (2) JTextArea(String text ): 指定初始文本，行列数为0。 (3) JTextArea(int rows,int columns) 初始文本为空串，行列数。 (4) JTextArea(String text,int rows,int columns) 指定初始文本和行、列数。

23 文本区 __JTextArea 文本区可以设置行卷绕特性： (1) void setLineWrap(boolean wrap)
是否行卷绕，默认值为。 (2) void setWrapStyleWord(boolean word) 是否在字符的边界处卷绕，默认值为false。 字符流数据Read/Write (1) void read(Reader in,Object desc)throws IOException 从字符流中读入数据，作为文本区要显示和编辑的内容。 (2) write(Writer out)throws IOException 将文本区的当前内容写出到字符流中。

24 组合框 __JComboBox 组合框是一种对象，允许用户从它提供的下拉列表中选择一个项目。 组合框分不可编辑和可编辑两种：
（1）不可编辑组合框 是由一个按钮和一个下拉列表组成。 （2）可编辑组合框 是由一个文本域和一个下拉列表组成。

25 组合框 __JComboBox 常用方法1： (1) JComboBox( ): 初始状态不包含项目。
(2) JComboBox(Object[] items): 初始时指定一组项目。 (3) void setEditable(boolean aFlag):设置组合框是否可编辑。 (4) addItem(Object anObject): 添加一个项目。 (5) void removeItem(Object anObject): 移去一个项目。 (6) int getSelectedIndex( ): 返回被选项目的索引号。

26 组合框 __JComboBox 常用方法2： (7) void setSelectedIndex(int anIndex)
选择指定位置上的项目。 (8) Object getSelectedItem( ):返回被选项目。 (9) void setSelectedItem(Object anObject) 选择指定项目。 (10) void addActionListener(ActionListener l) 注册ActionListener监听器。 (11) void addItemListener(ItemListener aListener) 注册ItemListener监听器。

27 列表框 __JList 列表框是一种JList对象，用于提供显示一组项目供用户选择。 通常，用户可以从列表框中选择一个或多个项目。

28 列表框 __JList 构造方法： (1) JList(Object[] listData) 根据指定项目数组创建列表。(项目不可增减)
(2) JList(ListModel dataModel) 根据指定的模型对象创建列表。 *可以利用在DefaultListModel类中定义的方法修改 列表框中的项目。 * 创建列表框后，可以调用列表框的 setSelectionMode(int selectionMode)方法设置选择模式。

29 列表框 __JList 常用实例方法： (1) Object getSelectedValue( ) 返回被选项目中索引值最小的项目。
返回所有被选中的项目。 (3) void setSelectedIndex(int index) 将指定位置上的项目设置为选中状态。 (4) void setSelectedIndices(int[] indices) 将多个项目设置为选中状态。

30 LayoutManager（布局管理器）
为了使我们生成的图形用户界面具有良好的平台无关性，Java语言中，提供了布局管理器这个工具来管理组件在容器中的布局，而不使用直接设置组件位置和大小的方式。 每个容器都有一个布局管理器，当容器需要对某个组件进行定位或判断其大小尺寸时，就会调用其对应的布局管理器。

31 FlowLayout FlowLayout 是一种最基本的布局管理器。
是 java.awt.Applet、java.awt.Panel 和 javax.swing.JPanel的默认布局方式。 在容器中，从左到右依次放置GUI组件。 当组件排到容器一行的末尾时，则从下一行开始接着排列组件。 每行组件的对齐方式可以是: 左对齐、中间(默认对齐方式)和右对齐。

32 程序原始界面及拖拽后的效果： getContentPane().setLayout(new java.awt.FlowLayout());
getContentPane().add(jButton1); getContentPane().add(jButton2); getContentPane().add(jButton3); getContentPane().add(jButton4); getContentPane().add(jButton5); 程序原始界面及拖拽后的效果：

33 BorderLayout BorderLayout 是容器Frame\JFrame和JApplet的默认布局方式 将容器分成五个区域，
NORTH (顶部) SOUTH (底部) WEST (左侧) EAST (右侧) CENTER (中间) 每个区域最多只能1个组件

34 添加组件：myContainer. add( component, position ) component – 需要加入到容器中的组件
positions – (BorderLayout.NORTH) NORTH, SOUTH, EAST, WEST, CENTER 如： jButton1.setText("北"); getContentPane().add(jButton1, java.awt.BorderLayout.NORTH); jButton2.setText("西"); getContentPane().add(jButton2, java.awt.BorderLayout.WEST); jButton3.setText("中"); getContentPane().add(jButton3, java.awt.BorderLayout.CENTER); jButton4.setText("东"); getContentPane().add(jButton4, java.awt.BorderLayout.EAST); jButton5.setText("南"); getContentPane().add(jButton5, java.awt.BorderLayout.SOUTH);

35 原始对话框与拖拽后的对话框

36 GridLayout GridLayout 布局管理器GridLayout按行与列将容器等分成网格 每个组件占用具有相同宽度和高度的网格
添加组件占用网格的顺序: 从上到下，从左到右 当一行满了，则继续到下一行，仍然是从左到右

37 CardLayout CardLayout布局管理器把“窗口容器”中的所有组件如同堆叠起来的一付“扑克牌”，每次只能显示最上面的一张。

38 设置CardLayout CardLayout card = new CardLayout(); jPanel1.setLayout(card ); 添加卡片 jPanel1.add(jPanel2, “card2”);//添加卡片 jPanel1.add(jPanel3, “card3”);//添加卡片 jPanel1.add(jPanel4, “card4”);//添加卡片 一些关于卡片的使用 card.show(“card2”); //显示卡片名为“card2”的卡片 card.first(jPanel1);//显示第一张卡片 card.previous(jPanel1); card.next(jPanel1); card.last(jPanel1);

39

40 GridLayout GridLayout的构造函数：
2) GridLayout(int rows, int cols)，创建一个带指定行数和列数的网格布局管理器，布局中所有组件大小相同。 3) GridLayout( int rows, int cols,int hgap, int vgap )，创建一个带指定行数、列数、水平与垂直间距的网格布局管理器，布局中所有组件大小相同。

41 getContentPane().setLayout(new java.awt.GridLayout());
jButton3.setText("1"); getContentPane().add(jButton3); jButton6.setText("2"); getContentPane().add(jButton6); jButton5.setText("3"); getContentPane().add(jButton5); jButton7.setText("4"); getContentPane().add(jButton7); jButton1.setText("5"); getContentPane().add(jButton1); jButton2.setText("6"); getContentPane().add(jButton2); jButton4.setText("7"); getContentPane().add(jButton4); jButton9.setText("8"); getContentPane().add(jButton9);

42 使用不同构造函数时的效果图： getContentPane().setLayout(new java.awt.GridLayout()); getContentPane().setLayout(new java.awt.GridLayout(2，0)); getContentPane().setLayout(new java.awt.GridLayout(3，0));

43 GridBagLayout(*) GridBagLayout布局管理器是java.awt包中最灵活、同时又是最复杂的一种布局管理器，它类似于网格布局。 GridBagLayout布局管理器把组件组织成长方形的网格，使用这种布局，可灵活地把组件放在长方形网格的任何行和列中，它也允许特定的组件跨多行和多列。 GridBagLayout类只有一个不带任何参数的构造函数，仅仅创建一个布局。为了指出组件的位置和尺寸的约束，必须使用GridBagContraints类对象，通过调用GridBagContraints类对象的属性变量限制组件的位置和尺寸。 创建GridBagConstraints: GridBagContraints gbcObj=new GridBagConstraints();//创建

44 GridBagLayout GridBagContraints类的属性如下
1) gridx、gridy，指出组件所在的列数和行数；两者组成长方形网格(单元)，从左到右，gridx的值由小到大，从上到下gridy的值由小至大。 2) gridwidth、gridheight，指出组件跨的行数和列数；默认方式，组件的大小等于它显示区域的大小(显示网格的区域)，但是可以使用属性gridwidth、gridheight来扩大显示区域的大小。缺省值为1。如果指定了gridx和gridy，则组件不能实现跨行或跨列；如果不指定gridx和gridy属性，则类似于网格布局，组件按加入到容器的布局组件。

45 GridBagLayout 3) anchor，指出组件在网格上的方位。其默认值是CENTER，居中放置。anchor的有效值为：
GridBagConstraints.NORTH(北) GridBagConstraints.SOUTH(南) GridBagConstraints.WEST(西) GridBagConstraints.EAST(东) GridBagConstraints.NORTHWEST(西北) GridBagConstraints.NORTHEAST(东北) GridBagConstraints.SOUTHWEST(西南) GridBagConstraints.SOUTHEAST(东南) GridBagConstraints.CENTER(中，默认)

46 GridBagLayout 4) fill，是否充满网格，其有效值为： GridBagConstraints.BOTH(填满整个区域)；
GridBagConstraints.HORIZONTAL(填满水平方向的显示区域，不改变高度) GridBagConstraints.VERTICAL(填满垂直方向的显示区域，不改变高度) GridBagConstraints.NONE(默认，不改变尺寸) 5) weightx,weighty，是否拉长组件。用于指明当容器时，如何 行、列间分配额外的空间。它取值0.0或1.0。默认为0.0，表明每个网格的显示区域不变。

47 NetBeans中的GridBagLayout定制器

48 事件处理 事件的基本概念： Event（事件）：发生在用户界面上的用户交互行为所产生的一种效果。
Event Source（事件源）：产生事件的对象。 Event handler/Listener（事件处理器）：接收事件对象并对其进行处理的方法。 委托处理模型：组件（事件源）不处理自己的事件，而是将事件委托给外部的实体（监听者）处理。

49 授权处理模型进行事件处理的一般方法： 对于某种类型的事件XXXEvent, 必须定义相应的事件监听器类，该类需要实现针对特定事件的特定接口XXXListener；例如： ActionEvent、ActionListener 事件源必须注册相应于该类事件的监听器，使用addXXXListener(XXXListener )来注册监听器。 事件发生后，产生表示特定事件的事件对象，事件对象被传递给已经注册的事件监听器，调用监听器中的特定方法处理事件。

50 class ButtonHandler implements ActionListener {
//定义监听者 class ButtonHandler implements ActionListener { public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog(null, "Action occurred!"); } public static void main(String[] args) { Frame f = new Frame("Test"); Button b = new Button("Press Me!"); //为按钮添加监听者 b.addActionListener(new ButtonHandler()); f.setLayout(new FlowLayout()); f.add(b); f.setSize(300, 200); f.setVisible(true); }

51 程序运行结果 单击“Press Me！”按钮，弹出一个提示框。

52 图示说明 先向按钮对象添加监听者。 单击按钮时，产生一个事件对象。 按钮（事件源）将事件对象传递给事件监听者。
事件监听者依据事件类型进行处理。

53 使用匿名类实现监听者 class MyPanel extends Panel { public MyPanel() { Button bButton = new Button("蓝色"); add(bButton); bButton.addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent mevent){ setBackground(Color.blue); repaint(); } });

54 事件的体系结构 EventObject AWTEvent FocusEvent ActionEvent AdjustmentEvent
ComponentEvent TextEvent ItemEvent ContainerEvent InputEvent WindowEvent PaintEvent KeyEvent MouseEvent EventObject

55 事件对象 java.util.EventObject类 EventObject类是所有事件对象的基础类，所有的事件类都是由它派生出来的。
public class EventObject implements java.io.Serializable { protected transient Object source; public EventObject(Object source)； public Object getSource()； public String toString()； }

56 AWTEvent 和AWT有关的所有事件类都由java.awt.AWTEvent类派生 ,它也是EventObject类的子类。AWT事件共有10类，可以归为两大类： 低级事件 高级事件。

57 AWTEvent 低级事件 ComponentEvent（组件事件：组件尺寸的变化，移动）
ContainerEvent（容器事件：组件增加，移动） WindowEvent（窗口事件：关闭窗口，窗口闭合，图标化） FocusEvent（焦点事件：焦点的获得和丢失） KeyEvent（键盘事件：键按下、释放） MouseEvent（鼠标事件：鼠标单击，移动）

58 AWTEvent 高级事件（语义事件） ActionEvent（动作事件：按钮按下，TextField中按Enter键）
AdjustmentEvent（调节事件：在滚动条上移动滑块以调节数值） ItemEvent（项目事件：选择项目，不选择“项目改变”） TextEvent（文本事件，文本对象改变）

59 事件监听接口 每类事件都有对应的事件监听器接口。 监听器是实现接口的类，根据动作来定义方法。
interface KeyListener extends java.util.EventListener { public void keyPressed(KeyEvent ev); public void keyTeleased(KeyEvent ev); public void keyTyped(KeyEvent ev); }

60 注册和注销监听器 注册监听器： public void add<ListenerType>
(<ListenerType>listener); 注销监听器： public void remove<ListenerType> 每个组件都有注册和注销监听器的方法。

61 事件适配器(Event Adapters)
事件适配器是类，而非接口。因此处理事件的类只能继承一个适配器。

62 public void windowClosed(java.awt.event.WindowEvent evt) {
addWindowListener(new java.awt.event.WindowAdapter() { public void windowClosed(java.awt.event.WindowEvent evt) { formWindowClosed(evt); } }); private void formWindowClosed(java.awt.event.WindowEvent evt) { // TODO add your handling code here:

63 public abstract class WindowAdapter
implements WindowListener, WindowStateListener, WindowFocusListener { public void windowOpened(WindowEvent e) {} public void windowClosing(WindowEvent e) {} public void windowClosed(WindowEvent e) {} public void windowIconified(WindowEvent e) {} public void windowDeiconified(WindowEvent e) {} public void windowActivated(WindowEvent e) {} public void windowDeactivated(WindowEvent e) {} public void windowStateChanged(WindowEvent e) {} public void windowGainedFocus(WindowEvent e) {} public void windowLostFocus(WindowEvent e) {} }

64 事件适配器(Event Adapters)
Java.awt.event包中定义的适配器类有: ComponentAdapter(组件适配器) ContainerAdapter(容器适配器) FocusAdapter(焦点适配器) KeyAdapter(键盘适配器) MouseAdapter(鼠标适配器) MouseMotionAdapter(鼠标运动适配器) WindowAdapter(窗口适配器)

65 小结 了解AWT和Swing的特点 掌握基本组件和容器的使用 掌握布局管理器的使用 掌握事件处理机制