Basic Web Browser in Qt and WP7

13 Nov
2011

This article demonstrates how to create a basic web browser in Qt and WP7.

Article Metadata

---

Code Example

Source file: Media:WebBrowserWP7.zip Media:WebBrowserQt.zip

---

Tested with

SDK: Windows Phone SDK 7.1, Qt SDK v1.2

Devices(s): WP7 Emulator

---

Compatibility

Platform(s): WP7.1, Qt 4.7

---

Article

Keywords: WebBrowser, WebView

Created: somnathbanik (25 Oct 2011)

Last edited: hamishwillee (30 Nov 2012)

Introduction

The code examples in this article create a basic Web browser for both Qt and WP7. The browser consists of a "Web Viewer", a text box to type the url, and a button to start loading the specified URL.

The "Web Viewer" in the Qt example is provided by the WebView QML element. WP7 allows us to display web content using the WebBrowser control.

• 

  Web Browser in Qt

• 

  Web Browser in WP7

Implementation

The following examples start from an empty project for both Qt and WP7.

Qt Project (main.qml)

We create a Flickable WebView with a static URL.

Flickable {
  id:webViewFlickr
  anchors.fill: parent
  width: parent.width
  height: parent.height
  contentWidth: Math.max(parent.width,1000)
  contentHeight: Math.max(parent.height,800)
  pressDelay: 200
  WebView {
  id: webView
  anchors.fill: parent
 
  preferredHeight: height
  preferredWidth: Math.max(parent.width,1000)
  url: "http://www.google.com/";
  }
}

We add a Button and TextField to enter the URL.

TextField {
  id: myTextField;
  width: parent.width -70
  text: "Enter your url here"
  errorHighlight: true
  anchors.left: parent.left
  }
  Button {
  id: button
 
  anchors.right: parent.right
  text: "Go"
  onClicked: {
  webViewRect.reset(myTextField.text);
  }
}

When user enters the url in the TextField and clicks on the Button , it calls the javascript function reset() to load a new url.

function reset(aUrl) {
  webView.url =aUrl;
}

Note also that the project must import the QtWebKit module and have the NetworkServices capability.

WP7 Project (MainPage.xaml)

In WP7 we have WebBrowser control to host web page. We add the control with a static URL.

<phone:WebBrowser HorizontalAlignment="Left" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Top" Height="523" Width="450" Source="http://www.google.com" />

Similar to Qt, we also add the TextBox and the Button to get user input and process the url

<TextBox Height="72" HorizontalAlignment="Left" Margin="9,6,0,0" Name="textBox1" Text="Enter your url here" VerticalAlignment="Top" Width="334" />
  <Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="349,6,0,0" Name="button1" VerticalAlignment="Top" Width="91" Click="button1_Click" />

After user enters the url in the TextBox and clicks on the Button, it loads a new url

private void button1_Click(object sender, RoutedEventArgs e)
  {
  string uri = textBox1.Text;
  webBrowser1.Source = new Uri(uri, UriKind.Absolute);
  }

Source Code

• The full source code of Qt example is available here: File:WebBrowserQt.zip
• The full source code of WP7 example is available here: File:WebBrowserWP7.zip