图形用户界面设计ppt课件

1、图形用户界面设计4 4主要内容4 Java的GUI简介4 自定义图形设计4图形、文字、图象4 Java的规范组件4容器和组件4GUI的规划4 事件处置4 4图形用户界面GUI4字符界面4用字符串、命令行的方式与用户交互4图形用户界面:Graphics User Interface4用直观的图形来表示数据4用直观、方便的GUI规范组件来接纳命令4GUI组成成分的规范化4运用图形的方式借助菜单、按钮等规范界面元素和鼠4标操作，来协助用户方便地向计算机系统发出命令，4启动操作，并将系统运转的结果同样以图形的方式显4示给用户。4 4用户界面设计原那么4控制权在用户4界面与操作的风格一致性4宽容容错性4

2、简约与美观并重4 4图形用户界面简介4图形用户界面的构成4容器：规划、安排4规范组件4用户自定义成分4设计&实现图形用户界面的任务4创建GUI各组成成分，并安排从属位置关系，根据详细需求对其进展排序，构成完好外观。4定义GUI各成分对不同事件的呼应，实现与用户的交互功能。4 4界面构成容器用户自定义成分v容器是用来组织其他界面成分和元素的单元。普通一个图形用户界面对应一个复杂容器。如一窗口v规范组件是图形用户界面的最小单位,它里面不再包含其他的成分。如单项选择按钮,文本框,菜单v用户自定义成分是指编程人员根据用户需求设计一些用户自定义的图形界面成分。如绘制几何图形规范组件4 4界面元素

3、4容器是用来组织其他界面成分和元素的单元。4可以构成容器的层次，构筑复杂构造4WindowFrame、Applet、Dialog 4组件是图形用户界面的根本单位，它里面不再包含其他的成分。4GUI组件是图形用户界面规范化的结果。常用的组件有:4 选择类的: 单项选择按钮、复选按钮、下拉列表； 4 文字处置类的: 文本框、文本区域4 命令类的: 按钮、菜单等4GUI组件的作用是完成与用户的交互。包括接纳用户的命令、文本或选择输入，向用户显示一段文本或一个图形等。4 4界面元素4运用组件通常需求如下的步骤4创建某组件类的对象，指定其大小等属性。4运用某种规划战略，将该组件对象参与到某个容器中的某指

4、定位置处。4将该组件对象注册给它所能产生的事件对应的事件监听者，重载事件的处置方法，实现利用该组件对象与用户交互的功能。4用户自定义成分4显示文字、绘制图形、显示图象4不能像规范组件一样被系统识别和成认，只起装饰作用。4不能响运用户的动作，不具有交互功能。4 4图形用户界面GUI4Java的图形用户界面编程：4为方便图形用户界面的开发，设计了专门的类库 来生成各种规范图形界面元素和处置图形界面的 各种事件，这个用来生成图形界面的类库就是java.awt包。AWT是abstract window toolkit笼统窗 口工具集的缩写。4AWT类库中的各种操作被定义在一个窗口中进展，开发人员用AW

5、T开发出的图形用户界面可以适用于一切的平台系统。4 4AWT包4Abstract Window Toolkit(笼统窗口工具集)4提供各种构成GUI的规范构件。4AWT类库中的各种操作被定义在一个窗口中进展的。4抽取不同软硬件平台中所实现的窗口的公共特性。4依赖于详细平台系统实现：显示效果能够不同。4提供与机器无关的根本GUI规范组件4选择类组件：单项选择按钮、复选框、下拉选单、4 列表框4文字处置类组件：标签、文本框、编辑框。4命令类组件：按钮、工具栏、菜单等。4 4从一个简单窗口开场4创建GUI运用程序4Frame必不可少4 它是带标题的顶层窗口,是构建运用程序图形界面的根底,它为运用程序

6、实现人机交互提供了对话窗口4先来建一个空的窗口运用: Empty.java4留意：一定要处置封锁窗口的事件4 4import 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) /根据根据Event类中参数类中参数evt的的id值来判别发惹事件的种值来判别发惹事件的种类类 if(ev

7、t.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); 4 4绘制用户自定义成分4用户自定义成分属于构成GUI的非规范部分4无

