[计算机软件及应用]第5章图形用户界面设计.ppt

1、,图形用户界面设计,概述 事件处理 基本控制组件 布局设计 常用容器组件,图形用户界面（Graphics User Interface）：是指用图形化的方式实现用户与计算机之间的交互。通过图形的方式，借助于菜单、按钮等标准界面元素和鼠标操作，方便用户向计算机发出命令，启动程序，并将程序运行的结果以图形化的方式显示给用户。,概念,Digital Decade XML Web Services Smart devices,User Interface Evolution,- Kai Fu Lee in 2003,Java GUI三剑客,awt: 抽象窗口工具包，是Java提供的用来建立和设置图形用

2、户界面的基本工具，可用于applet和applications中。它支持图形用户界面编程的功能包括： 用户界面组件；事件处理模型；图形和图像工具，包括形状、颜色和字体类；布局管理器等，但GUI往往依赖于特定平台。 swing： swing是JFC的一部分，相对于AWT, Swing是轻量级元件。它提供许多比AWT更好的屏幕显示元素，几乎可以实现所有的你能够想到效果，但开发复杂，执行效率较低。 swt/Jface: SWT/JFace直接调用了操作系统的图形库，从而使得Java应用程序的Look import java.awt.event.*; public class HelloWorldAw

3、t public static void main(String args) Frame f = new Frame(AWT); Label label = new Label(Hello!); f.add(label); f.addWindowListener(new WindowAdapter() public void windowClosing(WindowEvent e) System.exit(0); ); f.setSize(200, 200); f.setVisible(true); ,import javax.swing.*; import java.awt.event.*;

4、 public class HelloWorldSwing public static void main(String args) JFrame f = new JFrame(“Swing); JLabel label = new JLabel(Hello!); f.getContentPane().add(label); f.addWindowListener(new WindowAdapter() public void windowClosing(WindowEvent e) System.exit(0); ); f.setSize(200, 200); f.setVisible(tr

5、ue); ,事件处理,界面设计 (静态) 界面动起来(交互) ! 通过事件触发对象的响应机制 事件：鼠标移动、鼠标点击、键盘键入等 事件处理机制 事件源：与用户进行交互的特定组件，如按钮、鼠标 事件对象：封装了事件的若干信息的事件类对象，例如点 击按钮对应的事件类是ActionEvent。 事件监听者：接收事件对象并对其进行处理的对象 如何实现 容器实现事件监听接口产生一个监听器对象(Listener) 监听谁? 将该监听器对象(容器)注册到组件对象中 M.add*Listener(N); /将N注册为M的监听者 实现对应事件接口中的全部方法,事件处理,事 件 处 理 机 制,事件处理,imp

6、ort java.applet.Applet; import java.awt.*; import java.awt.event.*; /实现事件处理必须引入包 public class Beeper extends Applet implements ActionListener Button button; public void init() button = new Button(Click Me); button.addActionListener(this); add(button); public void actionPerformed(ActionEvent e) Syste

7、m.out.println(“Click me once”); ,容器实现监听接口,注册监听（当前操 作类作为监听器）,注册为监听者的容器重写 接口中的方法进行事件的 处理,事件类,事件分类,事件分类,事件分类,事件分类,事件类方法,getActionCommand() /返回引发事件的动作命令名 setActionCommand() getModifiers() /按不同的辅助键将事件再细分,getAdjustable() /返回引发变化事件的事件源 getAdjustmentType() /返回状态变化事件的变化类型 getValue() /返回状态变化的数量,getID() /返回事件的

8、类型ID,getSource() /返回产生事件的事件源,EventObject,AWTEvent,ActionEvent,AdjustmentEvent,if(e.getSource()=red) col=Color.red; if(e.getSource()=green) col=Color.green;,默认命令名： 按钮标签名 菜单项的标签名 列表选项的标签 if(e.getActionCommand()=红) col=Color.red;,事件类方法,getItemSelectable() /返回引发选中状态变化事件的事件源 getItem() /返回引发选中状态变化事件的选项 ge

