图形用户界面设计.ppt

4 4图形用户界面设计 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望4 4主要内容4Java的GUI简介4自定义图形设计图形、文字、图象4Java的标准组件容器和组件GUI的布局4事件处理2Java的图形用户界面4 4图形用户界面（GUI）4字符界面用字符串、命令行的方式与用户交互4图形用户界面:GraphicsUserInterface用直观的图形来表示数据用直观、方便的GUI标准组件来接收命令GUI组成成分的标准化使用图形的方式借助菜单、按钮等标准界面元素和鼠标操作，来帮助用户方便地向计算机系统发出命令，启动操作，并将系统运行的结果同样以图形的方式显示给用户。3Java的图形用户界面4 4用户界面设计原则4控制权在用户4界面与操作的风格一致性4宽容（容错）性4简洁与美观并重4Java的图形用户界面4 4图形用户界面简介4图形用户界面的构成容器：布局、安排标准组件用户自定义成分4设计&实现图形用户界面的工作创建GUI各组成成分，并安排从属位置关系，根据具体需要对其进行排序，构成完整外观。定义GUI各成分对不同事件的响应，实现与用户的交互功能。5Java的图形用户界面4 4界面构成容器用户自定义成分v容器是用来组织其他界面成分和元素的单元。一般一个图形用户界面对应一个复杂容器。如一窗口v标准组件是图形用户界面的最小单位,它里面不再包含其他的成分。如单选按钮,文本框,菜单v用户自定义成分是指编程人员根据用户需要设计一些用户自定义的图形界面成分。如绘制几何图形标准组件6Java的图形用户界面4 4界面元素4容器是用来组织其他界面成分和元素的单元。可以形成容器的层次，构筑复杂结构Window（Frame、Applet、Dialog）4组件是图形用户界面的基本单位，它里面不再包含其他的成分。GUI组件是图形用户界面标准化的结果。常用的组件有:选择类的:单选按钮、复选按钮、下拉列表；文字处理类的:文本框、文本区域命令类的:按钮、菜单等GUI组件的作用是完成与用户的交互。包括接收用户的命令、文本或选择输入，向用户显示一段文本或一个图形等。7Java的图形用户界面4 4界面元素4使用组件通常需要如下的步骤创建某组件类的对象，指定其大小等属性。使用某种布局策略，将该组件对象加入到某个容器中的某指定位置处。将该组件对象注册给它所能产生的事件对应的事件监听者，重载事件的处理方法，实现利用该组件对象与用户交互的功能。4用户自定义成分显示文字、绘制图形、显示图象不能像标准组件一样被系统识别和承认，只起装饰作用。不能响应用户的动作，不具有交互功能。8Java的图形用户界面4 4图形用户界面（GUI）4Java的图形用户界面编程：为方便图形用户界面的开发，设计了专门的类库来生成各种标准图形界面元素和处理图形界面的各种事件，这个用来生成图形界面的类库就是java.awt包。AWT是abstractwindowtoolkit抽象窗口工具集的缩写。AWT类库中的各种操作被定义在一个窗口中进行，开发人员用AWT开发出的图形用户界面可以适用于所有的平台系统。9Java的图形用户界面4 4AWT包4AbstractWindowToolkit(抽象窗口工具集)提供各种构成GUI的标准构件。AWT类库中的各种操作被定义在一个窗口中进行的。抽取不同软硬件平台中所实现的窗口的公共特性。依赖于具体平台系统实现：显示效果可能不同。4提供与机器无关的基本GUI标准组件选择类组件：单选按钮、复选框、下拉选单、列表框文字处理类组件：标签、文本框、编辑框。命令类组件：按钮、工具栏、菜单等。10Java的图形用户界面4 4从一个简单窗口开始4创建GUI应用程序Frame必不可少它是带标题的顶层窗口,是构建应用程序图形界面的基础,它为应用程序实现人机交互提供了对话窗口4先来建一个空的窗口应用:Empty.java注意：一定要处理关闭窗口的事件11Java的图形用户界面4 4import java.awt.*;/mustimporttouseGUI/mustextendsFrameinanapplicationpublicclassEmptyextends Frame/暂时采用1.0.2的事件处理方法，关闭窗口publicbooleanhandleEvent(Eventevt)/根据Event类中参数evt的id值来判断发生事件的种类if(evt.id=Event.WINDOW_DESTROY)System.exit(0);/return的返回值表示将余下的事件处理交给handleEvent()的父/类处理，从而保证对事件的正常处理returnsuper.handleEvent(evt);publicstaticvoidmain(Stringargs)Framef=new Empty();f.setSize(300,200);f.setVisible(true);12Java的图形用户界面4 4绘制用户自定义成分4用户自定义成分属于构成GUI的非标准部分无法响应用户事件一般仅仅起背景装饰、输出效果突出的作用4Java中的用户自定义成分显示文字绘制图形显示图片13Java的图形用户界面4 4绘制用户自定义成分4一般在容器中(窗口)或画布上绘制。4利用Java.awt类库中的类及其方法绘制用户自定义的图形界面成分。4Graphics类包含很多绘制图形和文字的方法。4首先要获得Graphics类的实例，然后利用其方法绘制。4Graphics类的实例一般作为相关方法的参数传递进来：paint(Graphicsg)4Java程序图形界面的坐标设置原点(0,0)X轴Y轴14Java的图形用户界面4 4绘制图形及其相关方法4drawLine(x1,y1,x2,y2)/直线4drawRect(x,y,w,h)/矩形4drawOval(x,y,w,h)/圆或椭圆4fillOval(x,y,w,h)/实心圆或椭圆4drawPolygon(X坐标数组，Y坐标数组，顶点个数)/画多边形4drawArc(x,y,w,h,开始角度，弧度角度)4setColor(Colorc)/设置颜色4setFont(Fontf)/设置字体4getColor()4getFont()15Java的图形用户界面4 4绘制图形及其相关方法4从(x1,y1)到(x2,y2)画直线drawLine(x1,y1,x2,y2)参数均为int4画弧线drawArc(x,y,w,h,)参数均为intx,y为绘制弧形的左上角的坐标；w,h为弧形的宽度和高度；为弧形的起始角，为弧形的弧度，为正，表顺时针方向；为负，表逆时针方向。4以(x,y)为左上角、w为宽度、h为高度画矩形drawRect(x,y,w,h)参数均为int4fillRect(x,y,w,h)、clearRect(x,y,w,h)16Java的图形用户界面4 4绘制图形及其相关方法4画圆或椭圆drawOval(x,y,w,h)x,y为绘制圆或椭圆的左上角的坐标，w,h确定了椭圆的宽度和高度4画实心圆或椭圆fillOval(x,y,w,h)4画多边形drawPolygon(X坐标数组，Y坐标数组，顶点个数)P.18517Java的图形用户界面4 4绘制图形及其相关方法例子：sanmao.java18Java的图形用户界面4 4/画头部,椭圆方法drawOvalg.setColor(Color.black);/setColor用来设置要使用的颜色g.drawOval(40,40,120,150);./画头发,直线方法drawLine,画弧方法drawArcg.drawLine(100,10,100,60);g.drawArc(110,20,100,80,90,90);./画嘴巴,填充画弧方法fillArcg.fillArc(60,130,80,40,180,180);./画耳朵,填充椭圆方法fillOval,复制图形方法copyAreag.fillOval(25,92,15,30);g.copyArea(25,92,15,30,136,0);/拷贝某区域的图形至另一区域./画身体,多边形方法fillPolygong.fillPolygon(polygon_x,polygon_y,polygon_pt_num);19Java的图形用户界面4 4显示文字4字体显示效果类：Font一个Font类的对象表示了一种字体显示效果，包括字体类型、风格和字号。Fontmf=newFont(String字体，int风格，int字号);字体：TimesRoman,Courier,Arial等风格：三个常量Font.PLAIN,Font.BOLD,Font.ITALIC字号：字的大小（磅数）设置当前使用的字体：setFont(Fontfn)获取当前使用的字体：getFont()4例：UseFonts.java20Java的图形用户界面4 4StringFontName=TimesRoman,Courier,Arial;intFontStyle=Font.PLAIN,Font.BOLD,Font.ITALIC;StringStyleName=PLAIN,BOLD,ITALIC;publicvoidpaint(Graphicsg)for(inti=0;i3;i+)for(intj=0;j1)/双击时清除向量中各点m_vLocs.removeAllElements();else/单击时在向量中增加一点m_vLocs.addElement(e.getPoint();repaint();/重新绘制一次classmoveextendsMouseMotionAdapter/鼠标移动监听者类publicvoidmouseMoved(MouseEvente)/响应移动m_CursorLoc=newPoint(e.getX(),e.getY();repaint();/重新绘制一次69Java的图形用户界面4 4事件类4ActionEvent类：属于动作事件，包括：点击按钮；双击一个列表中的选项;选择菜单项；在文本框中按回车。最典型的例子是：鼠标点击按钮所产生的事件，经ActionListener接口触发一连串动作，再由actionPerformed()方法完成这些动作。e.getSource()返回事件发生的对象(名)e.getActionCommand()返回按扭名(动作事件的命令字符串)。4ActionListener接口publicvoidactionPerformed(ActionEvente)70Java的图形用户界面4 4图形用户界面例importjava.awt.*;importjava.awt.event.*;publicclassapublicstaticvoidmain(Stringargs)MyFrameform1=newMyFrame();classMyFrameextendsFrameMyFrame()super(窗口标题);setSize(200,100);setFont(newFont(TimesRoman,Font.BOLD,20);71Java的图形用户界面4 4图形用户界面例setLayout(newFlowLayout();Buttonb=newButton(close);add(b);b.addActionListener(newBprocess();setVisible(true);classBprocessimplementsActionListenerpublicvoidactionPerformed(ActionEvente)System.exit(0);72Java的图形用户界面4 4监听者类4某个类可以兼职也可以专职做这件事（实现监听者接口）。4一个类若实现一个接口，必须实现接口的全部方法。例如：ActionListener接口只有一个方法：voidactionPerformed(ActionEvente)4实现接口的类可以是：一般类内部类匿名类73Java的图形用户界面4 4事件处理有关问题4有哪些事件类(java.awt.event)？4每个事件类的监听者接口？4每个监听者接口规定的方法？4多方法的监听者接口的适配器（实现接口的抽象类）是什么？4组件的事件委托（注册）方法？74Java的图形用户界面4 4窗口事件4关闭窗口框时引发WindowEvent事件4委托addWindowListener(newWclose();4定义监听者类classWcloseimplementsWindowListenerpublicvoidwindowClosing(WindowEvente)System.exit(0);4WindowListener类有7个方法，必须都实现4WindowAdapter接收窗口事件的抽象适配器类，用空内容实现了WindowListener接口的所有方法4classWcloseextendsWindowAdapter75Java的图形用户界面4 4ActionEvent动作事件4引发原因：单击按扭，双击列表框中选项，选择菜单项，文本框中的回车4事件监听接口：ActionListener4接口方法：actionPerformed(ActionEvente)4组件注册该事件方法：addActionListener(监听者）76Java的图形用户界面4 4TextEvent文本事件4引发原因：文本框或文本区域内容改变4事件监听接口：TextListener4接口方法：textValueChanged(TextEvente)4组件注册该事件方法：addTextListener(监听者）77Java的图形用户界面4 4ItemEvent选择事件4引发原因：改变列表框中的选中项改变复选框选中状态改变下拉选单的选中项4事件监听接口：ItemListener4接口方法：itemStateChanged(ItemEvente)4组件注册该事件方法：addItemListener(监听者）78Java的图形用户界面4 4AdjustmentEvent调整事件4引发原因：操作滚动条改变滑块位置4事件监听接口：AdjustmentListener4接口方法：adjustmentValueChanged(AdjustmentEvente)4组件注册该事件方法：addAdjustmentListener(监听者）79Java的图形用户界面4 4KeyEvent事件4引发原因：敲完键（KEY-TYPED)按下键(KEY-PRESSED)释放键(KEY-RELEASE)4事件监听接口：KeyListener4接口方法：keyPressed(KeyEvente)键已被按下时调用keyReleased(KeyEvente)键已被释放时调用keyTyped(KeyEvente)键已被敲完时调用4KeyEvent方法：charch=e.getKeyChar();4事件监听适配器（抽象类）KeyAdapter4组件注册该事件方法：addKeyListener(监听者）80Java的图形用户界面4 4MouseEvent事件4引发原因:(鼠标作用在一个组件上)鼠标事件:鼠标键按下，鼠标键抬起，单击鼠标，鼠标光标进入一个组件，鼠标光标离开一个组件。鼠标移动事件:鼠标移动，鼠标拖动4鼠标事件监听接口1:MouseListener接受鼠标事件4该接口方法:mouseClicked(MouseEvente)mouseEntered(MouseEvente)鼠标光标进入一个组件mouseExited(MouseEvente)鼠标光标离开一个组件81Java的图形用户界面4 4MouseEvent事件（续）4鼠标事件监听适配器（抽象类）MouseAdapter4鼠标事件监听接口2:MouseMotionListener接受鼠标移动事件4该接口方法：mouseMoved(MouseEvente)鼠标光标在组件上移动mouseDragged(MouseEvente)用鼠标拖动一个组件4鼠标移动事件监听适配器MouseMotionAdapter4组件注册鼠标事件方法:addMouseListener(监听者）4组件注册鼠标移动事件方法:addMouseMotionListener(监听者）82Java的图形用户界面4 4MouseEvent事件（续）4MouseEvent方法e.getClickCount()=1单击=2双击Pointe.getPoint()取鼠标光标位置inte.getX()inte.getY()取鼠标光标位置e.getModifiers()=e.BUTTON1_MASK鼠标左键=e.BUTTON3_MASK鼠标右键83Java的图形用户界面4 4WindowEvent事件4引发原因：有关窗口操作引发的事件4事件监听接口WindowListener4接口方法windowActivated(WindowEvente)激活窗口windowClosed(WindowEvente)调用dispose方法关闭窗口后windowClosing(WindowEvente)窗口正在被关闭(试图利用窗口关闭按钮关闭窗口)windowDeactivated(WindowEvente)本窗口成为非活动窗口84Java的图形用户界面4 4WindowEvent事件(续）windowDeiconified(WindowEvente)窗口从最小化恢复为普通窗口windowIconified(WindowEvente)窗口变为最小化图标windowOpened(WindowEvente)窗口被打开成为可见时4接口适配器WindowAdapter4注册事件方法addWindowListener85Java的图形用户界面4 4FocusEvent事件4引发原因：组件获得焦点组件失去焦点4事件监听接口FocusListener4接口方法：focusGained(FocusEvente)组件获得焦点时调用focusLost(FocusEvente)组件失去焦点时调用4接口适配器：FocusAdapter4组件注册该事件方法：addFocusListener86Java的图形用户界面4 4TextEvent事件4引发原因：当组件（如文本框）文本改变时引发4事件监听接口：TextListener4接口方法：textValueChanged(TextEvente)4组件注册该事件方法：addTextListener87Java的图形用户界面4 4ComponentEvent事件4引发原因：当组件移动、改变大小、改变可见性时引发4事件监听接口：ComponentListener4接口方法：componentHidden(ComponentEvente)组件隐藏componentMoved(ComponentEvente)组件移动componentResized(ComponentEvente)组件改变大小componentShown(ComponentEvente)组件变为可见4接口适配器ComponentAdapter4组件注册该事件方法：addComponentListener88Java的图形用户界面4 4ContainerEvent事件4引发原因：当容器内增加或移走组件时引发4事件监听接口：ContainerListener4接口方法componentAdded(ContainerEvente)容器内加入组件componentRemoved(ContainerEvente)从容器中移走组件4接口适配器ContainerAdapter4容器注册该事件方法：addContainerListener89Java的图形用户界面4 4GUI标准组件4Label(标签)构造方法Labelmyl=newLabel(“标签内容”);Labela=newLabel(“information”);Labela=newLabel(“information”,Label.CENTER);方法a.setText(“新内容”);设置标签内容Stringa.getText()读取标签内容4Button(按钮)ButtonmyB1=newButton();ButtonmyB2=newButton(“Cancel”);90Java的图形用户界面4 4GUI标准组件4Checkbox(检测盒)创建时指定检测盒的标签Checkboxcb1=newCheckbox();Checkboxcb2=newCheckbox(“registered”);Checkboxcb3=newCheckbox(“registered”,true);Checkboxcb4=newCheckbox(“registered”,true,group);获取和设置检测盒的状态cb.setState(true);booleanb=cb.getState();91Java的图形用户界面4 4Checkbox组件4构造方法Checkbox(Stringlabel)Checkbox(Stringlabel,booleanstate)Checkbox(Stringlabel,booleanstate,CheckboxGroupgroup)4方法：booleangetState()setState(booleanstate)92Java的图形用户界面4 4GUI标准组件4CheckboxGroup(单选按钮组)单选按钮组是一组Checkbox的集合，是将一组Checkbox按扭组成单选按扭组件首先创建CheckboxGroup,再加入单个按钮4方法：CheckboxgetSelectedCheckbox()取得目前选取的复选框对象setSelectedCheckbox(Checkboxbox)设定目前选取的复选框对象93Java的图形用户界面4 4CheckboxGroup组件4例:setLayout(newGridLayout(3,1);CheckboxGroupcbg=newCheckboxGroup();Checkboxck1=newCheckbox(“one”,true,cbg);Checkboxck2=newCheckbox(“two”,false,cbg);Checkboxck3=newCheckbox(“three”,false,cbg);add(ck1);add(ck2);add(ck3);把CheckboxGroup加入容器时需要把其中的每个复选按钮逐个加入到容器中，而不能使用CheckboxGroup对象一次性地加入。94Java的图形用户界面4 4TextField行编辑框组件4构造方法(String,int)TextFieldf1=newTextField(30);TextFieldf1=newTextField(“abc”,30);建30个字符宽的行编辑框4方法：StringgetText()读文本框内容setText(“abc”)设置编辑框内容setEchoChar(charc)设置回显字符4TextComponent方法：setEditable(false);selectAll()95Java的图形用户界面4 4TextArea组件4构造方法(String,int,int)TextAreat1=newTestArea(10,45);建10行、45列的文本区域TextAreat1=newTestArea(“abc”,10,45);TextAreat1=newTestArea(“abc”,10,45，滚动条);4滚动条指定SCROLLBARS_BOTHSCROLLBARS_HORIZONTAL_ONLYSCROLLBARS_VERTICAL_ONLYSCROLLBARS_NONE4方法append(Stringstr)追加文本96Java的图形用户界面4 4List列表框4首先创建List对象，再调用add()方法加入List列表的各选项。列表可以实现多选多4构造方法List(introws,booleanmultipleMode)rows显示行数；multipleMode是否允许多选4方法：list1.add(“classA”);list1.add(“classB”);list1.add(“classC”,0);指定加入选项位置97Java的图形用户界面4 4List列表框4方法intgetSelectedIndex()取被选项索引intgetSelectedIndexes()取被选项索引（多选）StringgetSelectedItem()取被选项StringgetSelectedItems()取被选项（多选）voidselect(intindex)选中指定的项StringgetItem(intindex)按索引号取出该项intgetItemCount()取出项数StringgetItems()取出所有的项P.21198Java的图形用户界面4 4Choice下拉选单4下拉选单提供了多选一机制，创建下拉选单包括创建下拉选单对象和添加选项两个步骤 例：ChoiceColorChooser=newChoice();ColorChooser.add(Green);ColorChooser.add(Red);ColorChooser.add(Blue);StringgetSelectedItem()Green99Java的图形用户界面4 4Scrollbar滚动条4构造方法mySlider=newScrollbar(Scrollbar.HORIZONTAL,0,1,0,Integer.MAX_VALUE);滚动条方向滑块初始位置滑块尺寸滚动槽最小值滚动槽最大值4方法intgetValue()返回滑块当前位置setUnitIncrement(1);设置单位增量（点按两端箭头）setBlockIncrement(50);设置块增量（点按滚动槽）100Java的图形用户界面4 4菜单4菜单须依附于一个实现了MenuContainer接口的对象：Frame构建菜单结构：创建菜单的步骤创建菜单条（MenuBar）创建菜单（Menu），加入相应菜单条创建菜单项（MenuItem），加入相应菜单使菜单条依附于拥有它的对象:setMenuBar()4编写响应菜单操作的代码(ActionEvent)101Java的图形用户界面4 4菜单4创建菜单条（MenuBar)MenuBarm_MenuBar=newMenuBar();4创建菜单（Menu），加入菜单条MenumenuFile=newMenu(“File”);/创建菜单m_MenuBar.add(menuFile);/将菜单加入菜单条4创建菜单项（MenuItem),并加入相应菜单MenuItemf1=newMenuItem(“Open”),/创建各菜单项MenuItemf2=newMenuItem(Close),menuFile.add(f1);/加入菜单menuFile.add(f2);4将菜单条放入frame:myFrame.setMenuBar(m_MenuBar);4编写响应菜单操作的代码(ActionEvent)102Java的图形用户界面4 4例：MenuFrame.javaclassMenuFrameextendsFrameLabellb=newLabel(“herecomescommand”);/模拟菜单命令MenuBarm_MenuBar=newMenuBar();/创建菜单条MenumenuFile=newMenu(“File”);/创建菜单MenuItemfile=newMenuItem(“Open”),/创建各菜单项newMenuItem(Close),newMenuItem(Exit);MenuFrame()m_MenuBar.add(menuFile);/把菜单加入菜单条menuFile.add(file0);/把各菜单项加入菜单menuFile.add(file1);menuFile.add(file2);setMenuBar(m_MenuBar);/把菜单条加入Frame103Java的图形用户界面4 4setLayout(newFlowLayout();add(lb);/加入Label,用于输出菜单项命令ActionListenerml=newML();for(inti=0;i3;i+)/为每个菜单项注册监听者filei.addActionListener(ml);/此例多个菜单项/对应一个监听者,但实际编程时建议使用一对一结构addWindowListener(newWL();classMLimplementsActionListener/Action事件监听者类publicvoidactionPerformed(ActionEvente)lb.setText(e.getActionCommand();/输出菜单命令104Java的图形用户界面4 4文件对话框FileDialog(Frameparent,Stringtitle,intmode)4parent 对话框所属窗体4title对话框标题4mode对话框模式FileDialog.LOAD打开文件FileDialog.SAVE保存文件105Java的图形用户界面4 4文件对话框classMyFrameextendsFrameMyFramegetMyFrameIns()returnthis;子类方法代码片段：FileDialogf=newFileDialog(getMyFrameIns(),open,FileDialog.SAVE);f.setVisible(true);Stringfname=f.getDirectory()+f.getFile();ig=getToolkit().getImage(fname);106Java的图形用户界面4 4课后作业4P276.第10、11、12、13、14题107Java的图形用户界面