Page 1 of 1

Extending the WebBrowser 3 Step Tutorial on Extending the WebBrowser Rate Topic: -----

#1 gbertoli3  Icon User is offline

  • DIC at Heart + Code
  • member icon

Reputation: 40
  • View blog
  • Posts: 1,162
  • Joined: 23-June 08

Posted 14 August 2008 - 09:58 PM

This is a three Part tutorial


Part 1

In this tutorial I will show you how to extend your webBrowser. If you have not yet read my original tutorial on Creating a WebBrowser then click here.

Ok now that we have a WebBrowser we will extend it.

First we will need to add a MenuStrip

Make sure that you dock it to the top


Now we will add some items to the MenuStrip. The first Item will be File. After you have created the File menu add 3 menu items. The 3 items are Open, Save, and Exit. Now the second item we will add to the MenuStrip is the View menu. Now add a menu item Source.

Now double click on the open menu item to get to it's Click() event. Now enter this code

'Declare openFileDailog as a new OpenFileDialog
OpenFileDialog openFileDialog = new OpenFileDialog()
'Set the FileName to nothing
openFileDialog.FileName = ""
'Set the Filter
openFileDialog.Filter = "Webpages|*.html|All Files|*.*"
'Set the Title to Open Webpage
openFileDialog.Title = "Open Webpage"
If (openFileDialog.ShowDialog(this) = DialogResult.OK) Then

'Set the DocumentText to the text of file we just opened
webBrowser.DocumentText = System.IO.File.ReadAllText(openFileDialog.FileName)





Now that we have the Open menu item done we can move onto the Save menu item.
Double Click on the Save menu item to get to it's Click() event, and enter this code


'Show the Save Dialog
webBrowser.ShowSaveAsDialog()



Now go to the Close menu item's Click() event and type

'Close the Form
Close()



We are now done with the file menu and moving on to the View menu.

Go to the Source menu item's Click() event and type this code

'Declare sourceForm as a new Form
Form sourceForm = new Form()
'Declare sourceCode as a new TextBox
TextBox sourceCode = new TextBox()
'Fill the TextBox throughout the form
sourceCode.Dock = DockStyle.Fill
'Allow the TextBox to contain more than one line
sourceCode.Multiline = true
'Have both scrollbars appear on the TextBox
sourceCode.ScrollBars = ScrollBars.Both
'Set the width of the form to 450
sourceForm.Width = 450
'Set the height of the form to 350
sourceForm.Height = 350
'Set the start Position
sourceForm.StartPosition = FormStartPosition.CenterParent
'Do not show the Icon
sourceForm.ShowIcon = false
'Show in the Taskbar
sourceForm.ShowInTaskbar = true
'Set the text of the form to Source Code for and the URL
sourceForm.Text = "Source Code for " & webBrowser.Url
'Set the text of sourceCode to the DocumentText of webBrowser
sourceCode.Text = webBrowser.DocumentText
'Add the sourceCode TextBox to the form
sourceForm.Controls.Add(sourceCode)
'Show the sourceForm
sourceForm.Show(this)



Finished!

Now you can run your form and have fun!
Don't forget I will be coming out with more tutorials on Extending Your WebBrowser.


Part 2

In this tutorial I will show you how to extend your WebBrowser even more.

To begin we will add 3 more menu items to our File menu. The items are Print, Print Preview, and Properties
Once you have created the Print, Print Preview, and Properties menu items go to the Print menu item's Click() event and type

webBrowser.ShowPrintDialog()



Next go to the Print Preview menu item's Click() event and type

webBrowser.ShowPrintPreviewDialog()



After that go to the Properties menu item's Click() event and type

webBrowser.ShowPropertiesDialog()



Now we will add 5 more menu items to the View menu. They are [i]Back, Forward, Home, Refresh, and Stop[i].
Go to the Back menu item's Click() event and type webBrowser.GoBack()
Go to the Forward menu item's Click() event and type webBrowser.GoForward()
Go to the Home menu item's Click() event and type webBrowser.GoHome()
Go to the Refresh menu item's Click() event and type webBrowser.Refresh()
Go to the Stop menu item's Click() event and type webBrowser.Stop()

Now we will move on to adding shortcut keys to menu item's.
For the Open menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl&O.
For the Save menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl&S.
For the Print menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl&P.
For the Print Preview menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl&Shift&P.
For the Properties menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt&P.
For the Back menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt&Left.
For the Forward menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt&Right.
For the Home menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt&H.
For the Refresh menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to F5.
For the Stop menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt&S.
For the Source menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl&U.


