第图形用户界面设计.ppt

《第图形用户界面设计.ppt》由会员分享，可在线阅读，更多相关《第图形用户界面设计.ppt（66页珍藏版）》请在三一办公上搜索。

1、1,概述事件处理基本控制组件布局设计常用容器组件,第五章 图形用户界面设计,2,概述,用户界面(User Interface),用户与计算机系统(各种程序)交互的接口,3,图形用户界面的构成,什么是组件?构成图形用户界面的元素，拿来即用用图形表示(能在屏幕上显示，能和用户进行交互)Button、Checkbox、Scrollbar、Choice、Frame,4,图形用户界面的构成,一些特定的Java类java.awt包javax.swing包容器组件(Container):可包含其他组件顶层容器:Applet,Dialog,Frame,Window一般用途容器:Panel,ScrollPane

2、特定用途容器:InternalFrame非容器组件:必须要包含在容器中Button,Checkbox,Scrollbar,Choice,Canvas,5,图形用户界面的构成,AWT组件 java.awt包,6,图形用户界面的构成,Swing组件 javax.swing包java.awt.Component|-java.awt.Container|-java.awt.Window|-java.awt.Frame|-javax.swing.JFramejava.awt.Component|-java.awt.Container|-javax.swing.JComponent|-JComboBox,

3、JFileChooser,JInternalFrame JLabel,JList,JMenuBar,JOptionPane,JPanel JPopupMenu,JProgressBar,JScrollBar JScrollPane,JSeparator,JSlider,JSpinner JSplitPane,JTabbedPane,JTable JTextComponent,JToolBar,JTree等,7,图形用户界面的实现,选取组件设计布局响应事件应用原则Swing比AWT提供更全面、更丰富的图形界面设计功能Java 2平台支持AWT组件，但鼓励用Swing组件主要讲述AWT和Swing

4、的图形界面设计,8,图形用户界面的实现,简单实例,import java.awt.*;import java.awt.event.*;public class HelloWorldAWT public static void main(String args)Frame f=new Frame(AWT1);Label label=new Label(Hello!);f.add(label);f.addWindowListener(new WindowAdapter()public void windowClosing(WindowEvent e)System.exit(0););f.setSi

5、ze(200,200);f.setVisible(true);,import javax.swing.*;import java.awt.event.*;public class HelloWorldSwing public static void main(String args)JFrame f=new JFrame(“Swing1);JLabel label=new JLabel(Hello!);f.getContentPane().add(label);f.addWindowListener(new WindowAdapter()public void windowClosing(Wi

6、ndowEvent e)System.exit(0););f.setSize(200,200);f.setVisible(true);,9,概述事件处理基本控制组件布局设计常用容器组件,第五章 图形用户界面设计,10,事件处理,界面设计(静态)界面动起来!通过事件触发对象的响应机制事件?鼠标移动、鼠标点击、键盘键入等事件处理机制事件源事件对象事件监听者如何实现实现(implements)事件监听接口(interface)产生一个监听器对象(Listener)监听谁?将该监听器对象注册到组件对象中编写事件响应方法,11,事件处理,import javax.swing.*;import java.

7、awt.*;import java.awt.event.*;public class Beeper extends JApplet implements ActionListener JButton button;public void init()button=new JButton(Click Me);getContentPane().add(button,BorderLayout.CENTER);button.addActionListener(this);public void actionPerformed(ActionEvent e)System.out.println(“Clic

8、k me once”);,java.awt.event.ActionListener(interface)public void actionPerformed(ActionEvent e)javax.swing.JButton(class)public void addActionListener(ActionListener l),12,事件处理,事件分类,Act that results in the event Listener type User clicks a button,presses Return while typing in a text field,or choose

9、s a menu item ActionListener User closes a frame(main window)WindowListener User presses a mouse button while the cursor is over a component MouseListener User moves the mouse over a component MouseMotionListener Component becomes visible ComponentListener Component gets the keyboard focus FocusList