8、法响运用户事件4普通仅仅起背景装饰、输出效果突出的作用4Java中的用户自定义成分4显示文字4绘制图形4显示图片4 4绘制用户自定义成分4普通在容器中(窗口)或画布上绘制。4利用Java.awt类库中的类及其方法绘制用户自定义的图形界面成分。 4Graphics类包含很多绘制图形和文字的方法 。4首先要获得Graphics类的实例，然后利用其方法绘制。4Graphics类的实例普通作为相关方法的参数传送进来：4 paint(Graphics g)4Java程序图形界面的4 坐标设置原点(0,0)X轴Y轴4 4绘制图形及其相关方法4drawLine(x1,y1,x2,y2) /直线4drawRe

9、ct(x,y,w,h) /矩形4drawOval(x,y,w,h) /圆或椭圆4fillOval(x,y,w,h) /实心圆或椭圆4drawPolygon(X坐标数组，Y坐标数组，顶点个数)4 /画多边形4drawArc (x,y,w,h,开场角度，弧度角度) 4setColor(Color c) /设置颜色4setFont(Font f) /设置字体4getColor()4getFont()4 4绘制图形及其相关方法4从(x1,y1)到(x2,y2)画直线4drawLine(x1,y1,x2,y2) 参数均为int4画弧线drawArc(x,y,w,h,) 参数均为int4x,y为绘制弧形的

10、左上角的坐标； w,h为弧形的宽度和高度；为弧形的起始角，为弧形的弧度， 为正，表顺时针方向； 为负，表逆时针方向。4以(x,y)为左上角、w为宽度、h为高度画矩形4drawRect(x,y,w,h) 参数均为int4fillRect(x,y,w,h)、clearRect(x,y,w,h)4 4绘制图形及其相关方法4画圆或椭圆4drawOval(x,y,w,h)4x,y为绘制圆或椭圆的左上角的坐标，w,h确定了 椭圆的宽度和高度4画实心圆或椭圆4fillOval(x,y,w,h)4画多边形4drawPolygon(X坐标数组，Y坐标数组，顶点个数)4 P.1854 4绘制图形及其相关方法例子：

11、 sanmao.java4 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)

12、;g.copyArea(25,92,15,30,0); /拷贝某区域的图形至另一区域./画身体,多边形方法fillPolygong.fillPolygon(polygon_x,polygon_y,polygon_pt_num);4 4显示文字4字体显示效果类：Font4 一个Font类的对象表示了一种字体显示效果，包括字体类型、风格和字号。4 Font mf = new Font(String 字体，int 风格，int 字号);4字体：TimesRoman, Courier, Arial等4风格：三个常量4Font.PLAIN, Font.BOLD, Font.ITALIC4字号：字的大小磅

13、数4设置当前运用的字体：setFont(Font fn)4获取当前运用的字体：getFont()4例：UseFonts.java4 4String 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; j1) /双击时去除向量中各点m_vLocs.remove

