<4D F736F F F696E74202D C DB5DA3132D5C25FCDBCD0CED3C3BBA7BDE7C3E6BBF9B4A12E BBCE6C8DDC4A3CABD5D>

Size: px

Start display at page:

Download "<4D F736F F F696E74202D C DB5DA3132D5C25FCDBCD0CED3C3BBA7BDE7C3E6BBF9B4A12E BBCE6C8DDC4A3CABD5D>"

因城甘
5 years ago
Views:

1 第 12 章图形用户界面基础 1

2 动因为 Java GUI 程序设计而设计的 API 是如何应用面向对象原则的绝佳范例从本章开始将学习 Java GUI API 的框架结构, 还要学习如何使用 GUI 组件为应用程序和 applet 开发用户友好接口 2

3 学习目标区分 Swing 和 AWT 的不同 ( 第 12.2 节 ) 描述 Java GUI API 的层次体系结构 ( 第 12.3 节 ) 使用框架面板和简单 GUI 组件创建用户界面 ( 第 12.4 节 ) 理解布局管理器的作用 ( 第 12.5 节 ) 使用 FlowLayout GridLayout 和 BorderLayout 管理器在一个容器中布局组件 ( 第 12.5 节 ) 使用 JPanel 类将面板作为一个子容器 ( 第 12.6 节 ) 使用 Color 类和 Font 类指定颜色和字体 ( 第节 ) 将边界工具提示字体和颜色等常用特性应用在 Swing 组件上 ( 第 12.9 节 ) 使用边界可视化地将用户界面组件分组 ( 第 12.9 节 ) 使用 ImageIcon 类创建图形图标 ( 第节 ) 3

4 创建 GUI 对象 // Create a button with text OK JButton jbtok = new JButton("OK"); // Create a label with text "Enter your name: " JLabel jlblname = new JLabel("Enter your name: "); 标签文本域复选框单选按钮按钮 // Create a text field with text "Type Name Here" JTextField jtfname = new JTextField("Type Name Here"); 组合框 // Create a check box with text bold JCheckBox jchkbold = new JCheckBox("Bold"); // Create a radio button with text red JRadioButton jrbred = new JRadioButton("Red"); Red // Create a combo box with choices red, green, and blue JComboBox jcbocolor = new JComboBox(new String[]{"Red", "Green", "Blue"}); 4

5 Swing 和 AWT 为什么 GUI 组件的类名都有前缀 J 呢? 为什么不是简单地将它命名为 Button, 而是使用 JButton 来命名呢? 因为, 事实上, 在包 java.awt awt 中已经有一个名为 Button 的类介绍 Java 的时候, 图形用户界面相关的类都被捆绑在一起, 放在一个被称为抽象窗口工具箱 (Abstract Windows Toolkit,AWT) 的库中对于每个运行 Java 的平台,AWT 组件都会通过它们各自的代理 ( 被称作 peer) 自动映射特定平台的组件 AWT 适合开发简单的图形用户界面, 但不适合开发复杂的 GUI 项目除此之外,AWT 更容易发生与特定平台相关的故障因为它的基于 peer 方法严重依赖底层平台 AWT 的用户界面组件就被一种更稳定更通用和更灵活的库取代, 这种库称为 Swing 组件库大多数 Swing 组件都是直接用 Java 代码在画布上绘图的, 而 java.awt.window 或 java.awt.panel 的子类的组件例外, 它们必须使用特定平台上自己的 GUI 来绘图 Swing 组件更少地依赖于目标平台并且更少地使用自己的 GUI 资源因此, 不依赖于自己 GUI 的 Swing 组件称为轻量级组件 (lightweight component), 而 AWT 组件称为重量级组件 (heavyweight component) 5

6 GUI 类的层次结构 (Swing) Dimension Font LayoutManager 1 在包 java.awt 中的类重量级 FontMetrics Object Color Panel Applet JApplet Graphics Component Container Window Frame * Dialog JFrame JDialog JComponent 在 javax.swing 包中的 Swing 组件轻量级 6

7 容器类 Dimension Font LayoutManager 1 在包 java.awt awt 中的类重量级 FontMetrics Object Color Panel Applet JApplet Graphics Component Container Window Frame * Dialog JFrame JDialog 容器类可以包含 JComponent JPanel 在 javax.swing 包中的 Swing 组件其它 GUI 组件轻量级 7

