可视化编程的概念与步骤课件

第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 第第2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1 可视化编程的基本概念可视化编程的基本概念 2.2 VB可视化编程的步骤可视化编程的步骤 2.3 控件的画法控件的画法 习题二习题二 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1 可视化编程的基本概念可视化编程的基本概念 2.1.1 类与对象 1. 对象 可以把对象(Object)想象成日常生活中的各种物体，例如一只气球、一本书、一把椅子、一台电脑等都是对象。 容量对象：由多个“子”对象组成。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2. 属性 每个对象都有其特征，在计算机程序语言中叫做属性(Property)。如小孩玩的气球，与它相关的属性数据有直径、颜色、状态(充气或未充气)等，还有一些不可见的性质，如寿命等。 1) 预设法：使用属性窗口 2) 现改法：代码中通过编程设置。 对象名对象名.属性名属性名=属性值属性值 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3. 类 同一类对象的大部分属性栏是相同的，例如，拿一般的汽车与坦克车相比较，虽然都有车长、车宽等属性，但坦克车会多出一些记录大炮口径、履带形式的属性。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 4. 方法 对象中除了属性之外，还包含了一些控制对象的动作或功能。以气球为例，假设气球这个对象有3个动作，分别是充气(用氢气充满气球)、放气(排出气球中的气体)、上升(放手让气球飞走)。 VB的方法用于完成某种特定功能。如对象打印（Print）方法，显示窗体（Show）方法，移动（Move ）方法。 格式：对象名格式：对象名.方法名方法名 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1.2 事件与程序 1. 事件 对于对象而言，事件(Event)就是发生在该对象上的事情。比如一个吹大的气球，用针扎它一下，该对象就会进行放气动作，“针扎”就是一个事件。 VB中提供了许多对象，让用户利用它们来设计应用程序。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2. 事件过程 当在对象上发生了某个事件后，必须想办法处理这个事件，而处理的步骤就是事件过程(Event Procedure)。以气球为例，发生了“针扎”事件后，我们可能是进行粘补或丢弃，不论是粘补还是丢弃，都是针对“针扎”事件的处理步骤，也就是事件过程。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3. 事件驱动程序设计 写完程序后开始执行时，程序会先等待某个事件的发生，然后再去执行处理此事件的事件过程。事件过程要经过事件的触发才会被执行，这种动作模式就称为事件驱动程序设计(Event Driven Programming Model)，也就是说，由事件控制整个程序的执行流程。第第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章章 可视化编程的概念与步骤可视化编程的概念与步骤 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1.4 窗体对象 1. 窗体的结构 同Windows环境下的应用程序窗口一样，VB中的窗体也具有控制菜单、标题栏、最大化/复原按钮、最小化按钮、关闭按钮以及边框。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 创建新窗体的步骤如下： (1) 从“工程”菜单中选择“添加窗体”菜单项。 (2) 缺省情况下系统将显示如图2.1所示的“添加窗体”对话框。 (3) 该对话框的“新建”选项卡用于创建一个新窗体，列表框中列出了各种新窗体的类型，其中选择“窗体”选项时，建立一个空白的新窗体，选择其他选项时则建立一个预定义了某些功能的窗体。 (4) 单击“打开”按钮，一个新的空白窗体被加入到当前工程中，同时会显示在屏幕上。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.1 添加新窗体 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2. 窗体的属性 通过修改窗体的属性可以改变窗体内在或外在的结构特征，控制窗体的外观。常用的窗体属性见表2-2。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 表2-2 常用的窗体属性第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3. 多文档(MDI)窗体 在Windows中的应用程序具有多种多样的窗口界面，总的看来有3种形式：单文档界面(SDI)、多文档界面(MDI)和资源管理器风格界面。VB 6.0支持这3种风格的文档界面。本节主要介绍多文档界面。 多文档界面的应用可同时打开多个文档，每个文档都显示在自己的窗口中。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 创建MDI窗体的一般步骤如下： (1) 在“工程”菜单中选择“添加MDI窗体”子菜单，系统显示“添加MDI窗体”对话框，如图2.2所示。 (2) 选择“新建”选项卡中的“MDI窗体”，单击“打开”按钮，屏幕上出现一个名字为MDIForm1的MDI窗体(它的底色与普通窗体不同)，如图2.3所示。 (3) 单击工具栏上的“启动”按钮运行程序，一个空白的MDI窗体出现在屏幕上。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.2 “添加MDI窗体”对话框 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.3 新添加的MDI窗体第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.1.5 代码窗口 1. 代码窗口简介 代码窗口又称代码编辑器，各种通用过程和事件过程代码均在此窗口上编写和修改。有4种方法可以打开代码窗口： (1) 双击窗体的任何地方。 (2) 单击右键快捷菜单中的“查看代码”命令。 (3) 使用工程窗口中的“查看代码”按钮 。 (4) 选择“视图”菜单中的“代码窗口”命令。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.4 代码窗口 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 (1) “对象下拉列表框”中列出了当前窗体及所包含的全体对象名。其中，无论窗体的名称改为什么，作为窗体的对象名总是Form。 (2) “过程下拉列表框”中列出了所选对象的所有事件名。 (3) “代码区”是程序代码编辑区，能够非常方便地进行代码的编辑和修改。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2. 自动功能 在VB代码窗口中编写代码时，VB具有以下特性。 1) 自动列出成员特性 当要输入控件的属性和方法时，在控件名后输入小数点，VB就会自动显示一个下拉列表框，其中包含了该控件的所有成员(属性和方法)，如图2.5所示。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.5 VB自动列出成员 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2) 自动显示快速信息 该功能可显示语句和函数的语法格式。在输入合法的VB语句或函数名之后，代码窗口中在当前行的下面自动显示该语句或函数的语法，如图2.6所示。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.6 自动快速显示信息 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3) 自动语法检查 在VB中可自动检查语句的语法。当输入某行代码后回车，如果系统出现语法错误，VB会显示警告提示框，同时该语句变成红色，如图2.7所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.7 自动语法检查 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 4) 查看过程 在“代码窗口”的左下角有两个按钮：“过程查看” 和“全模块查看” 按钮，通过它们可切换“代码窗口”的两种查看视图。 (1) 单击“过程查看”按钮 ，一次只查看一个过程。 (2) 单击“全模块查看”按钮 ，可查看程序中的所有过程。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2 VB可视化编程的步骤可视化编程的步骤 VB可视化编程的一般步骤为 (1) 设计界面：先建立窗体，再利用控件在窗体上创建各种对象。 (2) 设置属性：设置窗体或控件等对象的属性。 (3) 编写代码。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.1 新建一个工程 在VB环境中开发的每个应用程序都被称为工程，那么首先从建立一个工程开始。新建一个工程有如下两种方法： (1) 启动VB后，系统显示“新建工程”对话框，在“新建工程”对话框的选项卡里选择“标准EXE”，然后单击“打开”按钮。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 (2) 在“文件”菜单中选择“新建工程”子菜单，然后在“新建工程”对话框中选择“标准EXE”，并单击“打开”按钮。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.2 添加控件 下面通过编写如图2.8所示的一个简单的VB应用程序来说明可视化编程的方法。 在工程默认的一个窗体中可以添加控件，进行窗体的界面设计。向窗体中添加控件的方法为 (1) 单击工具箱中的控件图标，鼠标指针变成一个十字指针。 (2) 在窗体的工作区按住鼠标左键拖动鼠标，即可在窗体上画出对应控件。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.8 简单示例 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.9 增加一个标签和两个命令按钮第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.3 设置属性 对象属性的设置是在属性窗口中进行的，其操作方法如下： 1) 设置窗体Form1的属性 单击窗体的空白区域(不要单击任何控件)，确认选中的是窗体，可从“对象”下拉列表框中查看。 在属性窗口中找到标题属性Caption，将其值改为“简单示例”，如图2.10所示。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.10 设置窗体Form1的属性 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2) 设置控件的属性 单击窗体上的控件，确认选中该控件，然后根据需要逐一设置控件的各属性。 选中标签控件“Label1”，将其边框风格属性(BorderStyle)改为：1Fixed。然后用鼠标单击背景颜色属性(BackColor)右边的箭头按钮，从弹出的调色板窗口中选择“白色”(如图2.11左)，用鼠标单击字体属性(Font)右边的按钮，从弹出字体对话框中设置相应的字体类型、字体样式和字体大小(如图2.11右)。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.11 调色板与“字体”对话框 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 表2-3 属性设置 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.12 属性设置后的窗体第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 打开“代码编辑器”，单击“对象”下拉列表框右边的箭头按钮，从中选择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, 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左；用鼠标单击“时间”按钮，窗体显示如图2.14右。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.14 运行工程 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.6 修改工程 修改工程包括修改对象的属性和代码，也可以添加新的对象和代码，或者调整控件的大小等，直到满足工程设计的需要为止。 在本例的窗体中，将标签的高度稍微减小一些，将按钮的大小和位置做些调整，使界面更加美观，如图2.15所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.15 修改后的工程 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.2.7 保存工程 用下面两种方法保存工程： (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章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.3 控件的画法控件的画法 2.3.1 在窗体上画一个控件 在窗体上画一个控件有两种方法： (1) 单击工具箱中的控件按钮，在窗体上拖动鼠标画出控件，前面已经作过介绍。 (2) 双击工具箱中的控件按钮，即可在窗体的中央画出控件。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.3.2 控件的缩放和移动 在设计时，当在窗体上画出控件以后，控件的边框上有8个蓝色小方块，这表明该控件是“活动”的，通常称为“当前控件”，如图2.18所示。用鼠标单击控件，可以使之成为当前控件。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.18 指针所指为当前控件 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 对于选中的控件(即当前控件)，可以用两种方法来进行缩放和移动： (1) 直接使用鼠标拖动控件到需要的地方。 (2) 在属性窗口修改某些属性来改变控件的大小和位置。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.3.3 控件的复制与删除 在窗体上，控件的复制和删除操作同Windows环境下文件的操作相同： (1) 选中控件，单击工具栏上的“复制” 按钮或按Ctrl+C键可将控件复制到剪贴板中。 (2) 单击“粘贴”按钮 或按Ctrl+V键将控件粘贴到窗体的左上角。由于复制控件名称相同，系统会弹出一个“是否创建控件数组”对话框，如图2.19所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.19 是否创建控件数组 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 (3) 单击“是(Y)”按钮，将在窗体上创建一个控件数组(参见后面章节)；单击“否(N)”按钮即可在窗体上得到该控件的复制品。复制品的所有属性与原控件相同，只是名称属性(Name)的序号比原控件大。 另外，还可以利用右键快捷菜单上的命令对控件作复制、删除等操作，如图2.20所示。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.20 使用快捷菜单复制控件第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.3.4 控件的布局 当窗体上存在多个控件时，需要对窗体上的控件排列、对齐、是否等大等格式进行操作。这些操作一般可以通过“格式”菜单完成，如图2.21所示。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.21 打开“格式”菜单 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 1. 选定多个控件 要调整多个控件之间的位置，需要同时选定多个控件。其选定方法常用下面两种： (1) 在窗体的空白区域利用鼠标左键拉出一个矩形框，将需要选中的控件圈上即可选定多个控件。 (2) 先按住Shift键，再用鼠标单击所要选中的控件，如图2.22所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.22 选定多个控件 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2. 设置选定控件对齐方式 通过“格式”菜单中的“对齐”子菜单中的各命令，可以实现多控件的各种对齐方式。 (1) 左对齐：使所选择对象的水平位置对齐，其左边界以最后选择的对象的左边界为基准对齐，如图2.23所示。 (2) 居中对齐：使所选择对象的水平位置对齐，其中心位置以最后选择的对象的中心位置为基准对齐。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.23 左对齐第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 (3) 右对齐：使所选择对象的水平位置对齐，其右边界以最后选择的对象的右边界为基准对齐。 (4) 顶端对齐：使所选择对象的垂直位置对齐，其顶端位置以最后选择的对象的顶端位置为基准对齐。 (5) 中间对齐：使所选择对象的垂直位置对齐，其中心位置以最后选择的对象的中心位置为基准对齐。 (6) 底端对齐：使所选择对象的垂直位置对齐，其底端位置以最后选择的对象的底端位置为基准对齐。 (7) 对齐到网格：使所选对象的左上角与最靠近的网格对齐。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 3. 按相同尺寸调整选定控件的大小 通过“格式”菜单中的“统一尺寸”命令，可以自动调整控件的大小，使其具有统一的尺寸。“统一尺寸”命令中有3项子菜单，如图2.24所示。 (1) 宽度相同：以最后选择的对象为基准，使其他被选定的控件与其具有相同的宽度。 (2) 高度相同：以最后选择的对象为基准，使其他被选定的控件与其具有相同的高度。 (3) 两者都相同：以最后选择的对象为基准，使其他被选定的控件与其具有相同的宽度和高度。 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.24 统一尺寸 第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 4. 调整选定控件间距 利用“格式”菜单中的“水平间距”和“垂直间距”子菜单，可以调整控件之间的间距，如图2.25所示。 (1) 相同间距：被选定的控件之间设置相同的间距。 (2) 递增：被选定的控件之间间距增加。 (3) 递减：被选定的控件之间间距减少。 (4) 移除：删除被选定控件之间的间距。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.25 调整间距第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 5. 使选定控件水平对齐或垂直对齐 通过“格式”菜单中的“在窗体中居中对齐”子菜单，选择“水平对齐”或“垂直对齐”可以实现多控件的水平对齐或垂直对齐方式。 (1) 水平对齐：使所选择对象的中心位置与窗体中心的水平线对齐。 (2) 垂直对齐：使所选择对象的中心位置与窗体中心的垂直线对齐。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 6. 设置选定控件显示位置 通过“格式”菜单中的“顺序”子菜单，可以设置多个控件重叠时控件的显示位置。 (1) 置前：将所选择的对象移到所有其他对象的前面，如图2.26左所示。 (2) 置后：将所选择的对象移到所有其他对象的后面，如图2.26右所示。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 图2.26 设置控件为前台或后台显示第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 习习 题题 二二 2.1 什么是对象的属性、事件和方法？2.2 对象、事件和方法三者之间的关系如何？请举例说明。2.3 属性和方法有何区别和联系？试举例说明。2.4 简述VB可视化编程的一般步骤。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.5 在代码中自动加载一个标签的标题和文本框的文本，单击“修改”按钮后改变标签中的标题和文本框中的文本。 2.6 理解单击(Click)和双击(DblClick)事件。用鼠标单击或双击窗体改变标签的标题。 2.7 理解Visible属性。编写一个简单程序，要求：单击命令按钮来显示或隐藏标签。 2.8 利用两个文本框输入两个数据，单击“计算”按钮在第3个文本框中显示其和。第第2 2章章 可视化编程的概念与步骤可视化编程的概念与步骤 2.9 编写一个简单程序。要求：在窗体上创建一个文本框控件、两个命令按钮控件，命令按钮的标题分别设置为“隐藏”和“退出”，单击“隐藏”按钮后文本框消失，该按钮变成“显示”，单击“显示”按钮后显示出文本框，该按钮为“显示/隐藏”的切换，单击“退出”按钮，结束程序运行。