Revision as of 08:18, 30 November 2012 by hamishwillee (Talk | contribs)

Basic Web Browser in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
Featured Article
13 Nov

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

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 7.1, Qt SDK v1.2
Devices(s): WP7 Emulator
Platform(s): WP7.1, Qt 4.7
Windows Phone 8
Windows Phone 7.5
Keywords: WebBrowser, WebView
Created: somnathbanik (25 Oct 2011)
Last edited: hamishwillee (30 Nov 2012)



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.


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 {
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: {

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

233 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.