JAVA图形用户界面设计与实现.ppt

图形用户界面的设计与实现,教材第7章,设计原则容器与布局标准组件事件处理自定义成分,用户界面设计原则,使用图形界面GUI(GraphicsUserInterface)字符界面采用命令行方式与用户交互。图形界面用多种媒体显示信息，用直观、方便的GUI标准组件来接收命令。控制权在用户（用户要由操作的主动权）界面与操作的风格一致性。宽容（容错）性。简洁与美观并重。,界面构成,容器,标准组件,用户自定义成分,创建GUI各组成成分，并安排相互位置关系（包含，相邻，相交）。定义GUI各成分对不同事件的响应，实现与用户的交互与界面功能。,界面元素,容器是用来组织其他界面成分和元素的单元。可以形成容器的层次，构筑复杂结构Window（Frame、Applet、Dialog）组件是图形用户界面的基本单位，它里面不再包含其他的成分。GUI组件是图形用户界面标准化的结果。GUI组件的作用是完成与用户的交互。用户自定义成分文字、图形、图象不能像标准组件一样被系统识别和承认，只起装饰作用。不能响应用户的动作，不具有交互功能。,AWT包,AbstractWindowsToolkit（抽象窗口工具）AWT类库中的各种操作是被定义为在一个并不存在的“抽象窗口”中进行的。抽取不同软硬件平台中所实现的窗口的公共特性。所设计的界面独立于具体的界面实现。提供与机器无关的基本GUI标准组件。选择类组件：单选按钮、复选框、下拉选单、列表框文字处理类组件：标签、文本框、编辑框命令类组件：按钮、工具栏、菜单,AWT类层次关系图,Component,Container,Panel,Applet,Window,Frame,Dialog,Button,TextField,TextArea,TextComponent,Checkbox,MenuComponent,Menu,MenuItem,MenuBar,其他组件,独立,不独立,Component类,可显示在屏幕上的图形对象，可与用户交互。方法：add(PopupMenupopup)加一弹出菜单addFocusListener(FocusListenerl)将发生在本组件上的事件注册给监听者，以进行事件处理。setSize(intwidth,intheight)设置组件尺寸paint(Graphicsg)重画组件setFont(Fontf)设置组件字体setBackground(Colorc)设置组件背景色setForeground(Colorc)设置组件前景色,paint和repaint方法,某组件的paint()和update()为系统自动调用的有关图形绘制的方法，不可人为编程调用；但可编程重新定义其操作内容。使用repaint()方法可以触发update()方法。,Font类,java.awt.Font设计字体显示效果（创建字体对象）Fontfn=newFont(String字体，int风格，int字号);字体：TimesRoman,Courier,Arial等风格：三个常量Font.PLAIN,Font.BOLD,Font.ITALIC字号：字的大小（磅数）使用字体对象如设置某组件当前使用的字体：setFont(Fontfn)获取组件当前使用的字体：getFont(),Color类,构造函数1（设置颜色）Colorc=newColor(intred,intgreen,intblue)范围：0255newColor(200,200,200)newColor(255,0,100)构造函数2Colorc=newColor(intrgb)兰色：07位绿色：815位红色：1623位颜色常量值publicstaticfinalColorblackColor.black,Color.blue,Color.gray,Color.redColor.white,Containers容器组件,Window不需要其他组件支撑，独立显示。FrameDialog没有菜单条，不能改变大小Panel必须放在Window组件中（或Web浏览器窗口）才能显示。它为一矩形区域，在其中可摆放其他组件，可以有自己的布局管理器。基本方法add(Componentcomp)将指定组件放到容器中add(Componentcomp，intindex)remove(Componentcomp)删除指定组件setLayout(LayoutManagermgr)设置容器布局paint画容器（及其上面的组件）,容器的组件布局,依靠布局管理器（layoutmanager)方式调用容器的setLayout方法，为容器指定某种布局管理器的一个对象。例：setLayout(newFlowLayout()该布局管理器对象负责确定容器中组件的位置和大小。当容器需要定位组件和确定组件大小时，就会给布局管理器对象发消息，让它完成该项工作。直接管理组件方式调用容器的setLayout(null)方法，关闭布局管理器。调用每一个组件的setLocation()方法决定组件位置。调用每一个组件的setSize()方法决定其大小。直接管理组件将失去平台无关性。,布局管理器对象,布局管理器种类,FlowLayout:组件在一行中从左至右水平排列，排满后折行BorderLayout：北、南、东、西、中GridLayout：以行和列的网格形式安排组件GridBagLayout：更复杂、功能更强的网格布局CardLayout：每一个组件作为一个卡片，容器仅显示多个卡片中的某一个,确定容器布局,缺省的布局管理器Window、Frame、DialogBorderLayoutPanel、AppletFlowLayout:选择布局管理器的方法建立布局管理器类的对象利用容器的setLayout为容器指定布局（即指定一个布局管理器的对象）例：将myFrame布局设定为FlowLayout类型myFrame.setLayout(newFlowLayout();,Frame,Frame(Stringtitle)构造一个新的不可见的frame隐含的布局管理器是：BorderLayoutsetLayout()设置新的布局管理器。add(Componentcomp)在容器上增加一个组件（在容器为不可见的状态时加）。voidsetSize(intwidth,intheight)setVisible(true),7-1a,FramePanel,Framefm1=newFrame(Hello);fm1.setSize(400,350);fm1.setBackground(Color.gray);fm1.setLayout(null);Panelpn1=newPanel();pn1.setSize(100,100);pn1.setBackground(Color.red);pn1.setLocation(0,50);fm1.add(pn1);fm1.setVisible(true);,7-1b,FlowLayout布局管理器,构造函数：FlowLayout();FlowLayout(intalign,inthgap,intvgap)；align：对齐方式：LEFTCENTERRIGHThgap：组件水平间距（象素）vgap：组件垂直间距（象素）无参数的构造函数创建的FlowLayout对象，其对齐方式为CENTER居中方式，组件间的横纵间距都为5个像素。,FlowLayout布局管理器,Framef=newFrame(FlowLayout);f.setSize(400,300);/不起作用f.setBackground(Color.gray);f.setLayout(newFlowLayout(FlowLayout.LEFT,10,20);b1=newButton(button1);b2=newButton(button2);b3=newButton(button3);f.add(b1);f.add(b2);f.add(b3);f.setVisible(true);f.pack();,7-1c,BorderLayout布局管理器,setLayout(newBorderLayout()add(b1,BorderLayout.NORTH);当容器大小改变，组件相对位置不会改变。,BorderLayout布局管理器,f=newFrame(BorderLayout);f.setSize(200,200);b1=newButton(button1);b5=newButton(button5);f.add(b1,BorderLayout.NORTH);f.add(b2,BorderLayout.SOUTH);f.add(b3,BorderLayout.WEST);f.add(b4,BorderLayout.EAST);f.add(b5,BorderLayout.CENTER);f.setVisible(true);,7-1d,Border-Panel,classMyFrameextendsFrameMyFrame()Buttonb1=newButton(1);Buttonb2=newButton(2);Buttonb3=newButton(3);Buttonb4=newButton(4);Panelp=newPanel();p.add(b1);p.add(b2);add(p,BorderLayout.NORTH);add(b3,BorderLayout.WEST);add(b4,BorderLayout.CENTER);pack();setVisible(true);,7-1e,GridLayout布局管理器,创建GridLayout对象作为布局编辑器，指定划分网格的行数和列数(网格大小一样）。setLayout(newGridLayout(行数,列数);setLayout(newGridLayout(行数,列数,行间隔,列间隔);调用容器的方法add()将组件加入容器，组件填入容器的顺序将按照第一行第一个格中、第一行第二个格中、每个网格中都必须填入组件，如果希望某个网格为空白，可以为它加入一个空的标签：add(newLabel();,GridLayout布局管理器,f=newFrame(GridLayout);f.setLayout(newGridLayout(2,3);f.setSize(200,100);f.setBackground(Color.gray);b1=newButton(1);b6=newButton(6);f.add(b1);f.setVisible(true);,7-1f,布局例,Framefm=newFrame()fm.setLayout(newFlowLayout();tf=newTextField(22);fm.add(tf);Panelp1=newPanel();p1.setLayout(newGridLayout(4,3);p1.add();Panelp2=newPanel();p2.setLayout(newGridLayout(4,3);p2.add();fm.add(p1);fm.add(p2);,7-2布局,GridBagLayout布局管理器,每个GridBagLayout对象维护一个动态矩形网格，每个组件可占据一个或多个单元作为它的显示区域。每一个组件都与一个GridBagConstraints类的实例相连，以指定在显示区域中如何摆放,并可确定大小。步骤：setLayout(newGridBagLayout();GridBagConstraintsgbc=newGridBagConstraints();gbc.gridx=0;(属性赋值）add(button1,gbc),GridBagLayout布局管理器,设置GridBagConstraints类实例属性值：gridxgridy组件显示区域的左上角单元格坐标gridwidthgridheight指定显示区域行、列单元数RELATIVE指定紧挨着前一个组件摆放fill当显示区域大于组件时如何扩充组件：HORIZONTAL水平充满VERTICAL垂直充满BOTH全部填充NONE不调整（隐含）ipadxipady指定组件间最小间隔anchor当显示区域大于组件时如何摆放组件：CENTER（隐含）,NORTH,EAST,SOUTH,WEST,SOUTHEAST,NORTHEAST,SOUTHWEST,NORTHWEST.,CardLayout布局管理器,将每一个组件视为一张卡片，同一时刻只能显示一个组件。setLayout(newCardLayout()CardLayout方法（按序指定组件）first(Containerparent)last(Containerparent)previous(Containerparent)next(Containerparent)CardLayout方法(按名显示组件）addLayoutComponent(Stringname,Componentc)show(Containerparent,Stringname),事件及处理机制,用户操作GUI组件时会引发各种事件。事件：描述“发生了什么事情”的对象。系统根据用户的操作构造出相应事件类的对象。事件源：事件的产生地。事件处理程序：是一个方法，它接收一个事件对象，分析它，并完成对该事件的处理。每个事件有一个相应的监听者接口，它规定了能够接收（并处理）该类事件的方法的规范。监听者：实现了监听者接口的类，它包含有事件处理程序。编程人员要为事件源指定监听者对象（即指定处理某种事件的事件处理程序监听者对象方法）。,鼠标单击按扭,事件及处理机制,ActionEvent事件,publicvoidactionPerformed(ActionEvente),ActionListener接口,ActionEvent事件,监听者类,监听者对象,调用按扭的addActionListener()方法，为该按扭指定监听者。,实现接口,事件类,ActionEvent类：存放这个事件的细节。该类的方法有：getSource()返回事件发生的对象（名）getActionCommand()返回按扭名。ActionListener接口publicvoidactionPerformed(ActionEvente),图形用户界面例,importjava.awt.*;importjava.awt.event.*;publicclassapublicstaticvoidmain(Stringargs)MyFrameform1=newMyFrame();classMyFrameextendsFrameMyFrame()super(窗口标题);setSize(200,100);setFont(newFont(TimesRoman,Font.BOLD,20);,图形用户界面例,setLayout(newFlowLayout();Buttonb=newButton(close);add(b);b.addActionListener(newBprocess();setVisible(true);classBprocessimplementsActionListenerpublicvoidactionPerformed(ActionEvente)System.exit(0);,监听者类,某个类可以兼职也可以专职做这件事（实现监听者接口）。一个类若实现一个接口，必须实现接口的全部方法。例如：ActionListener接口只有一个方法：voidactionPerformed(ActionEvente)实现接口的类可以是：一般类内部类匿名类,7-3一般类,7-4内部类,7-5匿名类,事件处理有关问题,有哪些事件类(java.awt.event)？每个事件类的监听者接口？每个监听者接口规定的方法？多方法的监听者接口的适配器（实现接口的抽象类）是什么？组件的事件委托（注册）方法？,窗口事件（适配器说明）,关闭窗口框时引发WindowEvent事件委托：addWindowListener(newWclose();定义监听者类classWcloseimplementsWindowListenerpublicvoidwindowClosing(WindowEvente)System.exit(0);其他方法,窗口事件,WindowListener类有7个方法，都必须实现。windowActivated(WindowEvente)windowClosed(WindowEvente)windowClosing(WindowEvente)windowDeactivated(WindowEvente)windowDeiconified(WindowEvente)windowIconified(WindowEvente)windowOpened(WindowEvente)WindowAdapter：系统实现的处理窗口事件的抽象适配器类，用空内容实现了WindowListener接口的全部7个方法。classWcloseextendsWindowAdapter,仅须编写需要的方法,ActionEvent事件,引发原因：单击按扭，双击列表框中选项，选择菜单项，文本框中的回车事件监听接口：ActionListener接口方法：actionPerformed(ActionEvente)组件注册该事件方法：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方法：charch=e.getKeyChar();事件监听适配器（抽象类）KeyAdapter组件注册该事件方法：addKeyListener(监听者）,MouseEvent事件,引发原因：（鼠标作用在一个组件上）鼠标事件：鼠标键按下，鼠标键抬起，单击鼠标，鼠标光标进入一个组件，鼠标光标离开一个组件。鼠标移动事件：鼠标移动，鼠标拖动鼠标事件监听接口1：MouseListener接受鼠标事件该接口定义的方法：mouseClicked(MouseEvente)mouseEntered(MouseEvente)鼠标光标进入一个组件mouseExited(MouseEvente)鼠标光标离开一个组件鼠标事件监听适配器（抽象类）MouseAdapter,MouseEvent事件（续）,鼠标事件监听接口2：MouseMotionListener接受鼠标移动事件该接口方法：mouseMoved(MouseEvente)鼠标光标在组件上移动mouseDragged(MouseEvente)用鼠标拖动一个组件鼠标移动事件监听适配器MouseMotionAdapter组件注册鼠标事件方法：addMouseListener(监听者）组件注册鼠标移动事件方法：addMouseMotionListener(监听者）,MouseEvent事件（续）,MouseEvent方法e.getClickCount()=1单击=2双击Pointe.getPoint()取鼠标光标位置inte.getX()inte.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(FocusEvente)组件获得焦点时调用focusLost(FocusEvente)组件失去焦点时调用接口适配器：FocusAdapter组件注册该事件方法：addFocusListener,TextEvent事件,引发原因：当组件（如文本框）文本改变时引发事件监听接口：TextListener接口方法：textValueChanged(TextEvente)组件注册该事件方法：addTextListener,ComponentEvent事件,引发原因：当组件移动、改变大小、改变可见性时引发事件监听接口：ComponentListener接口方法：componentHidden(ComponentEvente)组件隐藏componentMoved(ComponentEvente)组件移动componentResized(ComponentEvente)组件改变大小componentShown(ComponentEvente)组件变为可见接口适配器ComponentAdapter组件注册该事件方法：addComponentListener,ContainerEvent事件,引发原因：当容器内增加或移走组件时引发事件监听接口：ContainerListener接口方法componentAdded(ContainerEvente)容器内加入组件componentRemoved(ContainerEvente)从容器中移走组件接口适配器ContainerAdapter容器注册该事件方法：addContainerListener,标准组件简介,Label(标签)构造函数Labela=newLabel(“information”);Labela=newLabel(“information”,Label.CENTER);方法a.setText(“新内容”);设置标签内容Stringa.getText()读取标签内容Button(按钮)ButtonmyB=newButton(“Cancel”);,Checkbox组件,构造函数Checkbox(Stringlabel)Checkbox(Stringlabel,booleanstate)Checkbox(Stringlabel,booleanstate,CheckboxGroupgroup)方法：booleangetState()setState(booleanstate),CheckboxGroup组件,将一组Checkbox按扭组成单选按扭组件。例setLayout(newGridLayout(3,1);CheckboxGroupcbg=newCheckboxGroup();Checkboxck1=newCheckbox(“one”,true,cbg);Checkboxck2=newCheckbox(“two”,false,cbg);Checkboxck3=newCheckbox(“three”,false,cbg);方法：CheckboxgetSelectedCheckbox()setSelectedCheckbox(Checkboxbox),TextField行编辑框组件,构造函数TextFieldf1=newTextField(30);TextFieldf1=newTextField(“abc”,30);建30个字符宽的行编辑框方法：StringgetText()读文本框内容setText(“abc”)设置编辑框内容setEchoChar(charc)设置回显字符TextComponent方法：setEditable(false);selectAll(),7-7计算器,TextArea编辑框组件,构造函数TextAreata1=newTestArea(10,45);建10行、45列的文本区域TextAreata1=newTestArea(“abc”,10,45);TextAreata1=newTestArea(“abc”,10,45，滚动条);滚动条指定SCROLLBARS_BOTHSCROLLBARS_HORIZONTAL_ONLYSCROLLBARS_VERTICAL_ONLYSCROLLBARS_NONE方法append(Stringstr)追加文本,List列表框,首先创建List对象，再调用add()方法加入List列表的各选项构造函数List(introws,booleanmultipleMode)rows显示行数；multipleMode是否允许多选方法：list1.add(“classA”);list1.add(“classB”);list1.add(“classC”,0);指定加入选项位置,List列表框,方法intgetSelectedIndex()取被选项索引intgetSelectedIndexes()取被选项索引（多选）StringgetSelectedItem()取被选项StringgetSelectedItems()取被选项（多选）voidselect(intindex)选中指定的项StringgetItem(intindex)按索引号取出该项intgetItemCount()取出项数StringgetItems()取出所有的项,Choice下拉选单,例ChoiceColorChooser=newChoice();ColorChooser.add(Green);ColorChooser.add(Red);ColorChooser.add(Blue);StringgetSelectedItem(),Scrollbar滚动条,构造函数mySlider=newScrollbar(Scrollbar.HORIZONTAL,0,1,0,Integer.MAX_VALUE);滚动条方向滑块初始位置滑块尺寸滚动槽最小值滚动槽最大值方法intgetValue()返回滑块当前位置setUnitIncrement(1);设置单位增量（点按两端箭头）setBlockIncrement(50);设置块增量（点按滚动槽）,7-8滚动条,菜单,创建菜单条（MenuBar)MenuBarm_MenuBar=newMenuBar();创建菜单（Menu），加入菜单条MenumenuFile=newMenu(“File”);/创建菜单m_MenuBar.add(menuFile);/将菜单加入菜单条创建菜单项（MenuItem)加入相应菜单MenuItemf1=newMenuItem(“Open”),/创建各菜单项MenuItemf2=newMenuItem(Close),menuFile.add(