第2章可视化编程的概念与步骤课件.ppt

1、第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 第第2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1 可视化编程的基本概念可视化编程的基本概念 2.2 VB可视化编程的步骤可视化编程的步骤 2.3 控件的画法控件的画法 习题二习题二 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1 可视化编程的基本概念可视化编程的基本概念 2.1.1 类与对象 1.对象 可以把对象(Object)想象成日常生活中的各种物体，例如一只气球、一本书、一把椅子、一台电脑等都是对象。容量对象：由多个“子”对象组成。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步

2、骤 2.属性 每个对象都有其特征，在计算机程序语言中叫做属性(Property)。如小孩玩的气球，与它相关的属性数据有直径、颜色、状态(充气或未充气)等，还有一些不可见的性质，如寿命等。1)预设法：使用属性窗口 2)现改法：代码中通过编程设置。对象名对象名.属性名属性名=属性值属性值 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3.类 同一类对象的大部分属性栏是相同的，例如，拿一般的汽车与坦克车相比较，虽然都有车长、车宽等属性，但坦克车会多出一些记录大炮口径、履带形式的属性。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 4.方法 对象中除了属性之外，还包含了一

3、些控制对象的动作或功能。以气球为例，假设气球这个对象有3个动作，分别是充气(用氢气充满气球)、放气(排出气球中的气体)、上升(放手让气球飞走)。VB的方法用于完成某种特定功能。如对象打印（Print）方法，显示窗体（Show）方法，移动（Move ）方法。格式：对象名格式：对象名.方法名方法名 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1.2 事件与程序 1.事件 对于对象而言，事件(Event)就是发生在该对象上的事情。比如一个吹大的气球，用针扎它一下，该对象就会进行放气动作，“针扎”就是一个事件。VB中提供了许多对象，让用户利用它们来设计应用程序。第第2 2章章 可

4、视化编程的概念与步骤可视化编程的概念与步骤 2.事件过程 当在对象上发生了某个事件后，必须想办法处理这个事件，而处理的步骤就是事件过程(Event Procedure)。以气球为例，发生了“针扎”事件后，我们可能是进行粘补或丢弃，不论是粘补还是丢弃，都是针对“针扎”事件的处理步骤，也就是事件过程。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3.事件驱动程序设计 写完程序后开始执行时，程序会先等待某个事件的发生，然后再去执行处理此事件的事件过程。事件过程要经过事件的触发才会被执行，这种动作模式就称为事件驱动程序设计(Event Driven Programming Model)

5、，也就是说，由事件控制整个程序的执行流程。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 当事件过程处理完某一事件后，程序就会进入等待状态，直到下一个事件发生为止。简单地说，VB程序的执行步骤为 (1)等待事件的发生。(2)事件发生时，执行其对应的事件过程。(3)重复步骤(1)。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1.3 VB的控件 VB中的控件通常分为3种类型。1)内部控件 2)ActiveX控件 3)可插入的对象 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 表2-1 VB的内部控件 第第2 2章章 可视化编程的概念与步骤可视化编

6、程的概念与步骤 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1.4 窗体对象 1.窗体的结构 同Windows环境下的应用程序窗口一样，VB中的窗体也具有控制菜单、标题栏、最大化/复原按钮、最小化按钮、关闭按钮以及边框。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 创建新窗体的步骤如下：(1)从“工程”菜单中选择“添加窗体”菜单项。(2)缺省情况下系统将显示如图2.1所示的“添加窗体”对话框。(3)该对话框的“新建”选项卡用于创建一个新窗体，列表框中列出了各种新窗体的类型，其中选择“窗体”选项时，建立一个空白的新窗体，选择其他选项时则建立一个预定义了某些功

7、能的窗体。(4)单击“打开”按钮，一个新的空白窗体被加入到当前工程中，同时会显示在屏幕上。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.1 添加新窗体 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.窗体的属性 通过修改窗体的属性可以改变窗体内在或外在的结构特征，控制窗体的外观。常用的窗体属性见表2-2。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 表2-2 常用的窗体属性第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3.多文档(MDI)窗体 在Windows中的应用程序具有多种多样的窗口界面，总的看来有3种形式：单文档界