9、tStateChange() /返回选中状态变化的类型,getX()、getY()、getPoint() getClickCount() /返回鼠标单击次数,getKeyChar()、getKeyText(),getWindow() /返回引发窗口事件的窗口,getContainer() getChild() /返回引发窗口事件时增减的组件,ItemEvent,MouseEvent,KeyEvent,WindowEvent,ContainerEvent,if(e.getStateChange()=ItemEvent.SELECTED) ,基本控制组件,Component,Button,Canv

10、as,Choice,CheckBox,Label,List,TextComponent,Scrollbar,TextField,TextArea,Container,ScrollPane,Frame,FileDialog,Panel,Window,Dialog,Applet,使用步骤: 创建基本控制组件类的对象， 指定对象属性； 将组件对象加入到指定容器的 适当位置(布局设计)； 创建事件对象的监听者。,基本控制组件,按钮(Button),创建按钮 public Button() public Button(String label) 常用方法 public String getLabel()

11、 public void setLabel(String label) public void setActionCommand(String s) public String getActionCommand(String s) 事件响应 java.awt.event.ActionListener(接口) void actionPerformed(ActionEvent e),组件_按钮,其它常用方法,组件_按钮,【例】创建了三个按钮，其标签分别为“隐藏/显示”、“变色”和“变大/变小”，程序运行时出现这三个按钮，其中“隐藏/显示”按钮的背景色为红色，前景色为蓝色。每次单击“变色”按钮时“隐

12、藏/显示”按钮的前景色和背景色互换，每次单击“隐藏/显示”按钮时“变色”按钮隐藏或显示状态切换，而单击“变大/变小”按钮时“隐藏/显示”按钮交替变大或变小。 见代码ThreeButtonDemo.java,基本控制组件,标签(Label),创建标签 public Label() public Label(String s) public Label(String s, int alignment) 常用方法 public String getText() public void setText(String s) public void setAlignment(int alignment)

