Creating Your Own Web Browser in Less Than Five Minutes with Microsoft Visual C# 2008 Express Edition

What Is the Design Layout?

You will soon create a new design layout in the form designer. In doing so, you’ll be creating what the application contains and how its content is presented when the user executes the application.

To accomplish this phase of a project, you typically do not need to type a great deal of code; as explained later in this chapter, Visual Studio takes care of this code for you. You have to worry mostly about how your application looks. When you’re done designing all the visual aspects to your liking, your next task usually involves attaching the source code to your visual layout so that your application reacts to and acts upon the user’s input.

In this chapter, you will complete the basic layout. You will learn more advanced layout techniques in following chapters. Let’s start the Web browser project now.

To Create A Simple Web Browser

1. Start Visual C# 2008 Express Edition by clicking Start, All Programs, Microsoft Visual C# 2008 Express Edition.

2. Create a new Windows Forms application by using any of the techniques shown in the previous chapters; for instance, you can use either the File menu or the New Project icon in the toolbar. Name the new application MyOwnBrowser.

3. On the design surface, you’ll see the empty form with a title bar named Form1. Click the title bar once. By default, you don’t see the Properties window. To view it, select the View menu, and then select Properties Window (or press F4). Look at the Properties window on the bottom right of the IDE, as shown in Figure 4-1.

   

   Figure 4-1 Properties window for MyOwnBrowser application Form control

   We’ll be using most of the properties you see listed here. Right now what is important for you to understand is that most of these properties influence how the control you have selected behaves or what it looks like when you execute your application.

   For all the samples in this book, I suggest you sort the Properties window in ascending alphabetical order; it will be much easier to find properties that I reference in the examples. To sort the properties in ascending alphabetical order, click the Alphabetical button (with the AZ icon) in the Properties window toolbar. The other option is to arrange the controls by category, but this might slow you down as you progress through this book.

   Whenever you select a property, you’ll see a brief description of its usage at the bottom of the Properties window. Refer to Figure 4-1 as an example. In this case, the Text property is selected, and at the bottom of the Properties window, you can see a succinct message describing the function of the Text property.

   As mentioned in Chapter 3, "Creating Your First Applications", my best advice for learning this software is to try, try, and try again. Visual C# 2008 Express Edition comes with a variety of tools and therefore many possibilities. You will learn to use most of these tools by performing the exercises in this book, but it’s impossible to learn all the variations and possibilities if you don’t do some exploring on your own. With that in mind, to understand the effect of changing a particular property, try all the possible values. Each time you modify a property, build and verify the execution. However, don’t make more than one change at a time. If you do, it will be difficult for you to know which one of your changes actually triggered a visual modification. By exploring possibilities one at a time, you’ll be able to see the effect of your changes immediately.

   IMPORTANT

   Some properties have a plus (+) sign beside them, which means they’re tree view properties. Whenever you click the +, you’ll expand this property to display the property’s attributes, which you will then be able to set. Whenever you are asked to enter values for properties that are in a tree view, I will use the notation structure Size:Width, which refers to the Size property and the Width attribute.

4. Make sure you have selected the Form control named Form1 as directed in step 3, and then modify the properties using the values in Table 4-1. The property name to modify is located in the left column, and the value to which to set the property is located in the right column. You may have already completed this step, but to facilitate your data entry, verify that you have sorted the properties in ascending alphabetical order.

   Table 4-1 Form Properties to Change

   Property	Value
   Text	My Own Browser
   Size:Width	640
   Size:Height	480

   You’ll now add three Windows Forms controls to your browser application: a text box control in which to enter the destination URL, a button to navigate to the Web page, and a WebBrowser control in which the Web page content will be displayed.

   TIP

   To add a control to a form, you need to perform a drag-and-drop operation. This means you’ll move your mouse pointer to the Toolbox, drag the desired control to the designer surface, and drop the control onto it.

5. Drag a WebBrowser control to the designer surface. The WebBrowser control is located in the Toolbox on the left side of the IDE; it’s the last control in the Common Controls section. By default, this control will fill the designer surface entirely. Because you don’t want that behavior for this particular application, you’ll click the black triangle shown here, which will produce the content of a Smart Tag.

   

   In this particular example, the Smart Tag helps you undock the control from its parent container (the form). Click the Smart Tag, and select Undock in the Parent Container.

6. Expand the control so that it occupies almost the entire designer space. To do this, click any of the control handles to change its size.

