Build your own Browser. It's easy.

Being the wrong side of 40 the brain is regarded as being a little bit slower as it was in my youth and that seems to be a reason for some employers to put you on the scrapheap. I wondered, how easy is it to statr computer programming in your 40's

The software you'll need.

Visual Basic Express edition is FREE. Oh Joy! VB 6 used to cost an arm and a leg, that's why I never tried it before. So nip along to that company erm you know the one that Bill Gates set up Microsoft and download it. I'll give you the link below.

The program is hig and looks complicated and it took me quite a while to download it onto my creaky old 833 pentiunm 3 machine with a dodgy motherboard and questionable ammounts of RAM but once installed it worked a treat.

Remember to register the product. It's free and gets you access to all sorts of support if you're a big time programmer. Most of the stuff went over my head though. Uncle Bill's company doesn't fill your inbox with spam either which is a good thing.

Now you're looking at the homepage of your .net framework. This woks with all the other express languages that Microsoft are giving away. j# C'# C++ and all that. I chose VB because it looked the easiest.

See the new project create link on the left hand side at the bottom?
Click that and a large message box appears with all sorts of options.

The menu bar should read something along the lines of windows application 1. Change its name to my first web browser or whatevwer you want and click OK and you're off and running. Don't touch anything until the thing loads though.

You are faced with a screen showing a blank window with the title Form1. this is the design window for windows. You can create all sorts of wonderful things in this window but for now we're going to create our very own web browser.

Resizing the form. That's making it bigger to you and me.

For the moment we are interested in the side menu's on the left and right. The one on the left marked toolbox and the one on the right marked properties. If you have a look at the properties tab now you will see a list. These are surprisingly enough thje properties of form1. OK scroll down until you get to the size property. This is set by default to 300x300 pixels. A measly size for a web browser. We want it full screen so click on the little box next to size and delete the 300,300 and type in the box 1024,768 that's a comma in the centre not a period.

Move your mouse away and click anywhere outside of the properties tab. As long as you haven't clicked a control then your form 1 window should as if by magic expand to enourmous size so you have to scroll accross and down to see it all.

The properties box has all sorts of wierd and wonderful things that you can play about with like colors and so forth. Feel free to play around but if you don't understand what a tab does I sugest you leave it alone for now.

Well we've got our basic window for our browser, lets do something with it. Lets drag some components on to the form.

The first thing we need to do to get our blank form looking like a web browser is to get somewhere for the browser to live. The plain background of a form simply will not hold a browser window so we need to look down the toolbox list for something to hold it and not surprisingly these compoments are called containers. Scroll down the toolbox list until you find the section marked containers. Just below this, you will see the word panel. Click on this and holding your mouse button down drag the mouse onto anywhere on the form. release the mouse button and you will see a component called panel 1 has been dropped onto the form. Still with me. Great.

Go back to the toolbox window and scroll up until you see the word WebBrowser. Click this and drag it ON TOP OF THE PANEL in form1. Release the mouse button and the panel will turn white. This is your web browser window.

Doesn't look very impressive yet. It's a bit small and I can't resize it. Fear not.

Right click the panel and you will be greeted with a box. Select panel1 is the option you want from this menu. Click it and some lovely squares appear at strategic points around the panel. This enables you to resize the panel and move it around in form 1 so you have complete control. Put your mouse over the right middle square and the cursor should turn to a black double arrow, Left click and drag the mouse to the rigt. The panel expands.

The browser properties are set to fill the pane and so whatever you do with the container the web browser is automaticaly resized to fit. Neat eh?

Drag the panel down by mousing over the bottom center square and dragging downwards. leave some room at the bottom though as we want to add some controls.

Go to the toolbox and select button. It's near the top. drag it onto the form and drop it below the browser window. A button should appear with the little squares (they are called handles) enabling you to move it around and resize it.

Next drag a textbox control onto the form. Stretch this a bit as you will be typing in here later. If its too small you can always make it bigger later. Position the textbox to the right of the button.

Finally, drag a label control onto the form. Pace it to the right of the textbox. If you want exact positioning use your keyboard cursor keys. Notice the alignment lines to help you create a great looking user interface.

So we now have 3 uninspiring controls called button1, textbox1 and label 1. Very exciting. What's next.

Click once on the button to highlight it. The handles will appear. The properties menu on the right hand side automatically changes to button 1 when you select the component on the form.

Scroll down the properties tab until you see the word Text. next to this it will say Button1.

Click in this tab and delete the words Button1. Type in the word Go! Now click anywhere on the form except on a control and you will see button 1 now says Go! It is getting to look good.

That's it for the visual side of things. Next we'll get down to the bit that actually worries most people new to this sort of thing. The programming.

Don't panic it's a lot easier than you think.

Let's see if all this works. See the top menu bar where it says file and all that stuff. Click on Debug and then click on Start debugging. Or simply press the F5 key on your keyboard.

Strange things start to happen. It looks like your computer is heading for the great PC graveyard in the sky. But No! It's just the application you've just built loading in on top of the designer. Phew I thought I'd broken it.

You can click around all you want with your new browser but it can't do anything yet, so when you've done admiring your super white screen on grey background simply terminate the application by clicking the close button in the top right hand corner and you will return to the designer.

You can't work on designer while you have a debugging application running so if you've accidentaly minimised the application and forgotten about it you may be wondering why nothing works.

Right click the tab on the bottom bar and click close.

On to the coding.

Double click button 1 on your form. A new window opens with lodes of code. Most of the work has been done for you. All buttons work the same and the most common thing you do is click them, so where your flashing cursor is now is right in the middle of the bit of code which tells the application what to do if Button1 is clicked.

Super. Before we get down to coding what we want to happen when we click on the Go! button we have to have it clear in our mibds what we want it to do

We want to be able to type a web address into the textbox and have the browser navigate to the address. Simple. It would also be handy if we could remember that address too that is why the label control is there.

So let's get the label to tell us exactly what we type into the text box. Type the following into the code window.

Label1.Text = TextBox1.Text

Make sure you type this exactly as it is case sensitive. As you get to the emd a box will come up as you type. Yet another little thing to make it easier for you. Either click on the suggested word in the box or finish typing the word yourself.

This tells the appliction. Hey! whatever I type in the text box please make the label say the same thing

press F5 to debug and try typing web addresses into the text box. The label says the same.

You can type anything in there and the label will change butt morew on that later. Close the application so that design window comes back up. Double click the button again and the code window returns with the cursor below the bit of code you just wrote. If it doesn't just position the cursor there.

now for the good bit.

Type the bit of code below exactly as it is here or copy and paste it into the application. To paste hold down the ctr button on your keyboard and keeping it pressed down press the letter "v" (not the quotation marks)

WebBrowser1.Navigate(Label1.Text)

This tells the browser to navigate to whatever address is disp[layed in Label1. Neat huh?

press F5 to debug and type into your textbox

www.google.com

Press the go button and your new browser will display google's homepage. It's that easy.

To run as a stand alone application.

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.

As i said before, I'm new to the programming game butr I love to squidoo. I thought I would combine learning to program with squidooing.

The basic idea is that I want a 2 window browser where I can have squidoo open in 1 window so I can update my lenses and another window where I can have Google running to do the research and stuff. Better than openiong and closing IE or AOL if you're on that.

I know that I could make the windows smaller and Firefox has a tag system but I like to see what I'm doing plus if I want to copy and paste over links it's a real bind.

So I thought I'd design a web browser to lead on from this one to improve my VB skills.

It's going to be a real problem to fit it on this lens so rush on over to the link below to check on my progress.