Display local web page with Qt WebKit
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:
(no comments yet)