CS130 Project 1

A simple VB application ("project" or program): user enters amount of sales then

clicks the "Calculate button", the application displays the correct the "commission"

Structure of the "Desktop" and a "Window"

The "Commission" application

How to launch MS VB6.0 IDE from Desktop: start from the "task bar"

The "New Project" window: note the various types of projects

Configuring the VB environment: single document Interface (SDI)

Configuring the VB environment: single document Interface (SDI) continued

Select the "SDI Development Environment"

Configuring the VB environment: single document Interface (SDI) continued

Deselect the "Default to Full Module View"

Close and restart VB, choose "Standard EXE" as before VB displays "Tool Box", "Form", "Project", and

"Properties" windows

Using "Tool Box" and "Properties" windows, you can easily design the layout (buttons and boxes, etc.) of the

desired GUI of your application in the "Form" window.Note that the "Pointer" tool (an arrow) is now being selected

Right click anywhere in the gray area of the menu bar displays the "Shortcut" menu

Only one window can be active at a time; "Form" window is now the active window

Resizing the a window: move the Pointer to the border of a window, the arrow pointer

changes to a double-headed arrow

Resizing the a window: notice the double-headed arrow continued

Resizing the a window: notice the double-headed arrow continued

Moving a window: move the pointer to the blue Title Bar, drag the window to desired place on the

window as shown in the next slide

The "Form" window is now approximately in the middle of the Desktop

The finished GUI for the "Sales Commission" project

Identify the tools available in the Tool Box

• The tool-tips

• Point to a particular tool icon in the Tool Box, VB automatically displays the tool-tip of the icon.

Windows that are needed to design the GUI

The "Label" icon in the Tool Box is being pointed to

The "Label" icon in the Tool Box has been selected. Notice the pointer change to a cross

Use the "Label" pointer (a cross) to draw or create a "Label" box (next slide). Each box in the Form window is formally known as an "object" whose "Properties" (attributes) can be defined through the "Properties "

window. Each object or box is also known as a "control"

A Label Box has been created. Note that the box can be moved (point to the box, hold down the left mouse button and

drag to desired location) and resized (use the resizing handles) as desired

The second Label box is created in similar manner

The "Textbox" tool selected

Holding down the left mouse button displays the left and top positions (relative to upper left corner of the Form window 0x0),

size information is displayed in the Properties window

First Textbox created

Second Textbox created

"CommandButton" created

CommandButton is about to be moved

CommandButton is moved to new location

TextBox 1 is being resized (only the height here)

TextBox 1 is being resized (only the height here) continued

TextBox 1 has been resized (only the height)

TextBox 2 is being resized

TextBox 2 has been resized

Setting properties of various controls (objects or boxed)

• Each control or object is associated with a set of properties listed in the Properties window.

• The properties are listed alphabetically or by category (you can use either one by clicking the tab of your choice)

The "Caption" property

• Caption is the text displayed in a control or in the Title bar of a Form.

• Once set, the caption remains unchanged when the application (the program) runs.

Setting the "Caption" property of LabelBox 1. Note the FontColor properties is currently being selected

Caption property is selected. The default is "Label1" and is to be changed to "SALES"

Replace Label1 with SALES in the Properties box

"Label2" and "Command1" have been changed to "COMMISSION" and "CALCULATE", respectively. Also, "Form1" in the title bar is about to

be changed to "Calculating Sales Commission"

"Form1" in the title bar has been changed to "Calculating Sales Commission"

Another way of activating an arbitrary control on a Form so that its properties can be

changed

The "Text" property

• TextBox is usually used to display a value (may be numeric or non-numeric), which may be changed when the application is executed (run).

• In our example, the default values are "Text1" and "Text2" in two text boxes, and both are non-numeric (not numbers). We want to change the default values to "blanks" in our example. In other word, before the application is run, we want to display nothing (blanks) in these two boxes.

Change "Text1" and "Text2" to blanks in textbox1 and textbox 2

Change "Text1" and "Text2" to blanks in textbox1 and textbox 2 continued

Change "Text1" and "Text2" to blanks in textbox1 and textbox 2 continued

Change "Text1" and "Text2" to blanks in textbox1 and textbox 2 continued

Both text boxes have been blanked

The "Locked", "TabIndex" and "TabStop" properties

• The Locked property prevents the content of a text box from being changed (if set from "false" to "ture").

• The TabIndex property controls the order or moving from box to box as the Tab key is pressed (0, 1, 2, 3, etc.).

• The "TabStop" property determines if a box is to be skipped if the Tab key is pressed (false to skip)

Setting the TabStop property of a text box; also the Locked property has been set to true

TabStop has been set to false for the CALCULATE control

Form1has been selected (click any empty area on the form)

Change the "Name" property of a control or object (it is critical to know that the name and caption are

two different properties!!!)

The "name" property of Form1 (default) has been changed to SLSCOMSN

Form1 is not changed to SLSCOMSN in the Project window

Writing code (instruction): the more interesting and challenging part of application design

• The boxes you've so far created are just a GUI; nothing useful will happen to them unless appropriate code (program modules) is associated with those boxes.

• The code (coded in BASIC language) allows actions to be triggered, e.g., if SALSE amount has been properly entered, upon clicking the CALCULATE button (control), computed commission will be displayed.