图形用户界面设计hao课件

1、图形用户界面设计hao1第第11章章 图形用户界面设计图形用户界面设计图形用户界面设计hao2图形用户界面的概念图形用户界面的概念 对计算机而言，对计算机而言，用户界面用户界面是用户和计算是用户和计算机之间进行信息交互的界面，用户通过机之间进行信息交互的界面，用户通过这个界面得到这个界面得到程序运行的状态或输出的程序运行的状态或输出的信息信息，向计算机，向计算机输入用户数据，操纵和输入用户数据，操纵和控制程序的运行控制程序的运行。 计算机的用户界面由用户可以直接操纵计算机的用户界面由用户可以直接操纵的的键盘键盘，鼠标鼠标和用户可以直接感知的和用户可以直接感知的显显示屏幕示屏幕、喇叭喇叭等器件构

2、成等器件构成 图形用户界面设计hao3dos 命令行界面命令行界面 图形用户界面设计hao4windows图形界面图形界面 图形用户界面设计hao5建立一个图形界面的内容建立一个图形界面的内容 n通过建立和添加通过建立和添加组件组件形成图形界面的形成图形界面的屏幕显示部分屏幕显示部分 n通过通过事件处理事件处理的设计定义当用户点击的设计定义当用户点击这些组件或进行键盘操作后程序所执行这些组件或进行键盘操作后程序所执行的的动作动作 n通过设置通过设置布局管理器布局管理器定义图形组件的定义图形组件的位置安排位置安排 图形用户界面设计hao6组组 件件组件组件: :专门用于建立图形界面的专门用于建立

3、图形界面的javajava类。类。最常用的组件最常用的组件: :视窗框架（视窗框架（frameframe） 文本框（文本框（textfieldtextfield、textareatextarea） 命令按钮（命令按钮（buttonbutton） 标签（标签（labellabel）等等。等等。建立图形界面的第一步，是要建立图形组件，建立图形界面的第一步，是要建立图形组件，也就是创建图形组件对象，然后通过组件添也就是创建图形组件对象，然后通过组件添加，形成组件之间的层次结构加，形成组件之间的层次结构 图形用户界面设计hao7抽象窗口工具包抽象窗口工具包q抽象窗口工具包抽象窗口工具包( (awt)a

4、wt)是一组是一组javajava类，此组类，此组javajava类允许创建图形用户类允许创建图形用户界面界面( (gui)gui)。qawtawt提供用于创建生动而高效的提供用于创建生动而高效的guigui的各种组件的各种组件。图形用户界面设计hao8java.awt 包中的类体系结构包中的类体系结构componentbuttoncheckboxcontainerchoicecanvastextcomponentlabelpanelwindowappletframedialogtextareatextfield图形用户界面设计hao9容容 器器 可以存放组件的区域，可以存放组件的区域，可在容

5、器上进行可在容器上进行绘制和着色绘制和着色 java.awt包中的包中的container类可直接或间接类可直接或间接派生出两个常用容器：派生出两个常用容器：框架（框架（frame类）类）和面板（和面板（panel类）。类）。 框架是一个带有边框的独立的窗口。框架是一个带有边框的独立的窗口。 面板是包含在窗口中的一个不带边框的面板是包含在窗口中的一个不带边框的区域。区域。 图形用户界面设计hao10容器容器 框架框架 框架是独立于框架是独立于applet和浏览器的一个窗口。和浏览器的一个窗口。 可以通过以下任一构造函数来创建：可以通过以下任一构造函数来创建： frame( ): :创建一个不含

6、标题的标准窗口创建一个不含标题的标准窗口 frame(string title): : 创建一个含有标题的窗口，创建一个含有标题的窗口，这个标题是由参数这个标题是由参数title指定的。指定的。 当一个当一个frame窗口被创建以后，需要调用窗口被创建以后，需要调用setsize( )方法来设置窗口的大小，并调用方法来设置窗口的大小，并调用setvisible( )来显示窗口。来显示窗口。图形用户界面设计hao11使用容器示例使用容器示例import java.awt.*;public class e11_1public static void main(string args) frame