8 GUI 辅助类 Dimension Font LayoutManager 1 在包 java.awt 中的类重量级 FontMetrics Object Color Panel Applet JApplet Graphics Component Container Window Frame JFrame * Dialog JDialog 辅助类都不是 Component 的子类 JComponent JPanel 在 javax.swing 包中的 Swing 组件它们用来描述 GUI 组件的属性, 例如 : 图形的内容颜色字体以及大小尺寸等轻量级 8

9 Swing GUI 组件 JCheckBoxMenuItem JMenuItem JMenu AbstractButton JButton JRadioButtonMenuItem JToggleButton JCheckBox JComponent JEditorPane JRadioButton JTextComponent JTextField JPasswordField JTextArea JLabel JList JComboBox JPanel JOptionPane JScrollBar JSlider JTabbedPane JSplitPane JLayeredPane JSeparator JScrollPane JRootPane JToolBar JMenuBar JPopupMenu JFileChooser JColorChooser JToolTip JTree JTable JTableHeader JInternalFrame JProgressBar JSpinner 9

10 简单版本的组件 JCheckBoxMenuItem JMenuItem JMenu AbstractButton JRadioButtonMenuItem JButton JToggleButton JCheckBox JComponent JEditorPane JRadioButton JTextComponent JTextField JPasswordField JTextArea JLabel JList JComboBox JPanel JOptionPane JScrollBar JSlider JTabbedPane JSplitPane JLayeredPane JSeparator JScrollPane JRootPane JToolBar JMenuBar JPopupMenu JFileChooser JColorChooser JToolTip JTree JTable JTableHeader JInternalFrame JProgressBar JSpinner 10

11 复杂版本的组件 JCheckBoxMenuItem JMenuItem JMenu AbstractButton JRadioButtonMenuItem JButton JToggleButton JCheckBox JComponent JEditorPane JRadioButton JTextComponent JTextField JPasswordField JTextArea JLabel JList JComboBox JPanel JOptionPane JScrollBar JSlider JTabbedPane JSplitPane JLayeredPane JSeparator JScrollPane JRootPane JToolBar JMenuBar JPopupMenu JFileChooser JColorChooser JToolTip JTree JTable JTableHeader JInternalFrame JProgressBar JSpinner 11

12 AWT( 可选的 ) AWTEvent Container Panel Applet Font Button Window Frame FontMetrics Label TextField Dialog FileDialog Object Color TextComponent Graphics List TextArea Component Choice CheckBox LayoutManager CheckBoxGroup Canvas MenuComponent MenuItem Menu Scrollbar MenuBar 12

13 框架框架就是一个没有包含在另一个窗口里的窗口框架是个窗框架是 Java GUI 应用程序中用来存放用户界面组件的基础使用 Jframe 类创建一个窗口对于 Swing GUI 程序而言, 使用 Jframe 类来创建窗口 13

14 创建一个框架 import javax.swing.*; public class MyFrame { public static void main(string[] args) { JFrame frame = new JFrame("Test Frame"); frame.setsize(400, 300); frame.setvisible(true); frame.setdefaultcloseoperation( JFrame.EXIT_ ON_ CLOSE); } } MyFrame Run 14

15 向框架中添加组件标题栏 // Add a button into the frame frame.getcontentpane().add( new JButton("OK")); 内容窗格 MyFrameWithComponents Run 15

16 JDK 1.5 版本中的内容窗格标题栏 // Add a button into the frame frame.getcontentpane().add( new JButton("OK")); 内容窗格 // Add a button into the frame frame.add( new JButton("OK")); 16

17 Jframe 类 javax.swing.jframe +JFrame() +JFrame(title: String) +setsize(width: int, height: int): void +setlocation(x: int, y: int): void +setvisible(visible: boolean): void +setdefaultcloseoperation(mode: ti int): void +setlocationrelativeto(c: Component): void +pack(): void 创建一个无标题的默认框架创建一个带特定标题的框架设置框架的大小设置框架左上角的位置设置 true 来显示框架指定框架关闭时的操作设置和特定组件相关的框架的位置如果该组件为空, 那么框架在屏幕中居中自动设置框架大小以在框架中放置组件 17

18 布局管理器 Java 的布局管理器提供了一种层面的抽象, 自动将用户界面映射到所有的窗口系统 UI 组件都放置在容器中每个容器都有一个布局管理器来管理容器内的 UI 使用容器内的 setlayout(layoutmanager) 方法在容器中设置布局管理器 18

19 布局管理器的种类 FlowLayout (Chapter 13) GridLayout (Chapter 13) BorderLayout (Chapter 13) 一些其它布局管理器将会在第 33 章容器布局管理器和边框中介绍 19

