第2章界面设计基础.ppt

《第2章界面设计基础.ppt》由会员分享，可在线阅读，更多相关《第2章界面设计基础.ppt（71页珍藏版）》请在三一办公上搜索。

1、1/71,第 2 章,可视化编程的基本概念及界面设计基础,本章主要内容2.1 可视化编程的基本概念 2.2 界面设计基础 2.3 创建Visual Basic应用程序的步骤,2/71,2.1 可视化编程的基本概念,可视化编程是以“所见即所得”的编程思想为原则，力图实现编程工作的可视化，即随时可以看到结果。首先从工具箱中选定控件，然后在窗口的适当位置“画”出所需的命令按钮、标签等控件对象，再为控件设置相关属性，之后立即可以看到界面的显示效果，而生成界面的程序代码则由系统自动完成。目前流行的可视化编程语言有Visual Basic、Visual Foxpro、Visual C+等。,3/71,VB

2、是一种面向对象的程序设计语言，其程序设计原则是以对象为中心。,1.对象 对象就是现实世界中某个具体的事物，或者说对象是具有特殊属性（数据）和行为方式（方法）的实体。例如：主板、CPU、内存 容器对象：电脑 在VB中，对象是运行时的实体，如窗体、命令按钮等各种控件。,对象与类,4/71,2.类 类是一个抽象的整体概念，对象是类的实例化。例如：人、汽车、电话、桌子等都可当作“类”。以“汽车”为例，说明类与对象的关系。汽车是一个笼统的名称，是整体概念，我们把汽车看成一个“类”，一辆辆具体的汽车（比如各种牌子的汽车）就是这个类的实例，也就是这个类的对象。,对象与类（续）,5/71,工具箱中的各种控件代

3、表了各个不同的类。当在窗体上画一个控件时，就将类转换为对象，即创建了一个控件对象，也简称为控件。,对象与类（续）,6/71,3.Visual Basic中对象的操作（1）建立对象 方法1：单击工具箱中的某个控件 在窗体上拖动。方法2：双击工具箱控件对象，则立即在窗体出现一个默认大小的对象框。,对象与类（续）,7/71,（2）编辑对象（实例示范）先选定对象，然后可以进行编辑操作 选定对象 选定一个对象：单击对象 选定多个对象：Ctrl（Shift）单击 编辑操作 放大、缩小：鼠标拖动或修改相关属性 删除对象：按Del键 复制对象：复制粘贴,对象与类（续）,8/71,（3）对象的命名,对象与类（续

4、）,1）必须由字母或汉字开头、随后可以是字母、汉字、数字、下划线串组成。2）长度=255个字符。简短、易记为好。,默认名,9/71,属性：描述和反映对象特征的参数。属性决定了对象展现给用户的界面具有什么样的外观及功能。例如：控件名称（Name)标题（Caption)颜色（Color)字体（FontName)属性设置的方法：方法1：通过属性窗口设置。方法2：在程序代码中通过赋值语句实现。格式：对象.属性=属性值 例如：cmdDisp.Caption=“显示”,属性（Property）,10/71,1.事件（Event）由VB预先设置好的、能被对象识别的动作。如：Click（单击）、Dblclic

