Beginning Visual Basic 2005 (2006)

Chapter 6

Creating More Complex Applications

Normal applications generally have a number of common elements. Among these are toolbars and status bars. Putting together an application that has these features is a fairly trivial task in Visual Basic 2005.

In the next section, you build an application that allows you to make changes to the text entered into a text box, such as changing its color and making it all uppercase or lowercase.

The Text Manipulation Project

In the next Try It Out you are going to build an application that allows you to manipulate the text in a text box. You’ll be using a ToolBar control to change the color of the text in your text box and also to change the case of the text to either all uppercase letters or all lowercase letters.

The StatusBar control will also be used in your project to display the status of your actions as a result of clicking a button on the toolbar.

Your first step on the road to building your application is to create a new project.

Try It Out

Creating the Text Editor Project

1.Create a new Windows Application project and call it Text Editor.

2.Most of the time, Form1 isn’t a very appropriate name for a form, as it’s not very descriptive. Right-click the form in the Solution Explorer, select Rename, and change its name to TextEditor.vb as shown in Figure 6-9. Then press Enter to save the changes.

Figure 6-9

3.Now click on the form in the Forms Designer, and in the Properties window change the Text property to Text Editor.

4.In the screenshots, we’re going to show the design window as quite small to save paper! You should explicitly set the size of the form by going to the Properties window of the form and setting the Size property to 600, 460.

In the next section, you start building the user interface part of the application.

Creating the Toolbar

The toolbar contains a collection of buttons such as the toolbar in Visual Studio 2005. In the following Try It Out, you will create the toolbar and add the buttons to it.

186

Building Windows Applications

Try It Out

Adding the Toolbar

1.Select the ToolStrip control from the Toolbox and drag it and drop it on the form. It will automatically dock at the top of the form. Set the Stretch property to True to cause the toolbar to stretch across the entire form at run time.

2.To add buttons to the toolbar you use a built-in editor. Find the Items property in the Properties window, select it, and left-click the ellipsis (...) to the right of (Collection).

3.You’re going to add six buttons to the toolbar: Clear, Red, Blue, Uppercase, Lowercase, and About.

4.To add the first button, click the Add button in the Items Collection Editor. The Items Collection Editor displays a properties palette much like the one that you’re used to using. For each button you need to change its name, display style, give it an icon, clear its text, and provide some explanatory tool tip text. Change the Name property to tbrClear as shown in Figure 6-10.

Figure 6-10

5.Change the DisplayStyle property to Image.

6.Locate the Image property and select it. Then click the ellipsis button for this property to invoke the Select Resource editor. In the Select Resource editor, click the Import button. In the Open dialog box, browse to the installation folder where Visual Studio 2005 was installed (the default installation path is shown here) and locate the following folder:

C:\Program Files\Microsoft Visual Studio 8\Common7\ VS2005ImageLibrary\ icons\WinXP

Select the document.ico file and then click the Open button to import the resource. Next, click the OK button in Select Resource editor and you’ll be returned to the Items Collection Editor.

7.Change the ImageScaling property to None, clear the Text property, and then set the ToolTipText property to New. This completes the steps necessary to create the first button.

187

Chapter 6

8.You want to create a separator between the Clear button and the Red button. In the combo box in the Items Collection Editor, select Separator and then click the Add button. You can accept all default properties for this button.

9.Repeat steps 4 through 7 to create the Red button and use the following properties for this button. Before clicking the Add button, ensure you select Button in the combo box:

Set Name to tbrRed.

Set DisplayStyle to Image.

Use Common7\ VS2005ImageLibrary\icons\Misc\ servicestopped.ico for the Image property.

Set ImageScaling to None.

Clear the Text property.

Set the ToolTipText property to Red.

10.Repeat steps 4 through 7 to create the Blue button and use the following properties for this button:

Set Name to tbrBlue.

Set DisplayStyle to Image.

Use Common7\ VS2005ImageLibrary\icons\Misc\ services.ico for the Image property.

Set ImageScaling to None.

Clear the Text property.

Set the ToolTipText property to Blue.

11.You want to create a separator between the Blue button and the Uppercase button. In the combo box in the Items Collection Editor, select Separator and then click the Add button. You can accept all default properties for this button.

12.Repeat steps 4 through 7 to create the Uppercase button and use the following properties for this button. Before clicking the Add button, ensure you select Button in the combo box:

Set Name to tbrUpperCase.

Set DisplayStyle to Image.

Use Common7\VS2005ImageLibrary\icons\WinXP\fonfile.ico for the Image property.

Set ImageScaling to None.

Clear the Text property.

Set the ToolTipText property to Upper Case.

13.Repeat steps 4 through 7 to create the Lowercase button and use the following properties for this button:

Set Name to tbrLowerCase.

Set DisplayStyle to Image.

188

Building Windows Applications

Use Common7\VS2005ImageLibrary\icons\WinXP\fonfont.ico for the Image property.

Set ImageScaling to None.

Clear the Text property

Set the ToolTipText property to Lower Case.

