Tabbed WebBrowser - a work in progress

Lots of people have asked lots of questions relating to building a tabbed Web browser. I've seen the same questions asked again and again so, rather than answering them again and again, I'm going to build a tabbed Web browser, piece by piece, and post the result here.

The first stage is the WebBrowser controls on the TabPages. It's usually beginners but I've answered the question of how to put multiple WebBrowser controls on multiple TabPages too many times already. One of the basic ideas of OOP is encapsulation. Another is inheritance. Let's put those together to inherit the TabPage control to encapsulate a WebBrowser control.

VB.NET Code:

Public Class WebBrowserTabPage
    Inherits System.Windows.Forms.TabPage
 
    Private _browser As New WebBrowser
 
    Public ReadOnly Property Browser() As WebBrowser
        Get
            Return Me._browser
        End Get
    End Property
 
    Public Sub New()
        Me._browser.Dock = DockStyle.Fill
        Me.Controls.Add(Me._browser)
    End Sub
 
End Class

Now, instead of adding regular TabPages to your TabControl you create WebBrowserTabPage objects and add them. Each one IS a TabPage so it can be added to a TabControl, and each one creates and displays it's own WebBrowser control.

I've added a ReadOnly property via which you can access the WebBrowser control from the TabPage. This allows you to access properties, methods and events of the WebBrowser from outside the TabPage. If you wanted to be "more correct" you could keep the WebBrowser private and declare pass-through members in the WebBrowserTabPage class, e.g.

VB.NET Code:

Public Sub Navigate(ByVal urlString As String)
    Me._browser.Navigate(urlString)
End Sub

That would be considerably more work though, as the WebBrowser class has quite a few members.

Stay tuned for additions and improvements but, for now, it's a start. :)

Here's the first update. It's a couple of improvements to the WebBrowserTabPage class.

vb.net Code:

Public Class WebBrowserTabPage
    Inherits System.Windows.Forms.TabPage
 
    Private WithEvents _browser As WebBrowser
 
    Public ReadOnly Property Browser() As WebBrowser
        Get
            Return Me._browser
        End Get
    End Property
 
    Public Sub New()
        Me.New(New WebBrowser)
    End Sub
 
    Public Sub New(ByVal browser As WebBrowser)
        browser.Dock = DockStyle.Fill
        Me.Controls.Add(browser)
        Me._browser = browser
 
        If browser.DocumentTitle = String.Empty Then
            Me.Text = "(Empty)"
        Else
            Me.Text = browser.DocumentTitle
        End If
    End Sub
 
    Private Sub _browser_DocumentTitleChanged(ByVal sender As Object, _
                                              ByVal e As EventArgs) Handles _browser.DocumentTitleChanged
        Me.Text = Me.Browser.DocumentTitle
    End Sub
 
End Class

Firstly the _browser variable has been declared WithEvents. I've then handled its DocumentTitleChanged event so the the page title is displayed automatically on the tab.

I've also changed the constructor a bit and added another. This allows you to create a page with an existing WebBrowser control. The reason for this will become clear at a later stage.

Thanks for this, it is very helpful!

The next instalment is here. It's nothing too exciting. I've added some pass-through members to the WebBrowserTabPage class for what I consider to be the most important members of the WebBrowser class. By "pass-through members" I mean public members whose only purpose is to provide access to the corresponding member of the internal WebBrowser control. For instance, the WebBrowserTabPage.IsBusy property simply returns the value of the WebBrowser.IsBusy property. This just makes things a bit cleaner because we can access members of the tab page instead of having to access a member of its Browser property. The Browser property is still there in case we need to access other members though.

This is pretty much it for the WebBrowserTabPage. The next step will be to customise the TabControl a little to get easier access to WebBrowserTabpage objects, rather than casting TabPage references all the time. After that it will be time to create a UserControl that incorporates the customised TabControl but also lets us hide the tabs when there is only one page open, which many browsers do. Beyond that it will be time to put that control on a form and start implementing some real Web browser functionality.

Back again with another addition. As I said it would be, this is not especially exciting but it is useful. It's a customised TabControl will return the SelectedTab or any tab page by index as a WebBrwoserTabPage reference. That saves you having to cast from type TabPage to type WebBrowserTabPage yourself every time you want to reference a page.

Note that this control will be beefed up later on, with the addition of things like context menus on each tab and a close button on each tab too. That's advanced functionality though, so let's get the basics in place first.

The next installment will be the promised UserControl, which will be a bit more interesting. After that there will be a form involved, so we will start to see some of this functionality in action. Initially the form will have an address bar, a Go button and Back and Forward buttons.

Could i get a full project of this?

Quote:

---

Originally Posted by gameguru345

Could i get a full project of this?

---