14、AllElements(); else /单击时在向量中添加一点m_vLocs.addElement(e.getPoint(); repaint(); /重新绘制一次 class move extends MouseMotionAdapter/鼠标挪动监听者类public void mouseMoved(MouseEvent e) /呼应挪动 m_CursorLoc = new Point(e.getX(),e.getY(); repaint(); /重新绘制一次 4 4事件类4ActionEvent类：属于动作事件，包括：点击按钮；双击一个列表中的选项;选择菜单项；在文本框中按回车。最典型的

15、例子是：鼠标点击按钮所产生的事件，经ActionListener接口触发一连串动作，再由actionPerformed()方法完成这些动作。4e.getSource() 前往事件发生的对象(名)4e.getActionCommand() 前往按扭名(动作事 4 件的命令字符串)。4ActionListener 接口4public void actionPerformed(ActionEvent e)4 4图形用户界面例import java.awt.*;import java.awt.event.*;public class a public static void main(String a

16、rgs) MyFrame form1 = new MyFrame(); class MyFrame extends Frame MyFrame() super(窗口标题); setSize(200,100); setFont(new Font(TimesRoman,Font.BOLD,20);4 4图形用户界面例 setLayout(new FlowLayout(); Button b = new Button(close); add(b); b.addActionListener(new Bprocess(); setVisible(true); class Bprocess impleme

17、nts ActionListener public void actionPerformed(ActionEvent e) System.exit(0); 4 4监听者类4某个类可以兼职也可以专职做这件事实现监听者接口。4一个类假设实现一个接口，必需实现接口的全部方法。4 例如：ActionListener接口只需一个方法：4 void actionPerformed(ActionEvent e) 4实现接口的类可以是：4普通类4内部类4匿名类4 4事件处置有关问题4有哪些事件类 (java.awt.event) ？ 4每个事件类的监听者接口？4每个监听者接口规定的方法？4多方法的监听者接口的

18、适配器实现接口的笼统类是什么？4组件的事件委托注册方法？4 4窗口事件4封锁窗口框时引发 WindowEvent事件4委托 addWindowListener(new Wclose();4定义监听者类4 class Wclose implements WindowListener 4 public void windowClosing(WindowEvent e) 4 System.exit(0); 4WindowListener类有7 个方法，必需都实现4WindowAdapter 接纳窗口事件的笼统适配器类，用空内容实现了WindowListener接口的一切方法4class Wclose

19、 extends WindowAdapter 4 4ActionEvent动作事件4引发缘由：4单击按扭，双击列表框中选项，选择菜单项，文本框中的回车4事件监听接口：ActionListener4接口方法：4actionPerformed(ActionEvent e)4组件注册该事件方法：4addActionListener(监听者 4 4TextEvent文身手件4引发缘由：4文本框或文本区域内容改动4事件监听接口：TextListener4接口方法：4textValueChanged(TextEvent e)4组件注册该事件方法：4addTextListener(监听者 4 4ItemEv

20、ent选择事件4引发缘由：4改动列表框中的选中项4改动复选框选中形状4改动下拉选单的选中项4事件监听接口：ItemListener4接口方法：4itemStateChanged(ItemEvent e)4组件注册该事件方法：4addItemListener(监听者 4 4AdjustmentEvent调整事件4引发缘由：4操作滚动条改动滑块位置4事件监听接口：AdjustmentListener4接口方法：4adjustmentValueChanged(AdjustmentEvent e)4组件注册该事件方法：4addAdjustmentListener(监听者 4 4KeyEvent事件4引

21、发缘由：4敲完键KEY-TYPED)4按下键 (KEY-PRESSED)4释放键 (KEY-RELEASE)4事件监听接口：KeyListener4接口方法：4keyPressed(KeyEvent e) 键已被按下时调用4keyReleased(KeyEvent e) 键已被释放时调用4keyTyped(KeyEvent e) 键已被敲完时调用4KeyEvent方法：char ch = e.getKeyChar(); 4事件监听适配器笼统类KeyAdapter4组件注册该事件方法：4addKeyListener(监听者 4 4MouseEvent事件4引发缘由: (鼠标作用在一个组件上)4鼠

22、标事件: 鼠标键按下，鼠标键抬起，单击鼠标 ，4 鼠标光标进入一个组件，鼠标光标分开一个组件。4鼠标挪动事件: 鼠标挪动，鼠标拖动 4鼠标事件监听接口1:4MouseListener 接受鼠标事件4该接口方法:4mouseClicked(MouseEvent e) 4mouseEntered(MouseEvent e) 鼠标光标进入一个组件4mouseExited(MouseEvent e) 鼠标光标分开一个组件4 4MouseEvent事件续4鼠标事件监听适配器笼统类MouseAdapter4鼠标事件监听接口2:4MouseMotionListener 接受鼠标挪动事件4该接口方法：4mou

23、seMoved(MouseEvent e) 鼠标光标在组件上挪动4mouseDragged(MouseEvent e) 用鼠标拖动一个组件4鼠标挪动事件监听适配器 MouseMotionAdapter4组件注册鼠标事件方法:4addMouseListener(监听者 4组件注册鼠标挪动事件方法:4addMouseMotionListener(监听者 4 4MouseEvent事件续4MouseEvent方法4e.getClickCount() =1 单击 =2 双击4Point e.getPoint() 取鼠标光标位置4int e.getX() int e.getY() 取鼠标光标位置4e.g

24、etModifiers() = e.BUTTON1_MASK 鼠标左键4 = e.BUTTON3_MASK 鼠标右键4 4WindowEvent事件4引发缘由：4有关窗口操作引发的事件4事件监听接口WindowListener4接口方法4windowActivated(WindowEvent e) 4 激活窗口4windowClosed(WindowEvent e) 4 调用dispose方法封锁窗口后4windowClosing(WindowEvent e)4 窗口正在被封锁(试图利用窗口封锁按钮封锁窗口)4windowDeactivated(WindowEvent e) 4 本窗口成为非活

25、动窗口4 4WindowEvent事件(续 windowDeiconified(WindowEvent e) 窗口从最小化恢复为普通窗口 windowIconified(WindowEvent e) 窗口变为最小化图标 windowOpened(WindowEvent e) 窗口被翻开成为可见时 接口适配器 WindowAdapter 注册事件方法 addWindowListener4 4FocusEvent事件4引发缘由：4组件获得焦点4组件失去焦点4事件监听接口 FocusListener4接口方法：4focusGained(FocusEvent e) 组件获得焦点时调用4focusLos

26、t(FocusEvent e) 组件失去焦点时调用4接口适配器：FocusAdapter4组件注册该事件方法：addFocusListener4 4TextEvent事件4引发缘由：4当组件如文本框文本改动时引发4事件监听接口：TextListener4接口方法：4textValueChanged(TextEvent e)4组件注册该事件方法：4addTextListener4 4ComponentEvent 事件4引发缘由：4当组件挪动、改动大小、改动可见性时引发4事件监听接口：ComponentListener4接口方法：4componentHidden(ComponentEvent e)

27、 组件隐藏4componentMoved(ComponentEvent e) 组件挪动4componentResized(ComponentEvent e) 组件改动大小4componentShown(ComponentEvent e) 组件变为可见4接口适配器 ComponentAdapter4组件注册该事件方法：4addComponentListener4 4ContainerEvent 事件4引发缘由：4当容器内添加或移走组件时引发4事件监听接口：ContainerListener4接口方法4componentAdded(ContainerEvent e) 容器内参与组件4compone

28、ntRemoved(ContainerEvent e) 从容器中移走 4 组件4接口适配器 ContainerAdapter4容器注册该事件方法：4addContainerListener4 4GUI规范组件4Label(标签)4构造方法4 Label myl = new Label(“标签内容);4 Label a = new Label(“information);4 Label a = new Label(“information, Label.CENTER);4方法4 a.setText(“新内容); 设置标签内容4 String a.getText() 读取标签内容4Button(按

29、钮)4Button myB1 = new Button();4Button myB2 = new Button(“Cancel);4 4GUI规范组件4Checkbox(检测盒)4创建时指定检测盒的标签4Checkbox cb1 = new Checkbox ();4Checkbox cb2 = new Checkbox (“registered);4Checkbox cb3 = new Checkbox (“registered, true);4Checkbox cb4 = new Checkbox (“registered, true, group);4获取和设置检测盒的形状4cb.set

30、State(true);4boolean b=cb.getState();4 4Checkbox组件4构造方法4Checkbox(String label)4Checkbox(String label, boolean state)4Checkbox(String label, boolean state, 4 CheckboxGroup group ) 4方法：4boolean getState()4setState(boolean state)4 4GUI规范组件4CheckboxGroup(单项选择按钮组)4单项选择按钮组是一组Checkbox的集合，是将一组4 Checkbox 按扭组

31、成单项选择按扭组件4首先创建CheckboxGroup,再参与单个按钮4方法：4Checkbox getSelectedCheckbox()4 获得目前选取的复选框对象4setSelectedCheckbox(Checkbox box)4 设定目前选取的复选框对象4 4CheckboxGroup组件4例: setLayout(new GridLayout(3, 1); 4 CheckboxGroup cbg = new CheckboxGroup();4 Checkbox ck1 = new Checkbox(“one, true, cbg );4 Checkbox ck2 = new Che

32、ckbox(“two, false, cbg );4 Checkbox ck3 = new Checkbox(“three, false, cbg );4 add(ck1);4 add(ck2);4 add(ck3);4 把CheckboxGroup参与容器时需求把其中的每个复选按钮逐个参与到容器中，而不能运用CheckboxGroup对象一次性地参与。4 4TextField行编辑框组件4构造方法(String, int) 4TextField f1 = new TextField(30);4TextField f1 = new TextField(“abc,30);4建30个字符宽的行编辑

33、框4方法：4 String getText() 读文本框内容4 setText(“abc) 设置编辑框内容4 setEchoChar(char c) 设置回显字符4TextComponent 方法：4setEditable(false); 4selectAll() 4 4TextArea组件4构造方法(String, int , int) 4TextArea t1 = new TestArea(10,45);4 建10行、45列的文本区域4TextArea t1 = new TestArea(“abc,10,45);4TextArea t1 = new TestArea(“abc,10,45，

34、滚动条);4滚动条指定4SCROLLBARS_BOTH 4SCROLLBARS_HORIZONTAL_ONLY4SCROLLBARS_VERTICAL_ONLY4SCROLLBARS_NONE4方法4append(String str) 追加文本4 4List 列表框4首先创建List对象，再调用add ()方法参与List列表的各选项。列表可以实现多项选择多4构造方法4List(int rows, boolean multipleMode) 4rows 显示行数 ； multipleMode 能否允许多项选择4方法：4list1.add (“class A);4list1.add (“cla

35、ss B);4list1.add (“class C , 0); 指定参与选项位置4 4List 列表框4方法4int getSelectedIndex() 取被选项索引4int getSelectedIndexes() 取被选项索引多项选择4String getSelectedItem() 取被选项4String getSelectedItems() 取被选项多项选择4void select(int index) 选中指定的项4String getItem(int index) 按索引号取出该项4int getItemCount() 取出项数4String getItems( ) 取出一切的

36、项4 P.2114 4Choice下拉选单4下拉选单提供了多项选择一机制，创建下拉选单包括创建下拉选单对象和添加选项两个步骤4 例： 4 Choice ColorChooser = new Choice(); ColorChooser.add(Green); 4 ColorChooser.add(Red); 4 ColorChooser.add(Blue); 4 String getSelectedItem() Green4 4Scrollbar 滚动条4构造方法4 mySlider = new Scrollbar(Scrollbar.HORIZONTAL , 4 0 , 1 , 0 , In

37、teger.MAX_VALUE); 4滚动条方向4滑块初始位置4滑块尺寸4滚动槽最小值4滚动槽最大值4方法4int getValue() 前往滑块当前位置4setUnitIncrement(1); 设置单位增量点按两端箭头4setBlockIncrement(50); 设置块增量点按滚动槽4 4菜单4菜单须依靠于一个实现了MenuContainer接口4 的对象：Frame4 构建菜单构造：创建菜单的步骤4创建菜单条MenuBar4创建菜单Menu，参与相应菜单条4创建菜单项MenuItem，参与相应菜单4使菜单条依靠于拥有它的对象:setMenuBar()4编写呼应菜单操作的代码(ActionEvent)4 4菜单4创建菜单条MenuBar)4 MenuBar m_MenuBar = new MenuBar(); 4创建菜单Menu，参与菜单条4 Menu menuFile = new Menu(“File); /创建菜单4 m_MenuBar.add(menuFile); /将菜单参与菜单条4创建菜单项MenuItem) , 并参与相应菜单4 MenuItem f1= new MenuItem(“Open), /创建各菜单项4 MenuItem f2 = new MenuItem(Close),4 menuFile.add(f1); /参与菜单4