《第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/
2、71,VB是一种面向对象的程序设计语言,其程序设计原则是以对象为中心。,1. 对象 对象就是现实世界中某个具体的事物,或者说对象是具有特殊属性(数据)和行为方式(方法)的实体。 例如:主板、CPU、内存 容器对象:电脑 在VB中,对象是运行时的实体,如窗体、命令按钮等各种控件。,对象与类,4/71,2. 类 类是一个抽象的整体概念 ,对象是类的实例化。 例如:人、汽车、电话、桌子等都可当作“类”。 以“汽车”为例,说明类与对象的关系。 汽车是一个笼统的名称,是整体概念,我们把汽车看成一个“类”,一辆辆具体的汽车(比如各种牌子的汽车)就是这个类的实例,也就是这个类的对象。,对象与类(续),5/7
3、1,工具箱中的各种控件代表了各个不同的类。当在窗体上画一个控件时,就将类转换为对象,即创建了一个控件对象,也简称为控件。,对象与类(续),6/71,3. Visual Basic中对象的操作 (1)建立对象 方法1: 单击工具箱中的某个控件 在窗体上拖动。 方法2: 双击工具箱控件对象,则立即在窗体出现一个默认大小的对象框。,对象与类(续),7/71,(2)编辑对象(实例示范) 先选定对象,然后可以进行编辑操作 选定对象 选定一个对象:单击对象 选定多个对象:Ctrl(Shift)单击 编辑操作 放大、缩小:鼠标拖动或修改相关属性 删除对象: 按Del键 复制对象: 复制粘贴,对象与类(续),
4、8/71,(3)对象的命名,对象与类(续),1)必须由字母或汉字开头、随后可以是字母、汉字、数字、下划线串组成。 2)长度=255个字符。简短、易记为好 。,默认名,9/71,属性:描述和反映对象特征的参数。 属性决定了对象展现给用户的界面具有什么样的外观及功能。例如: 控件名称(Name) 标题(Caption) 颜色(Color) 字体(FontName) 属性设置的方法: 方法1:通过属性窗口设置。 方法2:在程序代码中通过赋值语句实现。 格式:对象.属性=属性值 例如:cmdDisp.Caption=“显示”,属性(Property),10/71,1. 事件(Event) 由VB预先设
5、置好的、能被对象识别的动作。如:Click(单击)、Dblclick(双击)等。 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)。 在任何时刻,只能有一个对象获得焦点。 使一个对象获得焦点的常用方法: 选定对象(用鼠标单击对象或使用快捷键选定对
7、象) 在代码中用SetFocus方法设置焦点。 例如:Text1. SetFocus 另外,框架、标签、计时器、菜单、直线、图像框等控件是不能得到焦点的。,15/71,2Tab键序 Tab键序是指用户按Tab键时,焦点在控件间移动的顺序。 系统默认的Tab键序与控件建立的顺序相同,也可以重新设置控件的TabIndex属性修改Tab键序。 第一个默认获得焦点的控件的TabIndex属性值为0,其他控件依次为 1、2、3.。,焦点与Tab键序(续),16/71,2.2 界面设计基础,在可视化编程环境中,编制应用程序的步骤是: 设计界面 面向对象编写程序代码 在界面设计中必不可少的是窗体,通常还会在
8、窗体上添加命令按钮、标签和文本框等控件。 另外还有其他控件,将在后面章节中介绍。,17/71,窗体,窗体(Form)就是窗口,各种控件对象必须建立在窗体上,在保存应用程序时,一个窗体对应一个窗体文件。,1. 窗体的结构,18/71,常用的窗体属性有: (1)Name(名称)属性 指定窗体的名称,在程序代码中用这个名称引用该窗体。 例如:form1.print “ok”,2. 窗体的属性,窗体名,方法,第一个窗体的名称缺省值为form1,第二个窗体的名称缺省值为form2,通常要给Name属性设置一个有实际意义的名称,便于识别。,19/71,2. 窗体的属性(续),(2)Caption 属性:设
9、置窗体标题栏显示的文本。 (3)Font 属性组:设置窗体上字体的样式、大小、字形等。 通过属性窗口设置:,20/71,程序中设置:见下表,21/71,例如:下面程序的运行结果如图所示。,Private Sub Form_Click() Form1.FontName = “黑体“ Form1.FontSize = 40 Print “字体设置“ Form1.FontItalic = True 斜体 Form1.FontBold = True 粗体 Print “字体设置“ End Sub,22/71,(4)Enabled属性:决定控件是否可操作。 True:允许用户进行操作(缺省值)。 Fal
10、se:呈暗淡色,禁止用户进行操作。,2. 窗体的属性(续),注意:如果窗体或其他容器对象无效,容器中的所有控件也将无效。,例如:单击窗体时,命令按钮CmdOK有效性改变为无效。,Private Sub Form_Click () CmdOK.Enabled = false End Sub,23/71,(5)Visible属性:决定控件是否可见。 True :运行时控件可见(缺省值) 。 False:运行时控件隐藏,用户看不到,但控件本身是存在的。 (6)BackColor属性:用于设置窗体的背景颜色。 (7)ForeColor属性:用于设置在窗体中显示图片和文本的颜色。 (8)MaxButto
11、n属性:值为Ture时有最大化按钮。 (9)MinButton属性:值为 Ture时有最小化按钮。,2. 窗体的属性(续),24/71,2. 窗体的属性(续),(14)AutoRedraw属性 该属性决定窗体被隐藏或被另一窗口覆盖之后重新显示,是否重新还原该窗体被隐藏或覆盖以前的画面。即是否重画如Circle、Line、Pset和Print等方法的输出。 当为True时,重新还原该窗体以前的画面。 当为False时,则不重画。,注意:在窗体load事件中如果用print方法在窗体打印输出,就必须先将该属性置为True,否则窗体启动后没有输出,因为窗体是在load事件执行完后显示。,(10)(1
12、3)(15)属性 (自学),25/71,2. 窗体的属性(续),属性多,难记,要多上机,学会编程后,再回来重温效果比较好。,26/71,与窗体有关的事件有30多个,掌握常用事件。 (1)Click/DblClick:单击/双击窗体。 (2)Load:窗体被装入时触发的事件。该事件通常用来在启动应用程序时对属性和变量进行初始化。 (3)Unload事件:卸载窗体时触发该事件。 (4)Activate事件:当窗体变为活动窗体时触发该事件。,3. 窗体的事件,27/71,窗体常用的方法有: 打印输出Print 移动Move 清除Cls 显示Show 隐藏Hide等方法。,4. 窗体的方法,方法是面向
13、对象的,使用的形式: 对象.方法,方法是Visual Basic系统为编程者提供的用来完成特定功能的过程或函数。,28/71,(1)Print方法 功能:在窗体上输出信息。 调用格式: 窗体名.PrintSpc(n)|Tab(n)表达式列表;|, 说明: 若窗体名省略,则在当前窗体上输出。如果在立即窗口使用print方法可省略对象名或写debug。 Spc(n)函数:输出n个空格。,4. 窗体的方法(续),29/71,4. 窗体的方法(续),Tab(n)函数:表达式的值从第n列输出。当n小于当前的输出位置时,则新的输出位置为下一行的第n列。 ;(分号):光标定位在上一个输出项的后面。 ,(逗号
14、):光标定位在下一个输出段的开始位置。每个输出段占14列。 ;|,缺省:自动换行。 【例2-2】在Form1窗体的单击事件中写入如下代码:,30/71,Private Sub Form_Click() Print “*“ Print Tab(5); “这学期我们学习VB“ Print Tab(5); “VB的全称是:“; “Visual“, “Basic“ Print 空一行 Print Tab(5); “Visual的意思是“; “视觉的“; Print “或可视的“ Print Print Tab(5); “教学方式“; Tab(20); “课时“ Print Print Spc(4);
15、“课堂教学“; Tab(20); 30 Print Spc(6); “上机“; Tab(20); 24 Print “*“ End Sub,程序代码:,P19 去掉Tab(5);,P19 去掉Tab(5);,31/71,单击窗体后程序的运行结果如图(a)所示。,(a),32/71,如果将程序中的第7行语句: Print “或可视的“ 修改为: Print Tab(5);“或可视的“ 程序的运行结果如图(b)所示。,(b),33/71,(2)Cls(清除)方法 功能 : 清除运行时在窗体中显示的文本或图形。调用格式:窗体名.Cls 说明 : 不清除在设计时的文本和图形。 例如:单击窗体,清除窗体
16、上的输出信息。 Private Sub Form_Click() Cls End Sub,4. 窗体的方法(续),34/71,(3)Move(移动)方法 功能:在屏幕上移动窗体并可改变其大小。 调用格式: 窗体名.Move 左边距离,上边距离,宽度,高度 说明:左边距离、上边距离、宽度、高度均为数值表达式,以twip为单位。 “左边距”和“上边距”是以屏幕边界为准。,4. 窗体的方法(续),35/71,例:使用Move方法移动一个窗体。双击窗体,窗体移动并定位在屏幕的左上角,同时窗体的长宽也缩小一倍。 在Form1窗体的“代码”窗口中输入下列代码: Private Sub Form_DblCl
17、ick() Form1.Move 0,0,Form1.Width/2,Form1.Height/2 End Sub,4. 窗体的方法(续),当前窗体可以省略,36/71,命令按钮(CommandButton),命令按钮常用来接受用户的操作信息,当用户单击命令按钮后开始进行一个特定的操作,如程序的运行或结束等。 1属性 命令按钮的主要属性有: Caption属性 设置命令按钮上显示的文本。还可以给命令按钮定义一个快捷键。,37/71,命令按钮(续),例如:显示“Ok” Caption:Ok 显示“ Ok” Caption: &Ok 快捷键 Alt+O。,练习:显示“退出(X)” Caption:
18、,退出(&X),38/71,(2)Default 属性(逻辑值) 当命令按钮的Default属性设置为True时,在程序运行过程中,用户按Enter键相当于用鼠标单击了该按钮。,命令按钮(续),例如:界面如图,如果将“登记”按钮的Default属性设置为True,当用户在文本框中输入完信息后可直接按Enter键,相当于按“登记”按钮。,39/71,(3)Cancel 属性(逻辑值) 命令按钮的 Cancel属性设置为True时,不管窗体上的哪一个非命令按钮控件具有焦点,只要用户按下Esc键,就相当于单击了该按钮。,命令按钮(续),例如:如果将“结束”按钮的Cancel 属性设置为True,用户
19、按Esc键相当于按“结束”按钮。,通常将“取消”按钮的Cancel 属性设置为True。,40/71, Value属性 该属性在设计时无效。程序运行时,通过将命令按钮的Value属性设置为True,就可以触发该命令按钮的Click事件,相当于单击该命令按钮。 Style 属性 确定命令按钮的显示形式。 0:只能显示文字; 1:可以显示图形或设置颜色。,命令按钮(续),41/71, Picture属性 当命令按钮的Style属性值设置为1时,通过该属性指定命令按钮上显示的图片。 另外,下面这些基本属性与窗体的属性使用相同: Name(名称)、Height(高)、Width(宽)、Top及Left
20、(相对容器左上角的坐标值)、Enabled(控件是否可用)、Visible(控件是否可见)、Font(字体)。,命令按钮(续),42/71,命令按钮(续),2. 事件 最常用的是单击(Click)事件,一般也只对该事件进行编程。 在设计模式下,双击命令按钮则打开代码窗口,并显示命令按钮的Click事件过程模版,编程者可以直接在过程体内写程序代码。,43/71,命令按钮(续),【例2-3】单击窗体上的“显示”按钮,窗体上显示“同学们好!”,如图(a)所示。单击“清除”按钮,清除窗体上显示的信息,如图(b)所示。,44/71,操作步骤如下:, 界面设计:在窗体上添加2个命令按钮并设置各对象的主要属
21、性。 代码设计:打开代码窗口,编制命令按钮的单击事件过程。代码如下: Private Sub Command1_Click() Print “同学们好!“ End Sub Private Sub Command2_Click() Cls End Sub,45/71,3方法 命令按钮的方法用得比较少,在此介绍一个方法。 Setfocus (设置焦点)方法 功能:该方法用于设置指定的命令按钮获得焦点。 例如,使命令按钮Command1获得焦点的语句为: Command1.setfocus,命令按钮(续),46/71,标签(Label),标签用来显示文本信息,用户不能在标签内输入文本也不能对标签内的
22、文本进行编辑。 1属性 Caption属性 设置标签中显示的文本。 Alignment属性 用于设置Caption属性中文本的对齐方式: 0 - Left Justify:左对齐。 1 - Right Justify:右对齐。 2 - Center:居中对齐。,47/71,标签(续), BorderStyle属性 用于设置标签控件是否有边框。 0:标签无边框; 1:标签有固定单边框。 BackStyle属性 用于设置标签的背景是否透明。 0:背景透明,标签后的背景和图形可见; 1:背景不透明,标签后的背景和图形不可见。,48/71,标签(续), AutoSize属性 用于确定标签是否会随标题内
23、容的多少自动调整标签的大小。 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-7(d)所示;每单击窗体上的“
24、缩小”按钮,标签中显示“开始播报”并向窗体的上方移动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 = 10
25、0 Label1.Top = 100 Label1.ForeColor = &HFF& 标签前景色是红色 Label1.Alignment = 0 左对齐 Label1.FontSize = 9 Label1.Caption = “校园新闻“ End Sub Private Sub Command1_Click() Label1.FontSize = Label1.FontSize + 3 Label1.Top = Label1.Top + 30 向下移动30twip End Sub,53/71,Private Sub Command2_Click() Label1.Alignment = 1
26、 右对齐 Label1.Caption = “开始播报“ Label1.FontSize = Label1.FontSize - 3 Label1.Top = Label1.Top 30 向上移动30twip End Sub Private Sub Command3_Click() Label1.Left = 100 Label1.Top = 100 Label1.Alignment = 0 Label1.FontSize = 9 Label1.Caption = “校园新闻“ End Sub,54/71,标签(续),2. 事件 标签可响应单击(Click)和双击(DblClick)事件,但一
27、般情况下不对它们进行编程。 3. 方法 标签控件支持Move方法,用于实现标签的移动。使用方法与窗体的Move方法基本相同。,55/71,文本框(TextBox),文本框控件是一个文本编辑区域,在该区域可以输入、编辑和输出文本内容。 1属性 Text属性 用于设置文本框中显示的文本。 注意:文本框没有Caption属性。 MultiLine 用于设置文本框是否以多行方式显示文本。 False:单行显示。(默认) True:多行显示。,56/71,文本框(续), Maxlength 设置文本框中最多字符个数。默认值为0,表示无字符个数的限制。 ScrollBars 用于设置当文本框中的文本超长时
28、,文本框是否可加滚动条。 0-None:无滚动条。 1-Horizontal:有水平滚动条。 2-Vertical:有垂直滚动条。 3-Both:有水平和垂直滚动条。,注意: 当MultiLine为True时,该属性才有效。,57/71,文本框(续), Locked 用于设置文本框中的文本是否可被编辑。 False:表示可以被编辑; (默认值) True:只能输出而不能输入。 PassWordChar 设置该属性是为了掩盖文本框中输入的字符。 例如:在文本框中输入时显示为*,则将该属性值设置为“*”,而Text属性值仍是用户输入的文本。 如果要恢复正常显示,将该属性值设为空串即可。,58/71
29、,文本框(续), SelStart、SelLength和SelText属性 这三个属性是针对文本框中文本的编辑属性。 SelStart:确定在文本框中选定文本的起始位置。第一字符的位置为0。 SelLength:设置或返回文本框中选定的文本字符串长度(字符个数)。 SelText:设置或返回当前选定文本字符串。,例如:单击Command1,在窗体中显示文本框中被选中文本的起始位置、字符个数及选定文本字符串。,59/71,Private Sub Command1_Click() Print Text1.SelStart Print Text1.SelLength Print Text1.SelT
30、ext End Sub 另外,下面这些属性与窗体的属性使用相同: Name、Height、Width、Top、Left、Enabled、Visible、Font,ForeColor、BackColor。,文本框(续),60/71,3. 事件 Change事件 当改变文本框的Text属性时会引发该事件。 例如有如下程序代码: Private Sub Text1_Change() Print Text1.text End Sub 当程序运行后,在文本框中输入“ABCD”,则在窗体上输出结果是?,文本框(续),A AB ABC ABCD,61/71, KeyPress事件 在文本框中每键入一个字符,
31、就会触发一次该事件,并将字符的Ascii值传送给该事件过程的KeyAscii参数。 例如: Private Sub Text1_KeyPress(KeyAscii As Integer) Print KeyAscii, Chr(KeyAscii) End Sub 在程序运行中输入ABCD,则在窗体上输出?,65 A 66 B 67 C 68 D,文本框(续),思考:KeyPress事件和Change事件的异同?,62/71, LostFocus (失去焦点)事件 当用户用“Tab”键或鼠标选择其他对象而离开文本框控件时,触发该事件。 通常用该事件检查文本框中的内容。 GotFocus(获得焦点
32、)事件 控件获得焦点时发生。,文本框(续),63/71,4. 常用方法 文本框最常用的方法是:SetFocus。 使用形式: 对象.SetFocus 功能:把光标移到指定的文本框对象中。,文本框(续),64/71,通过前面的例子可以归纳出创建Visual Basic应用程序的步骤如下: 新建工程。 界面设计。 编写程序代码。 运行与调试程序。 保存工程。 下面通过一个例子再进一步详细介绍建立Visual Basic应用程序的方法。,2.3 创建VB应用程序的步骤,65/71,2.3 创建VB应用程序的步骤(续),【例2-6】设计一个能够实现两个数的加、减、乘、除的计算器。设计界面如图2-8(a
33、)所示,运行界面如图2-8(b)和(c)所示。,(a),(b),图2-8 计算器的界面,(c),66/71,2.3 创建VB应用程序的步骤(续),1. 新建工程 2. 界面设计 在窗体上添加控件: 2个标签(1个标签中显示“结果”,另一个标签显示计算结果)、2个文本框(用于输入参加计算的数据)和6个命令按钮。 通过属性窗口按表2-5设置各对象的主要属性 3. 编写程序代码 打开代码窗口常采用以下方法: 双击要编写事件过程的命令按钮或窗体。 在工程资源管理窗口单击“查看代码”按钮。,67/71,代码如下:,Private Sub Command1_Click() “”命令按钮 Label2.Ca
34、ption = Val (Text1.Text) + Val (Text2.Text) End Sub Private Sub Command2_Click() “”命令按钮 Label2.Caption = Val (Text1.Text) Val (Text2.Text) End Sub Private Sub Command3_Click() “”命令按钮 Label2.Caption = Val (Text1.Text) * Val (Text2.Text) End Sub “”命令按钮单击事件,68/71,Private Sub Command5_Click() “清除”命令按钮 T
35、ext1.Text = “ Text2.Text = “ Label2.Caption = “ Text1.SetFocus 将焦点定位于Text1中 End Sub Private Sub Command6_Click() “退出”命令按钮 End 结束程序运行 End Sub,69/71,2.3 创建VB应用程序的步骤(续),4. 运行与调试程序 5 保存工程 单击保存按钮 ,或选择“文件”菜单中的“保存工程”命令。如果是第一次保存工程,系统显示“文件另存为”对话框。 选择窗体文件保存的位置、输入文件名后单击保存按钮。 系统显示“工程另存为”对话框,选择工程文件保存的位置、输入工程文件名后,单击“保存”按钮。,70/71,2.3 创建VB应用程序的步骤(续),如果不再调试该程序:可以选择“文件”菜单中的“移除工程”命令,卸载该程序,继续设计另一个程序。 若要修改或运行已经保存的工程: 执行“文件”“打开工程”命令,或单击打开按钮。系统显示“打开工程”对话框。也可以在“我的电脑”或“资源管理器”中打开文件,即双击工程文件名(扩展名为vbp)。,71/71,2.3 创建VB应用程序的步骤(续),6. 生成可执行程序 生成可执行程序的方法是: 执行“文件”“生成xxx.exe”命令(xxx为工程文件名。 在“生成工程”对话框中,选择可执行程序保存的位置、输入文件名后单击确定按钮。,
链接地址:https://www.31doc.com/p-2252554.html