7、f=new frame(frame窗体窗体);f.setbounds(100,100,250,300);f.setbackground(color.green);f.setvisible(true);图形用户界面设计hao12容器容器 - 面板面板 面板不是一个单独的窗口，它只是包含面板不是一个单独的窗口，它只是包含在窗口中的一个区域。在窗口中的一个区域。 面板是可以将许多组件组合起来的一种面板是可以将许多组件组合起来的一种容器。容器。 最简单的创建面板的方式就是通过面板最简单的创建面板的方式就是通过面板的构造函数的构造函数 panel( ) panel( ) 来进行。来进行。 必须将面板添加

8、到窗体中。必须将面板添加到窗体中。图形用户界面设计hao13import java.awt.*;public class e11_2public static void main(string args) frame f=new frame(panel面板面板);panel pan=new panel();f.setsize(160,160); f.setbackground(color.pink);f.setlayout(null); /取消默认管理器取消默认管理器 pan.setsize(80,80);pan.setbackground(color.green);f.add(pan);pa

9、n.setlocation(40,40);f.setvisible(true);图形用户界面设计hao14012435401534外观的管理与控制外观的管理与控制图形用户界面设计hao15布局管理器布局管理器v用户界面上的组件可以按不同方式排列。用户界面上的组件可以按不同方式排列。vjava使用布局管理器来管理这些排列方式使用布局管理器来管理这些排列方式。每当需要重新调整屏幕大小或重新绘制屏幕每当需要重新调整屏幕大小或重新绘制屏幕上任一项目时，就要用到布局管理器。上任一项目时，就要用到布局管理器。vawt提供一组用来进行布局管理的类，称提供一组用来进行布局管理的类，称为布局管理器。为布局管理器

10、。图形用户界面设计hao16每个容器都要一个布局管理器，容器中组件的大小每个容器都要一个布局管理器，容器中组件的大小和定位都由它来决定。当容器需要对某个组件进行和定位都由它来决定。当容器需要对某个组件进行定位时，就会调用其对应的布局管理器。定位时，就会调用其对应的布局管理器。布局管理器布局管理器布局管理器布局管理器图形用户界面设计hao17布局类型布局类型 java中的中的布局类型包括以下几种：布局类型包括以下几种：- flowlayout（流式布局）流式布局） panelpanel和和appletapplet的缺省布局管理器的缺省布局管理器- borderlayout （边界布局）（边界布局

11、）windowwindow、dialogdialog和和frameframe的缺省布局管理器的缺省布局管理器- gridlayout（网格布局）（网格布局）- gridbaglayout（网格包布局）（网格包布局）- cardlayout （卡片布局）（卡片布局）图形用户界面设计hao18布局类型的选用布局类型的选用 每个布局管理器都有自己特定的用途。每个布局管理器都有自己特定的用途。- 要按行和列显示几个同样大小的组件，要按行和列显示几个同样大小的组件，gridlayout 会比较合适。会比较合适。- 要在尽可能大的空间里显示一个组件，就要要在尽可能大的空间里显示一个组件，就要选择选择 bo

12、rderlayout 或或 gridbaglayout 。图形用户界面设计hao19如何设置布局如何设置布局 每个容器（每个容器（container对象）都有一个与对象）都有一个与它相关的缺省的布局管理器。它相关的缺省的布局管理器。 在没有设置新的布局前，在容器中添加在没有设置新的布局前，在容器中添加组件都按照该容器的缺省布局排列。组件都按照该容器的缺省布局排列。 可以通过可以通过setlayout( )方法为容器设置新的方法为容器设置新的布局。布局。 图形用户界面设计hao20flowlayout flowlayout的构造函数有：的构造函数有：- flowlayout( ):生成一个默认的

13、流式布局生成一个默认的流式布局- flowlayout(int alignment):可以设定每一行组可以设定每一行组件的对齐方式件的对齐方式 - flowlayout(int alignment,int horz,int vert):可以可以设定组件间的水平和垂直距离设定组件间的水平和垂直距离vapplet和和panelpanel的缺的缺省布局省布局, ,组件从左上角组件从左上角开始按从左到右、从开始按从左到右、从上到下的方式排列上到下的方式排列flowlayout mylayout = new flowlayout();flowlayout exlayout = new flowlayou