I will be attaching the project to each post as I go as soon as there's a project worth posting. That will be when there's more than just my own code involved. That will be as soon as I create a user control or a form. That will be the next stage.

thank you, but please hurry, i have limited time to get the tabs. (homework project)

Quote:

---

Originally Posted by gameguru345

thank you, but please hurry, i have limited time to get the tabs. (homework project)

---

Yes, let me hurry to do this on my own time so you don't have to do your own homework.

soz, cant you just send a full project of your last one. it would make things easier

and no your not doing it for me its a feature i want to have in my own project.

I have a small problem when i add the first tab it works great when i add others all the web browser controls disapear am i doing some thing wrong

Quote:

---

Originally Posted by dead-man

I have a small problem when i add the first tab it works great when i add others all the web browser controls disapear am i doing some thing wrong

---

Yes you are.

To those who were following this thread, I apologise for letting it go stale. I have been looking for a job and a place to live in recent weeks. I've been spending most of my free time improving my ASP.NET skills. I start a new job in a week and once I'm settled in I'll get back to this project.

Quote:

---

Originally Posted by jmcilhinney

To those who were following this thread, I apologise for letting it go stale. I have been looking for a job and a place to live in recent weeks. I've been spending most of my free time improving my ASP.NET skills. I start a new job in a week and once I'm settled in I'll get back to this project.

---

You going to be alright? At least where you live the economy's not f**ked (unlike where I live - Michigan, USA)

Hey! I'm finally back to this project. I have attached the most recent version of the project to the first post in this thread. I'll do the same each time I make changes.

Note that the code is well commented so make sure you read it carefully before posting any questions.

At the moment you can add and close tabs and the application will react appropriately to changes in the selected tab. This means that the window title, the address and the status text and progress will update for the currently selected tab.

The Back, Forward, Refresh, Stop and Open commands don't work at the moment. Working versions of these will be the next addition to the project. After that I'll look at adding functionality like favourites and history, as well as addressing issues like what happens when a new window wants to open.

Questions and suggestions are welcome but I make no guarantees about if or when I'll be able to address them.

Great news :) Looking forward for uptades

I've added another update to the project. The Back and Forward buttons and menu items now work. I've also added a Home button and menu item and an Options dialogue where you can set the home page. There are a few other little superficial changes that I won't go into. The new version has replaced the old version attached to the first post.

Note that the home page feature demonstrates the use of My.Settings for those who aren't familiar with it. I chose not to bind the controls in the Options dialogue to the settings to allow the user to make changes and then cancel without saving.

It might be superfluous but you could make the default page for each new tab "about:Tabs". Then it shows the "new tab opened" page from Internet Explorer.

Otherwise, a brilliant little application! You could always try and write your own web browser too if you had the patience!

if you do incorporate anything, make the home page configurable. That annoying home page is one of the reasons i quit using IE. Besides which, even that page itself has a setting to stop you ever seeing it again. then it automatically opens about:blank.

jmc, excellent work on this project.

Please can you show me how to capture the url of the currently selected tab within tabbedwebbrowser ?

Quote:

---

Originally Posted by Xancholy

jmc, excellent work on this project.

Please can you show me how to capture the url of the currently selected tab within tabbedwebbrowser ?

---

The current project already does that, when a page loads or when you switch tabs.

Thanks. I see what you mean. Selected tab's url is displayed in addressbar.

Quote:

---

Originally Posted by Xancholy

Thanks. I see what you mean. Selected tab's url is displayed in addressbar.

---

Uhuh. Look first, ask questions later.

When user selects any tab, how can I find the tab name and refer to that tab in code ? Thank you

Quote:

---

Originally Posted by Referee2424

When user selects any tab, how can I find the tab name and refer to that tab in code ? Thank you

---

did you happen to read his other posts? Read #5 again.

Quote:

---

Originally Posted by jmcilhinney

It's a customised TabControl will return the SelectedTab or any tab page by index as a WebBrwoserTabPage reference.

---

Thanks> I'm sorry I'm just learning. Please can you show me how to refer to selectedtab by code ?

Quote:

---

Originally Posted by Referee2424

Thanks> I'm sorry I'm just learning. Please can you show me how to refer to selectedtab by code ?

---

No. Download the project. Open it. Read the code.

No ? I had downloaded it, opened it and read the code. OK, then, people seem to be rude on these forums.

Code:

---

Warning        1        XML comment has a tag with a 'cref' attribute 'OptionsDialogue' that could not be resolved. XML comment will be ignored.        TabbedWeBrowserOptionsDialogue.vb        18        39        Tabbed Web Browser

---

Anyone else getting this error ? Also main form line 22/39 same xml 'cref' error.

Code compiles and builds fine though... Just thought I'd check.

Quote:

---

Originally Posted by Referee2424

No ? I had downloaded it, opened it and read the code. OK, then, people seem to be rude on these forums.