7. Select the WebBrowser control by clicking anywhere on the control. Then go to the Properties window, and modify the values for the properties listed in Table 4-2. Modify the values in the same way you modified the form controls in step 4.

   Table 4-2. WebBrowser Control Properties to Change

   Property	Value
   (Name)	myBrowser
   Size:Width	607
   Size:Height	385
   Location:X	12
   Location:Y	12

8. Drag a text box control and a button control from the Toolbox’s Common Controls section to the form so that it looks like Figure 4-2. Change the properties of the controls as you did with the WebBrowser control in step 7. Select one control at a time, and modify its properties with the data in Table 4-3.

   

   Figure 4-2 MyOwnBrowser application

9. At this point, you have a complete Web browser—congratulations! You can compile and execute your application by pressing F5.

If you followed the previous steps exactly, your application should now be running. Because we didn’t code any functionality, entering a URL and clicking the GO button will not do anything.

Table 4-3. Controls, Properties, and Values

You first have to “wire up” the controls to the functionality that they will perform. I will use an analogy to explain this fundamental concept. A light bulb by itself is not a useful piece of hardware. To obtain light from it, you need to connect two wires carrying electricity. Similar to what an electrician would do to create this electrical circuit, you need to attach, or wire, the control and the action together by writing code to handle the event of clicking the GO button. Keep this analogy in mind when you see references to the term wire or wiring used in this book.

Before we wire up the click action to the button, I’ll explain the line of code you’ll add in the following instructions, and I’ll explain how it relates to the OOP concepts previously introduced in Chapter 1, "Introducing Microsoft Visual C# 2008 Express Edition".

When you dropped the controls onto the designer surface, you created instances of the class represented by those controls. For example, when you dropped the WebBrowser control, you created an instance of the class System.Windows.Forms.WebBrowser that you then named myBrowser. The WebBrowser class has many methods, and the Navigate method is the one you’ll use. As its name implies, this method allows the WebBrowser class to navigate to a URL. The URL is passed as an argument to the Navigate method. An argument, also called a parameter, is used to pass data to a method.

The argument in this case is the text the user will enter in the instance of the System.Windows.Forms.TextBox class that you appropriately named tbURL. To retrieve the content of the text box control named tbURL, you use the Text property of that control. A property enables you to set or retrieve the content of a data member in a class without accessing the data member directly. That way, the provider of the class (for example, Microsoft) can modify the implementation of the Text property without concerning the user with the implementation details. In OOP, this is called encapsulation. You can compare this process to a person driving a car: you don’t need to know how the engine and transmission work to drive the car. Another good example is the Navigate method. You don’t need to know how it’s implemented; you simply want it to do its job. As mentioned earlier, many things are happening when you design a form with Visual Studio. You have seen that you don’t need to create any of the classes or instances representing your controls because Visual Studio is doing all of that for you!

To Wire the Click Action to a Button

1. Close the running application, and return to the IDE. Double-click the button control. You’ll see the code window shown in Figure 4-3.

   

   Figure 4-3 Code window for the btnGo_Click event

   If you terminated the execution of your application properly, you should see the source code window with the btnGo_Click event template. When you double-clicked the button control, you signaled to Visual Studio that you wanted to wire the click action to the button control. Typically, each control can trigger multiple events depending on which behavior you want to intercept with your code. Each control has a default event that becomes available to the programmer for coding by double-clicking the control on the designer surface. In this case, Visual Studio created the Click event template so that you could enter the following code.

   NOTE

   If you try to type some code and it doesn’t work, your application is probably still running. If you don’t close the application and you return to Visual C#, you won’t be able to modify the source code. A good way to verify that you have closed and terminated the application is to look in the Visual C# Express Edition title bar. If you see the name of your application followed by the word (running), this means your application is still active and you won’t be able to add code. If you try to add code, the status bar will report that you are in read-only mode with the following message: “Cannot currently modify this text in the editor. It is in read-only.”

2. Type the following code at the cursor:

   myBrowser.Navigate(tbURL.Text);

   NOTE

   Everything in C# is case-sensitive, so tbURL and tbUrl are two different values.

3. Press F5 to compile and execute the application. If you named your controls correctly in step 8 in the previous exercise and entered the line of code as shown in step 2 of this exercise, you should now have your own Web browser application that takes you to a Web page when you enter a URL. Of course, you won’t have all the bells and whistles of Internet Explorer, but be patient—we’re getting there. Try going to your favorite URLs to see whether your browser is working as expected. For instance, I went to www.microsoft.com, and it worked just fine! You can see the result in Figure 4-4.

   

   Figure 4-4 MyOwnBrowser showing the Microsoft.com Web site