8、面(SDI)、多文档界面(MDI)和资源管理器风格界面。VB 6.0支持这3种风格的文档界面。本节主要介绍多文档界面。多文档界面的应用可同时打开多个文档，每个文档都显示在自己的窗口中。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 创建MDI窗体的一般步骤如下：(1)在“工程”菜单中选择“添加MDI窗体”子菜单，系统显示“添加MDI窗体”对话框，如图2.2所示。(2)选择“新建”选项卡中的“MDI窗体”，单击“打开”按钮，屏幕上出现一个名字为MDIForm1的MDI窗体(它的底色与普通窗体不同)，如图2.3所示。(3)单击工具栏上的“启动”按钮运行程序，一个空白的MDI窗体出现在

9、屏幕上。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.2 “添加MDI窗体”对话框 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.3 新添加的MDI窗体第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1.5 代码窗口 1.代码窗口简介 代码窗口又称代码编辑器，各种通用过程和事件过程代码均在此窗口上编写和修改。有4种方法可以打开代码窗口：(1)双击窗体的任何地方。(2)单击右键快捷菜单中的“查看代码”命令。(3)使用工程窗口中的“查看代码”按钮 。(4)选择“视图”菜单中的“代码窗口”命令。第第2 2章章 可视化编程的概念与步骤可视化

10、编程的概念与步骤 图2.4 代码窗口 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 (1)“对象下拉列表框”中列出了当前窗体及所包含的全体对象名。其中，无论窗体的名称改为什么，作为窗体的对象名总是Form。(2)“过程下拉列表框”中列出了所选对象的所有事件名。(3)“代码区”是程序代码编辑区，能够非常方便地进行代码的编辑和修改。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.自动功能 在VB代码窗口中编写代码时，VB具有以下特性。1)自动列出成员特性 当要输入控件的属性和方法时，在控件名后输入小数点，VB就会自动显示一个下拉列表框，其中包含了该控件的所有成员(

11、属性和方法)，如图2.5所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.5 VB自动列出成员 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2)自动显示快速信息 该功能可显示语句和函数的语法格式。在输入合法的VB语句或函数名之后，代码窗口中在当前行的下面自动显示该语句或函数的语法，如图2.6所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.6 自动快速显示信息 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3)自动语法检查 在VB中可自动检查语句的语法。当输入某行代码后回车，如果系统出现语法错误，VB会显示警告提

12、示框，同时该语句变成红色，如图2.7所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.7 自动语法检查 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 4)查看过程 在“代码窗口”的左下角有两个按钮：“过程查看”和“全模块查看”按钮，通过它们可切换“代码窗口”的两种查看视图。(1)单击“过程查看”按钮 ，一次只查看一个过程。(2)单击“全模块查看”按钮 ，可查看程序中的所有过程。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2 VB可视化编程的步骤可视化编程的步骤 VB可视化编程的一般步骤为 (1)设计界面：先建立窗体，再利用控件在窗体

13、上创建各种对象。(2)设置属性：设置窗体或控件等对象的属性。(3)编写代码。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.1 新建一个工程 在VB环境中开发的每个应用程序都被称为工程，那么首先从建立一个工程开始。新建一个工程有如下两种方法：(1)启动VB后，系统显示“新建工程”对话框，在“新建工程”对话框的选项卡里选择“标准EXE”，然后单击“打开”按钮。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 (2)在“文件”菜单中选择“新建工程”子菜单，然后在“新建工程”对话框中选择“标准EXE”，并单击“打开”按钮。第第2 2章章 可视化编程的概念与步骤可视化

14、编程的概念与步骤 2.2.2 添加控件 下面通过编写如图2.8所示的一个简单的VB应用程序来说明可视化编程的方法。在工程默认的一个窗体中可以添加控件，进行窗体的界面设计。向窗体中添加控件的方法为 (1)单击工具箱中的控件图标，鼠标指针变成一个十字指针。(2)在窗体的工作区按住鼠标左键拖动鼠标，即可在窗体上画出对应控件。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.8 简单示例 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.9 增加一个标签和两个命令按钮第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.3 设置属性 对象属性的设置是

15、在属性窗口中进行的，其操作方法如下：1)设置窗体Form1的属性 单击窗体的空白区域(不要单击任何控件)，确认选中的是窗体，可从“对象”下拉列表框中查看。在属性窗口中找到标题属性Caption，将其值改为“简单示例”，如图2.10所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.10 设置窗体Form1的属性 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2)设置控件的属性 单击窗体上的控件，确认选中该控件，然后根据需要逐一设置控件的各属性。选中标签控件“Label1”，将其边框风格属性(BorderStyle)改为：1Fixed。然后用鼠标单击背景颜色