---

Maybe people think that when they spend hours creating a sample program for the benefit of others that those others shouldn't really need to ask a questions that are clearly answered in that sample program. Have you searched that code for SelectedTab to see how I've used it? If you have a separate question that doesn't relate to my code specifically then this thread is not the place to post it.

Quote:

---

Originally Posted by Xancholy

Code:

---

Warning        1        XML comment has a tag with a 'cref' attribute 'OptionsDialogue' that could not be resolved. XML comment will be ignored.        TabbedWeBrowserOptionsDialogue.vb        18        39        Tabbed Web Browser

---

Anyone else getting this error ? Also main form line 22/39 same xml 'cref' error.

Code compiles and builds fine though... Just thought I'd check.

---

That's a warning, not an error, and it doesn't exist in my code. You have presumably changed the name of the OptionsDialogue class to TabbedWeBrowserOptionsDialogue and failed to change the reference to the original class name in the XML documentation comments. Just double-click the warning message in the Error List window and it will take you to the offending line, which you can then edit. You might also like to consider spelling the name of your class correctly. It should be "TabbedWebBrowserOptionsDialogue".

That said, how many Options dialogues are you going to have in the Tabbed Web Browser project that you need to change the name like that anyway? Isn't it fairly obvious that an OptionsDialogue class in a Tabbed Web Browser project is a dialogue for the options for the app without changing the name? What's the point of really long names if they don't actually add any clarity?

Nice job jmc on the tabbed browser.

What other plans do you have for this?
What's next?

:)

Quote:

---

Originally Posted by epixelman

Nice job jmc on the tabbed browser.

What other plans do you have for this?
What's next?

:)

---

Bookmarks, history and then some tab-specific features like a right-click menu.

Jmc, if it's possible, how can I add your WebBrowserTabControl component to my toolbox? I already added files to my project, but WebBrowserTabControl component is still missing...

Edit: Nevermind, I found a video tutorial on youtube:D

yay for youtube :P

Anyway, on topic reply: Great job here ;), I would ask for permission to use this project as a basis for a big thing I'm doing, but, I'll use it as a reference, cause it is well commented as he has said.

Props to you my friend :D

Quote:

---

Originally Posted by formlesstree4

yay for youtube :P

Anyway, on topic reply: Great job here ;), I would ask for permission to use this project as a basis for a big thing I'm doing, but, I'll use it as a reference, cause it is well commented as he has said.

Props to you my friend :D

---

Anything I post on this forum is intended to be free to access and use under any conditions by anyone, unless otherwise stated. I do appreciate your asking though.

Oh ok then, well, I'll still be sure to give you credits in the about page :D

I have removed some posts from this thread. If you have any comments concerning other members then you are welcome to state them directly in a private message and not in the public forums. Please keep this this thread to comments and discussion concerning this codebank submisssion ONLY.

No this doesn't help to download files from FTP server

Hey JMC, how's this project coming along? You haven't been asked since 25-Aug-08...thought it'd be time to annoy you again! ;-)

hey JMC Just wanted to say nice work I learned alot about vb.net looking through this project...
So I just wanted to say thanks...

I just noticed your comment on my custom TabControl Codebank submission. Thanks for that! I would be pleased to see "my" context-menu TabPages in this project!

Still, I'm not sure if my project is of much help for this. My aim was to be able to specify a different ContextMenu of your own choice to every TabPage, so you would not be limited to having the same ContextMenu on each TabPage. However, I can't see much use for different ContextMenu's in a webbrowser, they would probably be the same everywhere, in which case it would be much easier to handle the ContextMenu displaying differently (for one, you would not need to create a Designer class...).

My Tabbed MDI Editor codebank submission uses a much easier way to display a ContextMenu (one ContextMenu per TabControl, not separate per TabPage) by simply setting the TabControl's ContextMenu property, and checking for the SelectedTab in the ContextMenu_Opening event.

i am interested in the owner-drawn close buttons promised. I've managed to get something like this to work in a project i am working on, but i am unsure of the best way to go about it. I would like the "hot" effect when it's moused over (a giant close button for a media center program) but i have been unable to actually find anything besides the standard button in the owner-draw.

I've been concentrating on C# code examples for a while but I will get back to this.

um... where do I put the code?

I am new 2 VB.... just started 2day :)

Quote:

---

Originally Posted by austinjf785

um... where do I put the code?

I am new 2 VB.... just started 2day :)

---

k, I think I know where to put it... but....

Nothing is happening.

Quote:

---

Originally Posted by austinjf785

k, I think I know where to put it... but....

Nothing is happening.

---

You don't put the code anywhere, it is a complete project you can open and run. If you want to incorporate it into your own project, I think the meaning of this example is that you read it, try to understand what it does, and then recreate it in your own project. Once you understand how the code works you will have little trouble recreating it (especially if you keep a second instance of Visual Studio running alongside so you can peek sometimes, that's what I do!).

