Page 1 of 1

Web Browser Favourites Bar! Rate Topic: -----

#1 DimitriV  Icon User is offline

  • >not activating your almonds
  • member icon

Reputation: 556
  • View blog
  • Posts: 2,660
  • Joined: 24-July 11

Posted 26 September 2011 - 11:17 PM

Hi People!
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:
Attached Image

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
Attached Image
And this one is of the ToolStrip reflecting the items in the Options Form
Attached Image
HTH and Happy Coding to you all!

Is This A Good Question/Topic? 4
  • +

Replies To: Web Browser Favourites Bar!

#2 TigreBlanc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 17-October 12

Posted 17 October 2012 - 08:42 PM

very helpful,thank u for sharing my friend
Continue ur great work,my respect to u.

Was This Post Helpful? 0
  • +
  • -

#3 TechKid  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 82
  • Joined: 04-September 10

Posted 25 November 2012 - 09:28 AM

Great stuff right here., nice job! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1