用户图形界面概念和设计

1、用户图形界面概念和设计2本章目标了解抽象窗口工具包 (AWT)和Swing的概念及区别掌握Swing容器组件JFrame 、JPanel、JScrollPane掌握Swing GUI 组件JLabel、JTextField、JTextArea、JButtonJCheckBox、JRadioButton、JComboBox运用以上组件进行图形界面设计理解事件监听器理解理解委托事件处理模型，掌握不同组件、不同事件的事件处理方法，理解布局管理器BorderLayout 、FlowLayout、GridLayout、AbsoluteLayout3AWT 概述创建 GUI通过java.awt 包容器组件

2、 布局管理器字体事件图形和绘制方法包含 AWT 容器组件以图形表示的对象允许用户交互创建并构造用于选择新字体的对象用于用户和系统交互AWT包含内容 使用 AWT 图形方法相对于窗口绘制图形 定义 GUI 组件的位置AWT（ 重量级组件）4Swing 2-1创建 GUI通过Javax.swing 包Swing 包含内容 容器组件 可改变的外观Java2D图形绘制包含 Swing 组件以图形表示的对象允许用户交互使用Java2D绘制图形 可更换图形界面的风格Swing（轻量级组件，纯Java组件）5轻量级组件 可改变的外观MVC 结构 性能更稳定优点Swing 2-2Swing （与AWT相比）6

3、Swing 容器组件 3-1 主窗口Swing 应用程序创建容器设置容器大小（对框架及面板而言）设置容器可见度（对框架及面板而言）创建顶层容器顶层容器（每个应用程序中至少有一个）内容面板主要显示区域包含 GUI 中的可视组件7 javax.swing 包 常见容器JFrame JScrollPane JPanel 1. 扩展 java.awt.Frame 类2. 用于在 Swing 程序中创建窗口3. 包含边框、标题和用于关闭和图标化窗口的按钮1. 中间容器2. 用于将较小的轻量级组件组合在一起3. 与内容窗格相似，面板在默认情况下不透明管理视区、滚动条及可选的行和列的标题视区Swing 容器

4、组件 3-2 8Swing 容器组件 3-3 JFrame 类的方法JFrame() JFrame(String title)void pack()void setSize(int width, int height)Dimension getSize()void setTitle(String name)JPanel 类的方法JPanel()JPanel(LayoutManager layout) void add(Component comp)Void setLayout(LayoutManager layout)JScrollPane 类的方法 JScrollPane() JScroll

5、Pane(Component view)void setVerticalScrollBarPolicy(int const)void setHorizontalScrollBarPolicy(int const)9Eclipse安装WindowBuilder插件1. 下载在官网查询相应Eclipse的WindowBuilder下载地址，在表中点击Release的 Link获得下载地址参考：102. 在线安装Select Help Install New Software. in the main menu to open the Install dialog11再弹出的窗口中单击Add:在新窗

6、口中，Name一栏填写要添加的插件名称WindowBuilder,Location填写WindowBuilder刚才复制的更新地址12确定后选中WindowBuilder的更新内容,然后不断下一步就行了13使用 Eclipse的WB插件创建 JFrame 安装WindowBuilder插件（把WB拷贝到在eclipse安装目录下的dropins中）在eclipse创建一个Jframe，在此容器上，依次增加组件1. 选择JFrame2. 单击Next1. 填入Name2. 点击Finish点击Design查看可视界面可视化的窗体可视化的各种组件组件的属性Layout设置为Absolute14Sw

7、ing GUI 组件JTexFieldJComboBoxJCheckBoxJButtonJRadioButtonJLabelJTexArea示例演示15JLabel 2-1JLabel16 JLabel 2-2PropertiesDescription1. A label is not interactive and does not respond to any input events 1. Displays a label on form2. In Swing, labels can display text as well as imagesJLabel方法说明JLabel()JLab