Also, "nothing is happening" means nothing, you need to be more specific. I also don't think this thread is supposed to be for basic questions on this example.

Quote:

---

Originally Posted by NickThissen

You don't put the code anywhere, it is a complete project you can open and run. If you want to incorporate it into your own project, I think the meaning of this example is that you read it, try to understand what it does, and then recreate it in your own project. Once you understand how the code works you will have little trouble recreating it (especially if you keep a second instance of Visual Studio running alongside so you can peek sometimes, that's what I do!).

Also, "nothing is happening" means nothing, you need to be more specific. I also don't think this thread is supposed to be for basic questions on this example.

---

Oh, okay

NO COMMENT on the rest of it

it is acceptable to ask question about the project in the thread, but if you stray too far off topic you are risking sanctions from the moderators and a deletion of your posts. See page 1.

i want to know how to make the tabs document change to the url which the combobox navigates too and how to change the tabs respond commands like ie8 as in if i click a tab it selects it how to add a close button to the tab like ie8 and how to make add events for url to display in the bottom left hand corner like IE8 look at the pic below i want to embed this into my Web Browser please any1 Help Me
http://www.vbforums.com/images/ieimages/2009/07/1.jpg

How can I add those components to my project's toolbox? :confused:

Quote:

---

Originally Posted by Miha2c30

How can I add those components to my project's toolbox? :confused:

---

This doesn't really have anything to do with the topic of this thread specifically. Adding items to the Toolbox is the same no matter what they are.

When you declare components in a solution they will automatically become available in the Toolbox within that solution after you build. If you want to add a component to the Toolbox permanently then you need to declare in a project that compiles to a DLL, i.e. a Class Library or Windows Control Library project. You can then add the component(s) in that DLL to the Toolbox the same way as any other DLL: by right-clicking the Toolbox or from the main menu.

Is this suppose to be able to work in Visual Basic Express 2008? I imported it but got errors, I have access to the code etc but when I debug it gives errors. Anyway I probably shouldn't need to run just find the code I am looking for, I have had a look through and have not been able to see how you handle popups/new windows being launched from a hyperlink. That is why I wanted to run the program so I could see if new windows opened up in new a tab, if so then I could look through the code to find out where you handle it. So as I can't run it, I will assume that a new window will open in a new tab and if this is the case, where should I be looking in the code for this. I can't seem to find newwindow anywhere. Could someone please point me in the right direction?

Quote:

---

Originally Posted by nzwogboy

Is this suppose to be able to work in Visual Basic Express 2008? I imported it but got errors, I have access to the code etc but when I debug it gives errors. Anyway I probably shouldn't need to run just find the code I am looking for, I have had a look through and have not been able to see how you handle popups/new windows being launched from a hyperlink. That is why I wanted to run the program so I could see if new windows opened up in new a tab, if so then I could look through the code to find out where you handle it. So as I can't run it, I will assume that a new window will open in a new tab and if this is the case, where should I be looking in the code for this. I can't seem to find newwindow anywhere. Could someone please point me in the right direction?

---

Several people have said that they get errors but noone yet has told me what the errors are so I simply can't help. I've downloaded my own attachment and successfully opened it in VS 2005 and VS 2008. I haven't tried VB Express as I no longer have it installed.

I haven't got as far as handling popups yet so I'm afraid I can't help you there, although there have definitely been posts on the topic in the VB.NET forum.

Thanks anyway. The error I get is the

Code:

---

Me.tabs.AddTab()

---

it says "NullReference Exception was unhandled" "Object reference not set to an instance of an object."

Im getting the same error as nzwogboy.

It throws an exception at runtime

TabControl.TabPages.Add(X)

my example is add tabcontrol name it tabcontrol in properties in design name and called tabpage1 as tabpage in design name on properties

Quote:

---

Originally Posted by pillhead2007

TabControl.TabPages.Add(X)

my example is add tabcontrol name it tabcontrol in properties in design name and called tabpage1 as tabpage in design name on properties

---

I dont really know what you just said. :[

basically create new form add tabcontrol from toolbox then set its properties (design Name)should be default called tabcontrol1 call it TabControl .... then click the white window underneath go to its properties and should be called by default TabPage1 call it Tabpage ...... then go to toolbox add web browser and go to its properties should be called by default WebBrowser1 call it WebBrowser Then Add A Button double Click that Button And Add this code to that button code

On Error Resume Next
Dim X As New TabPage
X.Text = Me.ActiveBrowser.DocumentTitle
TabControl.TabPages.Add(X)
Dim Y As New WebBrowser
Y.Dock = DockStyle.Fill
X.Controls.Add(Y)

ignoring errors?