Beginning Visual Basic (Visual Studio 2010)

Beginning Visual Basic (Visual Studio 2010) - Project 7

Disabling and Enabling Buttons to Guide User Interaction

Project 7

This is a modification (enhancement) of Project 6.

Creating Project 7 from Project 6
Open Project6-7 by selecting it on the start page, as shown:

You may also open it by selected Open Project on the File drop-down menu.
Rename the Form file by changing its File Name property
Select the frmProj6.vb form file in the Solution Explorer window, as shown:

Change the File Name property from frmProj6.vb to frmProj7.vb:

Renaming the form file should have automatically rename the form as well. In design view click once on the form to select it and display its properties in the Properties Window. Be sure that the Name property of the form is now frmProj7 and change the Text property of the form to Project 7, as shown:

Before going on, click on the Save All button on the toolbar to save your project.

MessageBoxes are really not such a good idea

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

MessageBoxes 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 easy 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 MessageBoxes as much as possible. They just force the User to stop what they are doing to acknowledge it—very annoying. Instead of using a MessageBox 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 MessageBoxes, 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 becomes dimmed (turns gray) 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. You can set initial property values for most controls by putting code in the form's Load event procedure or by changing their properties at design time.

Start this project by deleting all of the messagebox code from the Click event procedures of the Add and Delete buttons (leave behind all the other code). Here’s an example of the code from the btnAdd_Click event procedure with the lines to be deleted crossed out (your code may be different, but the point is to delete the code used for the messagebox):

~~If txtName.Text <> "" Then~~
    lstNames.Items.Add(txtName.Text)
~~Else~~
    MessageBox.Show( _
        "The Name textbox is empty! Please" & vbCrLf & _
        "type the name to be added.", _
        "Illegal Operation", _
        MessageBoxButtons.OK, _
        MessageBoxIcon.Exclamation)
End If
txtName.Clear()
txtName.Focus()

Delete only the crossed out lines above and leave the remaining code behind, like this:

lstNames.Items.Add(txtName.Text)
txtName.Clear()
txtName.Focus()

Get rid of the Message Box code in the Click event procedure of the Delete button as well.

Out with the MessageBoxes—Note: Keep the confirmation messagebox code in the Click event procedure of the Clear button—In with buttons that are disabled until useful.   Use the following hints section to see how to enable and disable the buttons to guide user interaction.

Hints

Disabling the buttons at program launch

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

btnAdd.Enabled = False
btnDelete.Enabled = False
btnClear.Enabled = False

Note: While most of the Properties of controls can be set in the form's 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's Load event procedure because Load happens before the Form is even displayed. So calling a control's Focus method won't work in the form's Load event procedure.

Disabling the Add button

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

'Is the Text property of txtName empty?
If txtName.Text.Length > 0 Then
     'Enable the Add button
    btnAdd.Enabled = True
Else
     'Disable the Add button
    btnAdd.Enabled = False
End If

The txtName_TextChanged event procedure is raised whenever the contents of the txtName textbox changes. The above code checks the Length of txtName.Text. When txtName.Text has a length greater than 0 (Zero), the Textbox isn’t empty so the Enabled property of the btnAdd button is set to True. Otherwise (Else) it is set to False.

Disabling the Delete button

The Delete (btnDelete) button should be Enabled only after an item in the Listbox (lstNames) has been selected. So add the following line of code to the lstNames_SelectedIndexChanged event procedure:

'Enable the Delete button
btnDelete.Enabled = True

The SelectedIndexChanged event procedure of a Listbox is not triggered when you click on an empty listbox—only if you select an item in the listbox. Don’t forget to disable the Delete button after the user clicks on it by adding this code to the btnDelete_Click event procedure:

'Disable the Delete button
btnDelete.Enabled = False

Add the following line of code to the btnAdd_Click event procedure so that the Clear button is enabled whenever anything is added to the listbox:

'Enable the Clear button
btnClear.Enabled = True

And to disable the Clear (btnClear) button after it’s used, add this code to the btnClear_Click event procedure:

'Disable the Clear button
btnClear.Enabled = False

There are a couple of potential problems 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 at the end of the btnDelete_Click event procedure:

'Is the lstNames listbox empty?
If lstNames.Items.Count = 0 Then
     'Disable the Clear button
    btnClear.Enabled = False
End If

Now, each time the Delete button is clicked, you test whether the Listbox is empty or not by checking the Count property of the Items collection. Remember, Count is always equal to the number of items in the Listbox. If Count is 0 (Zero), it means the Listbox is empty, so that’s when you set the Enabled property of the Clear (btnClear) 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 of disabling and enabling the buttons actually requires a lot less coding and is far more user-friendly than nagging the user with MessageBoxes, like 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.

Recommended Enhancement

Add an Edit button. (details in class)

To copy a Project folder from your Projects folder on the Hard Drive to a floppy diskette or pen-drive follow these steps:

Exit Visual Studio 2010 and insert the floppy diskette or pen-drive, that you want to copy the Project6-7 folder to:

Select the My Documents item on the Start Menu to open the My Documents folder.

In the My Documents folder, double-click the Visual Studio 2010 folder to open it.

Double-click on your Projects folder to open it.

Open the Project6-7 folder by double-clicking on it. Inside the Project6-7 folder, delete the Obj and Bin folders—these folders are created automatically when you open a project. You do not need to copy them, or their contents, to your floppy diskette or pen-drive. Important: Be sure not to delete the My Project folder or Resources folder, if it exists.

Once you have deleted the Obj and Bin folders, hit the Backspace key once—or click the Back button on the toolbar. This moves you from inside the Project6-7 folder to back inside your Projects folder.

Right-click on the Project6-7 folder and selected: 31/2" Floppy A: or your pen-drive on the Send To fly-out menu. This copies the Project6-7 folder to your floppy diskette or pen-drive.