16、属性(BackColor)右边的箭头按钮，从弹出的调色板窗口中选择“白色”(如图2.11左)，用鼠标单击字体属性(Font)右边的按钮，从弹出字体对话框中设置相应的字体类型、字体样式和字体大小(如图2.11右)。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.11 调色板与“字体”对话框 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 表2-3 属性设置 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.12 属性设置后的窗体第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 打开“代码编辑器”，单击“对象”下拉列表框右边的箭头按钮

17、，从中选择Form对象，如图2.13所示。在“过程”事件下拉列表框中选择Load事件，在代码窗口中输入下列代码：Private Sub Form_Load()Label1.Caption=祝您快乐 End Sub第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.13 在“对象”下拉列表框中选择Form窗体 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 用同样的方法，输入命令按钮Command1和Command2的单击(Click)事件过程代码：Private Sub Command1_Click()Label1.Caption=今天是：&Format(Date

18、,dddddd)End SubPrivate Sub Command2_Click()Label1.Caption=现在是北京时间：&Format(Time,ttttt)End Sub第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 事件过程的首尾两行(粗体)：Private Sub Command1_Click()End Sub是系统自动给出的代码，程序员不必重复输入。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.5 运行工程 单击工具栏上的“启动”按钮 或按F5键，即可运行工程，如图2.14所示。用鼠标单击“日期”按钮，窗体显示如图2.14左；用鼠标单击

19、“时间”按钮，窗体显示如图2.14右。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.14 运行工程 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.6 修改工程 修改工程包括修改对象的属性和代码，也可以添加新的对象和代码，或者调整控件的大小等，直到满足工程设计的需要为止。在本例的窗体中，将标签的高度稍微减小一些，将按钮的大小和位置做些调整，使界面更加美观，如图2.15所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.15 修改后的工程 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.7 保存工程 用下面两

20、种方法保存工程：(1)单击“文件”菜单中的“保存工程”或“工程另存为”，如图2.16所示。(2)单击工具栏上的“保存工程”按钮 。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.16 保存工程 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.17 编译工程第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.8 工程的编译 (1)在“文件”菜单中选择“生成工程1.exe”，如图2.17所示。(2)在打开的“生成工程”对话框中，选择程序所保存的文件夹和文件名。(3)单击“确定”按钮，即可生成Windows中的应用程序。第第2 2章章 可视化

21、编程的概念与步骤可视化编程的概念与步骤 2.3 控件的画法控件的画法 2.3.1 在窗体上画一个控件 在窗体上画一个控件有两种方法：(1)单击工具箱中的控件按钮，在窗体上拖动鼠标画出控件，前面已经作过介绍。(2)双击工具箱中的控件按钮，即可在窗体的中央画出控件。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.3.2 控件的缩放和移动 在设计时，当在窗体上画出控件以后，控件的边框上有8个蓝色小方块，这表明该控件是“活动”的，通常称为“当前控件”，如图2.18所示。用鼠标单击控件，可以使之成为当前控件。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.18 指针

22、所指为当前控件 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 对于选中的控件(即当前控件)，可以用两种方法来进行缩放和移动：(1)直接使用鼠标拖动控件到需要的地方。(2)在属性窗口修改某些属性来改变控件的大小和位置。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.3.3 控件的复制与删除 在窗体上，控件的复制和删除操作同Windows环境下文件的操作相同：(1)选中控件，单击工具栏上的“复制”按钮或按Ctrl+C键可将控件复制到剪贴板中。(2)单击“粘贴”按钮 或按Ctrl+V键将控件粘贴到窗体的左上角。由于复制控件名称相同，系统会弹出一个“是否创建控件数组”

23、对话框，如图2.19所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.19 是否创建控件数组 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 (3)单击“是(Y)”按钮，将在窗体上创建一个控件数组(参见后面章节)；单击“否(N)”按钮即可在窗体上得到该控件的复制品。复制品的所有属性与原控件相同，只是名称属性(Name)的序号比原控件大。另外，还可以利用右键快捷菜单上的命令对控件作复制、删除等操作，如图2.20所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.20 使用快捷菜单复制控件第第2 2章章 可视化编程的概念与步骤可视化编程的

