In this tutorial I would like to show you how to make your very own Favourites Bar for your web browser! This is quite a lengthy tutorial and I only recently perfected my code for this, so all patience is greatly appreciated.
This toolbar is a good idea for anybody who wishes to add extra functionality to a custom web browser. It allows your users to store their top 5 favourites on a toolbar for easy access.
You cannot use this bar as a plugin for an existing browser - it's for custom VB.Net browsers only.
This kind of toolbar is essentially a bunch of buttons with the URL's that you wish to place on them, and when they are clicked the WebBrowser navigates to the URL.
To Begin:
Create A Windows Forms Application, and name it WebBrowserApp or something like that. Then when you are in the designer, add to your form a ToolStrip,
and on there put these items:
Button (text to none) x5, a Separator and another button (text to Customise).
Be sure to make the buttons DisplayMode Text.
Dock the ToolStrip to Top and add a WebBrowser to your form. Dock it to Fill.
I would just like to quickly point out: this app will create 5 files so if you don't like the clutter just move the app and don't delete the files or the program won't work.
Also add another form, for the options.Name it Options. Set it out like this:
It needs 5 textboxes and 5 pictureboxes, positioned side by side.
Here is what it should look like in the designer:
Now we move onto the code. We'll start with the simplest first.
Double-Click the Customise button and type this:
options.showDialog() LoadLinks()
This code is pretty simple to grasp - it shows the options form and calls the subroutine to load the links from the file.
For the _Load event of your Main form, add this:
LoadLinks()
Then, to READ the preferences create a sub in your main form called LoadLinks and add this to it:
Dim bar1 As String
bar1 = IO.File.ReadAllText("bar1.info")
If bar1 = "" Then
ToolStripButton1.Text = "Add"
Else
ToolStripButton1.Text = bar1
End If
Dim bar2 As String
bar2 = IO.File.ReadAllText("bar2.info")
If bar2 = "" Then
ToolStripButton2.Text = "Add"
Else
ToolStripButton2.Text = bar2
End If
Dim bar3 As String
bar3 = IO.File.ReadAllText("bar3.info")
If bar3 = "" Then
ToolStripButton3.Text = "Add"
Else
ToolStripButton3.Text = bar3
End If
Dim bar4 As String
bar4 = IO.File.ReadAllText("bar4.info")
If bar4 = "" Then
ToolStripButton4.Text = "Add"
Else
ToolStripButton4.Text = bar4
End If
Dim bar5 As String
bar5 = IO.File.ReadAllText("bar5.info")
If bar5 = "" Then
ToolStripButton5.Text = "Add"
Else
ToolStripButton5.Text = bar5
End If
This code looks for files named "bar1"-"5" and if they don't exist then IO raises an exception and if the string read is empty it makes the toolstripbutton1-5 text "add".
Create a 'new' constructor in the main form. Inside put the code that checks to see if the five files exist, and if the files do not create them. This makes sure there are always the right files in the folder so the application does not crash when trying to access something that is not there.
Public Sub New()
' This call is required by the designer.
InitializeComponent()
If Not IO.File.Exists("bar1.info") Then IO.File.WriteAllText("bar1.info", "")
If Not IO.File.Exists("bar2.info") Then IO.File.WriteAllText("bar2.info", "")
If Not IO.File.Exists("bar3.info") Then IO.File.WriteAllText("bar3.info", "")
If Not IO.File.Exists("bar4.info") Then IO.File.WriteAllText("bar4.info", "")
If Not IO.File.Exists("bar5.info") Then IO.File.WriteAllText("bar5.info", "")
End Sub
Add this code to your Options Form declarations:
Private _bAdd1 As Boolean = False
Private _bAdd2 As Boolean = False
Private _bAdd3 As Boolean = False
Private _bAdd4 As Boolean = False
Private _bAdd5 As Boolean = False
Repeat the code for the Options Form but alter it ever so slightly:
Dim bar1 As String
bar1 = IO.File.ReadAllText("bar1.info")
If bar1 = "" Then
TextBox1.Text = ""
PictureBox1.BackgroundImage = My.Resources.Button_Add_icon32
_bAdd1=True
Else
TextBox1.Text = bar1
PictureBox1.BackgroundImage = My.Resources.Button_Close_icon32
_bAdd1=False
End If
Dim bar2 As String
bar2 = IO.File.ReadAllText("bar2.info")
If bar2 = "" Then
TextBox2.Text = ""
PictureBox2.BackgroundImage = My.Resources.Button_Add_icon32
_bAdd2=True
Else
TextBox2.Text = bar2
PictureBox2.BackgroundImage = My.Resources.Button_Close_icon32
_bAdd2=False
End If
Dim bar3 As String
bar3 = IO.File.ReadAllText("bar3.info")
If bar3 = "" Then
TextBox3.Text = ""
PictureBox3.BackgroundImage = My.Resources.Button_Add_icon32
_badd3=True
Else
TextBox3.Text = bar3
PictureBox3.BackgroundImage = My.Resources.Button_Close_icon32
_bAdd3=False
End If
Dim bar4 As String
bar4 = IO.File.ReadAllText("bar4.info")
If bar4 = "" Then
TextBox4.Text = ""
PictureBox4.BackgroundImage = My.Resources.Button_Add_icon32
_bAdd4=False
Else
TextBox4.Text = bar4
PictureBox4.BackgroundImage = My.Resources.Button_Close_icon32
_bAdd4=True
End If
Dim bar5 As String
bar5 = IO.File.ReadAllText("bar5.info")
If bar5 = "" Then
TextBox5.Text = ""
PictureBox5.BackgroundImage = My.Resources.Button_Add_icon32
_bAdd5=False
Else
TextBox5.Text = bar5
PictureBox5.BackgroundImage = My.Resources.Button_Close_icon32
_bAdd5=True
End If
It's good to have images - it gives a better indication of the favourites status.
Like in the screen shot I have posted below you'll need two images. (You may have different images.)
The two images - one for adding and close - are added your project through the following steps. Right click on your project -> properties -> resources tab -> add resource button -> add existing button. Or you can make them with the 'new image' button. Make sure the adding one is named "Button_Add_icon32" and the close is named "Button_Close_icon32".
I should probably also mention that you should set the picturebox BackgroundImageLayout to Stretch.
Now for the TextBox_TextChanged subs:
Picturebox1.BackgroundImage =my.resources.Button_Close_icon32
IO.File.WriteAllText("bar1.info", TextBox1.Text)
_bAdd1=False
Just change each picturebox reference to the one immediately to the right of the textbox that you are editing.
When you're done with that we can move onto the logic for the Picturebox. I'm not aiming to do much, just make it detect what image is being displayed and execute code accordingly.
If Not _bAdd1 Then TextBox1.Clear() _bAdd1=True PictureBox1.BackgroundImage = My.Resources.Button_Add_icon32 Else TextBox1.Focus()
Did I mention that that code goes in the PictureBox click events? Just change the code to match the layout so if you click PictureBox3 it MUST affect TextBox3's contents and so on.
Now this is the last bit, making the WebBrowser control respond to a ToolStripButton being clicked.
Return to your Web Browser main form and do this in each of the ToolStripButtons:
webbrowser1.navigate(ToolStripButton1.text)
This was a rather long tutorial, but now you've got yourself a fully functioning favourites bar!
Oh and by the way I decided to include some images of my version of this and here they are:
This one is of the functioning Options Form
And this one is of the ToolStrip reflecting the items in the Options Form
HTH and Happy Coding to you all!
MultiQuote
| 