Before this tutorial, you should have:
-Some knowledge of the webbrowser control.
-Some knowledge of how HTML elements are made.
-Knowledge of how to use the code designer in VB2008
In this tutorial I will show you:
-How to get various properties of HtmlElements based on the position of the mouse
-How to change various properties of HtmlElements
For the purposes of this tutorial, we are only going to use a normal webbrowser control, although I am aware that some people will have a class for the webbrowser control and a class for the form, and then a tabcontrol, so that a tabbed webbrowser can be created rather than just adding a webbrowser to the form. It shouldn't be difficult to change the code in this tutorial to the code you will need to use for a tabbed webbrowser.
So, firstly, we need to add a few controls to our form:
Controls to add:
-Webbrowser, name "wbMain"
-ContextMenuStrip, name "CMenuMain"
-Textbox, name "txtURL"
-Button, name "btnGo"
Items to add to your context menu (CMenuMain):
"Link"
"Image"
"Remove this object"
Items to add to the "Link" menu:
"Open Link"
"Copy Link Location"
Items to add to the "Image" menu:
"Save Image"
"Copy Image Location"
"View Image"
Your context menus should now look like this:
Now, because we want to have our own context menu on the webbrowser, we need to change some of its properties. So go to the properties of the webbrowser control, and change the "IsWebbrowserContextMenuEnabled" property to "False".
Next we need to set the webbrowser's context menu to our own custom one, "CMenuMain". To do this, change the "ContextMenuStrip" property of the browser to "CMenuMain".
Now to add some basic navigation functionallity, double click btnGo, and add this code to the Button.Click event:
wbMain.Navigate(txtURL.Text)
This code will tell the webbrowser to navigate to whatever text is in the URL textbox whenever the button is clicked.
Now press F5 to debug your project, and navigate to "http://www.google.com". You can right click now, and your custom context menu should show, but there will be no function of the context menu buttons. Now it's time to add that functionallity, so stop debugging, and return to the designer.
As the WebBrowser control does not support events such as MouseMove or MouseDown, we need to declare our own Htmldocument. Switch to the Code View, and outside of any Subs, but inside the class for your form, add this code:
Private WithEvents CurrentDocument As HtmlDocument Dim MousePoint Point Dim Ele as HtmlElement
This code will add some extra events to our form which will ultimately let us control the webbrowser document.
We will use the MousePoint later.
We will use the Ele later.
Now double click your webbrowser, and go to the Navigated event of the webbrowser. Add this code:
CurrentDocument = wbMain.Document
This code tells the CurrentDocument HtmlDocument which we just declared to always be the same as the Webbrowser document.
Next go to the Currentdocument.MouseMove event. Add this code:
MousePoint = New Point(e.MousePosition.X, e.MousePosition.Y)
This tells the program to change the record where the mouse is on the document (so it knows where to get the element that the contextmenu has been shown over).
Now, go to the CMenuMain.Opening event, and add this code:
ele = Currentdocument.GetElementFromPoint(MousePoint)
If ele.TagName = "A" Then
LinkToolStripMenuItem.Visible = True
Else
LinkToolStripMenuItem.Visible = False
End If
If ele.TagName = "IMG" Then
ImageToolStripMenuItem.Visible = True
Else
ImageToolStripMenuItem.Visible = False
End If
This is where ele and MousePoint come into action. This code makes ele (the HtmlElement, say an image, a link or a button) whatever HtmlElement the mouse is over on the webbrowser, because we made MousePoint wherever the mouse was on the document when it moved.
In HTML, Links are declared like this:
<a href="http://www.dreamincode.net">DreamInCode!</a>
And Images are declared like this:
<img src="http://www.dreamincode.net/favicon.ico">
So the next part of the code checks the tagname of ele (the HtmlElement the contextMenu has been opened over), and sees whether it is a link or an image, or if it is neither. If it is an image or a link, it will show the respective items on the context menu.
Press F5 to debug, and have a right click on links and images. You'll notice that there is a different item for links and for images on the context menu, but there is no function for any of the items, so stop debugging, and carry on with the tutorial
.From here forward, if I refer to 'The Image', or 'The Link', just assume that I mean the link or image which the context menu has opened over.
So now we need to add functions to the buttons on the context menus:
Now go to the OpenLinkToolStripMenuItem.Click event, and add this code:
wbMain.Navigate(ele.GetAttribute("href"))
This code tells the webbrowser to navigate to whatever the href (link target) attribute of the link.
Now go to the CopyLinkLocationToolStripMenuItem.Click event, and add this code:
Clipboard.SetText(ele.GetAttribute("href"))
This code sets the clipboard text to whatever the target of the link is.
Next go to the SaveImageToolStripMenuItem.Click event and add this code:
Dim ImageSource as String = ele.GetAttribute("src")
Dim SavePath as String = InputBox("Please enter where you want to save this image, including the file name and extension")
My.Computer.Network.DownladFile(ImageSource, SavePath)
First, this code tells the program to get the "src" attribute of the image, and declares it as a string.
Next it shows an inputbox asking the user where he/she wants to save the image.
Then it downlaods the image to the computer using the user-defined options.
After all that's done, we're nearly finished. Go to the CopyImageLocationToolStripMenuItem.Click event, and add this code:
Clipboard.SetText(ele.GetAttribute("src"))
This code sets the text on the clipboard to the source of the image.
Now it's the last piece of code! Go to the ViewImageToolStripMenuItem.Click event, and add this code:
wbMain.Navigate(ele.GetAttribute("src"))
This code tells the webbrowser to navigate to the source of the image.
So now we're finished! I hope you enjoyed my tutorial. There's lots more on webbrowsers coming soon.
This post has been edited by Jack Eagles1: 26 April 2010 - 08:16 AM
MultiQuote
| 