Microsoft Visual C# 2005 Express Edition: Build a Program Now! (25 page)

C06622132.indd 102

C06622132.indd 102

10/24/05 3:37:26 PM

10/24/05 3:37:26 PM

As you can see, you’ll implement a nice list of features in this section. Here’s what you’re going to accomplish:

■ Link all buttons to browser functionalities

■ Manage the Go button and the Enter key on the address text box in the tool strip
I suggest that you rename your

buttons immediately when you

■ Change the browser form icon to the same globe icon that you’ve set for the application
add them to make sure the event

handling code has the correct

icon on the hard drive

name. It is possible to rename the

buttons later, but it’s more tedious

First, you’ll add two new tool strips and all their buttons. You’ll also add the code to
because you have to perform extra

steps, which takes more time. It’s

handle all those new buttons. Each time you add a button, rename it before writing the
just easier, cleaner, and faster to

event handling code. You should do this to make sure you have the correct variable names.
do it as soon as you create the

controls.

It’s just a matter of consistency and good practice.

TO ADD TOOL STRIPS AND BUTTONS TO YOUR BROWSER

Start by adding two new tool strips to the browser’s form right below the menu strip. Name the first 1 one
tsIcons
and the other one
tsNavigation
. Use the
Document Outline
to make sure they are
If you see only events in the

Properties window, click the

under the top panel of the tool strip container.

Properties button at the top of the

Properties window.

Select the
tsIcons
tool strip. Then, using the
Add Tool Strip Item
drop-down list, add six buttons, 2 and name them
tsbBack
,
tsbForward
,
tsbStop
,
tsbRefresh
,
tsbHome
, and
tsbSearch
. To modify the image for each button, change the Image property of the Tool Strip Button control by 3 clicking the Ellipse
button (...) to browse on your hard disk for the icon. Or you can right-click the icon in the tool strip and select
Set Image. . .
You’ll then have the same dialog to import the image files from your hard disk. The images for these buttons are all located in the Images folder under Chapter 6 where you've installed your companion content.

4 For the tsbSearch button, right-click the button, select
Display Style
, and set it to
ImageAndText
. 5 Modify the Text property of the tsbSearch button to
Search
.

Chapter 6: Modify Your Web Browser Now!

103

C06622132.indd 103

C06622132.indd 103

10/24/05 3:37:27 PM

10/24/05 3:37:27 PM

For each button, add the respective functionality. (You’ll see how easy it is to add the desired function6 ality because the Web Browser control was well designed.) Double-click one button after the other and you’ll get to the Click event for each one. In each Click event, add the following code. See below for the corresponding button name and event source code.

tsbBack

myBrowser.GoBack();

tsbForward

myBrowser.GoForward();

tsbStop

myBrowser.Stop()

;

lblApplicationStatus.Text = "Ready";

tsbRefresh

myBrowser.Refresh()

;

lblApplicationStatus.Text = "Ready";

tsbHome

myBrowser.GoHome();

tsbSearch

myBrowser.GoSearch();

Run the application and determine if the buttons are working. Everything should be working except 7 for the navigation buttons.

You’ll now modify the behavior of the two navigation buttons in the tsbIcons tool strip to make sure they’re enabled only when they should be—that is, when there are pages in the browser’s history. When you start the application, the buttons should be disabled. The best place to put this code is the Load event of the Browser form. It’s a good place because the event will happen right before the user actually sees the form. Next, you need to think about where you should put the code that will enable and disable the two navigation buttons. The ideal place for the validation code is where the navigation occurs because you know at that moment the browser will navigate to a new URL.

104

Microsoft Visual C# 2005 Express Edition: Build a Program Now!

C06622132.indd 104

C06622132.indd 104

10/24/05 3:37:27 PM

10/24/05 3:37:27 PM

TO MODIFY THE BEHAVIOR OF NAVIGATION BUTTONS

In Browser.cs, add the ModifyNavigationButtons method and modify Browser_Load and myBrowser_

1 DocumentCompleted to look like the following:

private void Browser_Load(object sender, EventArgs e)

{

this.tsbBack.Enabled = false;

this.tsbForward.Enabled = false;

this.lblApplicationStatus.Text = “Ready”;

}

private void ModifyNavigationButtons()

{

// Add the code to enable or disable whenever there are URLs

// in the browsing session’s history

if (myBrowser.CanGoBack)

tsbBack.Enabled = true;

else

tsbBack.Enabled = false;

if (myBrowser.CanGoForward)

tsbForward.Enabled = true;

else

tsbForward.Enabled = false;

}

private void myBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)

{

// The about box is retrieving this information in a nice clean method so let’s reuse it

// If you don’t have an about box you can just create this method using the code from

// the about box. We don’t need to validate if the title is empty the method is doing it.

// if it’s empty it will use the .exe name

this.Text = myAboutBox.AssemblyTitle + “ - “ + e.Url.Host.ToString(); ModifyNavigationButtons();

this.lblApplicationStatus.Text = “Ready”;

}

2 Run the application to determine if the buttons behave correctly now.
Chapter 6: Modify Your Web Browser Now!

105

C06622132.indd 105

C06622132.indd 105

10/24/05 3:37:28 PM

10/24/05 3:37:28 PM

Next, you’ll add the names and controls to the tsNavigation tool strip as you did for the previous tool strip. However, this time instead of just adding some tool strip buttons, you’ll add different types of controls.