8、el()创建一个默认的 JLabel 实例JLabel(String text)以指定的文本创建 JLabel 实例JLabel(Icon image) 以指定的图像创建 JLabel 实例getText() 返回标签显示的文本字符串setIcon(Icon icon) 定义 标签将显示的内容setText(String text) 定义此组件将要显示的单行文本17JTextFieldJTextField 2-118JTextField 2-2PropertiesDescription1. JTextField component allows entering/editing a singl

9、e line of text. 1. JTextField is a lightweight component that allows the editing of a single line of text JTextField方法说明JTextField() 构造一个新的文本输入框 JTextField(String text) 构造一个新的文本输入框 ，以指定文本作为初始文本setLineWrap(boolean wrap) 设置文本区的换行策略。True- 换行/false-不换行getColumns()返回文本字段中的列数setColumns(int columns)设置文本字段中

10、的列数，然后使布局无效setHorizontalAlignment(int value)设置文本字段中文本的水平对齐方式：JTextField. LEFTJTextField.CENTER JTextField.RIGHTgetText() 返回此 TextComponent 中包含的文本19JTextAreaJTextArea 2-120JTextArea 2-2属性说明JTextArea 组件接受用户输入的多行文本JTextArea 允许用户编辑已输入的文本JTextArea说明描述JTextArea() 构造一个新的文本区 JTextArea(String text) 用指定的显示文本构

11、造一个新的文本区setFont(Font f)设置文本区的字体getText() 获取文本区中的文本字符串Append(String str)将给定文本追加到文档结尾21JComboBoxJComboBox 2-122JComboBox 2-2属性说明在 Swing 中，组合框由 JComboBox 类表示。ComboBox 是文本字段和下拉列表的组合，让用户可以键入值或从显示给用户的值中进行选择方法说明JcomboBox()创建一个下拉框实例addItem(Object obj)将项添加至项的列表getItemAt(int index) 返回指定索引位置的列表项getItemCount()返

12、回列表（作为对象）中的项数getSelectedItem()将当前选择的项作为一个对象返回getSelectedIndex()返回当前选择项的索引位置问题：如何在可视化设计器中输入列表项点击model属性，在Combox Model Items里面输入列表项23JCheckBoxJCheckBox 2-1外边的框使用Jpane组件，设置border属性为LineBorder24JCheckBox 2-2方法说明JCheckBox( ) 创建初始非选中的复选框，且不带文本或图标 JCheckBox(String text) 用指定的文本创建初始非选中的复选框。JCheckBox(String t

13、ext, boolean selected) 用指定文本创建一个复选框，并指定是否初始选中该复选框isSelected()返回按钮的状态25JRadioButtonJRadioButton 2-126JRadioButton 2-2JRadioButton方法说明JRadioButton() 创建初始非选中的单选按钮，不设置其文本JRadioButton(String text) 用指定的文本创建非选中的单选按钮JRadioButton(String text, boolean selected) 用指定的文本和选择状态创建单选按钮isSelected()返回按钮的状态问题：一组内多个Radi

14、oButton的互斥选中如何实现ButtonGroup group = new ButtonGroup();group.add(male_rbtn);group.add(female_rbtn);27JButtonJButton 2-1 28JButton 2-2属性说明JButton 类派生自 javax.swing.AbstractButton 类，该类由 JComponent 扩展而来JButton 对象包含一个文本标签、图像图标或两者，描述按钮、文本/图标周围的空白区域和边框的用途方法说明JButton( ) 创建不带文本和图标的按钮JButton(Icon icon) 创建带图标的按

15、钮JButton(String text) 创建带文本的按钮JButton(String text, Icon icon) 创建带文本和图标的按钮setEnabled(boolean b)启用（或禁用）按钮setRolloverIcon(Icon img)当鼠标经过时，显示指定的图标setSelectedIcon(Icon img)当选择按钮时，显示 img 指定的图标29事件处理程序 3-1 !用户交互事 件单击鼠标 按下/释放鼠标按钮 对象状态改变调用事件处理确定发生的事件的类型 确定生成的事件的组件 编写合适的代码处理事件代理事件模型事件处理程序 3-2 31 源对象监听器事件 传播事件

