Namespaces

Variants
Actions

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 over the next few weeks. 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
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 04:54.
298 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.

×