×
Namespaces

Variants
Actions

Basic Web Browser in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
{{{width}}}
13 Nov
2011

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
Compatibility
Platform(s): Windows Phone 8.0/ 7.1, Qt 4.7
Windows Phone 8
Windows Phone 7.5
Symbian
Article
Keywords: WebBrowser, WebView
Created: somnathbanik (25 Oct 2011)
Last edited: hamishwillee (27 Jun 2013)

Contents

Introduction

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.

Implementation

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 {
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 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="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

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