7-图形用户界面设计与实现

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,图形用户界面的设计与实现,教材第,7,章,Java GUI,对比,容器与布局,标准组件,事件处理,窗体,JAVA,中常见的图形用户界面组件库,1.AWT(Abstract Windows Toolkit),是由,JAVA,通过对操作系统的自身的界面组件来完成界面渲染。,库中的组件种类比较少、速度比较快。,2.Swing,界面组件的渲染完全由,JAVA,自身完成,库中组件种类比较丰富、速度上稍有欠缺,3.SWT,是由,Eclipse,项目组开发的一套类似与,AWT,的组件库,AWT,中的组件构成,Component,Container,Panel,Applet,Window,Frame,Dialog,Button,TextField,TextArea,TextComponent,Checkbox,MenuComponent,Menu,MenuItem,MenuBar,其他组件,独立,不独立,容器,1.,容器中提供了一个,add(),方法用于将组件添加到容器中。,2.,两个主要的容器类型：,Window,和,Panel,3.,一个,Window,是一个可以显示屏幕上自由浮动的窗口。不需要其他组件支撑，独立显示。,4.Panel,这个容器必须存在于其他容器中才能显示。,容器,基本方法,add(Component comp),将指定组件放到容器中,add(Component comp,，,int index),remove(Componentcomp),删除指定组件,setLayout(LayoutManagermgr),设置容器布局,paint,画容器（及其上面的组件）,组件在容器中的定位,1.,通过采用相应的布局管理器来定位容器中的组件。,2.,禁用容器的布局管理器,setLayout(null);,通过调用组件自身的,setLocation(),：组件定位。,setSize(),：定义大小。,等方法来完成对组件的定位,界面构成,容器,标准,组件,用户自定义成分,Font,类,java.awt.Font,设计字体显示效果（创建字体对象）,Font fn = new Font(String,字体，int 风格，int 字号,);,字体：,TimesRoman, Courier, Arial,等,风格：三个常量,Font.PLAIN, Font.BOLD, Font.ITALIC,字号：字的大小（磅数）,使用字体对象 如设置某组件当前使用的字体：,setFont(Font fn),获取组件当前使用的字体：,getFont(),Color,类,构造函数,1,（设置颜色）,Color c = new Color(intred, intgreen, intblue),范围 ：,0255,new Color(200,200,200),new Color(255,0,100),构造函数,2,Color c = new Color(int rgb),兰色：,07,位 绿色：,815,位 红色：,1623,位,颜色常量值,public static final Color,black,Color.black , Color.blue , Color.gray ,Color. red Color.white ,标准组件简介,Label(,标签,),构造函数,Label a = new Label(“information”);,Label a = new Label(“information”,Label.CENTER);,方法,a.setText(“,新内容”,);,设置标签内容,String a.getText(),读取标签内容,Button,(,按钮,),Button myB = new Button(“Cancel”);,TextField,行编辑框组件,构造函数,TextField f1 = new TextField(30);,TextField f1 = new TextField(“abc”,30);,建,30,个字符宽的行编辑框,方法：,String getText(),读文本框内容,setText(“abc”),设置编辑框内容,setEchoChar(charc),设置回显字符,TextComponent,方法：,setEditable(false);,selectAll(),7-7,计算器,容器的组件布局,依靠布局管理器（,layout manager),方式,调用容器的,setLayout,方法，为容器指定某种布局管理器的一个对象。,例：,setLayout(new FlowLayout() ),该布局管理器对象负责确定容器中组件的位置和大小。,直接管理组件方式,调用容器的,setLayout(null),方法，关闭布局管理器。,调用每一个组件的,setLocation(),方法决定组件位置。,调用每一个组件的,setSize(),方法决定其大小。,布局管理器对象,布局管理器种类,FlowLayout:,组件在一行中从左至右水平排列，排满后折行,BorderLayout,：北、南、东、西、中,GridLayout,：,以行和列的网格形式安排组件,CardLayout,：,每一个组件作为一个卡片，容器仅显示多个卡片中的某一个,确定容器布局,缺,省的布局管理器,Window,、,Frame,、,Dialog BorderLayout,Panel,、,Applet FlowLayout:,选择布局管理器的方法,建立布局管理器类的对象,利用容器的,setLayout,为容器指定布局（即指定一个布局管理器的对象）,例：将,myFrame,布局设定为,FlowLayout,类型,myFrame.setLayout(new,FlowLayout,();,FlowLayout,import java.awt.*;,public class TestFlowLayout,public static void main(String args),Frame f=new Frame(,测试,FlowLayout);,f.setLayout(new FlowLayout();,Button btn1=new Button(,确定,);,Button btn2=new Button(,打开,);,Button btn3=new Button(,关闭,);,f.add(btn1);,f.add(btn2);,f.add(btn3);,f.setSize(300,100);,f.setVisible(true);,BorderLayout,import java.awt.*;,public class TestBorderLayout,public static void main(String args),Frame f=new Frame(,测试,BorderLayout);,f.setLayout(new BorderLayout();,Button btn1=new Button(,确定,);,Button btn2=new Button(,打开,);,Button btn3=new Button(,关闭,);,f.add(North,btn1);,f.add(South,btn2);,f.add(West,btn3);,f.setSize(300,100);,f.setVisible(true);,GridLayout,import java.awt.*;,public class TestGridLayout,public static void main(String args),Frame f=new Frame(,测试,GridLayout);,f.setLayout(new GridLayout(2,2);,Button btn1=new Button(,确定,);,Button btn2=new Button(,打开,);,Button btn3=new Button(,关闭,);,f.add(btn1);,f.add(btn2);,f.add(btn3);,f.setSize(300,100);,f.setVisible(true);,布局例,Frame fm = new Frame(),fm.setLayout(new FlowLayout();,tf = new TextField(22);,fm.add(tf);,Panel p1 = new Panel();,p1.setLayout(new GridLayout(4,3);,p1.add();,Panel p2 = new Panel();,p2.setLayout(new GridLayout(4,3);,p2.add();,fm. add(p1); fm. add(p2);,7-2,布局,事件及处理机制,用户操作,GUI,组件时会引发各种事件。,事件 ：描述“发生了什么事情”的对象。,系统根据用户的操作构造出相应事件类的对象。,事件源：事件的产生地。,事件处理程序：是一个方法，它接收一个事件对象，分析它，并完成对该事件的处理。,每个事件有一个相应的监听者接口，它规定了能够接收（并处理）该类事件的方法的规范。,监听者：实现了监听者接口的类，它包含有事件处理程序。,编程人员要为事件源指定监听者对象（即指定处理某种事件的事件处理程序监听者对象方法）。,鼠标单击按扭,事件及处理机制,ActionEvent,事件,引发,public void,actionPerformed(ActionEvent e),ActionListener,接口,ActionEvent,事件,监听者类,监听者对象,调用按扭的,addActionListener,(,),方法，为该按扭指定监听者。,实现接口,事件处理能力,使一个组件具有事件处理能力大致可以分为如下三步：,1,、,someComponent.addActionListener(instanceOfMyClass);,2,、,public class MyClass implements ActionListener 3,、,public void actionPerformed(ActionEvent e) ,./,事件执行代码,图形用户界面编程过程,确定编程用到的组件库（,awt,swing,swt,）,确定界面布局,1.,自己布局,(setLayout(null),再使用,setLocation,、,setSize),2.,使用布局管理器,setLayout(new FlowLayout(); setLayout(new BorderLayout(); setLayout(new GridLayout();,使用事件处理机制,1.,写监听者类,class ButtonListener implements ActionListener,public void actionPerformed(ActionEvent e),2.,事件源在监听者类上注册,btn.addActionListener(new ButtonListener),使用事件适配器,例如：,WindowAdapter,窗口适配器,将,class FormListener implements WindowListener,改写为,class FormListener extends WindowAdapter,实例,编写一个程序，在屏幕上显示带标题的窗口，并添加一个按钮。当用户单击按钮时，结束程序。,设计程序实现：窗口包含文本行和标签，在文本行中输入一段文字并按回车键后，这段文字将显示在标签上。,实例,编写一程序，如下图所示，包含带菜单栏的窗体。要求单击右上角关闭按钮及菜单项的退出时能结束程序。,图形用户界面例,import java.awt.*;,import java.awt.event.*;,class MyFrame extends Frame,Button btn;,MyFrame(),super(,带按钮的窗体,);,btn=new Button(close);,setLayout(new FlowLayout();,setSize(200,100);,add(btn);,btn.addActionListener(new Bprocess();,setVisible(true);,图形用户界面例,class Bprocess implements ActionListener,public void actionPerformed(ActionEvent e),System.exit(0);,public class Test,public static void main(String args),MyFrame f1=new MyFrame();,窗口事件,（适配器说明）,关闭窗口框时引发,Window,Event,事件,委托：,add,WindowListener(new Wclose();,定义监听者类,class Wclose implements Window,Listener,public void windowClosing(WindowEvent e) ,System.exit(0); ,其他方法,窗口事件,WindowListener,类有,7,个方法，都必须实现。,windowActivated(WindowEvent e),windowClosed(WindowEvent e),windowClosing(WindowEvent e),windowDeactivated(WindowEvent e),windowDeiconified(WindowEvent e),windowIconified(WindowEvent e),windowOpened(WindowEvent e),Window,Adapter,：系统实现的处理窗口事件的抽象适配器类，用空内容实现了,WindowListener,接口的全部,7,个方法。,class Wclose extends WindowAdapter ,仅须编写需要的方法,事件适配器类,WindowAdapter,窗口适配器,MouseMotionAdapter,鼠标移动适配器,MouseAdapter,鼠标适配器,KeyAdapter,键盘适配器,FocusAdapter,焦点适配器,ContainerAdapter,容器适配器,ComponentAdapter,组件适配器,ActionEvent,事件,引发原因：,单击按扭，双击列表框中选项，选择菜单项，文本框中的回车,事件监听接口：,ActionListener,接口方法：,actionPerformed(ActionEvent e),组件注册该事件方法：,addActionListener(,监听者对象）,TextEvent,事件,引发原因：,文本框或文本区域内容改变,事件监听接口：,TextListener,接口方法：,textValueChanged(TextEvente),组件注册该事件方法：,addTextListener(,监听者对象）,ItemEvent,事件,引发原因：,改变列表框中的选中项,改变复选框选中状态,改变下拉选单的选中项,事件监听接口：,ItemListener,接口方法：,itemStateChanged(ItemEvente),组件注册该事件方法：,addItemListener(,监听者）,AdjustmentEvent,事件,引发原因：,操作滚动条改变滑块位置,事件监听接口：,AdjustmentListener,接口方法：,adjustmentValueChanged(AdjustmentEvente),组件注册该事件方法：,addAdjustmentListener(,监听者）,KeyEvent,事件,引发原因：,敲完键（,KEY-TYPED),按下键,(KEY-PRESSED),释放键,(KEY-RELEASE),事件监听接口：,KeyListener,接口方法：,keyPressed(KeyEvente),键已被按下时调用,keyReleased(KeyEvente),键已被释放时调用,keyTyped(KeyEvente),键已被敲完时调用,KeyEvent,方法：,char ch = e.getKeyChar();,事件监听适配器（抽象类）,KeyAdapter,组件注册该事件方法：,addKeyListener(,监听者）,MouseEvent,事件,引发原因： （鼠标作用在一个组件上）,鼠标事件：鼠标键按下，鼠标键抬起，单击鼠标 ，鼠标光标进入一个组件，鼠标光标离开一个组件。,鼠标移动事件：鼠标移动，鼠标拖动,鼠标事件监听接口,1,：,MouseListener,接受鼠标事件,该接口定义的方法：,mouseClicked(MouseEvente),mouseEntered(MouseEvente),鼠标光标进入一个组件,mouseExited(MouseEvente),鼠标光标离开一个组件,鼠标事件监听适配器（抽象类）,MouseAdapter,MouseEvent,事件（续）,鼠标事件监听接口,2,：,MouseMotionListener,接受鼠标移动事件,该接口方法：,mouseMoved(MouseEvente),鼠标光标在组件上移动,mouseDragged(MouseEvente),用鼠标拖动一个组件,鼠标移动事件监听适配器,MouseMotionAdapter,组件注册鼠标事件方法：,add MouseListener(,监听者）,组件注册鼠标移动事件方法：,add MouseMotionListener(,监听者）,MouseEvent,事件（续）,MouseEvent,方法,e.getClickCount() =1,单击,=2,双击,Point e.getPoint(),取鼠标光标位置,int e.getX() int e.getY(),取鼠标光标位置,e.getModifiers() = e.BUTTON1_MASK,鼠标左键,= e.BUTTON3_MASK,鼠标右键,7-6,鼠标事件,WindowEvent,事件,引发原因：,有关窗口操作引发的事件,事件监听接口,WindowListener,接口方法,windowActivated(WindowEvente),激活窗口,windowClosed(WindowEvente),调用,dispose,方法关闭窗口后。,windowClosing(WindowEvente),试图利用窗口关闭框关闭窗口,windowDeactivated(WindowEvente),本窗口成为非活动窗口,WindowEvent,事件,(,续）,windowDeiconified(WindowEvente),窗口从最小化恢复为普通窗口,windowIconified(WindowEvente),窗口变为最小化图标,windowOpened(WindowEvente),当窗口第一次打开成为可见时,接口适配器,WindowAdapter,注册事件方法,addWindowListener,FocusEvent,事件,引发原因：,组件获得焦点,组件失去焦点,事件监听接口,FocusListener,接口方法：,focusGained(FocusEvent e),组件获得焦点时调用,focusLost(FocusEvente),组件失去焦点时调用,接口适配器：,FocusAdapter,组件注册该事件方法：,addFocusListener,TextEvent,事件,引发原因：,当组件（如文本框）文本改变时引发,事件监听接口：,TextListener,接口方法：,textValueChanged(TextEvente),组件注册该事件方法：,addTextListener,ComponentEvent,事件,引发原因：,当组件移动、改变大小、改变可见性时引发,事件监听接口：,ComponentListener,接口方法：,componentHidden(ComponentEvent e),组件隐藏,componentMoved(ComponentEvente),组件移动,componentResized(ComponentEvente),组件改变大小,componentShown(ComponentEvente),组件变为可见,接口适配器,ComponentAdapter,组件注册该事件方法：,addComponentListener,ContainerEvent,事件,引发原因：,当容器内增加或移走组件时引发,事件监听接口：,ContainerListener,接口方法,componentAdded(ContainerEvente),容器内加入组件,componentRemoved(ContainerEvente),从容器中移走组件,接口适配器,ContainerAdapter,容器注册该事件方法：,addContainerListener,菜单,创建菜单条（,MenuBar),MenuBar m_MenuBar = new MenuBar();,创建菜单（,Menu,），加入菜单条,Menu menuFile = new Menu(“File”); /,创建菜单,m_MenuBar.add(menuFile); /,将菜单加入菜单条,创建菜单项（,MenuItem),加入相应菜单,MenuItem f1 = new MenuItem(“Open”), /,创建各菜单项,MenuItem f2 = new MenuItem(Close),menuFile.add(f1); /,加入菜单,menuFile.add(f2);,将菜单条放入,frame:,myFrame.setMenuBar(m_MenuBar);,编写响应菜单操作的代码,(ActionEvent),7-9,菜单,文件对话框,FileDialog(Frameparent, Stringtitle, intmode),parent,对话框所属窗体,title,对话框标题,mode,对话框模式,FileDialog.LOAD,打开文件,FileDialog.SAVE,保存文件,文件对话框,class MyFrame extends Frame,MyFrame getMyFrameIns() return this; ,子类方法代码片段：,FileDialog f = new FileDialog(,getMyFrameIns(),open,FileDialog.SAVE);,f.setVisible(true);,String fname = f.getDirectory() + f.getFile() ;,ig = getToolkit().getImage(fname);,绘制用户自定义成分,一般在容器中（窗口）或画布上绘制。,利用,Java.awt,类库中的类及其方法绘制用户自定义的图形界面成分。,Graphics,类包含很多绘制图形和文字的方法,。,首先要获得,Graphics,类的实例，然后利用其方法绘制。,Graphics,类的实例一般作为相关方法的参数传递进来：,paint(Graphics g),坐标规定,原点（,0,，,0,）,X,轴,Y,轴,paint,和,repaint,方法,某组件的,paint(),和,update(),为系统自动调用的有关图形绘制的方法，不可人为编程调用；但可,编程重新定义其操作内容,使用,repaint(),方法可以触发,update(),方法,paint( ),当某些操作破坏了显示，需重新绘制时,第一次绘制,repaint(),编程控制,1.,擦除并填充成背景色,update(),调用,2.,调用,paint(),Graphics,的方法,drawLine(x1,y1,x2,y2) /,直线,drawRect(x,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(),7-10,Graphics,的方法,DrawImage(Image img , int x , int y, this),显示图像的方法,第一个参数是保存图像数据的,Image,对象。,第二、三个参数是图像的左上角坐标，它们决定了图像在容器中的显示位置。,最后一个参数是显示图像的容器对象。,static Toolkit getToolkit(),getTookit().getImage(,文件名）,7-11,动画,图象显示方法,读取图片显示图片,在,application,中使用,ToolKit,类的,getImage,方法取得图片：,Image ig = getToolkit().getImage(“,文件名”,);,然后用,Graphics,类的,drowImage,方法显示,Image,对象。,在,applet,小程序中，可使用,Applet,类的,getImage,方法获得图象。,Image ig = getImage(),综合题,7-2,综合,