第五章 构成用户界面的窗口环境

1、1,第5章 构成用户界面的窗口环境,北京大学计算机系 代亚非,2,构成用户界面的窗口环境,5.1 使用AWT(Abstract Window Toolkit)构件 5.2 包含构件的构件-构件容器（container） 5.3 事件的传递 5.4 各种构件的应用实例(一) 5.5 外观的管理与控制 5.6 各种构件的应用实例(二) 5.7 总结,3,5.1 使用AWT构件,在AWT的概念中，窗口系统所显示的各种对象统称为构件：Button，Menu，List等等都是构件。 Component是代表构件最基本的类。 Component类中定义了各种窗口对象中最基本、最重要的方法和性质。随时随处都

2、有可能利用Component定义的方法。,4,5.1 使用AWT构件,已经学过的： getFont， handleEvent,keyUp keyDown,mouseUp， mouseDown， mouseMove， mouseEnter， mouseExit， mouseDrag, repaint setFont，resize,没有学过的： action, disable，enable， getBackground， getForeground，hide， inside，isEnable， isShowing，isVisible， locate，location， move，setBackgr

3、ound， setForeground，show， size,5,列表,按钮,菜单,container,另一个窗口,窗口，对话框,5.2 包含构件的构件-构件容器(container）,container,6,5.2 包含构件的构件-构件容器(container）,import java.awt.*; import java.applet.Applet; public class CountClick extends Applet int CurrentMarks=0; public init() Button b1=new Button(“按钮”); add.b1; ,按钮,7,5.2 包含

4、构件的构件-构件容器(container）,AWT使用Container类来定义最基本的构件容器,它有两个子类:Window类和Panel类. 在Window类还有两个子类 1. 定义对话框,用Dialog子类; Java还提了一个Dialog的子类-FileDialog, 用它生成文件对话框 2. 定义一般意义的窗口,用Frame类.,8,5.2 包含构件的构件-构件容器(container）,Panel干什么用的呢? 使你更方便的组织你的构件,得到赏心悦目的布局 Applet是Panel的子类,因此在小应用程序里可以直接加入构件,而一般的应用程序必须先定义构件容器. 小应用程序在浏览器中所

5、显示的区域就是Panel,所占的尺寸就是缺省得Panel尺寸.,9,Container,Window,Panel,Component,Frame,Dialog,FileDialog,Applet,5.2 包含构件的构件-构件容器(container）,Button,Menu,Checkbox,Textfield,10,5.3 事件的传递(1.02),当动作发生在按钮上时, 首先看按钮这个类有没有action方法,如果没有则看包含按钮的容器类(即panel)有没有action方法,如果没有事件就传递窗口, 如果没有就传递给 component的通用处理方法,如果程序中没有定义任何action方法

6、,实际上事件最终不被处理,11,class MyPanel extends Panel MyBtn b=new MyBtn(“ok”); add(b); boolean action() .; ,class MyClass extends Frame MyPanel p=new Mypanel(); add(p); Button b=new Button(exit); add(b); boolean action() .; ,窗口,exit,class MyBtn extends Button boolean action() .; return true; ,12,5.3事件的传递(1.02

7、),事件由包含层次由内向外传递. 每个处理事件的方法要有一个返回值,通知是否继续向上传递 boolean action(Event evt, Object arg) ; return true; ,13,5.3 事件的传递(1.1),14,确定,取消,5.4 各种构件的应用实例-按钮,Button类 功能:创建按钮事件 创建一个Button Button myButton = new Button(str); 将button放到窗口系统中: add(new Button(“确定”); add(new Button(“取消”); Button类的常用方法 getLabel setLabel,15

8、,action-接受动作事件,调用repaint,init-建立button,paint-显示文字,5.4 各种构件的应用实例-按钮,处理button产生的事件 例:创建一个按钮,每当按下它时,在屏幕显示文字(singlebutton.html) 想一想: 应该有哪些类? Button ,Font; 应有哪些方法?,16,import java.awt.*;import java.applet.Applet; public class button extends Applet Font font; Button b1; public void init() font= newFont(Tim

9、esRoman,Font.BOLD,20); b1=new Button(push); add(b1); setFont(font); ,5.4 各种构件的应用实例-按钮,17,5.4 各种构件的应用实例-按钮,boolean action(Event evt,Object arg) y+=5; repaint(); return true; paint(Graphics g) g.drawString(Button”, 10,y);,18,5.4 各种构件的应用实例-按钮,import java.awt.*;例:不在applet中的按钮 class ButtoninFrame public

10、static void main(String args) Frame myframe=new Frame(); myframe.setTitle(Button in Frame); myframe.resize(200,200); myframe.show(); Button b1=new Button(Button1); Button b2=new Button(Button2); myframe.add(b1);myframe.add(b2); ,.,19,5.4 各种构件的应用实例,一般步骤:,20,5.4 各种构件的应用实例,New Checkbox(label, null, fal

11、se);,CheckboxGroup gr=new CheckboxGroup(); New Checkbox(label, gr, false); New Checkbox(label,gr,true);,New TextField(20); 常用的方法 getText();setText(); setEchoCharacter(char c),Scrollbar(VERTICAL,50,0,1,100);,new TextArea( “this is a test”,20,40);,21,5.4 各种构件的应用实例-CheckBox,应用举例 建立三个复选框,被选中者的标签内容变成“cha

12、nges” 应有的类:Checkbox 应有的方法: init:建立复选框 action:接受动作事件 setLabel(“*”);,22,5.4 各种构件的应用实例-CheckBox,import java.awt.*; public class checkbox extends java.applet.Applet Checkbox b1,b2,b3; public void init() b1=new Checkbox(Label1,null,false); b2=new Checkbox(Label2,null,false); b3=new Checkbox(Label3,null,f

13、alse); add(b1); add(b2); add(b3); ,23,public boolean action(Event evt, Object arg) if (evt.target instanceof Checkbox) Checkbox selectedbox=(Checkbox)evt.target; String str=selectedbox.getLabel(); if (str=Label1) selectedbox.setLabel(Chnage1); else if (str=Label2) selectedbox.setLabel(Chnage2); else

14、 if (str=Label3) selctedbox.setLabel(Change3); repaint();return true; ,5.4 各种构件的应用实例- CheckBox,24,例:在文本行中输入,并用字符串接受,显示出来 类的数据构成:Textfield,Button, String 类的方法构成: init(), action():接受按钮事件,调用paint() paint():用getText()方法得到输入内容,并显示.,5.4 各种构件的应用实例- TextField,25,import java.awt.*; public class textfieldkey

15、extends java.applet.Applet TextField t;String s;Button button; public void init() t=new TextField(,25); add(t); button=new Button(getText); add(button); ,5.4 各种构件的应用实例- TextField,26,public boolean action(Event evt, Object arg) if(evt.target instanceof Button) repaint(); return true; public void pain

16、t(Graphics g) s=t.getText(); g.drawString(s,40,80);,5.4 各种构件的应用实例- TextField,27,0,1,2,4,3,5,4,0,1,5,3,4,5.5 外观的管理与制,28,5.5 外观的管理与制,Panel类(面板) 功能:容纳其他对象,安排合理布局 创建面板: Panel myPanel=new Panel(); add(myPanel); 将面板作为容器: mypanel.add(button),29,5.5 外观的管理与制,例:(panel.htm),import java.awt.*; public class Pane

17、l extends java.applet.Applet Panel panel1,panel2; Button button1,button2,button3,button4; public void init() panel1=new Panel(); panel2=new Panel(); add(panel1); add(panel2); button1=new Button(Button1); button2=new Button(Button2); button3=new Button(Button3); button4=new Button(Button4); panel1.ad

18、d(button1); panel1.add(button2); panel2.add(button3); panel2.add(button4); ,30,5.5 外观的管理与制,BorderLayout类 功能:Applet分成五个区 创建 setLayout(new BorderLayout(); 将其他构件加入 add(“East”, new Button(“东”); add(“South”, new Button(“南”); add(“West”, new Button(“西”); add(“North”, new Button(“北”); add(“Center”, new But

19、ton(“中”);,31,5.5 外观的管理与制,FlowLayout类 缺省的输出管理器 GridLayout类 GridLayout mylayout = new GridLayout(3,3,0,0) setLayout();,rows,cols,hspace,vspace,32,5.5 外观的管理与制,GridBagLayout类和 GridBagConstraints类 功能:借助于GridBagConstraints类,实现更灵活的外观管理 每个构件后都跟随一个GridBagLayout对象实体,来决定构件的外观. 创建 GridBagLayout myLayout=new Gri

20、dBagLayout();,33,5.5 外观的管理与制,GridBagConstraints类的约束条件gridwidth, gridheight, gridx, gridy, weightx, weighty, ipadx, ipady, insets fill及其设置 GridBagConstraints.NONE GridBagConstraints.HORIZONTAL GridBagConstraints.VERTICAL GridBagConstraints.BOTH GridBagConstraints.RELATIVE,34,5.5 外观的管理与制,例:(GridBagApp

21、let.html),35,5.5 外观的管理与制,public void init() GridBagLayout layout=new GridBagLayout(); setLayout(layout); GridBagConstraints GBC = new GridBagConstraints(); Button button1=new Button(button1); Button button2=new Button(button2); Button button3=new Button(button3); Button button4=new Button(button4);

22、Button button5=new Button(button5); Button button6=new Button(button6); Button button7=new Button(button7); Button button8=new Button(button8); Button button9=new Button(button9);,36,5.5 外观的管理与制,GBC.fill=GridBagConstraints.BOTH; (按钮可以在水平和垂直两个方向扩展) layout.setConstraints(button1,GBC); add(button1); GB

23、C.gridwidth=GridBagConstraints.RELATIVE; (BOTH依然起作用, 紧挨着最后一个按钮,) layout.setConstraints(button2,GBC); add(button2); GBC.gridwidth=GridBagConstraints.REMAINDER; (填充剩余部分) layout.setConstraints(button3,GBC); add(button3);,37,5.5 外观的管理与制,GBC.gridwidth= GridBagConstraints.REMAINDER; (表示该按钮独占一行) layout.set

24、Constraints(button4,GBC); add(button4);,38,5.5 外观的管理与制,GBC.gridwidth=2; (表示该按钮占两个单元) layout.setConstraints(button5,GBC); add(button5); GBC.gridwidth= GridBagConstraints.REMAINDER; layout.setConstraints(button6,GBC); add(button6);,39,5.5 外观的管理与制,GBC.gridwidth=1; GBC.gridheight=2; (高度为两个单元) layout.set

25、Constraints(button7,GBC); add(button7);,40,5.5 外观的管理与制,GBC.gridwidth= GridBagConstraints.REMAINDER; GBC.gridheight=1; layout.setConstraints(button8,GBC); add(button8); layout.setConstraints (button9,GBC); add(button9);,41,5.6 各种构件的应用实例-Canvas,5.6.2 Canvas类(画布) 功能: 制作其他构件,通常用来放置图形图像,或绘图. 画图可以直接在apple

26、t区域上进行,定义了 Canvas对象后将paint()语句作为该对象的方法,这些动作就自动发生在画布区. 通常不需要处理画布上发生的事件 创建 Canvas canvas=new Canvas(); add(canvas);,42,5.6 各种构件的应用实例-Canvas,例:根据程序说出运行结果 注意一个程序中生成一个canvas类的实例,另一个程序没有,43,5.6 各种构件的应用实例-Canvas,import java.awt.*; import java.applet.*; public class canvas_test_2 extends Applet public void

27、init() setLayout(new BorderLayout(); add(North, new Button(button1); add(South, new Button(button2); add(West, new Button(button3); add(East, new Button(button4); public void paint(Graphics g) g.setColor(Color.red); g.fillRect(0,0,50,100); g.setColor(Color.blue); g.fillRect(30,0,100,40); ,44,5.6 各种构

28、件的应用实例-Canvas,import java.awt.*; import java.applet.*; public class canvas_test extends Applet MyCanvas mycanvas=new MyCanvas(); public void init() setLayout(new BorderLayout(); add(Center,mycanvas); add(North,new Button(button1); .; add(East,new Button(button4); ,45,5.6 各种构件的应用实例-Canvas,class MyCan

29、vas extends Canvas public void paint(Graphics g) g.setColor(Color.red); g.fillRect(0,0,50,100); g.setColor(Color.blue); g.fillRect(30,0,100,40); ,46,5.6 各种构件的应用实例-Canvas,47,color,color,color,5.6 各种构件的应用实例-Canvas,例:按动鼠标改变画布的颜色(CanvasApplet) 有哪些类? Canvas, Button, Color; 哪些方法? init(), action(),swapColo

30、r(),paint(),48,class CanvasApplet extends Applet MyCanvas mycanvas=new MyCanvas(); public void init() setLayout(new BorderLayout(); Button button = new Button(Color); add(North,button); add(“Center”,mycanvas); resize(200,250); ,5.6 各种构件的应用实例-Canvas,.,49,5.6 各种构件的应用实例-Canvas,boolean action(Event evt,

31、 Object arg) if(arg=Color) mycanvas.swapColor(); return true; ,50,5.6 各种构件的应用实例-Canvas,class MyCanvas extends Canvas Color color; MyCanvas() color=Color.red; public void paint(Graphics g) g.setColor(color); g.fillRect(20,20,100,100); g.setColor(color.white); g.drawString(CANVAS,40,40); public void s

32、wapColor() if(color=Color.black) color=Color.red; else if(color=Color.red) color=Color.green; else color=Color.black; repaint(); ,.,51,5.6 各种构件的应用实例-Frame,5.6.3 Frame类 功能 : 制作一般的独立窗口,它是构件容器 创建 Frame fmInstance=new Frame(); 或 Frame fmInstance= new Frame(“The window for test”); 将其显示到屏幕上 fmInstance.sho

33、w() 注意:不用add(),52,5.6 各种构件的应用实例-Frame,常用的方法 dispose,getCursorType,getIconImage, getMenuBar,getTitle,isResizable, setCursor,setIconImage,setMenuBar, setResizable,setTitle 窗口的相关事件: Event.WINDOW_DEICONIFY, _DESTROY _EXPOSE, _ICONIFY, _MOVED,53,5.6 各种构件的应用实例-Frame,例:创建一个窗口,并用按钮控制它的显示或 隐藏 FrameApplet,Sho

34、w window,hide window,Show window,54,5.6 各种构件的应用实例-Frame,在applet中action处理Button的事件,55,5.6 各种构件的应用实例-Frame,.,为了将字符显示在自定义窗口中,包含输出语句的方法必须在自定义的窗口类中,关闭窗口的事件在窗口类本身处理. 注: 处理窗口中的事件用handelEvent() public boolean handleEvent(Event evt) switch(evt.id) case Event.WINDOW_DESTROY: dispose();System.exit(0); default:

35、 return super.handleEvent(evt); ,56,5.6 各种构件的应用实例-Frame,public class FrameApplet extends Applet CustomFrame frame; Button button; public void init() frame=new CustomFrame (Custom Frame Window); button=new Button(Show Window); add(button); public boolean action(Event evt, Object arg) boolean visible=

36、frame.isShowing(); if(visible) frame.hide(); button.setLabel(Show window); else frame.show();button.setLabel(Hide Window); return true; ,57,5.6 各种构件的应用实例-Frame,class CustomFrame extends Frame CustomFrame(String title) super(title); public boolean handleEvent(Event evt) switch(evt.id) case Event.WIND

37、OW_DESTROY: dispose();System.exit(0); default: return super.handleEvent(evt); public void paint(Graphics g) resize(200,100); g.drawString(this is a custom window.,30,30); ,58,button2,button1,Button1 10 button2 1,button2,button1,Button1 0 button2 7,5.6 各种构件的应用实例-Frame,多窗口(FrameAppletButtonsFrames.cla

38、ss-f1.bat),59,5.6 各种构件的应用实例-Frame,1.一个窗口类创建两个实例 2.由于有不同的事件发生(按钮,关窗口),因此事件先由通用事件处理程序来接收,然后再根据情况做相应的处理. switch(evt.id) case Event.WINDOW_DESTROY: dispose(); return true; case Event.ACTION_EVENT: return action(evt, evt.arg); default: return super.handleEvent(evt); ,60,5.6 各种构件的应用实例-Frame,3. 任何时候只有一个窗口是

39、活动的(active)的因此不必考虑那个判断是哪一个窗口发生的事件 4.一般的结构 在main()中,只做与窗口有关的事情:创建窗口,显示窗口 在构造方法中,安排窗口中的构件,61,5.6 各种构件的应用实例-Frame,import java.awt.*; class ButtonsInFrames extends Frame int a1=0,a2=0; public static void main(String args) ButtonsInFrames myframe1=new ButtonsInFrames(); myframe1.setTitle(Button in Frame1

40、); myframe1.resize(200,200); myframe1.show(); ButtonsInFrames myframe2=new ButtonsInFrames(); myframe2.setTitle(Button in Frame2); myframe2.resize(200,200); myframe2.show(); ,62,5.6 各种构件的应用实例-Frame,ButtonsInFrames() setLayout(new BorderLayout(); Button b1=new Button(Button1); Button b2=new Button(Bu

41、tton2); add(North,b1);add(South,b2); public boolean handleEvent(Event evt) switch(evt.id) case Event.WINDOW_DESTROY: dispose(); return true; case Event.ACTION_EVENT: return action(evt, evt.arg); default: return super.handleEvent(evt); ,63,5.6 各种构件的应用实例-Frame,public boolean action(Event evt, Object a

42、rg) if(evt.target instanceof Button) if(arg=Button1)a1+; else a2+; repaint(); return true; public void paint(Graphics g) g.drawString(button1 +a1,5,80); g.drawString(button2 +a2,5,100); ,.,64,5.6 各种构件的应用实例-练习,与List类有关的事件 Event.LIST_DESELECT, Event.LIST_SELECT 例:(FontDisplay.class-f3.bat),public bool

43、ean handleEvent(Event evt) switch(evt.id) case Event.WINDOW_DESTROY: dispose(); System.exit(0); default: return super.handleEvent(evt); ,.,handleEvent WINDOW_DESTROY,handleEvent LIST_SELECT,65,5.6 各种构件的应用实例-练习,import java.awt.*; class FontDisplay extends Frame TextArea FontShower; public static void

44、 main(String args) FontDisplay myFrame=new FontDisplay(); myFrame.setTitle(FontDisplayer); myFrame.resize(450,300); myFrame.show(); public FontDisplay() setLayout(new BorderLayout(5,5); FontShower=new TextArea(Font Display! ”); add(West, new FontPanel(FontShower); add(Center,FontShower);,66,对窗口来说只有一

45、个事件,5.6 各种构件的应用实例-练习,public boolean handleEvent(Event evt) switch(evt.id) case Event.WINDOW_DESTROY: dispose(); System.exit(0); default: return super.handleEvent(evt); ,67,对右边的文本区设置属性,利用引用传递.,得到列表选项用getItem 事件处理用用handleEvent,得到两个参数-字型,字号.,5.6 各种构件的应用实例-练习,在panel中创建两个列表 往列表中加入条目用additem(str),.,void u

46、pdateFontShower() area.setFont(new Font(CurrentFontName, Font.PLAIN, CurrentSize);,68,5.6 各种构件的应用实例-练习,public boolean handleEvent(Event evt) switch(evt.id) case Event.LIST_SELECT: List target=(List)evt.target; String itemName= target.getItem(Integer)evt.arg).intValue(); if(target=FontSelector) Curre

47、ntFontName=itemName; else CurrentSize=Integer.parseInt(itemName);,69,5.6 各种构件的应用实例-练习,String FontNames=Arial, Courier New, Times New Roman; List FontSelector=new List(); for (i=0;iFontNames.length;i+) FontSelector.addItem(FontNamesi); add(FontSelector); List SizeSelector=new List(); for (i=6;i64;i+=

48、2) SizeSelector.addItem(String.valueOf(i); add(SizeSelector);,70,updateFontShower() area.setFont(param1,param2,param3),5.6 各种构件的应用实例-练习,class FontPanel extends Panel int CurrentSize=20; String CurrentFontName; TextArea area; List FontSelector,SizeSelector;,71,5.6 各种构件的应用实例-练习,FontPanel(TextArea FS)

49、/把另一个对象做参数 int i; String FontNames=Arial, Courier New, Times New Roman; setLayout(new GridLayout(2,1,5,5); FontSelector=new List(); for (i=0;iFontNames.length;i+) FontSelector.addItem(FontNamesi); add(FontSelector); SizeSelector=new List(); for (i=6;i64;i+=2) SizeSelector.addItem(String.valueOf(i);

50、add(SizeSelector); area=FS; CurrentFontName=FontNames0; updateFontShower();,72,5.6 各种构件的应用实例-练习,public boolean handleEvent(Event evt) switch(evt.id) case Event.LIST_SELECT: List target=(List)evt.target; String itemName= target.getItem(Integer)evt.arg).intValue(); if(target=FontSelector) CurrentFontN

51、ame=itemName; else CurrentSize=Integer.parseInt(itemName); updateFontShower(); return true; default:return super.handleEvent(evt); void updateFontShower() area.setFont(new Font(CurrentFontName, Font.PLAIN, CurrentSize);,73,菜单系统,一般菜单,可撕下菜单,帮助菜单,类MenuBar,选项#1,菜单中的菜单,选项#3,选项#4,选项#1,选项#2,第三层菜单,选项#3,选项#1

52、,选项#2,类Menu,类MenuItem,5.6 各种构件的应用实例-menu,5.6.6菜单系统,选项#2,菜单容器,非菜单容器,74,5.6 各种构件的应用实例-menu,创建菜单条 mb=new MenuBar(); setMenuBar(mb);(类Frame中的方法),创建菜单 menu1=new Menu(“file”); menu2=new Menu(“edit) mb.add(menu1);mb.add(menu2);,75,5.6 各种构件的应用实例-menu,创建菜单项 mi1=new MenuItem(“new”); mi2=new MenuItem(“open”);

53、mi3=new MenuItem(“save”); mi4=new MenuItem(“close”); menu1.add(mi1); menu1.add(mi2);,76,5.6 各种构件的应用实例-menu,如何处理事件 public boolean action(Event e, Object arg) if (e.target instanceof MenuItem) MenuItem selected=(MenuItem)e.trget; tring s=selected.getLabel(); switch(s) case “new”: .; case “open”: .; ca

54、se “save”: .; case “close”: .; ,77,5.6 各种构件的应用实例-menu,在处理菜单事件 时应该注意的事情是:判断层次,MenuContainer uplevel;(定义一个菜单容器) MenuItem target=(MenuItem)evt.target;(当前被选中的对象) uplevel=target.getParent(); strMessage=uplevel.getLabel()(得到上一级容器的标签),78,5.6 各种构件的应用实例-menu,public boolean action(Event evt, Object arg) Strin

55、g strMessage; if(evt.target instanceof MenuItem) MenuItem target=(MenuItem)evt.target; MenuContainer uplevel; uplevel=target.getParent(); while(uplevel instanceof Menu) strMessage=(Menu)uplevel).getLabel()+strMessage; uplevel=(Menu)uplevel).getParent(); strMessage=you selected+strMessage; taMessage.

56、appendText(strMessage); return true; else return false;,79,5.6 各种构件的应用实例-menu,Java1.1处理菜单的方法 两个主要的策略: 1. 让每个菜单项有一个唯一的监听器 2. 将一个大的监听器用于用于所有菜单项,80,5.6 各种构件的应用实例-menu,class Example class MenuFileOpen implements ActionListener public void actionPerformed(ActionEvent e) openFile(e.getActionCommand(); cla

57、ss MenuFileSave implements ActionListener public void actionPerformed(ActionEvent e) saveFile(e.getActionCommand(); ,81,5.6 各种构件的应用实例-menu,public void init() MenuItem OpenItem=new MenuItem(“Open”); OpenItem.addActionListener (new MenuFileOpen(); MenuItem SaveItem= new MenuItem(“Save”); SaveItem.addActionListener (new MenuFileSave(); ,82,5.6 各种构件的应用实例-综合练习,设计用户界面可根据用户选择办理银行业务 BankappBankapp.class-f2.bat 控制流程,83,5.6 各种构件的应用实例-综合练