Creating a Visual Basic Application - College of Charleston

CSCI 672 Human-Computer Interaction page 1 of 14

Creating a Visual Basic Application

1. Visual Basic Concepts

• How Windows Works: Windows, Events and Messages

• several different types of windows

• a document window, a dialog box

• also: command buttons, icons, text boxes, option boxes, menu bars

• each windows has a unique id number (window handle or hWnd)

• OS continually monitors each window for events

• user actions (mouse click, key press)

• executable statements

• another window's actions

• Events send message to OS

• OS processes message and broadcasts it to other windows

• Each window may take action or ignore

• Visual Basic insulates you from low-level details

• many messages handled automatically

• others are exposed as Event procedures


• Understanding the Event-Driven Model

• In traditional or "procedural" applications

• application itself controls flow of control

• In an event-driven applications,

• flow-of-control is determined by external events

• different code sections are executed in response to events

• events may be triggered by

• user's actions

• messages from the system or other applications

• messages from the application itself

• path through the application's code differs each time the program runs

• Since flow-of-control is unpredictable

• preconditions and postconditions are essential

• important to understand the event-driven model

• interaction design diagrams

• Interactive Development

• traditional S/W development process:

• writing, compiling, and testing code

• Visual Basic blurs distinction between these steps

• iterative development

• usually leads to bad design!


2. Integrated Development Environment Elements

• Visual Basic integrated development environment (IDE) consists of the following elements

• Menu Bar

• File, Edit, View, Window, Help

• menus for functions specific to programming (Project, Format, or Debug)

• Context Menus

• shortcuts to frequently performed actions

• right-click on object

• context-specific menus

• Toolbars

• quick access to commonly used commands

• Standard toolbar

• also toolbars for editing, form design, and debugging available

• Toolbox

• contains controls (UI elements)

• used at design time to place controls on a form

• Project Explorer Window

• lists forms and modules in project

• a project is the collection of files you use to build an application

• Properties Window

• Lists the property settings for the selected form or control

• a property is a characteristic of an object, such as size, caption, or color


• Object Browser

• Lists available objects in project

• quick way to navigate through code

• Form Designer

• window customized to design the UI

• controls, graphics, and pictures are added to a form

• each form in application has its own form designer window

• Code Editor Window

• editor for entering application code

• each form or code module in application has its own code editor window

• Form Layout Window

• used to position forms in application via small graphical representation of screen

• Immediate, Locals, and Watch Windows

• used in debugging application

• only available when running your application within the IDE


3. The Structure of a Visual Basic Project

• types of files and objects in a project

• Form Modules • .frm file name extension

• contain textual descriptions of form and its controls

• may contain form-level declarations and procedures (external, event, general)

• Class Modules • .cls file name extension

• similar to form modules, but no visible UI

• contain programmer-defined objects

• Standard Modules • .bas file name extension

• contain public or module-level declarations and procedures (external, public)


• Resource Files

• .res file name extension

• one per application

• contain bitmaps, text strings, and other data

• e.g., internationalization

• ActiveX Documents

• .dob file name extension

• similar to forms, but displayable in WWW browsers

• Components

• ActiveX controls (.ocx file name extension)

• Insertable objects, e.g. Microsoft Excel Worksheet object

• Standard controls, e.g. command button or frame control


4. Creating an Application in Visual Basic

There are three main steps to creating an application in Visual Basic:

1. Create the interface

2. Set properties

3. Write code

• Creating a program

• Design the interface

• select controls from toolbox

• place on form

• size using mouse

• Set properties of UI elements (controls)

• e.g., colors and labels

• Write event handling code

Example: Here is the UI for a calculator. Buttons are created using command buttons. Output is displayed in a label.


Setting Properties

• Properties are set using the properties window.

Example: The calculator display background color is yellow. This was achieved by selecting the label object, selecting the property BackColor, dropping down the color palette, and selecting the required color cell.


• Writing program code

Example: Code for the ‘CE’ command button (CancelEntry).

Example: Code associated with the ‘Click’ event of the ‘CancelEntry_Click’ control object.


List of Visual Basic events (each control uses only a subset):

Activate KeyUp PathChange

Change LinkClose PatternChange

Click LinkError QueryUnload

DblClick LinkExecute Reposition

Deactivate LinkNotify Resize

DragDrop LinkOpen RowColChange

DragOver Load Scroll

DropDown LostFocus SelChange

Error MouseDown Timer

GotFocus MouseMove Unload

KeyDown MouseUp Updated

KeyPress Paint Validate


5. UI Controls

• Text box: Text that can be edited by the user, for example an order entry field or a password box

• Label: Text that is displayed only, for example to identify a field on a form or display instructions to the user

• Check boxes: A small set of choices from which a user can choose one or more options.

• Option buttons (use frames if additional groups are needed): A small set of options from which a user can choose just one.

• List box: A scrollable list of choices from which the user can choose.

• Combo box: A scrollable list of choices along with a text edit field. The user can either choose from the list or type a choice in the edit field.

• Picture box: A container for other controls, for displaying a picture, for graphics methods.

• Image control: Displaying a picture

• Shape control: Displaying a simple graphical element

• Line control: Displaying a simple graphical element


6. Menu Basics

• menu bar contains one or more menu titles

• clicking on a menu title reveals a menu containing menu items

• Menu items may include

• commands, separator bars, submenu titles

• some menu items perform an action directly

• other menu items display a dialog box

• should be followed by an ellipsis (…), e.g., Save As…


• each menu item corresponds to a menu control

• defined in the Menu Editor

• a menu control is an object

• it has properties (appearance, behavior)

• e.g., Caption, Enabled Visible, Checked, etc.

• set at design time or run time

• menu controls associated with Click event


7. Dialog Boxes

• dialog boxes prompt the user for data or display information

• specialized type of form object

• three types:

• Predefined dialog boxes can be created from code using the MsgBox or InputBox functions.

• Customized dialog boxes can be created using a standard form or by customizing an existing dialog box.

• Standard dialog boxes, such as Print and File Open, can be created using the common dialog control.

Example: MsgBox function

• three arguments: the message text, style (numeric value), and title

• modal dialog boxes must be closed to do other work

• modeless dialog boxes allow shifting focus between dialog box and other forms