Build a Squidoo Browser

The objectives I set myself were very simple. A 2 browser window that I can use to get research information from websites to help me build quality lenses.

If you've checked out the other lens in this series then you should have Visual Studio Express edition downloaded onto your machine and should be familiar with drag and drop and the properties and toolbox tabs.

You should also know how to debug using F5 and how to access the code window by double clicking on a component that you have dragged onto your form..

If you aren't sure about any of this stuff then have a go at creating the simple web browser described on my earlier lens.

Still with me? Great! Let's get on with it.

THE FORM

For easier reading. Actions you need to take are in Bold. Or just print the page if you don't want to keep flicking windows.

After you've created your new project Save All on the file menu . Call it Squidoo Browser if prompted.

You will be faced with the standard form1 window in design view. Go to the properties tab and type in the project name "Squidoo Browser in the properties tab text window

Then change the size property so it reads 1024,768 instead of the 300,300 set by default.

You can mess about with the colors now too if you wish.

We are now ready to drag and drop onto the form.

You need 2 of everything that we used for the simple web browser in my earlier lens. If you've made the earlier browser you could use it as the basis for this one but I'll explain it as if we are creating a new one.

OK.

Drag 2 panels onto your form from the containers section of your toolbox. Put them fairly far apart on your form but keep them so you can see them without scrolling down or accross at the moment. These panels are named (surprise surprise) Panel1 and Panel2.

Drag a WebBrowser from the toolbox and place it on top of Panel1.

This is WebBrowser1.

Drag a second WebBrowser and drop it on top of Panel2.

This is WebBrowser2.

Boh panels should go white.

Drag a button onto the form and place it in the top left corner of your form. Alter it's text property so it says "Go!!" (Ignore the quotes")

Drag a TextBox onto the form and place it directly to the right side of the button. In the text property of TextBox1 clear the word TextBox1 so that the Text Box appears blank. (Read this again slowly if you're not sure.)

Now drag a label control and place it a little to the right of the Text Box Clear the text property so you are left with a blank field on the form.The label will disappear at this point from the form. Don't panic it is still there.

That's about it for browser 1. All that remains is to right click on Panel1 and select it (The menu says "select Panel1") from the drop down menu and then move it into position below the button.

Expand the panel so that it fills abou half the width of the screen and then expand it downwards almost to the bottom of the form. The reason for this is that as we are not dealing with full size windows, the status bar at the bottom of the screen will hide the scroll bars if we take the panel right to the bottom.

Move the text box so that its right hand side lines up with the right edge of the browser window by clicking on the control and using your right arrow key to move while not altering its vertical position.

Now stretch the textbox so you have room to write a short web address in the window.

Press F5 to debug and have a look at the result.

If you are happy with the way it's looking then close the application window and move on.

Drag and drop a button, label and textbox as before. Clear the text properties of the label and textbox after you've positioned them level with Browser 1's controls at the top of the form.

Drag Panel2 to its position and pull it down and to the right until it fills up the rest of the screen. You should now have two windows which take up approximately half the screen each with their respctive controls above.

Onto the coding.

Very simple.

Double click button 1 on your form and the code window will open. Your cursor should be under the line saying button1 click.

Type in or copy and paste the following.

Label1.Text = TextBox1.Text

WebBrowser1.Navigate(Label1.Text)

Close the code window.

Double click on button 2 and type or copy and paste the following.

Label2.Text = TextBox2.Text

WebBrowser2.Navigate(Label2.Text)

Now how do you put a back button on this thing?

Keep reading abd you'll find out.

Drag a button to the top of the form from Toolbox.

Alter its text property so it reads "Back" (ignore the quotes)

Double click the button and you will get the code window.

Type or copy and paste in the fol;lowing code.

WebBrowser1.GoBack()

Close the code window and drag another button onto the form. Change its text property to "Forward" (Once again ignore the quotes)

Double click the button and type in the following.

WebBrowser1.GoForward()

Debug using F5

Repeat for WebBrowser2

Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Label1.Text = TextBox1.Text

WebBrowser1.Navigate(Label1.Text)

End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
Label4.Text = TextBox2.Text
WebBrowser2.Navigate(Label4.Text)

End Sub

Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
WebBrowser1.GoBack()
End Sub

Private Sub Button4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click
WebBrowser1.GoForward()
End Sub

Private Sub Button5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button5.Click
WebBrowser2.GoBack()
End Sub

Private Sub Button6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button6.Click
WebBrowser2.GoForward()
End Sub
End Class

Your label numbers may be different than minw as I have been tedting various designs and may not have deleted some so the numbers may be different but you can always alter the name properties of any component to something more meaningful

Close the code window then click on the button marked build.

Select CD Rom from the options and browse to a place where you want to save the program. I put it in my Doccuments.

Open "My Computer" from your computer's start menu, navigate to the place you saved the application and click on install.

You now have a simple squidoo web browser to speed up your lens creation.

That's all there is to it. True it throws Javascript errors up now and again but as I say I am still just learning.

Happy programming

John