Life in code, apps and OS's

How to develop a VB.net 2008 Web browser

Posted on: November 4, 2008

Creating a VB.net web browser is an extremly simple task. So much so that it’s a great way to introduce yourself the the language. We shall be using the full version of Visual Basic .Net 2008, but the express editions will work Perfectly fine. Let’s get started shall we?

First open VB and create a new Windows Forms Application. You should name your application something that is easy to remember so you don’t forgot what the folder is called, in this example I shall name it, creatively, browser.

image

Now you should have a empty .Net window. Here we shall start designing our browser. Using the toolbox on the right (if you can’t see the toolbox you

browserx

can open it with control, alt and x) we want to drag over the ‘Web Browser’ Control, contained in the Common Controls box. By default the Web Browser control will take up the whole application, we want to undock it so click the browser once and find the small arrow on the top right (see image below)

arrow

And then click the ‘Undock in Parent Container’. Now we can grab the edges of the web browser control and change it’s size. Ideally we want something the web browser to leave 60 pixels on the top of the windows application. Think about the browsers you’ve used and leave that amount of space for a toolbar. When you have the size of the browser window you want we need to make it expand when the main window expands. We do this by clicking once again on the browser window, then on the right looking in the properties menu and finding anchor. Here we click the drop down box and select the bottom, left and right and top. This will force the browser to expand to the right, left, bottom and top when the main window expands. Without this the browser would just stay the same size.

anchorx

Now in the space above the browser window we want to drag a Panel. You can catch the panel in the toolbox section, containers. A panel will enable us to collectively manage it’s objects, while also helping in the aspect of design. Resize the panel to hit each of the main windows edges and the very top of the browser element. You can use the arrow keys on the keyboard to align the panel. Once again we want to anchor the panel. This time we want to anchor to the top, right and left. We should now have something very much alike to what’s below

browsera

Now we want users to be able to navigate the browser to certain locations using an address bar. To insert a bar using the toolkit drag a text box into our top container. You can find the text box control in the toolbox, common controls section. We want to move the text box control to the very bottom of our container panel and expand it’s size to around 466 pixels. In the right properties menu we want to rename this text box to navbox.

navbox

Now we need to give the user something to click when he has entered the web URL, so for this we’re going to insert a button. We can once again find the button in the common section of the toolbox. Place this button next to the navigation text box. Rename the button searchbutton, then in the properties menu find the ‘Text’ element and type ‘Go’. For design aspects we will change this buttons flatstyle (once again in the properties menu) to Popup. Now resize the button to be as high as your text box.

Ok I’m sure you want to start coding now so let’s quickly move on to making your collection of form items into a browser! Double click on the Go button you’ve created and we should now be shown the code screen.

VB.net 2008 will automaticlly create some code because you double clicked on the code button, and our cursor should be contained within the Private Sub section of code. Here is where we shall start coding.

WebBrowser1.Navigate(navbox.Text)

Lets explain the above simple but powerful code. We first type WebBrowser1 which is the name of the web browser control we dragged onto the application earlier now we call a properties of the control, in this case we want to navigate the browser window, so, as one would expect we type navigate. Now we use brackets to define the value that we want to send the control. If you wanted to the browser to go to one set location you would use quation marks and then a url, for example

WebBrowser1.Navigate(“http://google.com”)

for example However we want to accept use input from our text box. Because we named this textbox navbox we can call it’s value using navbox.text. This means whatever is in the navbox at the time of the user clicking the button will be used as the value. Because it’s not a text string within the code we do not use the quotation marks.

You can now test your browser to see if you can navigate!

image

If all went well you will be able to navigate to any website. Because it uses the IE control if the user has flash installed the browser will be able to view flash, and do many more things IE can do. Of course our browser is not the most exciting yet is it? Lets add a few more important features for any browser!

First of all lets tackle the all important back button. Without back buttons people will be stuck on certain pages and they would not be able to use the browser effectively at all. For the back button we’re going to add yet another button the the browser, this time above the navigation box. We shall name this button backbutton and have it’s text value as ‘Back’. We shall also add a icon for a better cleaner look. To add a icon we shall click the button once and click the properties window, then find the image option. Click the … next to image which will bring up a window saying select resource and then click the import button and find your back image file. For best results use a 24×24 PNG Transparent button (I use this fantastic one). You now will need to change the TextImageRelation to ImageBeforeText. Now repeat these steps replacing back with forward and TextImageRelation to TextBefore Image.

Let’s get to coding these buttons. Double click the back button to once again return to the code window and type WebBrowser1.GoBack(), do the same for the forward button but replace GoBack with WebBrowser1.GoForward(). That’s all for this sort tutorial, on request I will expand with more features such as a search box, I would love to hear your input!

Click to download the source code!

I would just like to make you aware that the above tutorial is taken from the following URL: http://www.tutorialized.com/view/tutorial/A-VB.net-Web-Browser/38174 I therefore take NO credit for this work, I am only hosting this infomation in the unlikely event that the URL above becomes unavaliable or taken offline.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


  • How To Dyndns Ubuntu | Order Goods: […] DynDNS Client Setup on Ubuntu | Life in code, apps and OS’s – May 18, 2008  · 7 Responses to "DynDNS Client Setu
  • lizrandolph10886: Wonderful article! We are linking to this particularly great post on our website.nKeep up the great writing. Click
  • waseem Ahmad: Dear. i have a separate application server and a separate mysql database server. when i want to access the application server to login from the local
%d bloggers like this: