×
Namespaces

Variants
Actions
Revision as of 10:35, 5 July 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Display local web page with Qt WebKit

From Nokia Developer Wiki
Jump to: navigation, search
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: hamishwillee (05 Jul 2012)

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 5 July 2012, at 10:35.
178 page views in the last 30 days.