10、ener Table or list selection changes ListSelectionListener,13,事件处理,事件分类P205interface java.awt.event.ActionListenerpublic void actionPerformed(ActionEvent e)interface java.awt.event.WindowListenerpublic void windowOpened(WindowEvent e)public void windowClosing(WindowEvent e)public void windowClosed(W

11、indowEvent e)public void windowIconified(WindowEvent e)public void windowDeiconified(WindowEvent e)public void windowActivated(WindowEvent e)public void windowDeactivated(WindowEvent e),14,事件处理,事件分类interface java.awt.event.MouseListenerpublic void mouseClicked(MouseEvent e)public void mousePressed(M

12、ouseEvent e)public void mouseReleased(MouseEvent e)public void mouseEntered(MouseEvent e)public void mouseExited(MouseEvent e)interface java.awt.event.MouseMotionListenerpublic void mouseDragged(MouseEvent e)Invoked when a mouse button is pressed on a component and then draggedpublic void mouseMoved

13、(MouseEvent e)Invoked when the mouse cursor has been moved onto a component but no buttons have been pushed,15,事件处理,鼠标事件,public class MouseEventDemo.implements MouseListener./Register for mouse events on blankArea(TextArea)and applet blankArea.addMouseListener(this);public void mousePressed(MouseEve

14、nt e)saySomething(Mouse pressed;#of clicks:“+e.getClickCount(),e);public void mouseReleased(MouseEvent e)saySomething(Mouse released;#of clicks:+e.getClickCount(),e);public void mouseEntered(MouseEvent e)saySomething(Mouse entered,e);public void mouseExited(MouseEvent e)saySomething(Mouse exited,e);

15、public void mouseClicked(MouseEvent e)saySomething(Mouse clicked(#of clicks:“+e.getClickCount()+),e);void saySomething(String eventDescription,MouseEvent e)textArea.append(eventDescription+detected on“+e.getComponent().getClass().getName()+.+newline);,16,事件处理,多个监听器(Listener)多个组件,public class MultiLi

16、stener.implements ActionListener.button1.addActionListener(this);button2.addActionListener(this);button2.addActionListener(new Eavesdropper(bottomTextArea);public void actionPerformed(ActionEvent e)topTextArea.append(e.getActionCommand()+newline);class Eavesdropper implements ActionListener.public v

17、oid actionPerformed(ActionEvent e)myTextArea.append(e.getActionCommand()+newline);,17,第五章 图形用户界面设计,概述事件处理基本控制组件布局设计常用容器组件,18,AWT组件(java.awt.*),Component,Button,Canvas,Choice,CheckBox,Label,List,TextComponent,Scrollbar,TextField,TextArea,Container,ScrollPane,Frame,FileDialog,Panel,Window,Dialog,Apple

18、t,19,基本控制组件,使用步骤:创建基本控制组件类的对象，指定对象属性；将组件对象加入到指定容器的适当位置(布局设计)；创建事件对象的监听者。Swing组件(javax.swing.*),20,按钮和标签,按钮(Button)(P207)创建按钮public Button()public Button(String label)常用方法public String getLabel()public void setLabel(String label)public void setActionCommand(String s)public String getActionCommand(Str

19、ing s)事件响应java.awt.event.ActionListener(接口)void actionPerformed(ActionEvent e),21,按钮和标签,标签(Label)(P207)创建标签public Label()public Label(String s)public Label(String s,int alignment)Label_LEFT、Label_CENTER Label_RIGHT常用方法public String getText()public void setText(String s)public void setAlignment(int a

20、lignment)事件响应不引发事件,22,使用按钮的例子,import java.awt.*;import java.applet.*;import java.awt.event.*;public class Exam5_1 extends Applet implements ActionListenerprivate Button But1,But2;int button=0;public void init()But1=new Button(“按钮1”);But2=new Button(“按钮2”);add(But1);add(But2);But1.addActionListener(t

21、his);But2.addActionListener(this);public void paint(Graphics g)if(button=1)g.drawString(“您按了按钮1”,10,20);,else if(button=2)g.drawString(“您按了按钮2”,10,20);public void actionPerformed(ActionEvent e)if(e.getActionCommand().equals(“按钮1”)button=1;else if(e.getActionCommand().equals(”按钮2”)button=2;repaint();

22、,23,使用按钮的例子,24,使用标签的例子,import java.awt.*;import java.applet.*;public class Exam5_3 extends Applet Label lab1,lab2;TextField text1,text2;public void init()lab1=new Label(“输入姓名”);lab2=new Label(“输入年龄”);lab1.setBackground(Color.red);lab2.setBackground(Color.green);text1=new TextField(10);text2=new Text

23、Field(10);add(lab1);add(text1);add(lab2);add(text2);,25,使用标签的例子,26,文本框和文本区,文本框(TextField)（P209）TextComponent类的子类创建文本框public TextField()public TextField(int size)public TextField(String s)public TextField(String s,int size)常用方法public void setText(String s)public String getText()public void setEchocha

24、r(char c)public void setEditable(boolean b)事件响应java.awt.event.addTextListener(接口)void textValueChanged(TextEvent e)java.awt.event.addActionListener(接口)void actionPerformed(ActionEvent e),27,文本框和文本区,文本区(TextArea)（P210）TextComponent类的子类创建文本区public TextArea()public TextArea(String s)public TextArea(int

25、 rows,int columns)public TextArea(String s,int rows,int columns)public TextArea(String s,int rows,int columns,int scrollbars)SCROLLBARS_BOTH,SCROLLBARS_NONESCROLLBARS_VERTICAL_ONLYSCROLLBARS_HORIZONTAL_ONLY常用方法public void append(String s)public void insert(String s,int index)pubilc void replaceRange

26、(String s,int start,int end)事件响应java.awt.event.addTextListener(接口)void textValueChanged(TextEvent e),28,使用文本框的例子,import java.awt.*;import java.awt.event.*;import java.applet.*;public class Exam5_4 extends Applet implements ActionListenerLabel lab1,lab2,lab3;TextField text1,text2,text3;String str;int

27、 i;float f;public void init()lab1=new Label(“输入整形数:”);add(lab1);text1=new TextField(“0”,30);text1.addActionListener(this);add(text1);lab2=new Label(“输入浮点数:”);add(lab2);text2=new TextField(“0.0”,30);text2.addActionListener(this);add(text2);lab3=new Label(“输入字符串:”);add(lab3);text3=new TextField(“0.0”,

28、30);text3.addActionListener(this);add(text3);,29,使用文本框的例子,public void actionPerformed(ActionEvent e)i=Integer.parseInt(text1.getText();f=(Float.valueOf(text2.getText().floatValue();str=text3.getText();repaint();public void paint(Graphics g)g.drawString(“整形数=”+i,20,120);g.drawString(“浮点数=”+f,20,150);

29、g.drawString(“字符串=”+str,20,180);,30,单、复选框和列表,复选框(Checkbox)(P214)创建复选框public Checkbox()public Checkbox(String s)public Checkbox(String s,boolean state)常用方法public boolean getState()public void setState(boolean b)public void setLabel(String s)public String getLabel()事件响应java.awt.event.addItemListener(接

30、口)void itemStateChanged(ItemEvent e),见Exam5_6.html,31,单、复选框和列表,单选按钮组(CheckboxGroup)(P215)创建单选按钮组public Checkbox(String label,boolean state,CheckboxGroup group)public Checkbox(String label,CheckboxGroup group,boolean state)常用方法与复选框相同事件响应与复选框相同,32,单、复选框和列表,列表(List)(P219)创建列表public List()public List(in

31、t n)public List(int n,boolean b)常用方法public void add(String s)public void add(String s,int n)public void remove(int n)public void removeAll()public int getSelectedIndex()public String getSelectedItem()事件响应java.awt.event.addItemListener(接口)public void itemStateChange(ItemEvent e)java.awt.event.addActi

32、onListener(接口)void actionPerformed(ActionEvent e),见Exam5_7.html,33,下拉列表和滚动条,下拉列表(Choice)(多选一)创建下拉列表public Choice()常用方法public int getSelectedIndex()/首项的序号为0public String getSelectedItem()public void select(int index)public void select(String item)public void add(String s)/添加public void add(String s,i

33、nt index)public void remove(int index)/删除public void remove(String item)public void removeAll()事件响应java.awt.event.addItemListener(接口)public void itemStateChange(ItemEvent e),34,使用下拉列表的例子,import java.awt.*;import java.awt.event.*;import java.applet.*;public class Exam5_8 extends Applet implements Ite

34、mListener Choice cho;TextField text;public void init()text=new TextField(10);cho=new Choice();cho.add(“red”);cho.add(“yellow”);cho.add(“green”);cho.add(“blue”);add(cho);add(text);cho.addItemListener(this);public void itemStateChanged(ItemEvent e)if(e.getItem()=cho)String s=cho.getSelectedItem();text

35、.setText(s);,35,使用下列列表例子,36,下拉列表和滚动条,滚动条(Scrollbar)创建滚动条public Scrollbar(int orientation,int value,int visible,int minimum,int maximum)常用方法public void setUnitIncrement(int n)public void setBlockIncrement(int n)public int getUnitIncrement()public int getBlockIncrement()public int getValue()事件响应java.a

36、wt.event.AdjustmentListener(接口)void adjustmentValueChanged(AdjustmentEvent e),见Exam5_9.html,37,画布,画布(Canvas)创建画布public Canvas()常用方法public void setSize()public void paint(Graphics g)事件响应java.awt.event.MouseMotionListener(接口)void mouseDragged(MouseEvent e)void mouseMoved(MouseEvent e)java.awt.event.Mo

37、useListener(接口)void mouseClicked(MouseEvent e)void mousePressed(MouseEvent e)void mouseReleased(MouseEvent e)void mouseEntered(MouseEvent e)void mouseExited(MouseEvent e)java.awt.event.KeyListener(接口)void keyTyped(KeyEvent e)Void keyPressed(KeyEvent e),见Exam5_10.html,38,概述事件处理基本控制组件布局设计常用容器组件,第五章 图形

38、用户界面设计,39,布局管理,决定组件在界面中所处的位置和大小 六种布局管理器(Layout Manager)两种简单布局java.awt.FlowLayout(JDK 1.0)java.awt.GridLayout(JDK 1.0)两种特定用途布局java.awt.BorderLayout(JDK 1.0)java.awt.CardLayout(JDK 1.0)两种灵活布局java.awt.GridBagLayout(JDK 1.0)javax.swing.BoxLayout,40,布局管理,FlowLayout(java.awt.FlowLayout)所有组件从左往右排成一行 一行排满后转

39、到下一行从左往右排居中、左对齐、右对齐,import java.awt.*;import javax.swing.*;public class FlowWindow extends JFrame public FlowWindow()Container contentPane=getContentPane();contentPane.setLayout(new FlowLayout();contentPane.add(new JButton(Button 1);contentPane.add(new JButton(2);contentPane.add(new JButton(Button 3

40、);contentPane.add(new JButton(Long-Named Button 4);contentPane.add(new JButton(Button 5);public static void main(String args)FlowWindow win=new FlowWindow();win.setTitle(FlowLayout);win.pack();win.setVisible(true);,public void pack()Causes this Window to be sized to fit the preferred size and layout

41、s of its subcomponents,41,布局管理,BorderLayout(java.awt.BorderLayout)BorderLayout is the default layout manager for every content window上北、下南、左西、右东、中,Container contentPane=getContentPane();/contentPane.setLayout(new BorderLayout();contentPane.add(new JButton(Button 1(NORTH),BorderLayout.NORTH);contentP

42、ane.add(new JButton(2(CENTER),BorderLayout.CENTER);contentPane.add(new JButton(Button 3(WEST),BorderLayout.WEST);contentPane.add(new JButton(Long-Named Button 4(SOUTH),BorderLayout.SOUTH);contentPane.add(new JButton(Button 5(EAST),BorderLayout.EAST);,42,布局管理,CardLayout(java.awt.CardLayout)两个或多个组件共享相

43、同的显示空间，在不同的时间显示不同的组件,见Exam5_13.html,43,布局管理,GridLayout(java.awt.GridLayout)将空间划分为由行和列组成的网格单元，每个单元放一个组件，网格单元大小相同(宽度和高度)指定行数和列数,import java.awt.*;import javax.swing.*;public class GridWindow extends JFrame public GridWindow()Container contentPane=getContentPane();contentPane.setLayout(new GridLayout(0

44、,2);contentPane.add(new JButton(Button 1);contentPane.add(new JButton(2);contentPane.add(new JButton(Button 3);contentPane.add(new JButton(Long-Named Button 4);contentPane.add(new JButton(Button 5);public static void main(String args)GridWindow win=new GridWindow();win.setTitle(“GridLayout);win.pack

45、();win.setVisible(true);,public GridLayout(int rows,int cols)rows and cols can be zero,which means that any number of objects can be placed in a row or in a column,44,布局管理,GridBagLayout(java.awt.GridBagLayout)最精细、最灵活的布局管理将空间划分为由行和列组成的网格单元，每个单元放一个组件，网格单元大小可以不同(宽度和高度),P235,45,布局管理,BoxLayout(javax.swin

46、g.BoxLayout)将组件放在一行或一列,JPanel jpv=new JPanel();jpv.setLayout(new BoxLayout(jpv,BoxLayout.Y_AXIS);for(int i=0;i 5;i+)jpv.add(new JButton(+i);JPanel jph=new JPanel();jph.setLayout(new BoxLayout(jph,BoxLayout.X_AXIS);for(int i=0;i 5;i+)jph.add(new JButton(+i);Container cp=getContentPane();cp.add(Border

47、Layout.EAST,jpv);cp.add(BorderLayout.SOUTH,jph);,容器的嵌套(面板的嵌套，相互包含),46,第五章 图形用户界面设计,概述事件处理基本控制组件布局设计常用容器组件,47,概述,容器可包含其他组件和容器Container类的子类无边框容器:Panel,Applet有边框容器:Window,Frame,Dialog,FieldDialog可自动处理滚动操作的容器:Scrollpane,Container,ScrollPane,Frame,FileDialog,Panel,Window,Dialog,Applet,48,容器,常用方法添加组件:add(

48、)获取制定的组件getComponent(int x,int y)getComponent(int index)从容器中移出组件remove(Component c)remove(int index)removeAll()设置容器布局:setLayout(),49,容器,面板(Panel)无边框容器顺序布局(FlowLayout)Applet子类,50,窗口和菜单,java.awt.Window:最顶层容器Window(Frame f)show()BorderLayout布局java.awt.Frame:有边框容器构造方法Frame()Frame(String title)BorderLayo

49、ut布局常用方法getTitle()setTitle(String s)setVisible(boolean b)setBounds(int a,int b,int width,int height)setBackground(Color c)pack()setSize(int width,int height)dispose()add()remove(),51,使用Frame容器的例子,import java.awt.*;import java.awt.event.*;public class Exam5_18 public static void main(String args)MyFr

50、ame mf=new MyFrame();class MyFrame extends Frame implements ActionListener,MouseListener,WindowListener Button but;String str;String mouseClickCnt=“单击”;Dimension currentPos=new Dimension();int clickCnt=0;MyFrame()super(“我制作的窗口”);but=new Button(“按钮”);setLayout(new FlowLayout();add(but);but.addActionL