はじめに
Compact Framework 2.0ではWebBrowserコントロールという、Webブラウザの機能をもったコントロールが新たに追加されています。このコントロールを使うと、簡単にWebブラウザを作成することができます。今回はこのWebBrowserコントロールとTabコントロールを使って、タブブラウザを作ってみます。
対象読者
.NET Compact Framework を使ってWindows Mobileアプリケーションの開発をしてみたい初心者の方を対象にしています。
必要な環境
- Visual Studio 2005 Standard以上
- Windows Mobile 5.0 SDK
- Windows Mobile Device Emulator 日本語image
アプリケーションの仕様
基本的にはできる限り通常のWebブラウザに近いイメージですが、最低限以下の機能は実装します。
- URLをテキストボックスに入力してボタンを押すとブラウズ
- タブを追加できる（右ソフトキーメニュー）
- タブを削除できる（右ソフトキーメニュー）
- ページを戻ることができる（左ソフトキーメニュー）
ユーザーインターフェイスの作成
画面上には、URLを入力するtextBoxコントロール、ブラウズを開始するためのButtonコントロール、そしてTabコントロールは画面のBottomにDockさせて、高さをタブの高さぎりぎりにします。さらに左右のソフトキーメニューにメニューを追加します。
ブラウザ管理
今回WebBrowserコントロールをタブに合わせて動的に生成します。生成したWebBrowserコントロールは、Listオブジェクトとしてまとめておきます。特定のWebBrowserコントロールを取得する際には、WebBrowserコントロールリストから探して操作をします。
また、現在表示中のページを保存する変数を一つ用意しておきます。
List<WebBrowser> lstWebBrowser = new List<WebBrowser>(); int currentpage;
タブの追加
タブの追加にはいくつかの処理が含まれます。
- タブページの作成
- タブコントロールへの追加
WebBrowserコントロールの作成（整形）WebBrowserコントロールのリストへの登録- 追加したページへ表示ページを移動
private void CreateTab() { TabPage newpage = new TabPage(); newpage.Text = "..."; tabControl1.TabPages.Add( newpage ); WebBrowser newBrowser = new WebBrowser(); newBrowser.Parent = this; newBrowser.Location = new Point(0, this.txtUrl.Height + 10); newBrowser.Size = new Size(this.Width, this.Height-12 - this.txtUrl.Height - this.tabControl1.Height); newBrowser.Anchor = AnchorStyles.Bottom | AnchorStyles.Top | AnchorStyles.Left|AnchorStyles.Right ; lstWebBrowser.Add(newBrowser); newBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler( newBrowser_DocumentCompleted); newBrowser.Navigated += new WebBrowserNavigatedEventHandler(newBrowser_Navigated); tabControl1.SelectedIndex = tabControl1.TabPages.Count - 1; }
タブの削除
タブの削除の実装はシンプルです。現在表示しているページに対応したWebBrowserコントロールを削除し、併せてタブページの削除を行います。タブページが1ページのみの場合は処理をしません。
一見、さらにページ移動の処理が必要な気がしますが、タブページの削除に伴い、自動的にページが移動されるので、特に処理は不要です。
private void mnuRemovePage_Click(object sender, EventArgs e) { if (tabControl1.TabPages.Count == 1) { return; } else { WebBrowser thispage = lstWebBrowser[currentpage]; thispage.Dispose(); lstWebBrowser.Remove(thispage); tabControl1.TabPages.RemoveAt(currentpage); } }
WebBrowserコントロールのイベント処理
動的に作成したWebBrowserコントロールのイベントを受けられるように処理を追加します。
1つはブラウザがページを読み込み終わったときの処理で、タブに名前を登録する際に利用します。今回はURLのホストアドレスをTabの名前として利用します。
もう1つはWebBrowserが別ページに移動した際の処理で、こちらはURLを入力するテキストボックスのURLを変更するために利用します。URLのセットはテキストボックスに入力した際も利用します。そのため、「http://」を入力しなかった際の保管処理も実装しています。基本的にこちらはURLをフルで使うため、WebBrowserコントロールのURLプロパティをそのまま使います。
private void newBrowser_Navigated( object sender, WebBrowserNavigatedEventArgs e) { setPageUrl(); } private void newBrowser_DocumentCompleted( object sender, WebBrowserDocumentCompletedEventArgs e) { int page = lstWebBrowser.IndexOf((WebBrowser)(sender)); tabControl1.TabPages[page].Text = ((WebBrowser)(sender)).Url.Host.ToString(); } private void setPageUrl() { WebBrowser thispage = lstWebBrowser[currentpage]; if (thispage.Url != null) this.txtUrl.Text = "http://" + thispage.Url.ToString(); else this.txtUrl.Text = ""; }
タブページ移動時の処理
基本的にタブページ移動を行った際には、まず前のページのWebBrowoserコントロールを隠して、次に選択したページに対応するWebBrowserコントロールを表示します。そして、現在ページを更新します。
private void tabControl1_SelectedIndexChanged( object sender, EventArgs e) { if( tabControl1.TabPages.Count -1 >= currentpage ) lstWebBrowser[currentpage].Hide(); currentpage = tabControl1.SelectedIndex; WebBrowser thispage = lstWebBrowser[currentpage]; thispage.Show(); setPageUrl(); }
元のページに戻る処理
ハイパーリンクなどで移動した際には元のページに戻る処理が可能です。このあたりの処理はすべてWebBrowserコントロールに集約されているので、ユーザーは戻るためのメソッドを実行するのみです。また、ページ移動がされていない場合を考慮して、CanGoBackプロパティを使ってページバックが可能かどうかをチェックすることができます。
private void mnuBackPage_Click(object sender, EventArgs e) { WebBrowser thispage = lstWebBrowser[currentpage]; if( thispage.CanGoBack ) thispage.GoBack(); }
まとめ
タブブラウザはページを提供してくれますが、今回はページ移動のためのガイドとして利用しました。基本的にWebBroserコントロールはフォーム上に直接配置して利用するためです。これらの複数のWebBrowserコントロールを操作するために、Listオブジェクトを利用するのは有効な手段です。
まだまだ、Webブラウザとしては機能が足りません。残りの機能は皆さんが実装してみてください。