14、t(flowlayout.right);setlayout(exlayout); / 为容器设置新布局为容器设置新布局 图形用户界面设计hao21程序见书程序见书p168p168图形用户界面设计hao22borderlayout 下面是下面是borderlayout所定义的构造函数：所定义的构造函数： - borderlayout( ):生成默认的边界布局生成默认的边界布局 - borderlayout(int horz,int vert): 可以设定组件间可以设定组件间的水平和垂直距离的水平和垂直距离 v窗口窗口、框架和对话框框架和对话框等的缺省布局等的缺省布局v组件可被置于容器的组件可被置

15、于容器的北、南、东、西或中间北、南、东、西或中间位置位置northsouthwesteastcenter图形用户界面设计hao23borderlayout borderlayout 类定义了几个常量值以指定相应区域： -borderlayout.north 对应容器的顶部对应容器的顶部-borderlayout.east 对应容器的右部对应容器的右部-borderlayout.south 对应容器的底部对应容器的底部-borderlayout.west 对应容器的左部对应容器的左部-borderlayout.center 对应容器的中部对应容器的中部加入组件方法：加入组件方法： void ad

16、d(component obj, int region)； . . . setlayout(new borderlayout(); button btneast=new button(东东); button btnwest=new button(西西); button btnnorth=new button(北北); button btnsouth=new button(南南); button btncenter=new button(中中); add(btneast,borderlayout.east); add(btnwest,borderlayout.west); add(btnnort

17、h,borderlayout.north); add(btnsouth,borderlayout.south); add(btncenter,borderlayout.center); . . .书书p169图形用户界面设计hao24gridlayoutp171 gridlayout的构造函数如下所示：的构造函数如下所示： - gridlayout( ):生成一个单列的网格布局生成一个单列的网格布局 - gridlayout(int row,int col):生成一个设定行数和列生成一个设定行数和列数的网格布局数的网格布局 - gridlayout(int row,int col,int ho

18、rz,int vert)：可以设可以设置组件之间的水平和垂直间隔置组件之间的水平和垂直间隔 v用于将容器区域划分用于将容器区域划分为一个矩形网格为一个矩形网格v组件按行和列排列组件按行和列排列. . . button btn; / 声明按钮数组声明按钮数组 string str=1,2,3,4,5,6,7,8,9; setlayout(new gridlayout(3,3); btn=new buttonstr.length; / 创建按钮数组创建按钮数组 for(int i=0;istr.length;i+) btni=new button(stri); add(btni); 图形用户界面设

19、计hao25cardlayout 可存储几个不同的布局。可存储几个不同的布局。 每个布局就像是一个卡片组中的一张卡片。每个布局就像是一个卡片组中的一张卡片。 在一个给定的时间总会有一张卡片在顶层。在一个给定的时间总会有一张卡片在顶层。 卡片通常为一个卡片通常为一个 panel 对象。对象。 每当需要许多面板切换，而每个面板需要每当需要许多面板切换，而每个面板需要显示为不同布局时，可以使用卡片布局。显示为不同布局时，可以使用卡片布局。图形用户界面设计hao26p170nextnext( (containercontainerparent)parent) 翻转到指定容器的下一张卡片。翻转到指定容器

20、的下一张卡片。图形用户界面设计hao27gridbaglayout 通过使用以下语法容器可获得通过使用以下语法容器可获得 gridbaglayout：gridbaglayout gb=new gridbaglayout();containername.setlayout(gb); 要使用此布局，必须提供各组件的大小和布要使用此布局，必须提供各组件的大小和布局等信息。局等信息。 gridbagconstraints 类中包含类中包含 gridbaglayout 类用来定位及调整组件大小所需的全部信息。类用来定位及调整组件大小所需的全部信息。v组件大小不必相组件大小不必相同同v组件按行和列排组件按

21、行和列排列列v放置顺序不一定放置顺序不一定为从左至右和由上为从左至右和由上至下至下图形用户界面设计hao28awt组件组件 组件指可以放置在用户界面上的任何东西组件指可以放置在用户界面上的任何东西, ,可以将组件设置为可见或重新调整其大小。可以将组件设置为可见或重新调整其大小。 awt支持的组件：标签、文本域、文本区、支持的组件：标签、文本域、文本区、按钮、复选框、选择框等。按钮、复选框、选择框等。 高级组件包括滚动条、滚动窗格和对话框。高级组件包括滚动条、滚动窗格和对话框。 向窗口加入一个组件：首先生成所需组件的向窗口加入一个组件：首先生成所需组件的实例，然后调用实例，然后调用add()方法

22、，此方法是在方法，此方法是在container类中定义的。类中定义的。图形用户界面设计hao29不同组件不同组件标标签签文本域文本域复选框复选框单选按钮单选按钮文本区文本区按钮按钮图形用户界面设计hao30标签标签 可以通过以下任一构造函数来创建：可以通过以下任一构造函数来创建： label( ) : : 新建一个空标签新建一个空标签 label(string labeltext): : 新建一个包含给定文本新建一个包含给定文本的标签的标签 label(string labeltext, int alignment) : :新建一个包新建一个包含给定对齐方式的标签，对齐方式可以为含给定对齐方式

23、的标签，对齐方式可以为 label.left、label.right 或或 label.centerv通常用来指明项目的用途通常用来指明项目的用途v标签不可以被用户编辑标签不可以被用户编辑图形用户界面设计hao31文本域文本域 可以通过以下任一构造函数来创建：可以通过以下任一构造函数来创建：- textfield( ) : : 新建一个文本新建一个文本域域 - textfield(int columns) : : 新建一个包含给定新建一个包含给定列数的文本列数的文本域域 - textfield(string s) : : 新建一个包含给定字符新建一个包含给定字符串的文本串的文本域域 - tex

24、tfield(string s, int columns) : : 新建一个包新建一个包含给定字符串和列数的文本含给定字符串和列数的文本域域 v一种用来输入文本的一种用来输入文本的gui组件只能接受一行输入组件只能接受一行输入图形用户界面设计hao32标签和文本域使用示例标签和文本域使用示例import java.awt.*; class textlabeldemo extends frame label lblname=new label(“名称名称 :”); textfield txtname=new textfield(20); public textlabeldemo (string

25、title) super(title);setlayout(new flowlayout();add(lblname);add(txtname); public static void main(string args) textlabeldemo t=new textlabeldemo(正在测试组件！正在测试组件！);t.setsize(300,200); t.show(); 新建一个标签新建一个标签新建一个文本新建一个文本域域添加到窗口添加到窗口图形用户界面设计hao33文本区文本区 可以通过以下构造函数来创建：可以通过以下构造函数来创建：- textarea( ) : : 新建一个新建一

26、个textarea- textarea(int rows, int cols) : : 新建一个包含给新建一个包含给定行数和列数的定行数和列数的textarea- textarea(string text, int rows, int cols) : : 新建一新建一个包含给定字符串、行数和列数的个包含给定字符串、行数和列数的textareav要接受输入多行文本时使用要接受输入多行文本时使用v可以包括滚动条可以包括滚动条. . .textarea txtcomment=new textarea(); add(txtcomment); . . .图形用户界面设计hao34按钮按钮 可以使用以下任

27、一构造函数来创建按钮：可以使用以下任一构造函数来创建按钮：- button() : 新建一个空的按钮新建一个空的按钮- button(string text) : 新建一个包含给定字符串新建一个包含给定字符串的按钮的按钮v按钮是任何按钮是任何gui都都不可或缺的组件不可或缺的组件v用来捕捉用户操作的最为简便的用来捕捉用户操作的最为简便的方式方式. . .button btnok=new button(确定确定！);button btncancel=new button(取消取消！); add(btnok);add(btncancel); . . .图形用户界面设计hao35复选框复选框 可以使

28、用以下任一构造函数来创建复选框：可以使用以下任一构造函数来创建复选框： - checkbox()：创建一个空的复选框，且未被选中创建一个空的复选框，且未被选中 - checkbox(string text)：创建一个用给定字符串创建一个用给定字符串作为标签的复选框，且未被选中作为标签的复选框，且未被选中 - checkbox(string text,boolean on)：创建一个标签创建一个标签由参数由参数text指定的复选框，允许通过参数指定的复选框，允许通过参数on设定设定复选框的初始状态。复选框的初始状态。用于多选项的用户输入，用于多选项的用户输入，用户可以通过单击复选框用户可以通过单

29、击复选框来选定或取消选定某选项来选定或取消选定某选项图形用户界面设计hao36单选按钮单选按钮 可以通过复选框组生成一系列互斥的复选可以通过复选框组生成一系列互斥的复选框框, ,实现单选按钮功能。实现单选按钮功能。 在一组单选按钮中只能选择一个按钮。在一组单选按钮中只能选择一个按钮。图形用户界面设计hao37 创建单选按纽创建单选按纽: :(1)(1)首先创建一个首先创建一个 checkboxgroup 对象。对象。 checkboxgroup cg=new checkboxgroup();(2)(2)然后再创建各单选按钮。然后再创建各单选按钮。 checkbox male=checkbox(

30、男男,cg,true); checkbox female=checkbox(女女,cg,false);checkboxcheckbox( (stringstring label, label, checkboxgroupcheckboxgroup group, boolean state) group, boolean state) 使用使用指定标签创建一个指定标签创建一个 checkboxcheckbox，并使它处于指定复选框组内，将它设置为并使它处于指定复选框组内，将它设置为指定状态指定状态checkboxgroupcheckboxgroup() () 创建创建 checkboxgroup

31、 checkboxgroup 的一个新实例。的一个新实例。图形用户界面设计hao38复选框和单选按钮使用示例复选框和单选按钮使用示例import java.awt.*;class qualification extends frame checkbox t1=new checkbox(visual basic); checkbox t2=new checkbox(visual c+); checkbox t3=new checkbox(java); checkboxgroup cg=new checkboxgroup(); checkbox r1=new checkbox(专科专科,cg,fa

32、lse); checkbox r2=new checkbox(本科本科,cg,false); checkbox r3=new checkbox(硕士硕士,cg,false); checkbox r4=new checkbox(博士博士,cg,false); label lb1=new label(您的学历为：您的学历为： ); label lb2=new label(您精通的语言为：您精通的语言为： ); 新建复选新建复选框框新建一个复新建一个复选框组选框组添加添加单选按单选按钮钮 public qualification(string s ) super(s);setlayout(new g

33、ridlayout(10,1);add(lb1);add(r1);add(r2);add(r3); add(r4); add(lb2);add(t1);add(t2);add(t3); public static void main(string args) qualification q=new qualification (学识！学识！);q.setsize(400,250);q.show( ); 将单选按钮添将单选按钮添加到窗体加到窗体将复选框添加到窗体将复选框添加到窗体图形用户界面设计hao39选择框选择框 用用 choice 类可以创建一个选择框类可以创建一个选择框 choice m

34、oviestars = new choice( ); 通过通过 additem() 方法可以添加项目方法可以添加项目moviestars.additem(安东尼奥安东尼奥.班德拉斯班德拉斯);moviestars.additem(莱昂纳多莱昂纳多.迪卡普尼奥迪卡普尼奥);moviestars.additem(桑德桑德.布洛克布洛克);moviestars.additem(休休.葛兰特葛兰特);moviestars.additem(朱莉亚朱莉亚.罗萡茨罗萡茨); 用来向用户显示用来向用户显示一个选择列表一个选择列表图形用户界面设计hao40import java.awt.*;class choicetest extends frame label lb1=new label(您最喜欢的影星是：您最喜欢的影星是： ); choice moviestars=new choice( ); public choicetest(string s ) super(s);setlayout(new gridlayout(10,1)