16、实例方法传递途径代理事件模型Swing 中的 GUI 组件 适配器对象Swing事件处理程序 3-3 Event 类接口ActionEventActionListenerAdjustmentEventAdjustmentListenerComponentEventComponentListenerFocusEventFocusListenerItemEventItemListenerWindowEventWindowListenerTextEventTextListenerMouseEventMouseListener, MouseMotionListenerKeyEventKeyListen

17、er32AWT的事件监听接口WindowListener 窗口事件ActionListener 动作事件MouseMotionListener 鼠标移动事件MouseListener 鼠标事件KeyListener 键盘事件FocusListener 焦点事件事件监听器接口的意义33AWT组件类中注册事件监听器的方法public abstract class Component extends Object implements ImageObserver, MenuContainer, Serializable public void addKeyListener(KeyListener l

18、) public void addMouseListener(MouseListener l) public void addMouseMotionListener(MouseMotionListener l) 34实现事件处理程序(JTextField)单击检查器的“Events”选项卡，显示该按钮组件的事件双击 focus-gained事件右边的列public void focusGained(FocusEvent e)实际操作35textField.addFocusListener(new FocusAdapter() public void focusGained(FocusEvent

19、 e) textField.setText(Gain Focus);public void focusLost(FocusEvent e) textField.setText(Lost Focus););36实现事件处理程序（JTextArea）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 Mouseentered/exit事件右边的列public void mouseEntered(MouseEvent e) textArea.append(Mouse entern);当输出的信息太多，如何增加滚动条？增加一个JScrollPane，然后将JTextArea拖入到JScrol

