Lesson II.              Interactivity Using TextBoxes & CommandButtons

 

Objectives

ü       To explore Forms and the code behind an application in design mode

ü       To create a simple interactive application

ü       To use and be familiar with the TextBox & CommandButton controls and their properties

ü       To use the concatenation operator (&)

ü       To be able to familiar with VB events and write a event-handler subroutine

ü       To use the End statement

ü       To understand and use Remarks

 

 

 

IN FOCUS: TEXTBOX CONTROL

 

TextBoxes accepts text input such as the user’s name or address.   The following are the common TextBox properties.

 

Property	Description
Alignment	Determines whether the text appears 0: left-justified, 1: right-justified, or 2: centered within the TextBox’s boundaries.
BackColor	Specifies the TextBox’s background color.  Programmer selects a color from the Color Palette or specifies a color in Hex format.
BorderStyle	0: None, 2: Fixed Single. Determines whether a single-line border appears around the TextBox.
Enabled	Boolean. Determines whether the TextBox is active. A disabled TextBox does not accept input.
Font	Specifies the font of the text.  Clicking this property will invoke a font dialog box in which you can set the font name, style, and size.
ForeColor	Specifies the color of the text. Programmer selects a color from the Color Palette or specifies a color in Hex format.
Height	Specifies the height of the TextBox in twips.
Left	Specifies the number of twips from the TextBox’s left edge to the Form window’s left edge.
Locked	Boolean.  Determines whether the user can edit the text inside the TextBox.
MaxLength	Specifies the maximum length of text that the TextBox can accept.
MousePointer	Determines the image of the mouse cursor when the user moves the mouse pointer over the TextBox.
MultiLine	Boolean.  Determines whether the TextBox can hold multiple lines of text (True) or just a single line of text (False).
PasswordChar	Determines the character that appears in the TextBox when the user enters a password.
ScrollBars	0: None, 1: Horizontal, 2: Vertical, 3: Both. Determines whether scrollbars appear on the edges of a Multiline TextBox.
TabIndex	Specifies the order of the TextBox in the focus order.
TabStop	Boolean.  Determines whether the TextBox can receive the focus.
Text	Holds the text entered in the TextBox.  Specified text in this property becomes the default value that appears in the TextBox at runtime.
ToolTipText	Holds the text that appears as a tooltip at runtume.
Top	Specifies the number of twips from the TextBox’s top edge to the Form window’s top edge.

 

Visible	Boolean.  Determines whether the TextBox appears (True) or is hidden from the user (False) at runtime.  Invisible TextBoxes are only invisible at runtime.
Width	Holds the width of the TextBox in twips.

 

 

IN FOCUS: COMMANDBUTTON CONTROL

 

CommandButton is a control that you press to tell a VB application to perform a particular task.  A button labeled “Compute” may tell the VB to computer for the sum of two numbers and display the result on a Label.  Below are the common properties of a CommandButton.

 

Property	Description
BackColor	Specifies the CommandButton’s background color.  Programmer selects a color from the Color Palette or specifies a color in Hex format.  Applicable only when Style property is set to 1: Graphical.
Cancel	Determines whether the CommandButton gets a click event if the user presses Esc.
Caption	Holds the text that appears on the CommandButton.
Default	Determines if the CommandButton responds to an Enter keypress even if another has the focus.
Enabled	Boolean. Determines whether the CommandButton is active. A disabled CommandButton is grayed out and cannot be pressed.
Font	Specifies the font of the CommandButton caption.  Clicking this property will invoke a font dialog box in which you can set the font name, style, and size.
Height	Specifies the height of the CommandButton in twips.
Left	Specifies the number of twips from the CommandButtons’s left edge to the Form window’s left edge.
MousePointer	Determines the image of the mouse cursor when the user moves the mouse pointer over the CommandButton.
Picture	Holds the name of an icon graphic image that appears on the CommandButton as long as the Style property is set to 1-Graphical.
Style	Determines whether the CommandButton appears as a standard Windows button (0: Standard) or a CommandButton with a color and possible picture (1: Graphical)
TabIndex	Specifies the order of the CommandButton in the focus order.
TabStop	Boolean.  Determines whether the CommandButton can receive the focus.
ToolTipText	Holds the text that appears as a tooltip at runtime.
Top	Specifies the number of twips from the CommandButton’s top edge to the Form window’s top edge.
Visible	Boolean.  Determines whether the CommandButton appears (True) or is hidden from the user (False) at runtime.  Invisible CommandButtons are only invisible at runtime.
Width	Holds the width of the CommandButton in twips.

 

 

IN FOCUS: EVENTS

 

 

Events, as discussed in the introduction, are the primary elements of a user and VB interaction.  Your application opens a dialog box when the user selects the Open menu or outputs the square of two numbers when the user clicks on a button.  Selecting the menu and clicking the button are examples of events.

 

Events can be keyboard- or mouse-triggered.  With the mouse, you can use the MouseDown, MouseUp, and MouseMove events to enable your applications to respond to both the location and the state of the mouse.

 

Event	Description
MouseDown	Occurs when the user presses any mouse button.
MouseUp	Occurs when the user releases any mouse button.
MouseMove	Occurs each time the mouse pointer is moved to a new point on the screen.
Click	Occurs when the user clicks the selection mouse button (may be the right or left button).
DblCLick	Occurs when the user double clicks the selection mouse button (may be the right or left button).

Keyboard clicks and key presses also provide means of data input and basic window and menu navigation.  The following are the events you can trigger using the keyboard:

