chap7Applet与图形用户界面.ppt

chap7,图形用户界面的设计与实现,图形用户界面概述,图形用户界面 graphics user interface GUI AWT abstract window toolkit(抽象窗口工具集) 图形用户界面的设计是软件设计的一项重要工作。界面设计的好坏直接影响用户对软件的使用情况。,图形用户界面的构成,图形用户界面就是一组图形界面成分和界面元素的有机组合。 这些成分和元素之间不但外观上有着包含、调用等逻辑关系。 他们互相作用、传递消息，共同组成一个能响应特定事件、具有一定功能的图形界面系统。,设计和实现图形用户界面的工作主要有两个：,创建组成界面的各成分和元素，指定他们的属性和位置关系，根据具体需要排列他们，从而构成完整的图形用户界面的物理外观。,定义图形用户界面的事件和各界面元素对不同事件的响应，从而实现图形用户界面与用户的交互功能。,图形用户界面的元素和成分可以分为三类：,用户自定义成分：只起到装饰美化的作用，不能响应动作，也不具有交互功能 容器：用来组织其它界面成分和元素的单元。可以容纳其他组件。 控制组件：是图形用户界的最小单位之一，它里面不包含其他的成分。,使用控件，通常需要如下的步骤： 创建某控件类的对象，指定其大小、颜色、字体等属性 使用某种布局策略，将该控件对象加入到某个容器中的指定位置。 将该控件对象注册给对应的事件监听者，如果该对象有事件产生的话。重载事件处理方法，实现交互功能。,用户自定义成分,在APPLET中绘制图形 Paint()方法 在Application中绘制图形必须创建一个画布类Canvas的对象，利用Canvas的paint()方法来实现绘图。,绘制图形,利用Graphics可以绘制直线、矩形圆形多边形等。 画直线 drawLine(int x1,int y1,int x2,int y2) Draws a line, using the current color, between the points (x1, y1) and (x2, y2) in this graphics contexts coordinate system. 画矩形 drawRect(int x, int y, int width, int height) 画圆角矩形 drawRoundRect (int x, int y, int width, int height, int arcWidth, int arcHeight) Draws an outlined round-cornered rectangle using this graphics contexts current color. 画椭圆drawOval(int x, int y, int width, int height),drawOval(10,10,30,30); 和drawRoundRect(10,10,30,30,30,30)输出的是什么图形？,多边形 drawPolygon (int xPoints, int yPoints, int nPoints) Draws a closed polygon defined by arrays of x and y coordinates. 画实心矩形 fillrect() 画实心圆角矩形 fillRoundRect() 实心椭圆 fillOval(),drawOval(x,y,w,h)参数的意义 x圆的外切矩形左上角横坐标 y圆的外切矩形左上角纵坐标 w：矩形的宽 h：矩形的高 如果画的是一个圆形则高和宽是相等的，等于半径的两倍 已知半径和圆心的坐标画一个圆？,(x,y),r,r,(x,y),drawOval(x-r) ,(y-r) ,2r,2r),g.drawLine(30,5,40,5); g.drawRect(40,10,50,20); g.fillRect(60,30,70,40); g.drawRoundRect(110,10,130,50,30,30); g.drawOval(150,120,70,40); drawMyPolygon(g); public void drawMyPolygon(Graphics g) int xcoors=30,50,65,119,127; int ycoors=100,140,127,169,201; g.drawPolygon(xcoors,ycoors,5); Point类 Dimension类 Rectangle类的对象都可以作为参数在Graphics的方法中使用，与Color用法类似,设置颜色 使用Color类,创建Color的对象 有三个构造函数: Color(int red,int green,int blue) (取值0-255) Color(float red,int green,int blue) (取值0.0-1.0) Color(int rgb)(0-7位红8-15位绿16-23位蓝) 例：Color mycolor = new Color(20,30,40),或者直接使用Color类提供的静态颜色值。yellow white pink orange red cyan青 magenta 红紫色 lightGray blue darkGray black green 例：g.setColor(Color.magenta);,很多的控件都有以下的方法，用来控制颜色。setBackground(Color c) Color .getBackground() setForeground(Color c) Color .getForeground() setColor(Color c) Color .getColor(),参考例7-3,设置字体 利用drawString()方法和Font类,Font myf=new Font(“字型”，样式，大小),大小：1-72 样式：Font.PLAIN,FONT.BOLD FONT.ITALIC 字型：TimesRoman Arial Unicode MS Batang Gulim GungsuhChe Font myf=new Font(“TimesRoman”,Font.ITALIC,28),常用方法： setFont(Font f)/要在输出字符前设置 Font getFont(),显示图像,用到Image类及其方法getImage,及drawImage() 方法.参看例7-4,Image类的对象是用来保存图像数据的。getImage方法是用来将指定图像文件的内容加载到内存的Image的对象中。有两个参数第一个是用来指出图像的URL地址，第二个参数是给出图像文件名称。,getDocumentBase()来获取含有该Applet文件的html文件的地址。 drawImage()方法是用来显示图片的，第一个参数给出保存有图像数据的Image对象，第二三参数给出图像的起始位置，第四五个参数是图像的宽度和高度，第六个参数是显示图像的容器对象。一般是当前的Applet对象。 Image myimage= getImage (getDocumentBase() , , ”pcname.jpg”) drawImage(myimage,0,0,300,200,this),实现动画效果,通过连续显示不同的图片来达到动画的效果 参看例7-5,JAVA的事件处理,图形用户界面可以简便，直观地接收用户发出的命令。命令通常是单击或双击某界面元素实现。为了能接收命令，系统首先要识别鼠标和键盘操作，然后做出响应。鼠标和键盘操纵通常会引发一预先定义好的事件，系统自动识别，只要在程序编制时定义对事件的响应。一旦事件发生系统自动调用响应。 引发事件的动作 JAVA的事件处理机制,能引发事件的动作,鼠标的移动、托动、点击等 键盘操作，输入一般的字符或者功能键的键入 控件引发：单击按钮，选择某项，关闭窗口等 这些动作通常会引发一些预先定义好的事件，系统会识别不同的事件并调用相应方法，方法由程序员预先编好,JAVA的事件处理机制,委托处理事件模型,事件源：图形用户界面的每个可能产生事件的组件被称为事件源。不同的事件源发生的事件种类不同,监听器（监听者）：希望事件源发生的事件被程序处理，就要把事件源注册给能够处理该类型事件的监听者。监听者的关键是实现一些接口。监听器可以是包容事件源的容器或者是某类的对象。,委托事件模型,事件源（btn） 注册给监听者：btn.addActionListener(监听者对象),注册,监听者 实现了相应的接口(ActionListener)，接口是用来 处理某种事件的，里面定义了处理事件的方法 (actionPerformed(ActionEvent e),触发事件,不同事件源触发 不同的事件类 (ActionEvent),自动调用特定方法，并传递参数,JAVA的定义的事件类,ComponentEvent,AWTEvent,ActionEvent,AjustmentEvent,EventObject,ItemEvent,TextEvent,ContainerEvent,FocusEvent,InputEvent,PaintEvent,WindowEvent,MouseEvent,KeyEvent,对应上述事件类，JAVA定义了相应的接口处理这些事件。其中除了InputEvent不对应任何接口，MouseEvent 有两个接口与之对应外，其他的事件类都对应一个接口。监听器就是实现了相应接口的类。,上述的事件类中不一定只定义了一个事件，有的事件类中定义了多个事件，如鼠标事件和窗口事件类都包含多个事件。,GUI标准组件概述,父类：Component 主要控件：Button Canvas Choice Checkbox Label Scroll List TextComponet: TextField TextArea 容器类：父类：Container 子类：主要容器：Panel ScrollPanel Window: Frame Dialog :FileDialog,Component类中定义的常用的方法:add(); Color getBackground(); getFont(); setFont(); requestFocus()使组件获得焦点；p215,基本控件被安放在容器中的某个位置，用来完成一种具体与用户交互功能，使用基本控件的一般步骤是： 创建对象，并设置属性 将组件加入到某个容器的合适位置 将组件注册给适当的监听者,事件与监听者接口215-217,在下面控件的学习中，注意事件和事件处理问题 有哪些事件源，他们可以发生什么事件 如果要对事件做出响应，将事件源注册给什么监听者(实现什么接口),及如何注册 监听者接口包含哪些方法？各代表什么事件处理程序。,ActionEvent动作事件,事件源及产生原因：单击按钮双击列表框，文本框回车等。 注册给监听者方法：btn.addActionListener(); 监听者要实现的接口:ActionListener 处理事件的接口方法actionPerformed(ActionEvent e),ItemEvent项目事件,事件源及产生原因：改变列表框下拉选单中选中项，改变复选框选中状态等 注册给监听者方法:事件源.addItemListener(); 监听者要实现的接口:ItemListener 处理事件的接口方法 itemStateChanged(ItemEvent e),标签、按钮与动作事件,标签(Label)： Label prompt=new Label(“标签提示”); 常用方法：getText() setText(字符串); 不能产生事件，不是事件源,按钮,按钮(Button): Button btn=new Button(“ok”) getLabel() setLabel() addActionPerformed( ) 产生事件类ActionEvent类 ActionEvent类 只包含一个事件ACTION-EVENT 对应一个接口ActionListener,接口ActionListener只定义了一个方法actionPerformed(ActionEvent),ActionEvent类中定义的常用方法,e.getActionCommand() 获得按钮标签 e.gok e.setActionCommand()设置按钮命令名，默认为按钮标签； e.getSource() e.getModifiers(),能触发ActionEvent类事件的动作包括： 点击按钮 双击列表中的选项 选择菜单 在文本域中输入回车,文本框、文本域和文本事件,TextComponent:TextField 和TextArea TextArea ta=new TextArea(10,45)/行数,列数 文本组件共有方法： getText();setText(); setEditable(true)/设置编辑状态；isEditable() select(int start ,int end) selectAll()选中一段文本;getSelectedText()获得选中文本 getSelectionStart() getSelectionEnd()获得选中文本的起始位置,文本框(TextField) setEchoChar()设置回显字符 tf.setEchoChar(*); getEchoChar()获得回显字符 echoCharIsSet()判断是否设置回显 触发事件类ActionEvent类 TextEvent类， 分别使用方法addTextListener addActionListener注册给相应的监听器 实现接口TextListener， ActionListener,文本框、文本域和文本事件,文本域（TextArea）:支持多行多列。除了从父类TextComponent继承的方法还定义了appent() insert()方法。只能触发TextEvent事件 文本事件（TextEvent）：文本区域发生变化时，触发该事件类，只定义了一种事件TEXTVALUE-CHANGED,对应的接口是TextListener,接口中定义了textValueChanged(TextEvent e)方法。,单、复选按钮，列表与选择事件,选择事件(ItemEvent) 只包含一个事件ITEMSTATE-CHANGED 引发这类事件的动作包括： List选项的改变 Choice选项的改变 Checkbox对象状态的改变 检测盒菜单CheckboxMenuItem状态改变 对应的接口是ItemListener,只定义了一个方法itemStateChanged(ItemEvent e) ItemEvent类中的常用方法,public ItemSelectable getItemSelectable()返回引发事件的事件源。返回类型实现了ItemSelectable的类的对象。如List，Choice等。使用时注意要强制转换事件源的类型。(Choice)e.getItemSelectable() public Object getItem()返回引发选中状态变化事件的具体选择项。通过此方法可之用户选择了那个选项 public int getStateChange()返回具体状态类型ItemEvent.SELECTED:选中/ItemEvent类的静 ItemEvent.DESELECTED:未选中/态常量,单、复选按钮，列表与选择事件,复选按钮(Checkbox) Checkbox ck1=new Checkbox(“选项名”) 常用方法:getState() setState(true)取得或者设置复选框的状态（选中或不选中） 响应事件ItemEvent,用addItemListener(this)将复选按钮注册给监听器。,单、复选按钮，列表与选择事件,单选按钮(CheckboxGroup) CheckboxGroup ckg1=new CheckboxGroup() Checkbox f1=new Checkbox(“ ”,true,ckg1) Checkbox f2=new Checkbox(“ ”,false,ckg1) 把单选按钮放入容器中时，是把每个单项加入容器中，add(f1);add(f2) 常用方法: 响应事件ItemEvent,但是只能由每个单项来响应事件，CheckboxGroup不能响应。,下拉列表(Choice) Choice cho1=new Choice() cho1.add(“第一个下拉项”);/序号从0开始； cho1.add(“第二个下拉项”);/序号为1 add(cho1); 常用方法: getSelectedIndex() getSelectedItem() select(int index) select(String item) add(String item)指定位置 insert(String item,int index) remove(int index/item)指定序号或标签的删除 removeAll() cho1.addItemListener(this) 响应事件:当单选某项时，响应ItemEvent类事件;例7-9,列表(List) 可以多选 List mylist=new Liste( 一次显示的项数，是否允许复选) mylist.add(“第一项”)； mylist.add(“第二项”)；add(mylist); 常用方法： String getSelectedItem()返回用户选中的选项文本 String getSelectedItems()数组存储多项选中文本 int getSelectedIndexs() int getSelectedIndex() 选中项的序号，从0开始 select(int index) deselect(int index) 在程序中设定指定序号处的选项被选中或不选中。,add(String item)，add(String item, int index)标签为item的选项加入到列表的最后或指定序号处 remove(String item) ，remove(int index)指定的选项从列表中移除。 mylist.addItemListener(this) mylist.addActionListener(this) 响应事件: 单击某个选项时触发ItemEvent类事件 ，双击某个选项时触发ActionEvent类事件。监听器中分别实现这两个方法itemStateChanged() ，actionPerformed()。双击不能覆盖单击事件。先产生单击事件在产生双击事件。 一般不需要列表响应事件。,设计事件处理专用类,监听者可以使包容组件的容器对象，也可以使其他类的对象。 不同事件的监听者可以一个类承担，也可以由不同类来承担。 可以设计专门处理事件的类，同时可以使用内部类的机制。即，类的内部定义一个类，用这个类实现相应接口。,内部类,某个类的内部定义的类称为内部类。 目的：主要是供自己使用，可以不对外公开 一个类如同使用其他类一样使用自己的内部类，包括创建类的对象使用其方法 内部类不是独立的类，编译后与其他外部类不同。如：外层类Myclass，内部类c1,c2，生成的类文件： Myclass.class Myclass$c1.class myclass$c2.class P236例7-12,public class myclass c1 myc1=new c1(); myc1.c1pint(); c2 myc2=new c2(); class c1 /内部类 void c1pint() System.out.println(“kfjoie”); class c2 implements ActionListener /内部类 ,滚动条与调整事件,调整事件(AdjustmentEvent) 只包含了一个事件ADJUSTMENT-VALUE-CHENGED引发这个事件的动作有： 操纵滚动条改变其滑块位置 操纵用户自定义的Scroll对象的子类组件，改变其滑块位置。 事件的常用方法及常量 对应的接口是AdjustmentListener,接口中只定义了一个方法adjustmentListener(AdjustementEvent e),滚动条(Scrollbar) Scrollbar myscb=new Scrollbar(方向，滑块初始位置，滑块大小，滚动槽的最小、大数据 ) 常用方法： 响应事件：myscb.addAdjustmentListener(this),触发调整事件AdjustmentEvent,监听器中必须实现接口中的方法adjustmentValueChanged(AdjustementEvent e),画布与鼠标、键盘事件,鼠标事件(MouseEvent) 是InputEvent类的子类 。 这个事件类主要相应的是鼠标的动作引发的事件。 静态常量：ALT_MASK CTRL_MASK SHIFT_MASK META_MASK BUTTON1_MASK BUTTON2_MASK BUTTON2_MASK(InputEvent) MOUSE_CLICKED MOUSE_DRAGGED MOUSE_ENTERED MOUSE_EXITED MOUSE_MOVEDMOUSE_PRESSED MOUSE_RELEASED (MouseEvent 类定义的事件常量) 常用方法：getModifiers() getID( ) getX() getY() getPoint() getClickCount( ),MouseEvent事件类有两个接口与之对应，分别是MouseListener和MouseMotionListener,其中MouseListener中定义了5个方法(mouseClicked(),mouseEntered(), mouseExited(), mousePressed(), mouseReleased() MouseMotionListener中定义了2个方法(mouseMoved(), mouseDragged() ) 系统会自动辨别鼠标事件并自动调用相关的方法，用户只要把需要处理的事件的相关代码放到程序中即可。,键盘事件（KeyEvent）是InputEvent类的子类，是用来相应键盘上发生的事件。 静态常量:KEY_PRESSED KEY_RELEASED KEY_TYPED 对应三种键盘动作 常用方法：getKeyChar()与键盘事件对应的是接口KeyListener，接口种定义了三个抽象方法来处理键盘事件,keyPressed() keyReleased() keyTyped() 用户也必须实现上述的三个抽象方法。,画布类(Canvas) 用来绘制图形的矩形背景组件，同时可以响应鼠标和键盘事件。 创建：Canvas myc=new Canvas( );注意在创建之后用setSize方法确定大小，否则不显示。 常用方法：public void paint(Graphics g) 与applet中的paint方法功能完全一样。,如果一个程序中要处理鼠标和键盘事件则它必须实现10个方法。,适配器（事件剪裁类）用户只要实现自己想用的方法就可以了，而不用管其他的抽象方法。这是一个新的类，所以当主类已经是一个类的子类时，就不能再继承事件剪裁类了。（因为不支持多继承）只能创建新的类来作为适配器的子类，而这个新建类的对象就是事件的监听者。因此注册监听者的时候要注意.p248例7-16,有时，用户可能只用到一个事件比如只想使用托动鼠标事件(mousedragged()，但是根据要求必须实现接口种的所有方法，因此用户必须实现其他的方法。为了解决这个问题，引入了新的类。,Panel与容器事件,Container类 容器类的父类 常用方法：add() getComponent() remove(int x) removeall() setLayOut() 当移入或移出控件时， 可以触发容器事件 容器事件（ContainerEvent）定义了两个事件COMPONENT_ADDED 添加组件 COMPONENT_REMOVED 移出组件 对应的接口是ContainerListener,接口种定义了两个抽象方法 componentAdded() componentRemoved(),Panel 无边框容器，Applet是它的子类，是最简单的容器，不能被移动缩放关闭等。也不能作为最外层的容器，一般都放在Applet或Frame中。,p1.addContainerListener(new conlister() class conlister extends ContainerAdaper public void componentRemoved(ContainerEvent e) showStatus(“removed the third panel”) ,Frame 与窗口事件,Frame 常作为application程序的最外城窗口，可以触发窗口事件。 窗口事件(WindowEvent)定义了7个事件WINDOW_ACTIVTED WINDOW_DEACTIVTED WINDOW_OPENED WINDOW_CLOSED WINDOW_CLOSING WINDOW_ICONIFIED WINDOW_DEICONIFIED 常用方法getWindow() 窗口事件对应的接口是WindowListener,其中定义了7个方法来处理上面的7种事件。同样也有对应的事件剪裁类WindowAdapter 例：7-21,布局设计,FlowLayout 在容器Panel和他的子类Applet中的缺省布局策略。从上到下 从左到右，按控件加入的先后顺序布局 add(组件名)；setLayout(new FlowLayout() 含参数构造函数： FlowLayout(int align,int hgap,int vgap) FlowLayout(int align) 无参数的：居中 间距5像素,BorderLayout 只能放入5个按钮，按东南西北中五个区域布局. EAST,WEST,SOUTH, NORTH, CENTER五个静态常量 BorderLayout(int hgap, int vgap);无参数构造函数间距为0 例：Panel p1=new Panel()； p1.setLayout(new BorderLayout() add(new Button(“east”),BorderLayout.EAST) add(new Button(“center”)/隐含位置中央 如果一方无控件，其他部分的扩展占满这部分空间,CardLayout 可以容纳多个控件，每次只能显示一个组件，占据整个空间。使用一般步骤： 创建对象CardLayout mycard=new CardLayout () ； 指定布局：setLayout(mycard)； 添加组件：add(“first”,btn1