13、事件响应 不引发事件,组件_标签,import java.applet.Applet; import java.awt.*; public class ShowLabel extends Applet Label lab1=new Label(); /生成标签对象 public void init() this.setLayout(new FlowLayout(); /设置布局 lab1.setText(“hi,I am a Label”); /设置标签内容 this.add(lab1); /小程序中添加组件 ,组件_文本框,文本框(TextField) TextComponent类的子类，单

14、行的文本区域 创建文本框 public TextField() public TextField(int size) public TextField(String s) public TextField(String s, int size) 常用方法 public void setText(String s) public String getText() public void setEchochar(char c) public void setEditable(boolean b) 事件响应 java.awt.event.TextListener(接口) java.awt.event

15、.ActionListener(接口),组件_文本区,文本区(TextArea) TextComponent类的子类，是多行多列文本框 创建文本区 public TextArea() public TextArea(String s) public TextArea(int rows, int columns) public TextArea(String s, int rows, int columns) public TextArea(String s, int rows, int columns, int scrollbars) SCROLLBARS_BOTH, SCROLLBARS_N

16、ONE SCROLLBARS_VERTICAL_ONLY SCROLLBARS_HORIZONTAL_ONLY 常用方法 public void append(String s) public void insert(String s, int pos) pubilc void replaceRange(String s, int start, int end) 事件响应 java.awt.event.TextListener(接口) 重写方法：void textValueChanged(TextEvent e),文本框,import java.awt.*; import java.awt.e

17、vent.*; import java.applet.*; public class Exam5_4 extends Applet implements ActionListener Label lab1, lab2, lab3; TextField text1, text2, text3; String str; int i; float f; public void init() lab1 = new Label(“输入整形数: ”); add(lab1); text1 = new TextField(“0”, 30); text1.addActionListener(this); add

18、(text1); lab2 = new Label(“输入浮点数: ”); add(lab2); text2 = new TextField(“0.0”, 30); text2.addActionListener(this); add(text2); lab3 = new Label(“输入字符串: ”); add(lab3); text3 = new TextField(“0.0”, 30); text3.addActionListener(this); add(text3); ,文本框,public void actionPerformed(ActionEvent e) i = Integ

19、er.parseInt(text1.getText(); f = Float.parseFloat(text2.getText(); str = text3.getText(); repaint(); public void paint(Graphics g) g.drawString(“整形数=” + i, 20, 120); g.drawString(“浮点数=” + f, 20, 150); g.drawString(“字符串=” + str, 20, 180); ,组件_复选框,复选框(Checkbox) 创建复选框 public Checkbox() public Checkbox(

20、String s) public Checkbox (String s, boolean state) 常用方法 public boolean getState() public void setState(boolean b) public void setLabel(String s) public String getLabel() 事件响应 java.awt.event.ItemListener(接口) 重写方法：void itemStateChanged(ItemEvent e),public class Exam5_6 extends Applet implements ItemL

21、istener Checkbox cb1,cb2,cb3; int i,j,k; public void init() cb1=new Checkbox(“复选框A”); cb1.addItemListener(this); add(cb1); cb2=new Checkbox(“复选框B”); cb2.addItemListener(this); add(cb2); cb3=new Checkbox(“复选框C”); cb3.addItemListener(this); add(cb3); public void itemStateChanged(ItemEvent e) i=j=k=0;

22、if(cb1.getState() i=1; if(cb2.getState() j=1; if(cb3.getState() k=1; repaint(); /主动调用paint() ,组件_复选框,组件_复选框,public void paint(Graphics g) int m=k+2*j+4*i; int n=40*m+20; g.setColor(Color.blue); g.fillOval(n,50,50,50); g.drawString(“ “+m,n+15,120); ,组件_单选按钮,单选按钮组(CheckboxGroup) 创建单选按钮组 public Checkbo

23、xGroup() /创建空按钮组 public Checkbox(String label, boolean state, CheckboxGroup group) public Checkbox(String label, CheckboxGroup group, boolean state) 常用方法 与复选框相同 事件响应 与复选框相同,CheckboxGroup cbg = new CheckboxGroup(); Checkbox one = new Checkbox(“one”, false, cbg) ; Checkbox two = new Checkbox(“two”, fa

24、lse, cbg) ; Checkbox three = new Checkbox(“three”, true, cbg) ;,组件_列表,滚动列表(List) 创建列表 public List() public List(int rows) public List(int rows, boolean multipleMode) 常用方法 public void add(String s) public void add(String s, int n) public void remove(int n) public void removeAll() public int getSelect

25、edIndex() public String getSelectedItem() 事件响应 java.awt.event.ItemListener(接口) java.awt.event.ActionListener(接口),基本控制组件,下拉列表(Choice) 创建无选项下拉列表 public Choice() 常用方法 public int getSelectedIndex() public String getSelectedItem() public void select(int index) public void select(String item) public void

26、add(String s) public void add(String s, int index) public void remove(int index) public void remove(String item) public void removeAll() 事件响应 java.awt.event.ItemListener(接口),基本控制组件,import java.awt.*; import java.awt.event.*; import java.applet.*; public class Exam5_8 extends Applet implements ItemLi

27、stener Choice cho; TextField text; public void init() text = new TextField(10); cho = new Choice(); cho.add(“red”); cho.add(“yellow”); cho.add(“green”); cho.add(“blue”); add(text); cho.addItemListener(this); add(cho); public void itemStateChanged(ItemEvent e) if(e.getItemSelectable() = cho) String s

28、 = cho.getSelectedItem(); text.setText(s); ,返回引发选中状态变化事件的事件源,基本控制组件,滚动条(Scrollbar) 创建滚动条 public Scrollbar() public Scrollbar(int orientation) public Scrollbar(int orientation, int initSal, int size, int minsal, int maxSal) 常用方法 public void setUnitIncrement(int n) public void setBlockIncrement(int n)

29、 public int getUnitIncrement() public int getBlockIncrement() public int getValue() /返回当前滑块所在位置 事件响应 java.awt.event.AdjustmentListener(接口) 重写：void adjustmentValueChanged(AdjustmentEvent e),基本控制组件,public class Exam5_9 extends Applet implements AdjustmentListener Scrollbar sb; TextField text; public v

30、oid init() setLayout(new BorderLayout(); sb=new Scrollbar(scrollbar.HORIZONTAL,20,10,10,150); sb.setUnitIncrement(1); sb.setBlockIncrement(20); add(“South”,sb); sb.addAdjustmentListener(this); text=new TextField(20); add(“Center”,text); public void adjustmentValueChanged(AdjustmentEvent e) int value

31、; if(e.getAdjustable()=sb) value=getValue(); text.setText(new Integer(int)value).toString(); text.setBackground(new Color(value,200,100); ,基本控制组件,画布(Canvas) 提供一个空白空间，可以用来绘图、显示文本、接收键盘或鼠标输入。 创建画布 public Canvas() 常用方法 public void setSize() public void paint(Graphics g) 事件响应 java.awt.event.MouseMotionLi

32、stener(接口) java.awt.event.MouseListener(接口) java.awt.event.KeyListener(接口) 示例Exam5_10.java,布局设计,布局管理：决定组件在界面中所处的位置和大小 六种布局管理器 两种简单布局 java.awt.FlowLayout java.awt.GridLayout 两种特定用途布局 java.awt.BorderLayout java.awt.CardLayout 两种灵活布局 java.awt.GridBagLayout javax.swing.BoxLayout,顺序布局,FlowLayout (Applet和

33、Panel的默认布局) 所有组件从左往右排成一行 一行排满后转到下一行从左往右排 对齐方式：居中(默认)、左对齐、右对齐 构造方法 public FlowLayout(); public FlowLayout(int align); public FlowLayout(int align,int hgap,int vgap); 说明align: FlowLayout.LEFT FlowLayout.RIGHT FlowLayout.CENTER hgap:组件间的水平间距 vgap:组件间的垂直间距,顺序布局, public class Exam5_11 extends Applet impl

34、ements ActionListener Button left,center,right; public void init() left=new Button(“左对齐”); left.addActionListener(this); add(left); center=new Button(“中间对齐”); center.addActionListener(this); add(center); public void actionPerformed(ActionEvent e) int align=FlowLayout.LEFT; if(e.getSource()=left) ali

35、gn=FlowLayout.LEFT; setLayout(new FlowLayout(align); validate(); /更新容器布局 ,BorderLayout Window、Dialog和Frame的默认布局 布局方式： 说明：若任一区没有分配组件，则被其他区占用 最多只能安排五个组件 构造方法： public BorderLayout(); public BorderLayout(int hgap,int vgap);,边界布局,中,BorderLayout类的常用方法及常量,边界布局,边界布局, public class Exam5_12 extends Applet imp

36、lements ActionListener String names=“北区”,”南区”,”东区”,”西区”,”中区”; Button but=new Buttonnames.length; /声明对象数组 public void init() setLayout(new BorderLayout(10,10); for(int i=0;inames.length;i+) buti=new Button(namesi); buti.addActionListener(this); add(but0,BorderLayout.NORTH); add(but1,BorderLayout.SOUT

37、H); public void actionPerformed(ActionEvent e) for(int i=0;ibut.length;i+) if(e.getSource()=buti) buti.setVisible(false); else buti.setVisible(true); validate(); ,或add(but0,”North); 或add(“North”,but0);,mycd.first(pa1);,mycd.show(pa1,A);,pa1.add(A,new Label(这是我的第一页);,卡片布局,CardLayout 两个或多个组件共享相同的显示空间，

38、在同一时刻只显示若干组件中的一个 创建布局 创建布局对象 public CardLayout(); 将组件加入容器 add(“”,) 组件显示 show(,) 或 first() last() next(),卡片布局,见代码,BorderLayout,CardLayout,网格布局,GridLayout 将空间划分为由行和列组成的网格单元，每个单元放一个 组件，网格单元大小相同(宽度和高度) 指定行数和列数 创建布局 public GridLayout(int rows,int cols,int hgap,int vgap);,三行二列的网格布局,网格布局, public class Exam

39、5_14 extends Applet implements ActionListener Button buts; String names=“A”,”B”,”C”,”D”,”E”,”F”,”G”,”H”,”I”,”J”,”K”; boolean toggle=true; public void init() setLayout(new GridLayout(3,4,5,5); buts=new Buttonnames.length; for(int i=0;inames.length;i+) butsi=new Button(“按钮”+namesi); butsi.addActionLis

40、tener(this); add(butsi); public void actionPerformed(ActionEvent e) if(toggle) setLayout(new GridLayout(4,3,5,8); else setLayout(new GridLayout(3,4,8,5); toggle=!toggle; validate(); ,复杂网格布局,GridBagLayout 为每个组件指定其包含的网格个数 组件可以保留原来的大小 可以以任意顺序加入到容器的任意位置 创建布局 public GridBagLayout(); public GridBagConstra

41、ints(); 说明： GridBagConstraints对象，用于确定组件的大小和位置，通过设置该类的属性实现,gridx，gridy：指定组件左上角在网格中的行与列。 容器中最左边列的gridx=0，最上边行的gridy=0。这两个变量的默认值为GridBagConstraints.RELATIVE，表示对应的组件将放在前面放置组件的右边或下边。,gridwidth，gridheight：指定组件显示区域所占的列数与行数，以网格单元为单位，默认值为1。 GridBagConstraints.REMAINDER指定组件是所在行或列的最后一个组件， GridBagConstraints.RE

42、LATIVE指定组件是所在行或列的倒数第二个组件。,fill：指定组件填充网格的方式。它可以是如下的值： GridBagConstraints.NONE(默认值，组件的大小不改变)； GridBagConstraints.HORIZONTAL(横向充满显示区域，高度不变)； GridBagConstraints.VERTICAL(纵向充满显示区域，但宽度不变)； GridBagConstraints.BOTH(组件横向、纵向充满其显示区域)。,GridBagConstraints类属性,ipadx，ipady：指定组件显示区域的内部填充，即在组件最小尺寸之外需要附加的像素数，默认值为0。 因此

43、，组件的宽度最少是它的最小宽度加上ipadx2，组件的高度最少是它的最小高度加上ipady2。,GridBagConstraints类属性,insets：指定组件的上、左、下、右间距。默认时，组件没有外部填充。,anchor：指定组件在显示区域中的摆放位置.其值可为： GridBagConstraints.(CENTER默认值 、NORTH、NORTHEAST、EAST、SOUTHEAST、SOUTH、SOUTHWEST、WEST、NORTHWEST),weightx，weighty：用来指定在容器大小改变时，增加或减少的空间如何在组件间分配。 默认值是0，即所有的组件将聚拢在容器的中心，多余

44、的空间将放在容器边缘与网格单元之间。 每一列组件的weightx值指定为该列组件的weightx的最大值；每一行组件的weighty值指定为该行组件的weighty的最大值。 weightx和weighty的取值一般在0.01.0之间，数值大表明组件所在的行或列将获得更多的空间。,复杂网格布局,见示例代码,复杂网格布局,见代码,常用容器组件-概述,容器 可包含其他组件和容器 Container类的子类 无边框容器: Panel, Applet 有边框容器: Window, Frame, Dialog, FileDialog 可自动处理滚动操作的容器: Scrollpane,容器,Contain

45、er类常用方法 添加组件: add() 获取制定的组件 getComponent(int x, int y) getComponent(int index) 从容器中移出组件 remove(Component c) remove(int index) removeAll() 设置容器布局: setLayout() 事件响应 java.awt.event.ContainerListener,容器,面板(Panel) 无边框容器 不是顶层容器，必须位于窗口或其他容器之内 默认布局管理器是FlowLayout 可以采用和所在容器不同的布局 用于布局，层次化管理图形用户界面中各个组件,容器,impor

46、t java.awt.*; public class TestPanel public static void main(String args) Frame fm1=new Frame(“Hello”); Panel pn1=new Panel(); Panel pn2=new Panel(); fm1.setSize(400,350); fm1.setBackground(Color.yellow); fm1.setLayout(null); /取消默认布局管理器 pn1.setSize(100,100); pn1.setBackground(Color.red); pn1.setLoca

47、tion(0,50); pn2.setSize(100,200); pn2.setBackground(Color.blue); pn2.setLocation(200,100); fm1.add(pn1); fm1.add(pn2); fm1.setVisible(true); /必须 ,Frame作为最外层容器,容器,java.awt.Window: 最顶层容器，但不能作为程序的最外层容器 依附于Frame而存在 默认布局：BorderLayout 构造函数 Window(Frame f) 常用方法 show() /显示窗口 引发事件 java.awt.event.WindowListen

48、er,容器,java.awt.Frame: 有边框容器(默认不可见)，只能作为最外层容器 默认布局：BorderLayout 构造方法 Frame() Frame(String title) 常用方法 getTitle() setTitle(String s) setVisible(boolean b) setBounds(int a, int b, int width, int height) setBackground(Color c) pack() setSize(int width, int height) dispose() add() remove(),容器,import java

49、.awt.*; import java.awt.event.*; public class CanvasTest extends Canvas implements KeyListener int index; Color colors=Color.red,Color.green,Color.blue; public void paint(Graphics g) g.setColor(colorsindex); g.fillRect(0,0,getSize().width,getSize().height); public static void main(String args) Frame

50、 f=new Frame(“Canvas”); CanvasTest ct=new CanvasTest(); f.add(ct,BorderLayout.CENTER); f.setSize(150,150); ct.addKeyListener(ct); f.setVisible(true);,容器,public void keyTyped(KeyEvent ev) index+; if(index=colors.length) index=0; repaint(); public void keyPressed(KeyEvent ev) public void keyReleased(K

51、eyEvent ev) ,public class Exam5_17 public static void main(String args) Frame p=new Frame(); popWin mp=new popWin(p); class popWin extends Window implements ItemListener Frame myfra; TextField text=new TextField(“复选框”); Checkbox chbox1=new Checkbox(“A”); Checkbox chbox2=new Checkbox(“B”); popWin(Fra

52、me p) super(p); /调用父类的构造方法 myfra=p; setLayout(new GridLayout(6,1); chbox1.addItemListener(this); add(text); add(chbox1); pack(); /按组件大小调整容器 show(); ,菜单组件,菜单组件只能添加到实现了MenuContainer接口的容器中 不能使用布局管理器对它们进行布局 AWT提供的菜单机制：一个容器包含一个菜单条，一个菜单 条中包含多个菜单，一个菜单中包含若干个菜单项 菜单相关的组件：MenuBar, Menu, MenuItem, CheckboxMenuI

53、tem.,菜单组件,java.awt.MenuBar类 MenuBar() setMenuBar(菜单对象) java.awt.Menu类 java.awt.MenuItem类 java.awt.CheckboxMenuItem类 java.awt.PopupMenu类,菜单组件,MenuItem mi1=new MenuItem(“退出”,new MenuShortcut(KeyEvent.VK_X);,菜单组件,创建菜单条式菜单,创建菜单条 水平菜单，只能加入到一个Frame中 不支持监听者 【示例】： Frame f=new Frame(“MenuBar”); MenuBar mb=ne

54、w MenuBar(); 创建菜单，添加到菜单条中 【示例】 ： Menu m1=new Menu(“File”); Menu m2=new Menu(“Edit”); Menu m3=new Menu(“Help”); mb.add(m1); mb.add(m2); mb.add(m3):,创建菜单条式菜单,将菜单项加入到菜单中 【示例】 ： MenuItem mi1=new MenuItem(“New”); MenuItem mi2=new MenuItem(“Load”); MenuItem mi3=new MenuItem(“Save”); m1.add(mi1); m1.add(mi

55、2); m1.add(mi3); 将新建的菜单条加入到容器中 【示例】 ： setMenuBar(mb); f.setMenuBar(mb);,或 m1.add(“New”);,创建菜单条式菜单,将菜单项或菜单注册给动作事件的监听者ActionListener 【示例】 ： mi1.addActionListener(this); mi2.addActionListener(this); mi3.addActionListener(this); 或 m1.addActionListener(this); /菜单中的所有菜单项注册 重载监听者的方法actionPerformed(ActionEv

56、ent e) 【示例】 ： public void actionPerformed(ActionEvent e) if(e.getActionCommand()=“exit”) System.exit(0); ,菜单组件,import java.awt.*; import java.awt.event.*; public class Exam5_19 extends Frame implements ActionListener, ItemListener TextField text; public Exam5_19() super(“我的菜单窗口”); setSize(300, 200); public void init() MenuBar myB = n