Introduction to Visual Basic

Beginning Visual Basic - Project 7

Disabling Buttons to Guide User Interaction

The 7th Project

This is a modification (enhancement) of Project 6.

Begin by loading Project 6 (Choose Open Project under the File menu and press the F4 key to view the form’s properties—if the Properties Window is not already showing).

Change the Caption property of the form to Project 7

Change the form’s Name property from frmProj6 to frmProj7

Select Project6 Properties on the Project dropdown menu. Make sure the General tab is selected and set the options described in the next bullet.

In the Startup Object combobox make sure frmProj7 is selected (it should be by default). In the Project Name textbox type Project7. In the Project Description textbox type the following: Disabling Buttons to Guide User Interaction. Leave all other settings at their defaults and click the OK button.

Make sure the Form is visible by pressing Shift-F7 or clicking the View Object button at the top of the Project Explorer window.

Drop down the File menu and choose Save frmProj6 As... This will let you save the Form file with a different name. Save the Form as frmProj7.frm.

Drop down the File menu again and choose Save Project As.... Save the project as Project7.vbp.

The Message Boxes you added in Project 6, which let the User know when they have made an illegal entry, are really not necessary. In fact, they are just plain amateurish. All Message Boxes do is annoy the User. I can hear them muttering under their breath, "This program isn’t user friendly! Why the hell can I click on the Add or Delete buttons when I’m not supposed to?"

Message Boxes do have their place:

To display serious error messages (when your program is about to self-terminate).

To ask for confirmation of a function that can’t be undone, such as deleting several pages of text at once in a word processor.

To display a quick and dirty About Box (an About Box lists the Author and version information of an application. About Boxes are usually accessible under the Help menu of most applications).

Avoid using Message Boxes if you can. They just force the User to stop what they are doing to acknowledge it—very annoying. Instead of using a Message Box to taunt the User by telling them that they have done something wrong, it’s much better if you can prevent them from doing wrong stuff to begin with. So now that you know how to use Message Boxes, try to avoid using them!

Every Control in Visual Basic has an Enabled property. When the Enabled property is set to True, the control can be selected. When the Enabled property is set to False, the control’s Caption becomes dimmed and it cannot be selected.

To prevent the User from clicking on the Add button when the Name Textbox is empty, keep the Enabled property of the Add button set to False until the Name Textbox has something in it.

To prevent the User from clicking on the Delete button when there is no selected item in the Names Listbox, keep the Enabled property of the Delete button set to False until an item in the Names Listbox has been clicked on.

Even though it doesn’t cause an error to click the Clear button before any names have been added to the Names Listbox, should the Clear button be selectable if it’s not going to do anything?

Don’t give the User the option to select controls that won’t do anything. They just get confused, and frustrated. The only button that should be Enabled when this application is first launched is the Exit button. Set initial values for most controls by putting code in the Form_Load event procedure or change their properties during design time.

Start this project by deleting all of the MsgBox code from your program (leave behind all the other code). Here’s an example of the code from the cmdAdd_Click event procedure with the lines to be deleted marked by arrows (your code may be different, but the point is to delete the code used for the MsgBox):

α Dim iStyle As Integer
     'Make sure txtName.Text is not blank
α If txtName.Text <> "" Then
          'Add the string in txtName.Text to the Listbox
          lstNames.AddItem txtName.Text
          'Erase what's in the txtName.Text
          txtName.Text = ""
α Else
α      iStyle = vbOKOnly + vbCritical + vbApplicationModal
α      MsgBox "The Name Box is Blank!", iStyle, "Illegal Entry"
α End If
     'Set focus back on the txtName textbox
     txtName.SetFocus

Delete only the arrowed lines above and leaving the remaining code behind, like this:

'Add the string in txtName.Text to the Listbox
lstNames.AddItem txtName.Text
'Erase what's in the txtName.Text
txtName.Text = ""
'Set focus back on the txtName textbox
txtName.SetFocus

Do this in all the event procedures where you use the MsgBox.

Make the appropriate modifications to your project and test it thoroughly. Out with the Message Boxes. In with buttons that are disabled until useful.

Hints

To disable the Add (cmdAdd), Delete (cmdDelete), and Clear (cmdClear) buttons when your program is started, add this code to your Form’s Load event procedure:

cmdAdd.Enabled = False
cmdDelete.Enabled = False
cmdClear.Enabled = False

Note: While most of the Properties of controls can be set in the Form_Load event procedure, some cannot (Over time, you’ll find out what those are by trial and error). Also, the Methods of a control can rarely be called in the Form_Load event procedure because Form_Load happens before the Form is even displayed. That means you can't call an Image's Move method, since there is no where to move it (the form's not even visible).

To be sure that the Add button (cmdAdd) is not selectable while the Textbox (txtName) is empty, add the following code to the txtName_Change event procedure:

If Len(txtName.Text) > 0 Then          ‘or use If txtName.Text <> "" Then
      cmdAdd.Enabled = True
Else
      cmdAdd.Enabled = False
End If

The txtName_Change event procedure is executed whenever the contents of the txtName Textbox changes. This code checks the length (Len) of txtName.Text. When txtName.Text has a length greater than 0 (Zero), the Textbox isn’t empty so the Enabled property of the cmdAdd button is set to True. Otherwise (Else) it is set to False. Now the only code you need in the cmdAdd_Click event procedure is this:

'Add the string in txtName.Text to the Listbox
lstNames.AddItem txtName.Text
'Erase what's in the txtName.Text
txtName.Text = ""
'Set focus back on the txtName textbox
txtName.SetFocus

The Delete (cmdDelete) button should be Enabled only after an item in the Listbox (lstNames) has been clicked on. So add this code to the lstNames_Click event procedure (the Click event procedure of a Listbox is not triggered when you click on an empty listbox—only if you click on an item in the listbox:

cmdDelete.Enabled = True

Don’t forget to disable the Delete button after the user clicks on it by adding this code (the line in Bold below) to the cmdDelete_Click event procedure (delete the unneeded code for the If test and Message Box, so that only these 2 lines remain in the cmdDelete_Click event procedure):

lstNames.RemoveItem lstNames.ListIndex
cmdDelete.Enabled = False

To insure that the Clear (cmdClear) button is only enabled when the Listbox (lstNames) is not empty, add this code to the cmdAdd_Click event procedure:

cmdClear.Enabled = True

And to disable the Clear (cmdClear) button after it’s used, add this code (the line in Bold below) to the cmdClear_Click event procedure (delete the unneeded code for the If test and Message Box, so that only these 2 lines remain in the cmdClear_Click event procedure):

lstNames.Clear
cmdClear.Enabled = False

There is at least one potential problem that you must not overlook. For example, what if the Clear button has been enabled because several items have been added to the Listbox, but then the user deletes each item one-by-one with the Delete button until the Listbox is empty. The Listbox could end up empty, while the Clear button is still enabled. To prevent this, you must add this test as the last code in the cmdDelete_Click event procedure:

If lstNames.ListCount = 0 Then
      cmdClear.Enabled = False
End If

Now, each time the Delete button is clicked, you test whether the Listbox is empty or not by checking its ListCount property. Remember, ListCount is always equal to the number of items in the Listbox. If ListCount is 0 (Zero), it means the Listbox is empty, so that’s when you set the Enabled property of the Clear (cmdClear) button to False.

Be sure to thoroughly test this program. There is at least one other potential bug that you need to find and correct. Good luck.

After all these changes you can see how this method actually requires a lot less coding, and is more user-friendly, than the way we did it in Project 6. Remember to always think about your Users when designing a program. If the User’s aren’t happy with it, all your magnificent work will end up in the trashcan.