14.You want to create a separator between the Lowercase button and the Help button. In the combo box in the Items Collection Editor, select Separator and then click the Add button. You can accept all default properties for this button.

15.Repeat steps 4 through 7 to create the Help button and use the following properties for this button. Before clicking the Add button, ensure you select Button in the combo box:

Set Name to tbrHelpAbout.

Set DisplayStyle to Image.

Use Common7\VS2005ImageLibrary\icons\WinXP\help.ico for the Image property.

Set ImageScaling to None.

Clear the Text property.

Set the ToolTipText property to About.

16.Now click the OK button in the Items Collection Editor to close it.

17.Save your project by clicking the Save All button on the toolbar.

How It Works

The ToolStrip control docks to a particular position on the form. In this case, it docks itself to the top edge of the form.

The six buttons and three separators that you added to the toolbar actually appear as full members of the TextEditor class and have the usual events that you are accustomed to seeing. Later, you’ll see how you can respond to the Click event for the various buttons.

A toolbar button can display text only, an image only, or both text and an image. However, most toolbars display only an image, so this is why you set the DisplayStyle property to Image. You did not want the image to scale smaller or larger automatically, so you set the ImageScaling property to None.

The ToolTipText property enables Visual Basic 2005 to display a ToolTip above the button whenever the user hovers the mouse over it. You don’t need to worry about actually creating or showing a ToolTip; Visual Basic 2005 does this for you.

At this point, your toolbar should look similar to the one shown in Figure 6-11. Notice that the icons you used for the Red and Blue buttons look better than the bitmaps that you used for the other buttons. This is because the icons have a transparent background, and you’ll typically find that icons look better on the toolbar buttons.

189

Chapter 6

Figure 6-11

Creating the Status Bar

The status bar is a panel that sits at the bottom of an application window and tells the user what’s going on. You create the status bar in the next Try It Out.

Try It Out

Adding a Status Bar

1.Drag a StatusStrip control from the Toolbox and drop it onto your form. You’ll notice that it automatically glues itself to the bottom edge of the form and you’ll only be able to change the height portion of its Size property if desired. Ensure the RenderMode property is set to System to make the status bar appear flat.

2.You need to add one StatusStripLabel to the Items collection of the StatusStrip so that you can display text on the status bar. Click the ellipsis button in the Items property to invoke the Items Collection Editor dialog box. In the Items Collection Editor dialog box, click the Add button to add a panel.

3.Set the following properties for the StatusStripLabel:

Set Name to sspStatus.

Set DisplayStyle to Text.

Set Text to Ready.

4.Click the OK button to close the Items Collection Editor dialog box.

5.Open the Code Editor for the form and add the following code. You can quickly view the Code Editor by right clicking on the form and choosing View Code from the context menu:

‘Get or set the text on the status bar Public Property StatusText() As String

Get

Return sspStatus.Text End Get

Set(ByVal value As String) sspStatus.Text = value

End Set End Property

There’s no need to run the project at this point, so let’s just talk about what you’ve done here.

How It Works

Visual Studio 2005 has some neat features for making form design easier. One thing that was always laborious in previous versions of Visual Basic and Visual C++ was to create a form that would automatically adjust itself when the user changed its size.

190

Building Windows Applications

In Visual Studio 2005, controls have the capability to dock themselves to the edges of the form. By default, the StatusStrip control sets itself to dock to the bottom of the form, but you can change the docking location if so desired. So, when someone resizes the form, either at design time or at run time, the status bar (StatusStrip control) stays where you put it.

You may be wondering why you built a StatusText property to get and set the text on the status bar. Well, this comes back to abstraction. Ideally, you want to make sure that anyone using this class doesn’t have to worry about how you’ve implemented the status bar. You might want to replace the .NET-supplied status bar with another control, and if you did, any users wanting to use your TextEditor class in their own applications (or developers wanting to add more functionality to this application

later) would have to change their code to make sure it continued to work properly.

That’s why you defined this property as Public. This means that others creating an instance of Text Editor to use its functionality in their own applications can change the status bar text if they want. If you don’t want them to be able to change the text themselves, relying instead on other methods and properties on the form to change the text on their behalf, you would mark the property as Private.

As you work through this example, you’ll see definitions of Public and Private. From this you’ll be able to infer what functionality might be available to a developer using your TextEditor class.

Creating an Edit Box

The first thing you do in the next Try It Out is create a text box that can be used to edit the text entered. The text box has a MultiLine property, which by default is set to False. This property determines whether the text box should have only one line or can contain multiple lines. When you change this property to True, the text box control can be resized to any size that you want, and you can enter multiple lines of text in this control.

Try It Out

Creating an Edit Box

1.Open the Forms Designer for the TextEditor form, drag a TextBox control from the ToolBox, and drop it onto your form.

2.Change the following properties of the TextBox control:

Set Name to txtEdit.

Set Dock to Fill.

Set MultiLine to True.

Set ScrollBars to Vertical.

Your form should now look like Figure 6-12.

