Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Basic Web Browser in Qt and Windows Phone

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

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

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 8.0, Windows Phone SDK 7.1, Qt SDK v1.2
Devices(s): Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1, Qt 4.7
Windows Phone 8
Windows Phone 7.5
Keywords: WebBrowser, WebView
Created: somnathbanik (25 Oct 2011)
Last edited: hamishwillee (27 Jun 2013)



The code examples in this article create a basic Web browser for both Qt and Windows Phone. 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. Windows Phone allows us to display web content using the WebBrowser control.


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

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: "";

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 Windows Phone 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="" />

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

This page was last modified on 27 June 2013, at 04:54.
106 page views in the last 30 days.