24、概念与步骤 2.3.4 控件的布局 当窗体上存在多个控件时，需要对窗体上的控件排列、对齐、是否等大等格式进行操作。这些操作一般可以通过“格式”菜单完成，如图2.21所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.21 打开“格式”菜单 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 1.选定多个控件 要调整多个控件之间的位置，需要同时选定多个控件。其选定方法常用下面两种：(1)在窗体的空白区域利用鼠标左键拉出一个矩形框，将需要选中的控件圈上即可选定多个控件。(2)先按住Shift键，再用鼠标单击所要选中的控件，如图2.22所示。第第2 2章章 可视化编程

25、的概念与步骤可视化编程的概念与步骤 图2.22 选定多个控件 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.设置选定控件对齐方式 通过“格式”菜单中的“对齐”子菜单中的各命令，可以实现多控件的各种对齐方式。(1)左对齐：使所选择对象的水平位置对齐，其左边界以最后选择的对象的左边界为基准对齐，如图2.23所示。(2)居中对齐：使所选择对象的水平位置对齐，其中心位置以最后选择的对象的中心位置为基准对齐。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.23 左对齐第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 (3)右对齐：使所选择对象的水平位置

26、对齐，其右边界以最后选择的对象的右边界为基准对齐。(4)顶端对齐：使所选择对象的垂直位置对齐，其顶端位置以最后选择的对象的顶端位置为基准对齐。(5)中间对齐：使所选择对象的垂直位置对齐，其中心位置以最后选择的对象的中心位置为基准对齐。(6)底端对齐：使所选择对象的垂直位置对齐，其底端位置以最后选择的对象的底端位置为基准对齐。(7)对齐到网格：使所选对象的左上角与最靠近的网格对齐。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3.按相同尺寸调整选定控件的大小 通过“格式”菜单中的“统一尺寸”命令，可以自动调整控件的大小，使其具有统一的尺寸。“统一尺寸”命令中有3项子菜单，如图2.

27、24所示。(1)宽度相同：以最后选择的对象为基准，使其他被选定的控件与其具有相同的宽度。(2)高度相同：以最后选择的对象为基准，使其他被选定的控件与其具有相同的高度。(3)两者都相同：以最后选择的对象为基准，使其他被选定的控件与其具有相同的宽度和高度。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.24 统一尺寸 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 4.调整选定控件间距 利用“格式”菜单中的“水平间距”和“垂直间距”子菜单，可以调整控件之间的间距，如图2.25所示。(1)相同间距：被选定的控件之间设置相同的间距。(2)递增：被选定的控件之间间距增加

28、。(3)递减：被选定的控件之间间距减少。(4)移除：删除被选定控件之间的间距。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.25 调整间距第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 5.使选定控件水平对齐或垂直对齐 通过“格式”菜单中的“在窗体中居中对齐”子菜单，选择“水平对齐”或“垂直对齐”可以实现多控件的水平对齐或垂直对齐方式。(1)水平对齐：使所选择对象的中心位置与窗体中心的水平线对齐。(2)垂直对齐：使所选择对象的中心位置与窗体中心的垂直线对齐。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 6.设置选定控件显示位置 通过“格式”菜

29、单中的“顺序”子菜单，可以设置多个控件重叠时控件的显示位置。(1)置前：将所选择的对象移到所有其他对象的前面，如图2.26左所示。(2)置后：将所选择的对象移到所有其他对象的后面，如图2.26右所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.26 设置控件为前台或后台显示第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 习习 题题 二二 2.1 什么是对象的属性、事件和方法？2.2 对象、事件和方法三者之间的关系如何？请举例说明。2.3 属性和方法有何区别和联系？试举例说明。2.4 简述VB可视化编程的一般步骤。第第2 2章章 可视化编程的概念与步骤可视化

30、编程的概念与步骤 2.5 在代码中自动加载一个标签的标题和文本框的文本，单击“修改”按钮后改变标签中的标题和文本框中的文本。2.6 理解单击(Click)和双击(DblClick)事件。用鼠标单击或双击窗体改变标签的标题。2.7 理解Visible属性。编写一个简单程序，要求：单击命令按钮来显示或隐藏标签。2.8 利用两个文本框输入两个数据，单击“计算”按钮在第3个文本框中显示其和。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.9 编写一个简单程序。要求：在窗体上创建一个文本框控件、两个命令按钮控件，命令按钮的标题分别设置为“隐藏”和“退出”，单击“隐藏”按钮后文本框消失，该按钮变成“显示”，单击“显示”按钮后显示出文本框，该按钮为“显示/隐藏”的切换，单击“退出”按钮，结束程序运行。