Introduction to Visual Basic .NET

Beginning Visual Basic .NET - Project 7

Disabling Buttons to Guide User Interaction

The 7th Project

This is a modification (enhancement) of Project 6.

Creating Project 7 from Project 6
Note: Be sure that you have a backup copy of your Project6 files (per the instructions at the end of each project) on your floppy diskette before preceding.

Run Visual Basis .NET and open your Solution (<your name>.sln).

Select (click once on) Project6 in the Solution Explorer window. Then drop down the File menu and choose Save Project6 As.... Note: If Save Project6 As... is not listed on the file menu then you have not selected Project6 in the Solution Explorer window. The Save File As dialog should appear.
In the File Name text box change the project file name to Project7.vbproj, and click the Save button.
Rename the Form file and change it's Name and Text properties
Select the frmProj6.vb form file in the Solution Explorer window. In the Properties window, change the File Name property, to frmProj7.vb (don't forget to include the .vb extension).
Now click on the form in the Designer window to display it's properties:

Change the Name property to frmProj7 (Remember: No spaces are allowed in the form’s Name property, or the name property of any control).

Change the Text property to Project 7

Setting the Startup Object
Right-click on the Project7 project in your Solution Explorer window, click on the Properties item at the bottom of the context-menu. In the Project7 Property Pages dialog drop down the Startup object list and choose frmProj7 and click the OK button.
Before going on, click on the Save All button on the toolbar to save your project.

Message Boxes are really not such a good idea

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 heck 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. 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 message box code from your program (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 message box):

~~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.Text = ""
txtName.Focus()

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

lstNames.Items.Add(txtName.Text)
txtName.Text = ""
txtName.Focus()

Do this in all the event procedures where you use the Message Box.

Make the appropriate modifications to your project and test it thoroughly. Out with the Message Boxes. 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

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.

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 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 btnAdd button is set to True. Otherwise (Else) it is set to False. Now the only code you need in the btnAdd_Click event procedure is this:

'Use the Add method of the listbox's Items property to add the value
'    in txtName.Text to the lstNames listbox.
lstNames.Items.Add(txtName.Text)
'Clear the name that was added from the txtName textbox
txtName.Text = ""
'Move the focus to the txtName textbox
txtName.Focus()

The Delete (btnDelete) button should be Enabled only after an item in the Listbox (lstNames) has been clicked on. So add this code to the lstNames_SelectedIndexChanged event procedure (the SelectedIndexChanged 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):

'Enable the Delete button
btnDelete.Enabled = True

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

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

'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 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 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 method of the Items property. 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 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.

Recommended Enhancement

Add and Edit button.

To copy a Project folder from your Solution on the Hard Drive to a floppy diskette, follow these steps:

Exit Visual Basic .NET and insert the floppy diskette, that you want to copy the Project folder to, into drive A:

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 Projects folder to open it.

Double-click on your Solution folder to open it (it should have your name).

Open the Project folder that you want to copy, by double-clicking on it.

Deleting the Obj and Bin folders from inside the Project folder before copying it.

Inside the Project 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.

Hit the Backspace key once--or click the Back button on the toolbar. This moves you from inside the Project folder to back inside your Solution folder.

Right-click on the Project folder and selected: 3 1/2" Floppy A: on the Send To fly-out menu. This copies the Project folder to your floppy diskette.