For instance, you’ll modify the browser to navigate to the URL specified in the text box when the user clicks Enter. You’ll also modify the behavior of clicking the Go button to make sure it does the same thing.

TO ADD NEW CONTROLS TO THE TSNAVIGATION TOOL STRIP

Use the
Add Tool Strip Item
drop-down list on the tsNavigation toolstrip and add the following con1 trols to the toolstrip: Label, TextBox, and Button. Name the controls
tslblAddress
,
tstbUrl
, and
tsbGo
. 2 Use the table below and set the properties of the controls.

Control name

Type

Properties

Value

tslblAddress ToolStripLabel

Text

tstbUrl ToolStripTextBox

Size:Width

350

tsbGo ToolStripButton

Text Go

tsbGo ToolStripButton

DisplayStyle

ImageAndText

tsbGo ToolStripButton

Image Go.bmp

The tsNavigation tool strip is not a dialog box with an OK button or a Cancel button, so you cannot use the AcceptButton or CancelButton properties. Therefore, you need to capture another event that will be triggered whenever the user presses Enter. The KeyUp event is triggered whenever a key is released by the user. For instance, whenever the user types in a letter, he presses down the key of the desired letter. When he releases the key, the KeyUp event is triggered. The code you’ll add in the next exercise will determine if the key the user just released was the Enter key. If it was, a new method called NavigateToUrl will accept a string representing the URL as a parameter and navigate to the URL.
106

Microsoft Visual C# 2005 Express Edition: Build a Program Now!

C06622132.indd 106

C06622132.indd 106

10/24/05 3:37:29 PM

10/24/05 3:37:29 PM

You’ll use the same method for the Go button. When you develop an application, you never want to duplicate two pieces of code that differ only by a literal. You always want to re-use the source code whenever possible. The way to do that is to create methods that are generic enough to be used by more than one component. Since the NavigateToUrl method has only one line of code, you might be tempted to say that if it’s almost the same one line of code, why use a method? The answer is simply that in the future you might have to add some validation. If that one line of code is repeated throughout the source code, you’ll have to update it in multiple places. However, if there is only one place where you have to modify the code, your solution is less prone to errors and a lot less tedious.
TO CONFIGURE THE BROWSER TO NAVIGATE TO THE URL

1 Select the
tstbUrl Tool Strip
text box.

In the event list in the Properties window for tstbUrl, double-click the
KeyUp
event. Below is the code 2

to determine if the user pressed and released the Enter key and also the method NavigateToUrl that
By the way, there’s more than one

will enable you to use the same code in more than one place. Add this code to tstbUrl_KeyUp and add the
event that is being triggered by

NavigateToUrl method.

pressing the Enter key, but the

one that you’ll trap is the KeyUp

event.

private void tstbUrl_KeyUp(object sender, KeyEventArgs e)

{

// e is of type KeyEventArgs and contains all the

// information that triggered the event. The KeyCode

// is one those information.

if (e.KeyCode = Keys.Enter)

this.NavigateToUrl(tstbUrl.Text);

}

private void NavigateToUrl()

{

myBrowser.Navigate(Url);

}

Double-click the
Go
button on the tsNavigation tool strip and add the following code to the 3 tsbGo_Click event procedure. (Notice that this is the NavigateToUrl method.) private void tsbGo_Click(object sender, EventArgs e)

{

this.NavigateToUrl(tstbUrl.Text);

}

Chapter 6: Modify Your Web Browser Now!

107

C06622132.indd 107

C06622132.indd 107

10/24/05 3:37:29 PM

10/24/05 3:37:29 PM

You can now modify another piece of code, the Navigate menu click event. You simply have to modify the code so that it calls the NavigateToUrl method, as shown below: private void navigateToolStripMenuItem_Click(object sender, EventArgs e)

{

if (navigateWindow.ShowDialog() == DialogResult.OK)

{

this.NavigateToUrl(navigateWindow.txtUrl.Text);

}

navigateWindow.txtUrl.Text = “”;

}

Finally, you'll modify the Browser Form icon so that the user sees a globe when the browser is running or minimized.

TO MODIFY THE BROWSER FORM ICON

Select the
Browser
form and then look for Icon

1 Property in the Properties window. If you only see

events in the Properties window, click the Properties button

at the top of the Properties window. Click the
Ellipsis
button

(...) to browse for the
globe.ico
in the Chapter 6 directory in the Images folder under the Chapter 6 directory.

The result of your hard labor is the finished

product—the My Own Browser application, as

shown in Figure 6-14.

Figure 6-14

Finished product—the My Own Browser application

108

Microsoft Visual C# 2005 Express Edition: Build a Program Now!

C06622132.indd 108

C06622132.indd 108

10/24/05 3:37:30 PM

10/24/05 3:37:30 PM

In Summary...

In this chapter, you took a simple application and upgraded it to create a professionallooking application with many nice features for your users. You learned to add a splash screen to your application and to work with dialog boxes. You created an About box and a Navigate dialog box to allow your user to navigate to a URL; you added an autocomplete feature to your text boxes and the autosuggest/append feature using the browser’s URLs history. You then added tool strips, progress bars, and icons from Windows. You dynamically managed controls, and you learned a lot about new events and how to handle them using event arguments.

In the next chapter, you’ll learn techniques to use when things don’t go too well; that is, learn the art of debugging code. You’ll also learn about the Edit and Continue feature, the new data visualizers, tips and tricks, and much more.