Now that we have added ShortcutKeys to most of the menu items, we can add some images.

Now Run the Form and Have Fun!


Part 3


In this tutorial I will show you how to Extend your WebBrowser even further then it's current state.

Now we can begin

First drag a StatusStrip onto your form. Then right click on the webBrowser and select Bring to Front.
Now add a statusLabel to the StatusStrip by clicking on the small arrow. When you click on the small arrow you will see a hidden menu pop up. Name the statusLabel status. Change the text of our newly created label to status

Now go to the webBrowser's Navigated() event and type
			status.Text = e.Url.ToString()



Now add a progressBar to the Status strip by clicking the arrow again to show the hidden menu.
Name this progressBar.

Now go to the webBrowser's ProgressChanged() event and type
			progressBar.Value = CInt(e.CurrentProgress)



Now we will add a Title to the Form

Go to the webBrowser's Navigated() event again and type this underneath the previous text we typed in
			Me.Text = webBrowser.DocumentTitle & " - Web Browser"
			progressBar.Visible = false



Finished!

Now run your form and have fun!

Is This A Good Question/Topic? 0
  • +

Replies To: Extending the WebBrowser

#2 rakyomin  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 77
  • Joined: 12-September 08

Posted 28 October 2008 - 07:14 AM

This is a great tutorial.
You can let user add their favourite (bookmark) url.

Go to Project > [Project name] properties > choose Settings

Here you will see a table with columns:
Name: (type in any name you want), for my project I choose FavList
Type: Choose "System.Collections.Specialized.StringCollections"
Scope: choose as USer
Value: You have to add at least one line, if not your program will generate a NullException.

Add a Combo Box, two buttons, one for adding, the other for removing.

ComboBox name as cbxFavourites
Add Button name as btnAdd
Remove Button name as btnRemove

double click on your Add button, and write this code:

My.Settings.FavList.Add(WebBrowser1.Url.ToString)
cbxFavourites.Items.Add(WebBrowser1.Url.ToString)



The first line at the url string into your My.Settings.FavList, which is stored in System.Collections.Specialized.StringCollections
The second line add the url into your combo box.

Now that the url(s) are added, user need to click on combo box and select the selected url to access the bookmarked page.

Go to your cbxFavourites and choose an Event known as SelectedIndexChanged
write this line
WebBrowser1.navigate(cbxFavourites.SelectedItem.ToString)



Not the best way to do a bookmark though but this is done in my project just to add on a little to this great tutorial.
Was This Post Helpful? 0
  • +
  • -

#3 Deathtrh  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 18
  • Joined: 21-December 08

Posted 21 December 2008 - 05:34 PM

:) :) :D Thanks this really help but for some reason the progressbar is not working :(
Was This Post Helpful? 0
  • +
  • -

#4 Deathtrh  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 18
  • Joined: 21-December 08

Posted 21 December 2008 - 07:23 PM

View Postrakyomin, on 28 Oct, 2008 - 06:14 AM, said:

This is a great tutorial.
You can let user add their favourite (bookmark) url.

Go to Project > [Project name] properties > choose Settings

Here you will see a table with columns:
Name: (type in any name you want), for my project I choose FavList
Type: Choose "System.Collections.Specialized.StringCollections"
Scope: choose as USer
Value: You have to add at least one line, if not your program will generate a NullException.

Add a Combo Box, two buttons, one for adding, the other for removing.

ComboBox name as cbxFavourites
Add Button name as btnAdd
Remove Button name as btnRemove

double click on your Add button, and write this code:

My.Settings.FavList.Add(WebBrowser1.Url.ToString)
cbxFavourites.Items.Add(WebBrowser1.Url.ToString)



The first line at the url string into your My.Settings.FavList, which is stored in System.Collections.Specialized.StringCollections
The second line add the url into your combo box.

Now that the url(s) are added, user need to click on combo box and select the selected url to access the bookmarked page.

Go to your cbxFavourites and choose an Event known as SelectedIndexChanged
write this line
WebBrowser1.navigate(cbxFavourites.SelectedItem.ToString)



Not the best way to do a bookmark though but this is done in my project just to add on a little to this great tutorial.




How do you code the btnRemove??? :blink: :blink:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1