20、lPane中37实现事件处理程序（JCombox）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 itemstateChanged事件右边的列public void mouseEntered(MouseEvent e) textArea.append(comboBox.getSelectedItem().toString()+n);38实现事件处理程序（JCheckBox）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 Actionperformed事件右边的列public void actionPerformed(ActionEvent e) if(chckbxR

21、eading.isSelected()textArea.append(reading is selectedn );elsetextArea.append(reading is not selectedn );39实现事件处理程序（JRadioButton）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 changestateChanged事件右边的列public void stateChanged(ChangeEvent e) if(rdbtnMale.isSelected()textArea.append(Male radio button is selectedn);els

22、etextArea.append(Male radio button is not selectedn);40实现事件处理程序（JButton）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 Actionperformed事件右边的列public void actionPerformed(ActionEvent e) textArea.append(学生姓名 + textField.getText()+n);41设计用户登录界面登录成功，显示前面的Student界面登录失败，弹出消息框42布局管理器用户界面上的屏幕组件可以按照一定的格式布局 例如水平排列，或按网格方式排列布局管理

23、器类是一组类，它实现 java.AWT.LayoutManager 接口帮助在容器中放置组件Java 中可用的各种布局如下：BorderLayoutFlowLayout GridLayoutAbsoluteLayout43BorderLayout 2-1上边的组件 左边的组件右边的组件下边的组件容器NorthSouthEastWestCENTER44WestEastBorderLayout 2-2上边的组件 右边的组件 左边的组件下边的组件容器NorthSouthCenter方法说明BorderLayout( ) 创建新的BorderLayout，组件之间没有间距 setHgap(int hg

24、ap)将组件间的水平间距设置为指定的值setVgap(int vgap)将组件间的垂直间距设置为指定的值45FlowLayout 2-1容器流布局是面板的默认布局管理器左上角右下角依次排序的组件垂直或水平间距46FlowLayout 2-2容器流布局是面板的默认布局管理器左上角右下角顺序排列的组件垂直或水平间距方法说明FlowLayout( ) 构造新的中间对齐的FlowLayout，将垂直和水平间距保留为 5 个像素setAlignment( int align)设置指定布局的对齐方式setHgap(int hgap)设置指定布局的水平间距setVgap(int vgap)设置指定布局的垂直

25、间距47GridLayout 2-1行列组件大小相同重新调整组件大小以适合各自的单元指定网格中的行数和列数，创建网格布局48GridLayout 2-2行列组件大小相同重新调整组件大小以适合各自的单元指定网格中的行数和列数，创建网格布局方法描述GridLayout( ) 创建网格布局，默认为每个组件占用一整列和一单行GridLayout(int rows, int cols) 用指定的行数和列数创建网格布局。 GridLayout(int rows, int cols, int hgap, int vgap) 用指定的行数和列数、指定的水平和垂直间距创建网格布局setColumns(int c

26、ols)将相应布局中的列数设置为指定值setHgap(int hgap)将相应布局中的水平间距设置为指定值setVgap(int vgap)将相应布局中的垂直间距设置为指定值setRows(int rows )将相应布局中的行数设置为指定值49Absolute Layout可以任意调节组件的位置和大小，布局灵活通常会使用这种布局方式50菜单组件使用菜单的两种方式窗口菜单快捷菜单51菜单 2-1显示一个项目列表，指明用户可以执行的各项操作 文件编辑格式帮助字体段落项目符号和编号背景色红色绿色黑色菜单子菜单52菜单 2-2包含 javax.swing 包的菜单类的类层次结构ObjectCompon

27、entContainerJComponentJMenuBarJSeparatorAbstractButtonJPopupMenuJMenuJCheckboxMenuItemJRadioButtonMenuItemJMenuItem53菜单栏JMenuBar 类JMenuBar文件编辑格式帮助新建打开关闭JMenuJMenuItem字体段落项目符号和编号背景色红色绿色黑色粗体斜体54菜单JMenu 类JMenu 组件有两个用途 当它添加至 JMenuBar 时，将显示为文本字符串 当用户单击此菜单项时，则显示一个弹出式菜单 JMenuJMenuItem JSeparator JCheckBoxM

28、enuItem JRadioButtonMenuItem 55菜单项JMenuItem类只要选中 JMenuItem，就会产生通过重写 actionPerformed()方法进行处理的 ActionEvent JMenuItem 组件通常是 JMenu 或 JPopupMenu 中选项的标题 在 JMenuItem 中除了可以添加字符串外，还可添加图标问题：如何生成二级子菜单56在JFrame中添加JMenuBar1. 选中JMenuBar2. 放到Frame的顶端57在JMenuBar上添加JMenu1. 选中JMenu2. 放到JMenuBar58JMenuItem 类 3-21. 选中J

29、MenuItem2. 放到文件JMenu下59文件菜单设计60格式菜单（字体）设计JCheckBoxMenuItem61格式菜单（背景色）设计JRadioButtonMenuItem62实现事件处理程序（JMenuItem）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 actoinperformed事件右边的列public void actionPerformed(ActionEvent e) JOptionPane.showMessageDialog(null, 高级程序设计第6章菜单示例);以帮助菜单里面的“关于”菜单项为例子63实现事件处理程序（JCheckBoxMenu

30、Item）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 actoinperformed事件右边的列public void actionPerformed(ActionEvent e) Font f = textArea.getFont(); if (checkBoxMenuItem.isSelected()textArea.setFont(new Font(f.getFontName(), Font.BOLD, f.getSize(); elsetextArea.setFont(new Font(f.getFontName(), Font.PLAIN, f.getSize();

31、以字体里的“粗体”菜单项为例子64实现事件处理程序（JRadioMenuItem）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 actoinperformed事件右边的列public void actionPerformed(ActionEvent e) textArea.setBackground(Color.RED);首先将三个RadioMenuItem使用ButtongGroup方式设置为同一组65工具栏设计1. 选中JToolBar2. 放到菜单栏下面在将Jbutton拖入到ToolBar中，如可以使用工具栏设置TextArea的背景色。66实现事件处理程序（工具栏）单

32、击检查器的“Events”选项卡，显示该按钮组件的事件双击 actoinperformed事件右边的列public void actionPerformed(ActionEvent e) textArea.setBackground(Color.RED);67JPopupMenu 类 2-1用于显示展开形式的菜单可显示在屏幕的任何地方 通常是由单击鼠标右键触发的激活弹出式菜单项之一所执行的操作总是依赖于上下文可供 JPopupMenu 类使用的方法68JPopupMenu 类 2-2加入PopupMenu的步骤把JPopupMenu的添加到目标区域在PopupMenu添加新的JMenuItem

33、69实现事件处理程序（快捷菜单）单击检查器的“Events”选项卡，显示该按钮组件的事件双击 actoinperformed事件右边的列public void actionPerformed(ActionEvent e) System.exit(0);70对话框 4-1Java 中的对话框是一个容器，它充当父容器的子容器JOptionPane 这个类支持的功能有：布局标准对话框指定对话框的标题和文本提供图标和自定义按钮文本JOptionPane 可用于显示各种图标，如用于警告消息、问题、错误和信息等的图标“消息”对话框“错误”对话框 “问题”对话框 71对话框 4-2以下是一些可供 JOpti

34、onPane 类使用的构造方法： JOptionPane() JOptionPane(Objectmessage) JOptionPane(Objectmessage, intmessageType) JOptionPane(Objectmessage, intmessageType, intoptionType) JOptionPane(Objectmessage, intmessageType, intoptionType, Icon icon) 72对话框 4-3JOptionPane 类的 showXxxDialog 方法是显示模式对话框最常用的方法showXxxDialog show

35、MessageDialog() showOptionDialog() showXxxDialog() 方法的一些重载版本73对话框 4-4MethodsDescriptionvoid showMessageDialog(ComponentparentComponent, Objectmessage) 此方法显示一则消息，即标题为“消息”的对话框。 void showMessageDialog(ComponentparentComponent, Objectmessage, Stringtitle, intmessageType) 此方法显示使用由 messageType 参数确定的默认图标来显

36、示信息的对话框void showMessageDialog(ComponentparentComponent, Objectmessage, Stringtitle, intmessageType, Iconicon) 此方法显示用于显示消息和指定所有参数的对话框MethodDescriptionint showOptionDialog(ComponentparentComponent, Objectmessage, Stringtitle, intoptionType, intmessageType, Iconicon, Objectoptions, ObjectinitialValue)

37、此方法显示具有指定图标的对话框，其中初始选项由 initialValue 参数决定，而选项的数目由 optionType 参数决定74JColorChooser颜色选择对鼠标右键-设置 菜单项，处理单击事件public void actionPerformed(ActionEvent e) Color c = JColorChooser.showDialog(Component)e.getSource(), 选择颜色, Color.BLUE);textArea.setBackground(c);75J文件选择对文件-打开 菜单项，处理单击事件J fc = new J();int rv = fc

38、.showOpenDialog(fc);String str = fc.getSelectedFile().getAbsolutePath();76Java没有字体选择器自定义Java字体选择器77简单文本编辑器的实现通过可视化组件完成界面设计给各个组件添加事件处理78图形图像绘图坐标系绘图类组件绘图方法画布重新绘制图形图形设计79绘图类public abstract class Graphics extends Object public abstract Color getColor(); /获取当前颜色 public abstract void setColor(Color c); /设

39、置颜色 public abstract void drawLine(int x1, int y1, int x2, int y2); /画直线 public void drawRect(int x, int y, int width, int height) /画矩形 public abstract void fillRect(int x, int y, int width, int height); /填充矩形 public abstract void drawOval(int x, int y, int width, int height); /画椭圆 public abstract vo

40、id drawString(String str, int x, int y); /显示字符串 public abstract Font getFont(); /获得颜色 public abstract void setFont(Font font); /设置颜色80组件绘图方法public void paint(Graphics g) /组件绘制图形画布public Canvas() 重新绘制图形public void repaint() /调用paint()方法刷新图形【例6.7】 四叶玫瑰线的图形设计。81小结Swing 是在AWT基础上发展起来的轻量级组件，用于开发Java GUI 应用程序容器对象是能够容纳其他 Swing 组件的一种组件。容器负