Event	Description
KeyPress	Occurs when the user presses any keyboard key.
KeyUp	Occurs when a pressed key returns to its normal or up state.
KeyDown	Occurs when a key is in its down state (when the user presses the any key).

 

How do a KeyPress and KeyDown or a MouseDown and a Click differ from each other?  KeyPress and MouseDown are keyboard/mouse state related.  They occur at that instant when the mouse button is clicked down and a key is pressed down.  This means the events occur before the mouse button or key is released back to its normal state.  Click and KeyPress occur after the user has clicked the mouse or pressed a key.    

 

How do we create event-handlers then?  When we double click the CommandButton, a Code Window appears like the one below.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Visual Basic automatically creates an Event Procedure for you in the format:

 

Private Sub cmdSum_Click()

 

End Sub

 

An Event Procedure is simply a block of statement executed when an event (in this case, a Click) of a particular control is triggered.  cmdSum is the name of the control that we clicked.  The Click() event is the default event of a button – VB assumes that you want to do something like calculating the sum of two numbers when the user clicks on this button at runtime.  If this is indeed what you want, you write VB code within the procedure.  The ListBox on the right contains all the Events supported by cmdSum, a CommandButton control.  It supports, aside from Click(), MouseUp(), LostFocus(), and many others.  The TextBox also supports events.  You might want to execute a procedure when the user enters something in the TextBox (a KeyPress() event), or when it the user edits the text property at runtime (Change() event).

 

 

IN FOCUS: THE END STATEMENT

 

The End statement ends an application immediately.  No code after the End statement is executed. The program will also not respond to further events.  To end the program, simply execute the statement End as in the following example:

 

Private Sub cmdQuit_Click( )

    End

End Sub

 

 

IN FOCUS: REMARKS

 

Remarks are notes that you write in your code.  These notes are commonly used to help clarify some code, explain codes to readers, state the programmer’s name and the date the program was written, and describe the purpose of the program.  Since remarks are intended for people, they are completely ignored by VB. 

 

VB supports two kinds of remarks:

§         Remarks that begin with the Rem statement

e.g.

Rem Programmer:         Jay R.C. Fernandez

Rem                              Computer Center

Rem                              17 May 2001

Rem This program computes for the average of 3 numbers.          

                                   

§         Remarks that begin with the apostrophe

e.g.

x = x + 1

‘ This statement increments the value of x by 1.

y = “Computer”

‘ This statement assigns the string “Computer” to variable y

 

 

 

The application that will be creating will ask for the user’s first and last name and outputs “Hello <firstname> <lastname>!” in a label.  The visual representation of the program is as follows:

 

 

 

 

 

 

 

 

 

 

 

 

 

1. Create a new project.
2. For the Form control, set the following properties:

• Name                            frmMain
• Caption                         An Interactive VB Application
• MaxButton                     False
• StartUpPosition              Center Screen
• Height                           4410
• Width                            6195
• BackColor                      White

 

3. Drag 3 Labels to the Form:

Set the following properties for the first Label:

• Name                            lblFName
• BackStyle                       Transparent
• Caption                         First Name
• Font                              Arial, Size 14, Regular
• Top                               600
• Left                               360
• Width                            1575
• Height                           495

 

Set the following properties for the second Label:

§         Name                            lblLName

§         BackStyle                       Transparent

§         Caption                         Last Name

§         Font                              Arial, Size 14, Regular

§         Top                               1200

§         Left                               360

§         Width                            1575

§         Height                           495

Set the following properties for the third Label:

§         Name                            lblOutput

§         BackColor                      Light Blue

§         Caption                         None. Erase Default Value

§         Font                              Arial, Size 14, Italic

§         Width                            5295

§         Height                           975

§         Top                               1800

§         Left                               360

 

4. Drag 2 TextBox controls to the Form.

Set the following properties for the first TextBox:

• Name                            txtFName
• Font                              Arial, Size 14, Regular
• Text                              None.  Erase Default Value
• Width                            3495
• Height                           495
• Top                               480
• Left                               2160

Set the following properties for the second TextBox:

§         Name                            txtLName

§         Font                              Arial, Size 14, Regular

§         Text                              None.  Erase Default Value

§         Width                            3495

§         Height                           495

§         Top                               1080

§         Left                               2160

 

5. Drag 2 CommandButton controls to the Form.

Set the following properties for the first CommandButton:

• Name                            cmdGreet
• Caption                         Greet
• Width                            1695
• Height                           495
• Top                               3120
• Left                               2160

 

Set the following properties for the second CommandButton:

§         Name                            cmdQuit

§         Caption                         Quit

§         Width                            1695

§         Height                           495

§         Top                               3120

§         Left                               3960

 

6. Enter the following procedures.

 

Private Sub cmdGreet_Click()

    lblOutput.Caption = "Hello " & txtFName.Text & " " & txtLName.Text & "!"

End Sub

 

Private Sub cmdQuit_Click()

    End

End Sub

 

7. Run the application and see how your new application works.
8. Save your work as Lesson2.vbp.

 

 

 

 

 

1.       Create an application with the following specifications:  Add two CommandButtons and one Label between them in one line.  Make the Label’s Caption property blank.  When the user clicks the first CommandButton, a caption should appear on the Label that reads “Left Button Clicked!”.  When the user clicks the second CommandButton, a caption should appear on the Label that reads “Right Button Clicked!”.

2.       Create an application with five CommandButtons aligned vertically.  Reverse the focus order so that when you run the application and press the Tab key several times, the focus order flows upward through the CommandButtons.