图形用户界面设计.ppt
《图形用户界面设计.ppt》由会员分享,可在线阅读,更多相关《图形用户界面设计.ppt(107页珍藏版)》请在三一办公上搜索。
1、图形用户界面设计,Java的图形用户界面,2,主要内容,Java的GUI简介 自定义图形设计图形、文字、图象 Java的标准组件容器和组件GUI的布局 事件处理,Java的图形用户界面,3,图形用户界面(GUI),字符界面用字符串、命令行的方式与用户交互图形用户界面:Graphics User Interface用直观的图形来表示数据用直观、方便的GUI标准组件来接收命令GUI组成成分的标准化使用图形的方式借助菜单、按钮等标准界面元素和鼠标操作,来帮助用户方便地向计算机系统发出命令,启动操作,并将系统运行的结果同样以图形的方式显示给用户。,Java的图形用户界面,4,用户界面设计原则,控制权在
2、用户界面与操作的风格一致性宽容(容错)性简洁与美观并重,Java的图形用户界面,5,图形用户界面简介,图形用户界面的构成容器:布局、安排标准组件用户自定义成分设计&实现图形用户界面的工作创建GUI各组成成分,并安排从属位置关系,根据具体需要对其进行排序,构成完整外观。定义GUI各成分对不同事件的响应,实现与用户的交互功能。,Java的图形用户界面,6,界面构成,容器,用户自定义成分,容器是用来组织其他界面成分和元素的单元。一般一个图形用户界面对应一个复杂容器。如一窗口标准组件是图形用户界面的最小单位,它里面不再包含其他的成分。如单选按钮,文本框,菜单用户自定义成分是指编程人员根据用户需要设计一
3、些用户自定义的图形界面成分。如绘制几何图形,标准组件,Java的图形用户界面,7,界面元素,容器是用来组织其他界面成分和元素的单元。可以形成容器的层次,构筑复杂结构Window(Frame、Applet、Dialog)组件是图形用户界面的基本单位,它里面不再包含其他的成分。GUI组件是图形用户界面标准化的结果。常用的组件有:选择类的:单选按钮、复选按钮、下拉列表;文字处理类的:文本框、文本区域 命令类的:按钮、菜单等GUI组件的作用是完成与用户的交互。包括接收用户的命令、文本或选择输入,向用户显示一段文本或一个图形等。,Java的图形用户界面,8,界面元素,使用组件通常需要如下的步骤创建某组件
4、类的对象,指定其大小等属性。使用某种布局策略,将该组件对象加入到某个容器中的某指定位置处。将该组件对象注册给它所能产生的事件对应的事件监听者,重载事件的处理方法,实现利用该组件对象与用户交互的功能。用户自定义成分显示文字、绘制图形、显示图象不能像标准组件一样被系统识别和承认,只起装饰作用。不能响应用户的动作,不具有交互功能。,Java的图形用户界面,9,图形用户界面(GUI),Java的图形用户界面编程:为方便图形用户界面的开发,设计了专门的类库 来生成各种标准图形界面元素和处理图形界面的 各种事件,这个用来生成图形界面的类库就是java.awt包。AWT是abstract window to
5、olkit抽象窗 口工具集的缩写。AWT类库中的各种操作被定义在一个窗口中进行,开发人员用AWT开发出的图形用户界面可以适用于所有的平台系统。,Java的图形用户界面,10,AWT包,Abstract Window Toolkit(抽象窗口工具集)提供各种构成GUI的标准构件。AWT类库中的各种操作被定义在一个窗口中进行的。抽取不同软硬件平台中所实现的窗口的公共特性。依赖于具体平台系统实现:显示效果可能不同。提供与机器无关的基本GUI标准组件选择类组件:单选按钮、复选框、下拉选单、列表框文字处理类组件:标签、文本框、编辑框。命令类组件:按钮、工具栏、菜单等。,Java的图形用户界面,11,从一
6、个简单窗口开始,创建GUI应用程序Frame必不可少 它是带标题的顶层窗口,是构建应用程序图形界面的基础,它为应用程序实现人机交互提供了对话窗口先来建一个空的窗口应用:Empty.java注意:一定要处理关闭窗口的事件,Java的图形用户界面,12,import java.awt.*;/must import to use GUI/must extends Frame in an applicationpublic class Empty extends Frame/暂时采用1.0.2的事件处理方法,关闭窗口 public boolean handleEvent(Event evt)/根据Ev
7、ent类中参数evt的id值来判断发生事件的种类 if(evt.id=Event.WINDOW_DESTROY)System.exit(0);/return的返回值表示将余下的事件处理交给handleEvent()的父/类处理,从而保证对事件的正常处理 return super.handleEvent(evt);public static void main(String args)Frame f=new Empty();f.setSize(300,200);f.setVisible(true);,Java的图形用户界面,13,绘制用户自定义成分,用户自定义成分属于构成GUI的非标准部分无法响
8、应用户事件一般仅仅起背景装饰、输出效果突出的作用Java中的用户自定义成分显示文字绘制图形显示图片,Java的图形用户界面,14,绘制用户自定义成分,一般在容器中(窗口)或画布上绘制。利用Java.awt类库中的类及其方法绘制用户自定义的图形界面成分。Graphics类包含很多绘制图形和文字的方法。首先要获得Graphics类的实例,然后利用其方法绘制。Graphics类的实例一般作为相关方法的参数传递进来:paint(Graphics g)Java程序图形界面的 坐标设置,Java的图形用户界面,15,绘制图形及其相关方法,drawLine(x1,y1,x2,y2)/直线drawRect(x
9、,y,w,h)/矩形drawOval(x,y,w,h)/圆或椭圆fillOval(x,y,w,h)/实心圆或椭圆drawPolygon(X坐标数组,Y坐标数组,顶点个数)/画多边形drawArc(x,y,w,h,开始角度,弧度角度)setColor(Color c)/设置颜色setFont(Font f)/设置字体getColor()getFont(),Java的图形用户界面,16,绘制图形及其相关方法,从(x1,y1)到(x2,y2)画直线drawLine(x1,y1,x2,y2)参数均为int画弧线drawArc(x,y,w,h,)参数均为intx,y为绘制弧形的左上角的坐标;w,h为弧形
10、的宽度和高度;为弧形的起始角,为弧形的弧度,为正,表顺时针方向;为负,表逆时针方向。以(x,y)为左上角、w为宽度、h为高度画矩形drawRect(x,y,w,h)参数均为intfillRect(x,y,w,h)、clearRect(x,y,w,h),Java的图形用户界面,17,绘制图形及其相关方法,画圆或椭圆drawOval(x,y,w,h)x,y为绘制圆或椭圆的左上角的坐标,w,h确定了 椭圆的宽度和高度画实心圆或椭圆fillOval(x,y,w,h)画多边形drawPolygon(X坐标数组,Y坐标数组,顶点个数)P.185,Java的图形用户界面,18,绘制图形及其相关方法,例子:s
11、anmao.java,Java的图形用户界面,19,/画头部,椭圆方法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,
12、92,15,30);g.copyArea(25,92,15,30,136,0);/拷贝某区域的图形至另一区域./画身体,多边形方法fillPolygong.fillPolygon(polygon_x,polygon_y,polygon_pt_num);,Java的图形用户界面,20,显示文字,字体显示效果类:Font 一个Font类的对象表示了一种字体显示效果,包括字体类型、风格和字号。Font mf=new Font(String 字体,int 风格,int 字号);字体:TimesRoman,Courier,Arial等风格:三个常量Font.PLAIN,Font.BOLD,Font.IT
13、ALIC字号:字的大小(磅数)设置当前使用的字体:setFont(Font fn)获取当前使用的字体:getFont()例:UseFonts.java,Java的图形用户界面,21,String FontName=TimesRoman,Courier,Arial;int FontStyle=Font.PLAIN,Font.BOLD,Font.ITALIC;String StyleName=PLAIN,BOLD,ITALIC;public void paint(Graphics g)for(int i=0;i3;i+)for(int j=0;j3;j+)/set a new font and d
14、raw a string with the new font g.setFont(new Font(FontNamei,FontStylej,12);g.drawString(ABEXYZ+FontNamei+StyleNamej,10,20*(i*3+j+2);/end of paint,Java的图形用户界面,22,paint()与update(),某组件的paint()和 update()为系统自动调用的有关图 形绘制的方法,不可人为编程调用;但可编程重新 定义其操作内容使用repaint()方法可以触发update()方法,Java的图形用户界面,23,显示图象,图形与图象,java支
15、持gif和jpeg格式保存二进制图象的java.awt.Image类获取Image对象的方法getImage(图象文件所在的URL)getImage(图象文件所在的URL,图象文件名)Applet类以及java.awt.Toolkit中均有方法的定义注意:在application中只能使用Toolkit,而在Applet中,两者均可使用,Java的图形用户界面,24,显示图象,在applet小程序中,可使用Applet类的getImage方法获得图象。Image ig=getImage()而在application中就只能使用ToolKit类的getImage方法:Image ig=getTo
16、olkit().getImage(“文件名”);然后用Graphics类的drawImage方法显示Image对象。,Java的图形用户界面,25,显示图象,显示图象的方法 drawImage(Image 对象,x,y,背景色,ImageObserver);java.awt.Graphics类中定义了此方法第一个参数是保存图像数据的Image对象。第二、三个参数是图像的左上角坐标,它们决定了图像在容器中的显示位置。ImageObserver为一个接口,java的组件类实现了此接口,此处可理解为观察/显示Image对象容器,编程时一般可使用this,用于提示图象是否加载完成,Java的图形用户界
17、面,26,显示图象,表示颜色的类Color 显示的字符串或图形的颜色可以用Color类的对象来控制,每个Color 对象代表一种颜色,用户可以直接使用Color类中定义好的颜色常量,也可以通过调配红、绿、蓝三色的比例创建自己的Color对象Color(red,green,blue)来创建非缺省色调用Graphics对象的setColor()方法可把当前的缺省颜色改成新建的颜色 Color blueColor=new Color(0,0,255);g.setColor(blueColor);P.189,Java的图形用户界面,27,Color类,构造方法1(设置颜色)Color c=new Co
18、lor(intred,intgreen,intblue)范围:0255 new Color(200,200,200)new Color(255,0,100)构造方法2 Color c=new Color(floatred,float green,float blue)范围:0.0 1.0Color类定义了13种颜色常量值 Color.black,Color.blue,Color.gray,Color.red.对GUI的组件有四种与颜色相关的方法来设置和获取其背景色和前景色:setBackground(Color c);getBackground();setForeground();getFor
19、eground();,Java的图形用户界面,28,例:DrawMyImage.java public class DrawMyImage extends Frame/获得Toolkit实例的方法getDefaultToolkit()Toolkit toolkit=Toolkit.getDefaultToolkit();Image myImage;public DrawMyImage()/获得Image对象,图象文件在当前目录下时 myImage=toolkit.getImage(Invntory.gif);/在paint方法中绘制图象 public void paint(Graphics g
20、)g.drawImage(myImage,0,40,Color.orange,this);.,Java的图形用户界面,29,GUI标准组件概述,构建程序的图形用户界面的主要任务有两个创建各界面组件并排列成图形用户界面的外观定义这些组件对不同事件的影响从而完成图形用户界面功能组成图形用户界面的成分有三类用户自定义类容器:是能够容纳并排列其他组件的对象组件:放置在容器中的对象在Java中,容器和组件是由AWT包中的对象来代表,这些对象间的层次关系如下图:,Java的图形用户界面,30,AWT类层次关系图,Java的图形用户界面,31,GUI标准组件概述,基本组件被安放在容器中的某位置,用来完成一种
21、具体的与用户交互的功能,使用基本组件一般包括如下的步骤创建某种基本组件类的新对象,指定该对象的属性 比如:外观、大小等将该组件对象加入到某个容器的合适位置创建该组件对象的监听者,即实现以该组件为事件源的事件对应的监听者接口,也可以使现有的类实现该接口成为监听者。将该组件对象注册给此监听者,并在监听者内部实现监听者接口中定义的方法,对该组件可能引发的事件加以处理,定义新加入组件对象的交互性界面功能。比如:接收用户输入的文本、在屏幕显示输出等,Java的图形用户界面,32,GUI标准组件,Component:所有组件和容器的抽象父类显示功能:paint(),update(),repaint()显示
22、效果控制:字体、颜色、位置、尺寸图象处理:一般利用Canvas和Container来显示图像事件处理机制(java 1.1):addXXXListener()removeXXXListener(),Java的图形用户界面,33,Component类,可显示在屏幕上的图形对象,可与用户交互。是所有组件和容器的抽象父类,其中定义了一些每个 容器和组件都可能用到的方法。add(PopupMenupopup)在组件上加入一弹出菜单addFocusListener(FocusListenerl)将发生在本组件上的事件注册给监听者,以进行事件处理。setSize(intwidth,intheight)设置
23、组件尺寸repaint(int x,int y,intwidth,intheight)重画组件setFont(Fontf)设置组件字体setBackground(Colorc)设置组件背景色setVisible(boolean b)设置组件是否可见,Java的图形用户界面,34,GUI标准组件,简单构件:人机交互的基本工具(控制)Button,Checkbox,Label等TextComponent(TextArea,TextField)Canvas复杂构件:Container(安放排列其他构件的容器)PanelWindow,Java的图形用户界面,35,Container(容器),排列其中包
24、容的构件定位布局策略 set/getLayout()包容其他基本构件增加构件:add()删除构件:remove()控制是否显示容器及其中组件setVisible(true/false),Java的图形用户界面,36,Container容器组件,Window 无边框、菜单的空白窗口。不需要其他组件支撑,独立显示。Frame:用于Application,含边框、标题和菜单的独立窗口Dialog:依赖于 Frame的非独立窗口。没有菜单条,不能 改变大小。Panel(面板)属于无边框容器。必须放在Window组件中(或Web浏览器窗口)才能显示。它为一矩形区域,在其中可摆放其他组件,可以有自己的布局
25、管理器。无边框容器包括Panel和Applet。其中Applet为Panel的子类基本方法add(Component comp)将指定组件放到容器中getComponent(int index)获取指定序号的组件remove(Componentcomp)删除指定组件setLayout(LayoutManagermgr)设置容器布局,Java的图形用户界面,37,容器的组件布局,布局管理器(layout manager)用于控制组件在容器中的布局负责确定组件在容器中的位置和大小。调用容器的setLayout(布局管理器对象)方法,为容器指定某种布局。当容器需要定位组件和确定组件大小时,就会给布局
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 图形 用户界面 设计
链接地址:https://www.31ppt.com/p-5341500.html