20 FlowLayout 举例编写一个程序, 这个程序使用 FlowLayout 管理器向这个框架添加三个标签和文本域 ShowFlowLayout Run 20

21 FlowLayout 类 java.awt.flowlayout -alignment: int -hgap: int -vgap: int +FlowLayout() +FlowLayout(alignment: int) +FlowLayout(alignment: int, hgap: int, vgap: int) 在类中提供了这些数据域的 get 和 set 方法, 但是为使 UML 图简洁将其省略这个布局管理器的对齐方式 ( 默认值 : CENTER). 这个布局管理器的水平间隔 ( 默认值 :5 个像素 ) 这个布局管理器的垂直间隔 ( 默认值 :5 个像素 ) 创建一个默认的 FlowLayout 管理器创建一个带指定对齐方式的 FlowLayout 管理器创建一个带指定对齐方式水平间隔和垂直间隔的 FlowLayout 管理器 21

22 GridLayout 举例使用 GridLayout 管理器而不是 FlowLayout 管理器来重新编写前面的程序, 显示标签和文本域 ShowGridLayout Run 22

23 GridLayout 类 java.awt.gridlayout -rows: int -columns: int -hgap: int -vgap: int +GridLayout() +GridLayout(rows: int, columns: int) +GridLayout(rows: int, columns:int int, hgap: int, vgap: int) 在类中提供了这些数据域的 get 和 set 方法, 但是为使 UML 图简洁将其省略这个布局管理器中的行数 ( 默认值 : 1). 这个布局管理器中的列数 ( 默认值 :1) 这个布局管理器的水平间隔 ( 默认值 :0) 这个布局管理器的垂直间隔 ( 默认值 :0) 创建一个默认的 GridLayout 管理器创建一个带指定行数和列数的 GridLayout 管理器创建一个带指定行数和列数水平间隔和垂直间隔的 GridLayout 管理器 23

24 BorderLayout 管理器 BorderLayout 管理器将容器分为五个区域 : 东区南区西区北区和中央使用 add 方法可以将组件添加到 BorderLayout 中 add(component, constraint), 这里的 constraint 是一个常量, 取值为 BorderLayout.EAST BorderLayout.SOUTH BorderLayout.WEST BorderLayout.NORTH 或 BorderLayout.CENTER 24

25 BorderLayout 举例 ShowBorderLayout Run 25

26 BorderLayout 类 java.awt.borderlayout 在类中提供了这些数据域的 get 和 set 方法, 但是为使 UML 图简洁将其省略 -hgap: int 这个布局管理器的水平间隔 ( 默认值 :0) -vgap: int 这个布局管理器的垂直间隔 ( 默认值 :0) +BorderLayout() +BorderLayout(hgap: int, vgap: int) 创建一个默认的 BorderLayout 管理器创建一个带指定水平间隔和垂直间隔个数的 BorderLayout 管理器 26

27 Color 类可以使用 java.awt.color 类为 GUI 组件设置颜色颜色是由红绿蓝这三原色构成的, 每种原色都用一个 int 值表示它的深度, 取值范围从 0( 最暗度 ) 到 255( 最亮度 ) 这就是通常所说的 RGB 模式 Color c = new Color(r, g, b); 其中 r g 和 b 指定某种颜色的红绿蓝成分例如 : Color c = new Color(228, 100, 255); 27

28 标准颜色 java.awt.color 中定义了 13 种标准颜色的常量 (black 黑色 blue 蓝色 cyan 青色 darkgray 深灰 gray 灰色 green 绿色 lightgray 淡灰 magenta 洋红 orange 橘色 pink 粉红 red 红色 white 白色 yellow 黄色 ) 之一这些标准颜色名都是常量, 但是它们都是第一个单词全小写之后每个单词的首字母大写来命名这样, 颜色名违反了 Java 的命名规则从 JDK 1.4 起, 你也可以使用下面这些新的常量 :BLACK BLUE CYAN DARK_GRAY GRAY GREEN LIGHT_GRAY MAGENTA ORANGE PINK RED WHITE 和 YELLOW 28

29 设置颜色可以使用下面方法来设置组件的背景色和前景色 : setbackground(color c) setforeground(color c) 例如 : jbt.setbackground(color.yellow); ll jbt.setforeground(color.red); 29

