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.

Display local web page with Qt WebKit

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

The article is believed to be still valid for the original topic scope.


Article Metadata
Tested with
SDK: Qt "Tower" pre-release
Devices(s): Nokia N97, Nokia N900
Compatibility
Platform(s): Qt
Article
Keywords: Qt WebKit, HTML, QWebView
Created: taaidant (17 Sep 2009)
Last edited: lpvalente (18 May 2014)

Contents

Overview

This snippet demonstrates how to display a local web page with the Qt WebKit.

Preconditions

None

Code

First we'll create a simple XHTML web page and add a style sheet to it and then we'll display it.

html/view.html

Here's the source of a very simple XHTML web page.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!-- You reference the resources with qrc:// -->
<!-- Stylesheet reference -->
<link rel="stylesheet" href="qrc:///css/view.css" />
 
<title>WebKit example</title>
</head>
<body>
<!-- Header -->
<h1 id="header">Welcome</h1>
<!-- Paragraph -->
<p id="paragraph">Hello World!</p>
<!-- Form -->
<form id="form" action="#">
<fieldset>
<label for="text">Text</label>
<!-- Text input -->
<input id="text" type="text" />
<!-- Submit button -->
<input id="button" type="button" value="Submit!"/>
</fieldset>
</form>
</body>
</html>

css/view.css

A simple cascading style sheet which we use to modify the style of the web page:

@CHARSET "UTF-8";
 
html {
background-color: lightgray;
margin: 1em 0 0 1em;
padding: 0;
}
 
body {
margin: 0;
padding: 0;
}
 
h1#header {
color: black;
margin: 0;
padding: 0;
}
 
p {
color: black;
margin: 0 0 0 5pt;
padding: 0;
}
 
form#form {
color: black;
margin: 0 0 0 5pt;
padding: 0;
}
 
fieldset {
border: 0;
}

Add these files to the resources file and include the resource file in your project file as explained in Using resources in Qt.

The Qt code to display the web page with QWebview:

src/qwet.h

#ifndef QWET_H
#define QWET_H
 
#include <QtCore/QPointer>
 
#include <QtWebKit/QWebView>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebFrame>
 
#include <QtGui/QWidget>
#include <QtGui/QApplication>
#include <QtGui/QMainWindow>
#include <QtGui/QFrame>
#include <QtGui/QVBoxLayout>
 
class QWET : public QMainWindow
{
Q_OBJECT
 
public:
QWET(QWidget *parent = 0);
~QWET();
 
private:
QPointer<QWebView> _webView;
QPointer<QVBoxLayout> _layout;
 
void setupUI();
};
 
#endif // QWET_H

src/qwet.cpp

#include "qwet.h"
 
QWET::QWET(QWidget *parent) : QMainWindow(parent)
{
setupUI();
}
 
QWET::~QWET()
{
}
 
void QWET::setupUI()
{
/**
* Create the central widget
* and set it.
*/

QFrame* cW = new QFrame(this);
setCentralWidget(cW);
 
/**
* Set the layout to central widget.
*/

_layout = new QVBoxLayout(this);
cW->setLayout(_layout);
_layout->setMargin(0);
_layout->setSpacing(0);
 
/**
* Let's create the web view which
* will be used to display our page.
*/

_webView = new QWebView(this);
_webView->load(QUrl("qrc:///html/view.html"));
_webView->show();
 
/** Add it to layout */
_layout->addWidget(_webView);
}

Postconditions

You've now created this:

QWETJWV N900.pngQWETJWV N97.png

See also

This page was last modified on 18 May 2014, at 19:10.
192 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.

×