Building a Tabbed Pocket PC 2003 Web Browser using C#

• Download PPC Web Browser - 235.0 KB
• Download demo project - 15.2 KB
• Download source - 140.0 KB

Introduction

Recently, I was trying to find a browser on the net for my Imate�Jam Pocket PC that has a tabbed page facility, as in Mozilla Firefox or Internet Explorer 7. I ended up disappointed. I may have been inefficient with my search, but instead of wasting too much time with searching, I decided to build one to meet my needs. I thought sharing it others who may be be suffering like I was would be a good idea and so here it is.

Initial setup

Instead of going directly into the implementation, which of course is very simple, I would like to start from scratch in order to help those first-timers. To begin with, the first thing you need is the VS 2005 IDE. It gives a great set of tools to make the development task very easy. First, select a new project and under the project types, select Visual C# -> Smart Devices and then device application. This should get you to the correct environment to begin with.

Those of you who are building the application for the first time might be surprised to see the forms coming inside of a Pocket PC device. This is where you design your form and, like any other windows application, you can drag items from the tool box to design the form. Keep in mind, though, that you get only a small subset of tools to work with. These are the tools that the device application will support. Another important thing to note is that among the controls that you are supplied with, not all of the control methods and properties are supported. This can generate exceptions if not properly handled.

Using the code

We will be designing the application using a tab control that will help us with the tab's that will be hosting the different pages of our web browser. We add a menu bar for the tasks to be performed. The most important one is the "New Tab" menu, which will create a new tab page and associate it with the tab control.

/// <summary>

/// adds a new tab page dinamically to the tab control.

/// </summary>

private void AddNewTabPage()
{
    TabPage newTab = new TabPage();
    newTab.Text = (this.tbControl.Controls.Count + 1).ToString();
    newTab.Size = new Size(
        this.tbControl.Bounds.Width, this.tbControl.Height);
    newTab.Name = "tab" + (this.tbControl.Controls.Count + 1).ToString();
    WebBrowser w = new WebBrowser();
    w.Name = "tab" + (this.tbControl.Controls.Count).ToString();
    newTab.Controls.Add(w);
    w.Dock = DockStyle.Fill;
    this.tbControl.Controls.Add(newTab);
    this.tbControl.SelectedIndex = this.tbControl.TabPages.Count - 1;
}

You may have noticed in the above code that I am adding a web browser control to the new tab page. This is required because each new tab page should have a separate web page associated with it in order to load individual documents. I have used a combo box control to take the input of the web address. This address, which is in the form of a string, cannot be passed directly to the web browser's navigate method to fetch the content. So, we prepare a URI object that serves the purpose. Note that the address should be passed in the form: http://www.yyy.com to the URIconstructor. We achieve this using the Regex.Replace method.

if (address != null)
address = Regex.Replace(address, "^www", "http://www");
Uri url = new Uri(address);

The work is almost at an end, except for one last thing. Each time the user enters an address in the combo box and opts to navigate, the page has to be displayed in the currently selected tab. If no tab exists, we create a new tab.

if (this.tbControl.Controls.Count == 0)
{ 
    AddNewTabPage(); 
}

int selectedtabIndex = this.tbControl.SelectedIndex; 
 
//navigate to the the address apecified. 

try
{ 
    ((
        WebBrowser)this.tbControl.TabPages[
        selectedtabIndex].Controls[0]).Navigate(url);
} 
catch 
{
    MessageBox.Show("There was some error trying to reach the site");
}

In order to deploy this application in a Pocket PC or PDA, you would require Net CF 2.0 (.NET Compact Framework) installed on the device. In the case that it's not, then connect your device with the PC using Microsoft active sync (version 4.1 or above) and run the application from Visual Studio. It will prompt for the option of whether or not to deploy on the available emulators or the device. Select the device and wait for the deployment to finish. Later, you can just copy the built EXE file to the application and run it.

Points of interest

It may be a very simple application, but when the tabbed browsing experience is needed, it surely does the job. I will be coming back with other more interesting matters on this topic.

History

• 23 May, 2007 -- Original version posted
• 4 June, 2007 -- Article edited and posted to the main CodeProject.com article base