1、Introduction to Swing,GUI图形界面编程 罗承成,本章目标,了解图形用户界面(GUI) 抽象窗口工具包 (AWT) AWT体系结构 GUI常用组件的使用 Paint(Graphics g) 画图 理解布局管理器 BorderLayout 、FlowLayout、GridLayout 理解事件监听器,什么是GUI,GUI: graphical user interfaces-图形用户界面,又称图形用户接口是指采用图形方式显示的计算机操作用户界面 . 使用GUI的目的: 减少用户的认知负担 ,保持界面的一致性 建立界面与用户的互动交流 ,用户界面友好性 更为人性化的视觉优化
2、,更具可操控性和扩充性的使用易用性,AWT,AWT: （Abstract Window Toolkit) java抽象窗口工具包 java.awt包提供了许多用来设计GUI组件类。java早期进行用户界面设计时，主要是用java.awt包提供的类。 如Button(按钮)、TextField(文本框)和List(列表)等 ,AWT&Swing&SWT&Jface,AWT:Sun公司提供的一个跨平台GUI开发包Swing:Sun在AWT的基础上写的一个Swing框架SWT:IBM认为Swing比较耗内存,就创建了一个新的GUI库,SWT Jface:IBM为了方便开发SWT程序,在SWT的基础之
3、上又创建了一个更易用,功能强大的功能包Jface,组件类与容器类,组件(Component):基本图形元素，如按钮，文本框，文本域，多选按钮，单选按钮等 容器(Container):可以容纳组件的区域，在容器上可以添 加别的组件。如：Frame, Window等。 注意：容器中可以容纳组件，也可以容纳比它“容量级别 小”的容器。,AWT 概述,创建 GUI,通过,java.awt 包,容器,组件,布局管理器,字体,事件,图形和绘制方法,包含 AWT 容器组件,以图形表示的对象允许用户交互,创建并构造用于选择新字体的对象,用于用户和系统交互,AWT包含内容,使用 AWT 图形方法相对于窗口绘制图
4、形,定义 GUI 组件的位置,AWT （ 重量级组件）,java.awt包中控件类的体系结构,AWT容器,AWT容器:有两种类型的容器 Window和PanelWindow的与Panel的区别： Window是能够独立存放的容器； Panel不能单独存在，必须放入Window或其子类中Window有两个类: Frame(带标题,可调整大小) Dialog(),Frame,Frame是Window的子类，由Frame或其子类创建的对象为一个窗体。 Frame常用构造方法： Frame() Frame(String s) 创建标题栏为字符创s的窗口,setBounds(int x,int y,in
5、t width,int height)设置窗体位置和大小，x,y是坐标 setSize(int width,int height) 调整组建的大小 setLocation(int x,int y) 设置窗体的位置 setBackground(Color c) 设置背景颜色，参数为Color对象 setVisible(boolean b) 设置是否可见 setTitle(String name) 设置标题 setResizable(boolean b) 设置是否可以调整大小,Frame初探,Frame使用代码:SimpleFrame.java Frame f=new Frame(“一个java小
6、程序!“); f.setSize(100, 100); /设置Frame的宽和高 /设置它的父级中的 x 和 y 参数来指定新位置的左上角 f.setLocation(200, 200); /f.setBounds(200,200,100,100);/等同于上面的两行代码 /f.setBackground(Color.blue); /设置背景颜色 f.setBackground(new Color(255,0,0); f.add(new Button(“Press Me!“); /增加一个按钮 f.setVisible(true); /设置Frame可见 /使用匿名内部类设置一个关闭窗口的监听
7、器 f.addWindowListener(new WindowAdapter() public void windowClosing(WindowEvent e) System.exit(0); );,MultiFrame,思考写出如下效果图：,Panel,Panel不能够独立存在，必须放在Window或其子类中。 思考写出以下效果图：,Paint(Graphics g) 画图,Color c=g.getColor();/保存原有颜色 g.drawString(“Draw Test!“, 200, 200); /画直线 (起点X,y坐标)(终点x,y坐标) g.setColor(Color.
8、blue); g.drawLine(50, 50, 200, 200); /画空心矩形 (x,y) (宽度,高度) g.drawRect(60, 60, 150, 150); /画实心矩形 g.setColor(Color.green); g.fillRect(200, 200, 250, 250); /画圆角矩形 圆角弧形的水平直径 ,垂直直径 g.drawRoundRect(100, 150, 200, 250, 40, 40); /画空心椭圆 g.drawOval(130, 130, 50, 80); /画实心椭圆 g.setColor(new Color(255,0,0); g.fil
9、lOval(300, 30, 200, 120); g.setColor(c); /恢复原有颜色,布局管理器,为什么java要使用布局管理器？1）java程序是跨平台运行的，但是不同的平台对于点 及坐标的定义不完全相同。2）屏幕的解析度分辨率不同也会造成位置的变化为了确保每个组件的相对位置和大小以及外观，java特别设计了布局管理器。 布局管理器用来： 决定组件在容器上如何摆放； 决定组件的大小； Frame的默认布局管理器是BorderLayout; Panel和Applet默认布局管理器是FlowLayout,常用的布局管理器,JAVA中常用的布局： FlowLayout（流式布局） Bo
10、rderLayout（边界布局） GridLayout（网格布局） GridBagLayout（网格包布局） CardLayout （卡片布局）,为容器设置布局,布局管理器(LayoutManager)指的是FlowLayout,BorderLayout等类的对象；调用容器对象的setLayout(LayoutManager lm)方法，即可为容器设置不同的布局；利用多种复杂布局的组合，总可以达到你想要的效果。,FlowLayout:流布局管理器,容器,流布局是面板的默认布局管理器,右下角,依次排序的组件,垂直或水平间距,左上角,流布局管理器的特点,按照组件添加的顺序将他们从左到右的放置在容器
11、中 注意：当放置的容器的宽度超过容器的边界时候，组件将被放置在下一行上。 可以通过设置左对齐，右对齐，居中的设置组件的对齐方式 构造方法： FlowLayout(); FlowLayout(int align); FlowLayout(int align,int hgap,int vgap);,FlowLayout布局测试案例,public FlowLayoutTest() Button btn1=new Button(“button1“); Button btn2=new Button(“button2“); Button btn3=new Button(“button3“); this.s
12、etLayout(new FlowLayout(FlowLayout.RIGHT); add(btn1); add(btn2); add(btn3); setSize(500, 600); setLocation(100, 100); addWindowListener(new WindowAdapter() public void windowClosing(WindowEvent e) System.exit(0); ); setVisible(true); ,FlowLayout布局测试案例,Frame f=new Frame(); /FlowLayout(对齐方式(左中右),水平间距,
13、垂直间距) f.setLayout(new FlowLayout(FlowLayout.CENTER,20,40); f.setBounds(100, 100, 200, 300); f.setBackground(Color.gray); for (int i = 1; i = 10; i+) f.add(new Button(i+“”); /int 转String /f.add(new Button(String.valueOf(i); f.setVisible(true);,BorderLayout:边界布局管理器,上边的组件,左 边 的 组 件,右 边 的 组 件,下边的组件,容器,N
14、orth(北),South(南),East(东),West(西),CENTER,BorderLayout:边界布局管理器的特点,边界布局管理器将容器分为5个区域，东，南，西，北，中。 对于容器的东南西北四个区域，如果某个区域没有组件，者该区域面积为0。 对于中间区域，不管有没有组件，BorderLayout都会为它分配空间，如果没有组件，在中间区域显示容器的背景色。 如果没有指定区域，则默认组件被放置到中区域。 BorderLayout(); BorderLayout(int hgap,int vgap);,BorderLayout:边界布局管理器案例,setLayout(new Border
15、Layout(); setTitle(“BorderLayout Test!“); Button bn=new Button(“BN“);/北 Button bs=new Button(“BS“);/南 Button bw=new Button(“BW“);/西方 Button be=new Button(“BE“);/东 Button bc=new Button(“BC”);/中add(bn,BorderLayout.NORTH); add(bs,BorderLayout.SOUTH); add(bw,BorderLayout.WEST); add(be,BorderLayout.EAST)
16、; add(bc,BorderLayout.CENTER); setBounds(200, 200, 200, 200); setVisible(true);,GridLayout:网格布局管理器,行,列,指定网格中的行数和列数，创建网格布局,GridLayout:网格布局管理器特点,将容器分割成许多行和列，组件被放置到每个格子中 按照从左到右的顺序依次放置，直到站满该行的所有网格，然后放置下一行。 添加到网格中的组件的宽度，高度都相同。 构造函数： GridLayout(); GridLayout(int rows,int cols); GridLayout(int rows,int col
17、s,int hgap,int vgap);,GridLayout:网格布局管理器用例,setTitle(“GridLayout Test!“); setLayout(new GridLayout(3,2); setBackground(new Color(200,200,200); for (int i = 0; i 10; i+) add(new Button(“button“+i); setBounds(200, 200, 400, 400); setVisible(true);,布局管理器总结,Frame是一个顶级窗口，Frame的缺省布局管理器为BorderLayout Panel无法
18、单独显示，必须添加到某个容器 Panel的缺省布局管理器为FlowLayout 当把Panel作为一个组建添加到某个容器后，该Panel任然可以有自己的布局管理器 使用布局管理器时，布局管理器负责各个组件的大小和位置因此无法设置组件大小和位置，由布局管理器自行为其完成。 如果用户需要自己设置组件大小或位置，则应取消该容器的布局管理器，方法为： setLayout(null),事件处理机制,事件是程序运行中出现的行为和动作的反映。 典型的事件包括：单击按钮、在文本框输入数据等。 图形界面都是事件驱动的，即当用户和界面进行交互通信时产生事件，并由此触发事件处理程序。 事件处理程序:事件处理对象监听
19、各种事件（例如用户键入字符或点击鼠标），并执行相应的功能处理。用户程序只要编写代码定义每个事件发生时程序应做出何种响应即可。这些代码会在它们对应的事件发生时由系统自动调用，这就是GUI程序中事件和事件响应的基本原理。,事件处理程序 3-1,用户交互,事 件,单击鼠标,按下/释放鼠标按钮,对象状态改变,调用事件处理,确定发生的事件的类型,确定生成的事件的组件,编写合适的代码处理事件,事件处理机制实例(一),1.事件源:可能产生事件的组件称为事件源，不同事件源上发生的事件种类是不同的。 例如：按钮 Button button = new Button();2.给事件源注册事件监听器:使用该事件源中
20、的addXXXListener(aListener) 方法。 依据事件类型的不同，注册的方法名也不同。例如给 按钮注册一个动作事件侦听器：button.addActionListener(new ActionListener()实现方法的代码 );,事件处理机制实例(二),3.编写代码实现监听器接口的方法。实现点击按钮数字自加一 button.addActionListener(new ActionListener()public void actionPerformed(ActionEvent e) int count=Integer.parseInt(button.getLabel();b
21、utton.setLabel(new Integer(+count).toString(); );,源对象,监听器,事件,传播,事件实例,方法,传递途径,代理事件模型,Swing 中的 GUI 组件,适配器对象,事件处理程序 3-3,键盘监听事件,setBounds(50, 50, 200, 200); addKeyListener(new KeyAdapter() public void keyPressed(KeyEvent e) int keyCode=e.getKeyCode(); if(keyCode=KeyEvent.VK_UP) System.out.println(“UP“);
22、 else if(keyCode=KeyEvent.VK_RIGHT) System.out.println(“RIGHT“); else System.out.println(“OTHER KEY ENTER “); super.keyPressed(e); ); setVisible(true);,计算两个TextField输入数字之和,TextField num1; TextField num2; TextField sum; public void test() num1=new TextField(); num2=new TextField(); sum=new TextField(
23、); num1.setColumns(10); /设置列宽 num2.setColumns(10); sum.setColumns(15); setLayout(new FlowLayout(); /设置布局管理器 Label addStr=new Label(“+“); Button btnSum=new Button(“=“);,计算两个TextField输入数字之和(续),btnSum.addActionListener(new ActionListener() public void actionPerformed(ActionEvent e) String s1=num1.getTe
24、xt(); String s2=num2.getText(); int i1=Integer.parseInt(s1); int i2=Integer.parseInt(s2); sum.setText(i1+i2+“); ); add(num1); add(addStr); add(num2); add(btnSum); add(sum); pack(); setVisible(true); ,TextField事件,TextArea ta; TextField tf; public void test() tf=new TextField(“默认值“); ta=new TextArea()
25、; setLayout(null); setTitle(“Txet Test!“); tf.setBounds(50, 50, 80, 30); ta.setBounds(30,100,140,50); tf.setBackground(Color.blue); add(tf); add(ta); setBounds(100, 100, 200, 200); setBackground(new Color(20,49,0);,TextField事件(续),/tf.setEchoChar(*); /设置回显文字用于密码的输入 this.addWindowListener(new WindowAdapter()Override public void windowClosing(WindowEvent e) System.exit(0); super.windowClosing(e); );tf.addActionListener(new ActionListener()public void actionPerformed(ActionEvent e) tf=(TextField)e.getSource(); ta.setText(tf.getText(); tf.setText(“); );,做一个登陆窗口小例子：,练习,
