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 范围 0 255newColor 200 200 200 newColor 255 0 100 构造函数2Colorc newColor intrgb 兰色 0 7位绿色 8 15位红色 16 23位颜色常量值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 Dialog BorderLayoutPanel Applet FlowLayout 选择布局管理器的方法建立布局管理器类的对象利用容器的setLayout为容器指定布局 即指定一个布局管理器的对象 例 将myFrame布局设定为FlowLayout类型myFrame setLayout newFlowLayout Frame Frame Stringtitle 构造一个新的不可见的frame隐含的布局管理器是 BorderLayoutsetLayout 设置新的布局管理器 add Componentcomp 在容器上增加一个组件 在容器为不可见的状态时加 voidsetSize intwidth intheight setVisible true 7 1a Frame Panel 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 classMyFrameextendsFrame MyFrame 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 publicclassa publicstaticvoidmain Stringargs MyFrameform1 newMyFrame classMyFrameextendsFrame MyFrame super 窗口标题 setSize 200 100 setFont newFont TimesRoman Font BOLD 20 图形用户界面例 setLayout newFlowLayout Buttonb newButton close add b b addActionListener newBprocess setVisible true classBprocessimplementsActionListener publicvoidactionPerformed ActionEvente System exit 0 监听者类 某个类可以兼职也可以专职做这件事 实现监听者接口 一个类若实现一个接口 必须实现接口的全部方法 例如 ActionListener接口只有一个方法 voidactionPerformed ActionEvente 实现接口的类可以是 一般类内部类匿名类 7 3一般类 7 4内部类 7 5匿名类 事件处理有关问题 有哪些事件类 java awt event 每个事件类的监听者接口 每个监听者接口规定的方法 多方法的监听者接口的适配器 实现接口的抽象类 是什么 组件的事件委托 注册 方法 窗口事件 适配器说明 关闭窗口框时引发WindowEvent事件委托 addWindowListener newWclose 定义监听者类classWcloseimplementsWindowListener publicvoidwindowClosing 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 取被选项索引int getSelectedIndexes 取被选项索引 多选 StringgetSelectedItem 取被选项String getSelectedItems 取被选项 多选 voidselect intindex 选中指定的项StringgetItem intindex 按索引号取出该项intgetItemCount 取出项数String getItems 取出所有的项 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 f1 加入菜单menuFile add f2 将菜单条放入frame myFrame setMenuBar m MenuBar 编写响应菜单操作的代码 ActionEvent 7 9菜单 文件对话框 FileDialog Frameparent Stringtitle intmode parent对话框所属窗体title对话框标题mode对话框模式FileDialog LOAD打开文件FileDialog SAVE保存文件 文件对话框 classMyFrameextendsFrame MyFramegetMyFrameIns returnthis 子类方法代码片段 FileDialogf newFileDialog getMyFrameIns open FileDialog SAVE f setVisible true Stringfname f getDirectory f getFile ig getToolkit getImage fname 绘制用户自定义成分 一般在容器中 窗口 或画布上绘制 利用Java awt类库中的类及其方法绘制用户自定义的图形界面成分 Graphics类包含很多绘制图形和文字的方法 首先要获得Graphics类的实例 然后利用其方法绘制 Graphics类的实例一般作为相关方法的参数传递进来 paint Graphicsg 坐标规定 paint和repaint方法 某组件的paint 和update 为系统自动调用的有关图形绘制的方法 不可人为编程调用 但可编程重新定义其操作内容使用repaint 方法可以触发update 方法 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 Colorc 置颜色setFont Fontf 置字体getColor getFont 7 10 Graphics的方法 DrawImage Imageimg intx inty this 显示图像的方法第一个参数是保存图像数据的Image对象 第二 三个参数是图像的左上角坐标 它们决定了图像在容器中的显示位置 最后一个参数是显示图像的容器对象 staticToolkitgetToolkit getTookit getImage 文件名 7 11动画 图象显示方法 读取图片 显示图片在application中使用ToolKit类的getImage方法取得图片 Imageig getToolkit getImage 文件名 然后用Graphics类的drowImage方法显示Image对象 在applet小程序中 可使用Applet类的getImage方法获得图象 Imageig getImage 综合题 7 2综合