5、k（双击）等。2.事件过程（Event Procedure）对象的事件发生后，应用程序处理这个事件所执行的一段程序代码。,事件与事件过程,一般格式如下：,Private Sub 对象名_事件过程名（参数列表）.(事件过程代码）End Sub,11/71,事件与事件过程（续）,【例2-1】设计界面如图所示，单击“显示”按钮，窗体显示“正在上课”，单击“隐藏”按钮，该句隐藏。,12/71,事件,事件过程,事件过程,对象,思考：单击窗体结束程序运行，如何编码？,13/71,方法：是用来完成特定操作的过程和函数。方法是面向对象的，调用时要指明对象。对象方法调用形式：对象.方法 参数列表 如省略对象，表

6、示是当前对象，一般指当前窗体。例如：Form1.print VB程序设计 若当前窗体是Form1，则可简写为：print VB程序设计,方法（Method）,属性、事件和方法是对象的三要素！,14/71,焦点与Tab键序,1焦点例如，在一个窗体上有多个文本框，其中有一个文本框中有闪烁的光标，如果用户从键盘输入字符，输入的字符一定出现在该文本框中，此文本框即获得了焦点（Focus）。在任何时刻，只能有一个对象获得焦点。使一个对象获得焦点的常用方法：选定对象（用鼠标单击对象或使用快捷键选定对象）在代码中用SetFocus方法设置焦点。例如：Text1.SetFocus另外，框架、标签、计时器、菜单

7、、直线、图像框等控件是不能得到焦点的。,15/71,2Tab键序Tab键序是指用户按Tab键时，焦点在控件间移动的顺序。系统默认的Tab键序与控件建立的顺序相同，也可以重新设置控件的TabIndex属性修改Tab键序。第一个默认获得焦点的控件的TabIndex属性值为0，其他控件依次为 1、2、3.。,焦点与Tab键序（续）,16/71,2.2 界面设计基础,在可视化编程环境中，编制应用程序的步骤是：设计界面面向对象编写程序代码在界面设计中必不可少的是窗体，通常还会在窗体上添加命令按钮、标签和文本框等控件。另外还有其他控件，将在后面章节中介绍。,17/71,窗体,窗体（Form）就是窗口，各种

8、控件对象必须建立在窗体上，在保存应用程序时，一个窗体对应一个窗体文件。,1.窗体的结构,18/71,常用的窗体属性有：（1）Name（名称）属性 指定窗体的名称，在程序代码中用这个名称引用该窗体。例如：form1.print“ok”,2.窗体的属性,窗体名,方法,第一个窗体的名称缺省值为form1，第二个窗体的名称缺省值为form2，通常要给Name属性设置一个有实际意义的名称，便于识别。,19/71,2.窗体的属性（续）,（2）Caption 属性：设置窗体标题栏显示的文本。（3）Font 属性组：设置窗体上字体的样式、大小、字形等。通过属性窗口设置：,20/71,程序中设置：见下表,21/

9、71,例如：下面程序的运行结果如图所示。,Private Sub Form_Click()Form1.FontName=黑体Form1.FontSize=40Print 字体设置Form1.FontItalic=True 斜体Form1.FontBold=True 粗体Print 字体设置End Sub,22/71,（4）Enabled属性：决定控件是否可操作。True：允许用户进行操作（缺省值）。False：呈暗淡色，禁止用户进行操作。,2.窗体的属性（续）,注意：如果窗体或其他容器对象无效，容器中的所有控件也将无效。,例如：单击窗体时，命令按钮CmdOK有效性改变为无效。,Private

10、Sub Form_Click()CmdOK.Enabled=falseEnd Sub,23/71,（5）Visible属性：决定控件是否可见。True：运行时控件可见（缺省值）。False：运行时控件隐藏，用户看不到，但控件本身是存在的。（6）BackColor属性：用于设置窗体的背景颜色。（7）ForeColor属性：用于设置在窗体中显示图片和文本的颜色。（8）MaxButton属性：值为Ture时有最大化按钮。（9）MinButton属性：值为 Ture时有最小化按钮。,2.窗体的属性（续）,24/71,2.窗体的属性（续）,（14）AutoRedraw属性 该属性决定窗体被隐藏或被另一窗

11、口覆盖之后重新显示，是否重新还原该窗体被隐藏或覆盖以前的画面。即是否重画如Circle、Line、Pset和Print等方法的输出。当为True时，重新还原该窗体以前的画面。当为False时，则不重画。,注意：在窗体load事件中如果用print方法在窗体打印输出，就必须先将该属性置为True，否则窗体启动后没有输出，因为窗体是在load事件执行完后显示。,（10）（13）（15）属性（自学）,25/71,2.窗体的属性（续）,属性多，难记，要多上机，学会编程后，再回来重温效果比较好。,26/71,与窗体有关的事件有30多个，掌握常用事件。（1）Click/DblClick：单击/双击窗体。（

12、2）Load：窗体被装入时触发的事件。该事件通常用来在启动应用程序时对属性和变量进行初始化。（3）Unload事件：卸载窗体时触发该事件。（4）Activate事件：当窗体变为活动窗体时触发该事件。,3.窗体的事件,27/71,窗体常用的方法有：打印输出Print移动Move清除Cls显示Show 隐藏Hide等方法。,4.窗体的方法,方法是面向对象的，使用的形式:对象.方法,方法是Visual Basic系统为编程者提供的用来完成特定功能的过程或函数。,28/71,（1）Print方法功能：在窗体上输出信息。调用格式:窗体名.PrintSpc(n)|Tab(n)表达式列表;|,说明：若窗体名

13、省略，则在当前窗体上输出。如果在立即窗口使用print方法可省略对象名或写debug。Spc(n)函数：输出n个空格。,4.窗体的方法（续）,29/71,4.窗体的方法（续）,Tab(n)函数：表达式的值从第n列输出。当n小于当前的输出位置时，则新的输出位置为下一行的第n列。;（分号）：光标定位在上一个输出项的后面。,（逗号）：光标定位在下一个输出段的开始位置。每个输出段占14列。;|,缺省：自动换行。【例2-2】在Form1窗体的单击事件中写入如下代码：,30/71,Private Sub Form_Click()Print*Print Tab(5);这学期我们学习VBPrint Tab(5

14、);VB的全称是：;Visual,BasicPrint 空一行Print Tab(5);Visual的意思是;视觉的;Print 或可视的PrintPrint Tab(5);教学方式;Tab(20);课时PrintPrint Spc(4);课堂教学;Tab(20);30Print Spc(6);上机;Tab(20);24Print*End Sub,程序代码：,P19 去掉Tab(5);,P19 去掉Tab(5);,31/71,单击窗体后程序的运行结果如图（a）所示。,（a）,32/71,如果将程序中的第7行语句：Print 或可视的修改为：Print Tab(5);或可视的程序的运行结果如图（

15、b）所示。,（b）,33/71,（2）Cls（清除）方法功能:清除运行时在窗体中显示的文本或图形。调用格式：窗体名.Cls说明:不清除在设计时的文本和图形。例如：单击窗体，清除窗体上的输出信息。Private Sub Form_Click()Cls End Sub,4.窗体的方法（续）,34/71,（3）Move（移动）方法功能：在屏幕上移动窗体并可改变其大小。调用格式：窗体名.Move 左边距离,上边距离,宽度,高度 说明：左边距离、上边距离、宽度、高度均为数值表达式，以twip为单位。“左边距”和“上边距”是以屏幕边界为准。,4.窗体的方法（续）,35/71,例：使用Move方法移动一个窗

16、体。双击窗体，窗体移动并定位在屏幕的左上角，同时窗体的长宽也缩小一倍。在Form1窗体的“代码”窗口中输入下列代码：Private Sub Form_DblClick()Form1.Move 0,0,Form1.Width/2,Form1.Height/2End Sub,4.窗体的方法（续）,当前窗体可以省略,36/71,命令按钮（CommandButton）,命令按钮常用来接受用户的操作信息，当用户单击命令按钮后开始进行一个特定的操作，如程序的运行或结束等。1属性 命令按钮的主要属性有：Caption属性设置命令按钮上显示的文本。还可以给命令按钮定义一个快捷键。,37/71,命令按钮（续）,

17、例如：显示“Ok”Caption：Ok 显示“Ok”Caption:&Ok 快捷键 Alt+O。,练习：显示“退出（X）”Caption:,退出（&X）,38/71,（2）Default 属性（逻辑值）当命令按钮的Default属性设置为True时，在程序运行过程中，用户按Enter键相当于用鼠标单击了该按钮。,命令按钮（续）,例如：界面如图，如果将“登记”按钮的Default属性设置为True，当用户在文本框中输入完信息后可直接按Enter键，相当于按“登记”按钮。,39/71,（3）Cancel 属性（逻辑值）命令按钮的 Cancel属性设置为True时，不管窗体上的哪一个非命令按钮控件具

18、有焦点，只要用户按下Esc键，就相当于单击了该按钮。,命令按钮（续）,例如：如果将“结束”按钮的Cancel 属性设置为True，用户按Esc键相当于按“结束”按钮。,通常将“取消”按钮的Cancel 属性设置为True。,40/71,Value属性 该属性在设计时无效。程序运行时，通过将命令按钮的Value属性设置为True，就可以触发该命令按钮的Click事件，相当于单击该命令按钮。Style 属性 确定命令按钮的显示形式。0：只能显示文字；1：可以显示图形或设置颜色。,命令按钮（续）,41/71,Picture属性 当命令按钮的Style属性值设置为1时，通过该属性指定命令按钮上显示的图

19、片。另外，下面这些基本属性与窗体的属性使用相同：Name（名称）、Height（高）、Width（宽）、Top及Left（相对容器左上角的坐标值）、Enabled（控件是否可用）、Visible（控件是否可见）、Font（字体）。,命令按钮（续）,42/71,命令按钮（续）,2.事件最常用的是单击（Click）事件，一般也只对该事件进行编程。在设计模式下，双击命令按钮则打开代码窗口，并显示命令按钮的Click事件过程模版，编程者可以直接在过程体内写程序代码。,43/71,命令按钮（续）,【例2-3】单击窗体上的“显示”按钮，窗体上显示“同学们好！”，如图（a）所示。单击“清除”按钮，清除窗体上

20、显示的信息，如图（b）所示。,44/71,操作步骤如下：,界面设计：在窗体上添加2个命令按钮并设置各对象的主要属性。代码设计：打开代码窗口，编制命令按钮的单击事件过程。代码如下：Private Sub Command1_Click()Print 同学们好！End SubPrivate Sub Command2_Click()ClsEnd Sub,45/71,3方法 命令按钮的方法用得比较少，在此介绍一个方法。Setfocus（设置焦点）方法功能：该方法用于设置指定的命令按钮获得焦点。例如，使命令按钮Command1获得焦点的语句为：Command1.setfocus,命令按钮（续）,46/71

21、,标签（Label）,标签用来显示文本信息，用户不能在标签内输入文本也不能对标签内的文本进行编辑。1属性 Caption属性设置标签中显示的文本。Alignment属性用于设置Caption属性中文本的对齐方式：0-Left Justify：左对齐。1-Right Justify：右对齐。2-Center：居中对齐。,47/71,标签（续）,BorderStyle属性用于设置标签控件是否有边框。0：标签无边框；1：标签有固定单边框。BackStyle属性用于设置标签的背景是否透明。0：背景透明，标签后的背景和图形可见；1：背景不透明，标签后的背景和图形不可见。,48/71,标签（续）,Auto

22、Size属性用于确定标签是否会随标题内容的多少自动调整标签的大小。True：自动调整标签本身的大小；False：标签的尺寸不能自动调整，超出尺寸范围的内容不予显示。另外，下面这些基本属性与窗体的属性使用相同：Name、Height、Width、Top、Left、Enabled、Visible、Font、ForeColor、BackColor等。,49/71,标签（续）,【例2-5】设计一个窗体，窗体上有1个标签和3个命令按钮，如图2-7（a）所示。程序运行后标签中显示红色的“校园新闻”，之后每单击窗体上的“放大”按钮，标签中的字放大并向窗体的下方移动30twip，运行结果如图2-7（b）图2-

23、7（d）所示；每单击窗体上的“缩小”按钮，标签中显示“开始播报”并向窗体的上方移动30twip，运行结果如图2-7（e）（f）所示。,50/71,例2-5（续）,图2-7 标签属性的使用,51/71,例2-5（续）,操作步骤如下：在窗体上添加3个命令按钮和1个标签控件。通过属性窗口设置3个命令按钮的Caption属性和Font属性，各控件的其他主要属性在程序代码中设置。设计界面如图2-7（a）所示。双击窗体或命令按钮，打开代码窗口，编制各命令按钮的单击事件过程。代码如下：,52/71,Private Sub Form_Load()Label1.AutoSize=True Label1.Left

24、=100 Label1.Top=100 Label1.ForeColor=&HFF&标签前景色是红色 Label1.Alignment=0 左对齐 Label1.FontSize=9 Label1.Caption=校园新闻End SubPrivate Sub Command1_Click()Label1.FontSize=Label1.FontSize+3 Label1.Top=Label1.Top+30 向下移动30twipEnd Sub,53/71,Private Sub Command2_Click()Label1.Alignment=1 右对齐 Label1.Caption=开始播报

25、Label1.FontSize=Label1.FontSize-3 Label1.Top=Label1.Top 30 向上移动30twipEnd SubPrivate Sub Command3_Click()Label1.Left=100 Label1.Top=100 Label1.Alignment=0 Label1.FontSize=9 Label1.Caption=校园新闻End Sub,54/71,标签（续）,2.事件标签可响应单击（Click）和双击（DblClick）事件，但一般情况下不对它们进行编程。3.方法标签控件支持Move方法，用于实现标签的移动。使用方法与窗体的Move方

26、法基本相同。,55/71,文本框（TextBox）,文本框控件是一个文本编辑区域，在该区域可以输入、编辑和输出文本内容。1属性 Text属性用于设置文本框中显示的文本。注意：文本框没有Caption属性。MultiLine用于设置文本框是否以多行方式显示文本。False：单行显示。（默认）True：多行显示。,56/71,文本框（续）,Maxlength设置文本框中最多字符个数。默认值为0，表示无字符个数的限制。ScrollBars用于设置当文本框中的文本超长时，文本框是否可加滚动条。0-None：无滚动条。1-Horizontal：有水平滚动条。2-Vertical：有垂直滚动条。3-Bot

27、h：有水平和垂直滚动条。,注意：当MultiLine为True时，该属性才有效。,57/71,文本框（续）,Locked用于设置文本框中的文本是否可被编辑。False：表示可以被编辑；（默认值）True：只能输出而不能输入。PassWordChar设置该属性是为了掩盖文本框中输入的字符。例如：在文本框中输入时显示为*，则将该属性值设置为“*”，而Text属性值仍是用户输入的文本。如果要恢复正常显示，将该属性值设为空串即可。,58/71,文本框（续）,SelStart、SelLength和SelText属性这三个属性是针对文本框中文本的编辑属性。SelStart：确定在文本框中选定文本的起始位置

28、。第一字符的位置为0。SelLength：设置或返回文本框中选定的文本字符串长度（字符个数）。SelText：设置或返回当前选定文本字符串。,例如：单击Command1，在窗体中显示文本框中被选中文本的起始位置、字符个数及选定文本字符串。,59/71,Private Sub Command1_Click()Print Text1.SelStart Print Text1.SelLength Print Text1.SelTextEnd Sub另外，下面这些属性与窗体的属性使用相同：Name、Height、Width、Top、Left、Enabled、Visible、Font，ForeColor

29、、BackColor。,文本框（续）,60/71,3.事件 Change事件当改变文本框的Text属性时会引发该事件。例如有如下程序代码：Private Sub Text1_Change()Print Text1.text End Sub当程序运行后，在文本框中输入“ABCD”，则在窗体上输出结果是？,文本框（续）,AABABCABCD,61/71,KeyPress事件 在文本框中每键入一个字符，就会触发一次该事件，并将字符的Ascii值传送给该事件过程的KeyAscii参数。例如：Private Sub Text1_KeyPress(KeyAscii As Integer)Print Key

30、Ascii,Chr(KeyAscii)End Sub在程序运行中输入ABCD，则在窗体上输出？,65A66B67C68D,文本框（续）,思考：KeyPress事件和Change事件的异同？,62/71,LostFocus（失去焦点）事件当用户用“Tab”键或鼠标选择其他对象而离开文本框控件时，触发该事件。通常用该事件检查文本框中的内容。GotFocus（获得焦点）事件控件获得焦点时发生。,文本框（续）,63/71,4.常用方法 文本框最常用的方法是：SetFocus。使用形式：对象.SetFocus 功能：把光标移到指定的文本框对象中。,文本框（续）,64/71,通过前面的例子可以归纳出创建V

31、isual Basic应用程序的步骤如下：新建工程。界面设计。编写程序代码。运行与调试程序。保存工程。下面通过一个例子再进一步详细介绍建立Visual Basic应用程序的方法。,2.3 创建VB应用程序的步骤,65/71,2.3 创建VB应用程序的步骤（续）,【例2-6】设计一个能够实现两个数的加、减、乘、除的计算器。设计界面如图2-8（a）所示，运行界面如图2-8（b）和（c）所示。,（a）,（b）,图2-8 计算器的界面,（c）,66/71,2.3 创建VB应用程序的步骤（续）,1.新建工程 2.界面设计 在窗体上添加控件：2个标签（1个标签中显示“结果”，另一个标签显示计算结果）、2个

32、文本框（用于输入参加计算的数据）和6个命令按钮。通过属性窗口按表2-5设置各对象的主要属性3.编写程序代码 打开代码窗口常采用以下方法：双击要编写事件过程的命令按钮或窗体。在工程资源管理窗口单击“查看代码”按钮。,67/71,代码如下：,Private Sub Command1_Click()“”命令按钮 Label2.Caption=Val(Text1.Text)+Val(Text2.Text)End SubPrivate Sub Command2_Click()“”命令按钮 Label2.Caption=Val(Text1.Text)Val(Text2.Text)End SubPrivat

33、e Sub Command3_Click()“”命令按钮 Label2.Caption=Val(Text1.Text)*Val(Text2.Text)End Sub“”命令按钮单击事件,68/71,Private Sub Command5_Click()“清除”命令按钮 Text1.Text=Text2.Text=Label2.Caption=Text1.SetFocus 将焦点定位于Text1中End SubPrivate Sub Command6_Click()“退出”命令按钮 End 结束程序运行End Sub,69/71,2.3 创建VB应用程序的步骤（续）,4.运行与调试程序 5 保

34、存工程单击保存按钮，或选择“文件”菜单中的“保存工程”命令。如果是第一次保存工程，系统显示“文件另存为”对话框。选择窗体文件保存的位置、输入文件名后单击保存按钮。系统显示“工程另存为”对话框，选择工程文件保存的位置、输入工程文件名后，单击“保存”按钮。,70/71,2.3 创建VB应用程序的步骤（续）,如果不再调试该程序：可以选择“文件”菜单中的“移除工程”命令，卸载该程序，继续设计另一个程序。若要修改或运行已经保存的工程：执行“文件”“打开工程”命令，或单击打开按钮。系统显示“打开工程”对话框。也可以在“我的电脑”或“资源管理器”中打开文件，即双击工程文件名（扩展名为vbp）。,71/71,2.3 创建VB应用程序的步骤（续）,6.生成可执行程序生成可执行程序的方法是：执行“文件”“生成xxx.exe”命令（xxx为工程文件名。在“生成工程”对话框中，选择可执行程序保存的位置、输入文件名后单击确定按钮。,