30 Font 类字体名字体风格在所有平台上所支持 Font.PLAIN (0), 的标准字体名是 : Font.BOLD (1), SansSerif, Serif, Font.ITALIC (2) 和 Monospaced, Dialog Font.BOLD + 或 DialogInput Font.ITALIC (3) Font myfont = new Font(name, style, size); 举例 : Font myfont = new Font("SansSerif ", Font.BOLD, 16); Font myfont = new Font("Serif", Font.BOLD+Font.ITALIC, 12); JButton jbtok = new JButton("OK ); jbtok.setfont(myfont); 30

31 获取所有可用的字体名 GraphicsEnvironment e = GraphicsEnvironment.getLocalGraphicsEnvironment(); String[] fontnames = e.getavailablefontfamilynames(); for (int i = 0; i < fontnames.length; i++) System.out.println(fontnames[i]); t tl t 31

32 使用面板作为子容器面板的作用就是分组放置用户界面组件的子容器建议将用户界面组件放置在面板中, 然后将这个面板添加到框架中也可以将面板放置在另一个面板中为了将一个组件加入 JFrame 中, 我们事实上将组件添加到 JFrame 的面板窗格中为了将一个组件加入一个面板中, 我们直接使用 add 方法将它加入面板 32

33 创建一个 JPanel 使用 new JPanel() 来创建一个默认为 FlowLayout 管理器的面板或者使用 new JPanel(LayoutManager) 来创建一个带指定布局管理器的面板使用 add(component) 方法向面板添加一个组件个组件例如 : JPanel p = new JPanel(); p.add(new JButton("OK")); 33

34 测试 Panel 的例子这个例子使用面板来管理组件这个程序创建一个微波炉的用户界面 A button A textfield 12 buttons frame p2 p1 TestPanels Run 34

35 Swing 组件的公共特性 java.awt.component -font: java.awt.font awt -background: java.awt.color -foreground: java.awt.color -preferredsize: Dimension -visible: iibl boolean +getwidth(): int +getheight(): int +getx(): int +gety(): int 在类中提供了这些数据域的 get 和 set 方法, 但是为使 UML 图简洁将其省略这个组件的字体这个组件的颜色这个组件的前景色这个组件的首选大小表明这个组件是否可见返回这个组件的宽度返回这个组件的高度 getx() 和 gety() 返回父组件中这个组件左上角的坐标 java.awt.container +add(comp: Component): Component +add(comp: Component, index: int): Component +remove(comp: Component): void +getlayout(): LayoutManager +setlayout(l: LayoutManager): void +paintcomponents(g: Graphics): void 给容器添加一个组件使用指定下标来给容器添加一个组件从容器中删除组件返回这个容器的布局管理器设置这个容器的布局管理器绘制这个容器的每个组件 javax.swing.jcomponent -tooltiptext: String -border: javax.swing.border.border 在类中提供了这些数据域的 get 和 set 方法, 但是为使 UML 图简洁将其省略这个组件的工具提示文本当鼠标指向这个组件而不点击时显示工具提示文本这个组件的边框 35

36 边界你可以给 JComponent 类的任何对象设置边界 Swing 具有各种类型的边界为了创建一个带标题的边界, 使用 new TitledBorder(String title) 为了创建一个线边界, 使用 new LineBorder(Color color, int width) 这里的 width 表明线的粗细例如 : 下面的代码在面板上显示一个带标题的边界 : JPanel panel = new JPanel(); panel.setborder(new TitleBorder( My Panel )); 36

37 测试 Swing 的公共特性组件的特性 font background foreground preferredsize minimumsize maximumsize JComponent 的特性 tooltiptext border TestSwingCommonFeatures Run 37

38 图像图标 Java 使用 javax.swing.imageicon 类来表示一个图标一个图标是一个大小固定的图片 ; 通常情况下, 它都比较小, 用来装饰组件图像通常存储在图像文件中你可以使用 new ImageIcon(filename) 来创建一个图像图标例如 : 下面的语句使用当前类路径下的 image 目录的图像文件 us.gif 来创建一个图标 : ImageIcon icon = new ImageIcon("image/us.gif"); TestImageIcon Run 38

39 启动画面启动画面是应用程序开始启动时显示的图像如果程序要占用很多时间去加载, 就要显示一个启动画面来警示用户例如, 下面的命令 : java splash:image/us.gf TestImageIcon 就会实现加载程序 TestImageIcon 时显示一个图像 39

Chapter 9: Objects and Classes

Chapter 9: Objects and Classes (Swing) AWTEvent Font LayoutManager 1 Classes in the javax.swing package Heavyweight FontMetrics Object Color Panel Applet JApplet Graphics Component Container Window Frame JFrame * Dialog JDialog JComponent