Clearing the Edit Box

In the following Try It Out, you’re going to create a property called EditText that will get or set the text you’re going to edit. Then, clearing the edit box will simply be a matter of setting the EditText property to an empty string.

191

Chapter 6

Figure 6-12

Try It Out

Clearing txtEdit

1.Add this code to TextEditor:

‘Gets or sets the text that you’re editing Public Property EditText() As String

Get

Return txtEdit.Text End Get

Set(ByVal value As String) txtEdit.Text = value

End Set End Property

As you have done earlier, when you created a property to abstract away the action of setting the status bar text, you created this property to give developers using the TextEditor form the ability to get or set the text of the document irrespective of how you actually implement the editor.

2.You can now build ClearEditBox, the method that actually clears your text box. Add the following code:

‘Clears the txtEdit control Public Sub ClearEditBox()

‘Set the EditText property EditText = String.Empty ‘Reset the font color

txtEdit.ForeColor = Color.Black ‘Set the status bar text StatusText = “Text box cleared”

End Sub

192

Building Windows Applications

3.Now select txtEdit in the Class Name combo box and the TextChanged event in the Method Name combo box at the top of the code editor. Add this code:

Private Sub txtEdit_TextChanged(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles txtEdit.TextChanged

‘Reset the status bar text

StatusText = “Ready”

End Sub

How It Works

The first thing you want to do is clear your text box. In the next Try It Out, you see how you can call ClearEditBox from the toolbar.

All this procedure does is set the EditText property to an empty string by using the Empty field of the String class. Then it sets the ForeColor property of the text box (which is the color of the actual text) to black and places the text Text box cleared in the status bar.

‘Clears the txtEdit control Public Sub ClearEditBox()

‘Set the EditText property EditText = String.Empty ‘Reset the font color

txtEdit.ForeColor = Color.Black ‘Set the status bar text StatusText = “Text box cleared”

End Sub

As mentioned, EditText abstracts the action of getting and setting the text in the box away from your actual implementation. This makes it easier for other developers down the line to use your TextEditor form class in their own applications:

‘Gets or sets the text that you’re editing Public Property EditText() As String

Get

Return txtEdit.Text End Get

Set(ByVal value As String) txtEdit.Text = value

End Set End Property

As you type, the TextChanged event handler will be repeatedly called:

Private Sub txtEdit_TextChanged(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles txtEdit.TextChanged

‘Reset the status bar text StatusText = “Ready”

End Sub

193

Chapter 6

Changing the status bar text at this point resets any message that might have been set in the status bar. For example, if the user has to type a lot of text and looks down to see Text box cleard, he or she may be a little concerned. Setting it to “Ready” is a pretty standard way of informing the user that the computer is doing something or waiting. It does not mean anything specific.

Responding to Toolbar Buttons

In the next Try It Out, you’ll start implementing the Click events for the various toolbar buttons on your toolbar. When you look at building application menus in Chapter 8, you’ll notice that most menus provide the same functionality as your toolbar buttons, and you’ll want to implement the code in your menu item Click events and have the corresponding toolbar buttons call the menu item Click events.

Try It Out

Responding to Toolbar Button Click Events

1.In the Code Editor, select tbrClear from the Class Name combo box, and in the Method Name combo box, select the Click event. Add the following highlighted code to the Click event handler:

Private Sub tbrClear_Click(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles tbrClear.Click

‘Clear the edit box

ClearEditBox()

End Sub

2.You need to create a procedure that will change the text in the edit box to red and update the status bar. Add the following code:

Public Sub RedText() ‘Make the text red

txtEdit.ForeColor = Color.Red

‘Update the status bar text StatusText = “The text is red”

End Sub

3.Next, select tbrRed in the Class Name combo box, select the Click event in the Method Name combo box, and add the following highlighted to the Click event handler:

Private Sub tbrRed_Click(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles tbrRed.Click

‘Make the text red

RedText()

End Sub

Run the project and enter some text. Click the Red button, and the text’s color will change from black to red, as shown in Figure 6-13. Notice that if you continue typing in the edit box, the new text will also be red.

194

Building Windows Applications

Figure 6-13

4.Click the Clear button to remove the text and revert the color of any new text to black.

5.Stop your project and return to the Code Editor. Add the following BlueText procedure to change the text in the edit box to blue:

Public Sub BlueText() ‘Make the text blue

txtEdit.ForeColor = Color.Blue

‘Update the status bar text StatusText = “The text is blue”

End Sub

6.Now select tbrBlue in the Class Name combo box and the Click event in the Method Name combo box. Add the following highlighted code to the Click event handler:

Private Sub tbrBlue_Click(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles tbrBlue.Click

‘Make the text blue

BlueText()

End Sub

7.You now need to create a procedure to change the text in the edit box to all uppercase. Add the following code to your project:

Public Sub UppercaseText()

‘Make the text uppercase

EditText = EditText.ToUpper

‘Update the status bar text

StatusText = “The text is all uppercase” End Sub

195