Programming Microsoft Web Forms (Pro Developer)

 

A Tabbed Interface Web Browser

One of the most anticipated new features of Internet Explorer 7 is the new tabbed interface. Rather than opening a new window for each new page that you want to look at, Internet Explorer 7 allows multiple tabbed pages to exist in a single browsing window; switching from page to page is easy, and it's much easier to see which pages are loaded. As I write this, Internet Explorer 7 is in an early beta.

Even though at this time Internet Explorer 7 isn't available, I still like the concept of tabbed pages. Therefore, by using the members of the WebBrowser control, in addition to several other Windows Forms controls, I was able to create a simple form that does exactly what Internet Explorer 7 does. Figure 8-4 shows the form in action, with the Microsoft home page, the Microsoft Learning home page, and the MSN home page loaded on separate tabs.

Figure 8-4: The tabbed Web browser example

Across the top of the form in Figure 8-4, notice the ToolStrip control. The ToolStrip control can contain any number of other controls. I added the following controls to the ToolStrip control:

Just under the ToolStrip control, I dropped a TabControl onto the page. A TabControl creates a tabbed user interface, which is just what we need to simulate Internet Explorer 7. I set the Dock property of the TabControl to Fill, so that the TabControl fills the rest of the form. By default, the TabControl has two tabs when dropped on a form. I deleted one of those tabs, and I changed the Text property of the remaining tab to "Default." With the TabControl selected in Design view, I dropped a WebBrowser control onto the TabControl. This is the initial WebBrowser control used when the page is first loaded.

A reasonable amount of code is required to get this form up and running as described. The code is shown in Listing 8-1.

Listing 8-1: Code Used for the Tabbed Web Browser

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace WindowsWebAccess { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void btnGo_Click(object sender, EventArgs e) { WebBrowser wb = (WebBrowser)this.tabControl1.SelectedTab.Controls[0]; wb.Navigate(this.edAddress.Text); } private void webBrowser1_Navigated(object sender, WebBrowserNavigatedEventArgs e) { this.edAddress.Text = ((WebBrowser)sender).Url.ToString(); this.tabControl1.SelectedTab.Text = this.edAddress.Text; } private void btnGoNewTab_Click(object sender, EventArgs e) { WebBrowser wb = new WebBrowser(); string key = Guid.NewGuid().ToString(); wb.Dock = DockStyle.Fill; wb.Name = key; wb.Navigated += new System.Windows.Forms.WebBrowserNavigatedEventHandler( this.webBrowser1_Navigated); this.tabControl1.TabPages.Add(key, this.edAddress.Text); this.tabControl1.TabPages[key].Controls.Add(wb); ((WebBrowser)this.tabControl1.TabPages[key].Controls[0]) .Navigate(this.edAddress.Text); this.tabControl1.SelectTab(key); } private void btnCloseTab_Click(object sender, EventArgs e) { this.tabControl1.TabPages.Remove(this.tabControl1.SelectedTab); } private void btnBack_Click(object sender, EventArgs e) { WebBrowser wb = this.tabControl1.SelectedTab.Controls[0] as WebBrowser; if (wb != null) { wb.GoBack(); } } private void btnForward_Click(object sender, EventArgs e) { WebBrowser wb = this.tabControl1.SelectedTab.Controls[0] as WebBrowser; if (wb != null) { wb.GoForward(); } } private void btnRefresh_Click(object sender, EventArgs e) { WebBrowser wb = this.tabControl1.SelectedTab.Controls[0] as WebBrowser; if (wb != null) { wb.Refresh(); } } } }

The btnGo_Click event handler has two lines of code that retrieve the correct WebBrowser object, and another that sets the new URL.

WebBrowser wb = (WebBrowser)this.tabControl1.SelectedTab.Controls[0]; wb.Navigate(this.edAddress.Text);

This event handler replaces the current Web page in the currently selected tab with the URL entered in the Address text box. To get the correct WebBrowser control, I examined the Controls collection of the SelectedTab property of the TabControl object, and I selected the first and only element of the Controls collection of that tab. Because the Controls collection is a collection of Control objects, it must be cast to the correct type. After the correct WebBrowser control is found, the Navigate method is called, passing in the string entered in the Address text box.

The btnGoNewTab_Click event is a bit more complex. The code is shown here.

WebBrowser wb = new WebBrowser(); string key = Guid.NewGuid().ToString(); wb.Dock = DockStyle.Fill; wb.Name = key; wb.Navigated += new System.Windows.Forms.WebBrowserNavigatedEventHandler( this.webBrowser1_Navigated); this.tabControl1.TabPages.Add(key, this.edAddress.Text); this.tabControl1.TabPages[key].Controls.Add(wb); ((WebBrowser)this.tabControl1.TabPages[key].Controls[0]) .Navigate(this.edAddress.Text); this.tabControl1.SelectTab(key);

In this code, I created a new WebBrowser object. I also created a new Guid object, using the NewGuid method of the Guid class. A Guid object represents a globally unique identifier (GUID), a 128-bit number generated in a way that ensures that the identifier will be unique. I called the ToString method on the newly created Guid object and set a local variable, key, to the return from ToString. This provides a string that is guaranteed to be unique. I set the Dock property of the new WebBrowser object to DockStyle.Fill. When you drag a WebBrowser control onto a form in Visual Studio, this happens automatically. I added a Navigated event handler to the new WebBrowser control, using the same event handler that I used for the initial WebBrowser control.

Next, I set the Name property of the WebBrowser control to the key variable, the string variable containing the string representation of the new GUID I generated. I then added a new page to the TabPages collection of the TabControl object, giving it a key and the text to be used as the text on the tab. Several overloads of Add allow you to add a tab; I used the one that accepts a key and the text for the tab so that I could identify the tab in the following steps by the tab's key value. The GUID used as the key ensures that I can later access the specific tab, and there is no chance of tabs using the same key.

After adding the tab, I added the WebControl object to the Controls collection of the newly created tab. I navigated to the address specified in the Address text box, and I used the SelectTab method of the TabControl to ensure that the newly created tab was the currently selected tab.

The btnCloseTab_Click event handler has a single line of code.

this.tabControl1.TabPages.Remove(this.tabControl1.SelectedTab);

This line of code removes the currently selected tab, ensuring that your collection of tabs will not just continue growing.

The other event handlers, for the Back, Forward, and Refresh buttons, are self explanatory, calling a single method of the WebControl object after obtaining the correct control from the Controls collection of the currently selected tab of the TabControl.

 
Related

Категории