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.
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:
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:
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:
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!