1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
<?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_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- simplewebplugin.qdoc -->
<title>Qt 4.8: Simple Web Plugin Example</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Simple Web Plugin Example</li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#qtwebkit-basics">QtWebKit Basics</a></li>
<li class="level1"><a href="#adding-a-widget-to-a-page">Adding a Widget to a Page</a></li>
<li class="level1"><a href="#creating-a-widget-to-embed">Creating a Widget to Embed</a></li>
<li class="level1"><a href="#further-reading">Further Reading</a></li>
</ul>
</div>
<h1 class="title">Simple Web Plugin Example</h1>
<span class="subtitle"></span>
<!-- $$$webkit/simplewebplugin-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="webkit-simplewebplugin-csvfactory-cpp.html">webkit/simplewebplugin/csvfactory.cpp</a></li>
<li><a href="webkit-simplewebplugin-csvfactory-h.html">webkit/simplewebplugin/csvfactory.h</a></li>
<li><a href="webkit-simplewebplugin-csvview-cpp.html">webkit/simplewebplugin/csvview.cpp</a></li>
<li><a href="webkit-simplewebplugin-csvview-h.html">webkit/simplewebplugin/csvview.h</a></li>
<li><a href="webkit-simplewebplugin-mainwindow-cpp.html">webkit/simplewebplugin/mainwindow.cpp</a></li>
<li><a href="webkit-simplewebplugin-mainwindow-h.html">webkit/simplewebplugin/mainwindow.h</a></li>
<li><a href="webkit-simplewebplugin-main-cpp.html">webkit/simplewebplugin/main.cpp</a></li>
<li><a href="webkit-simplewebplugin-simplewebplugin-pro.html">webkit/simplewebplugin/simplewebplugin.pro</a></li>
<li><a href="webkit-simplewebplugin-simplewebplugin-qrc.html">webkit/simplewebplugin/simplewebplugin.qrc</a></li>
</ul>
<p>The Simple Web Plugin example shows how to embed a regular Qt widget into a Web page displayed using <a href="qwebview.html">QWebView</a>.<p class="centerAlign"><font color="red">[Missing image webkit-simplewebplugin.png]</font></p><p>In this example, we will show how to include Qt widgets in Web-centric user interfaces.</p>
<a name="qtwebkit-basics"></a>
<h2>QtWebKit Basics</h2>
<p><a href="qtwebkit.html">QtWebKit</a> provides integration between Qt and WebKit on two different levels. On a low level, Qt provides widgets for Web pages to be rendered onto; on a high level, a set of classes are provided that represent all the key components of a Web browser.</p>
<p><a href="qwebview.html">QWebView</a> is a widget that is used to display Web pages, <a href="qwebpage.html">QWebPage</a> represents the content in a page, and <a href="qwebframe.html">QWebFrame</a> represents an individual frame in a Web page. The code to display a Web page is very simple:</p>
<pre class="cpp"> <span class="type"><a href="qwebview.html">QWebView</a></span> <span class="operator">*</span>view <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qwebview.html">QWebView</a></span>(parent);
view<span class="operator">-</span><span class="operator">></span>load(<span class="type"><a href="qurl.html">QUrl</a></span>(<span class="string">"http://qt.nokia.com/"</span>));
view<span class="operator">-</span><span class="operator">></span>show();</pre>
<p>The widget provides fundamental Web browsing features, such as Cascading Style Sheet and JavaScript support. Other technologies can be added to provide a more comprehensive experience.</p>
<a name="adding-a-widget-to-a-page"></a>
<h2>Adding a Widget to a Page</h2>
<p>Since Qt is used to render pages, it is easy to add both standard and custom widgets to pages. All we need is some markup to indicate where a widget is expected in a page and a mechanism that lets us know when it needs to be created.</p>
<p>The markup used involves the <tt><object></tt> element, described in the HTML 4 specification, which is used to include generic objects in Web pages. When describing an object to represent a widget, there are typically three attributes this element can have: a <tt>data</tt> attribute that indicates where any relevant data can be obtained; <tt>width</tt> and <tt>height</tt> attributes can be used to set the size of the widget on the page.</p>
<p>Here's how we might describe such an object:</p>
<pre class="cpp"> <object type="text/csv;header=present;charset=utf8"
data="qrc:/data/accounts.csv"
width="100%" height="300"></object></pre>
<p>The mechanism used by <a href="qtwebkit.html">QtWebKit</a> to insert widgets into pages is a plugin factory that is registered with a given WebPage instance. Factories are subclasses of <a href="qwebpluginfactory.html">QWebPluginFactory</a> and can be equipped to supply more than one type of widget.</p>
<a name="creating-a-widget-to-embed"></a>
<h2>Creating a Widget to Embed</h2>
<p>To demonstrate how the factory is used, we create a simple widget that can be used to display Comma-Separated Values (CSV) files. The widget class, <tt>CSVView</tt>, is just a subclass of <a href="qtableview.html">QTableView</a> with extra functions to set up an internal data model. Instances of the factory class, <tt>CSVFactory</tt>, are responsible for creating <tt>CSVView</tt> widgets and requesting data on their behalf.</p>
<p>The <tt>CSVFactory</tt> class is defined in the following way:</p>
<pre class="cpp"> <span class="keyword">class</span> CSVFactory : <span class="keyword">public</span> <span class="type"><a href="qwebpluginfactory.html">QWebPluginFactory</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
CSVFactory(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>create(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>mimeType<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qurl.html">QUrl</a></span> <span class="operator">&</span>url<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qstringlist.html">QStringList</a></span> <span class="operator">&</span>argumentNames<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qstringlist.html">QStringList</a></span> <span class="operator">&</span>argumentValues) <span class="keyword">const</span>;
<span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qwebpluginfactory.html">QWebPluginFactory</a></span><span class="operator">::</span>Plugin<span class="operator">></span> plugins() <span class="keyword">const</span>;
<span class="keyword">private</span>:
<span class="type"><a href="qnetworkaccessmanager.html">QNetworkAccessManager</a></span> <span class="operator">*</span>manager;
};</pre>
<p>The public functions give a good overview of how <a href="qtwebkit.html">QtWebKit</a> will use the factory to create widgets. We begin by looking at the factory's constructor:</p>
<pre class="cpp"> CSVFactory<span class="operator">::</span>CSVFactory(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwebpluginfactory.html">QWebPluginFactory</a></span>(parent)
{
manager <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qnetworkaccessmanager.html">QNetworkAccessManager</a></span>(<span class="keyword">this</span>);
};</pre>
<p>The factory contains a network access manager which we will use to obtain data for each of the plugin widgets created.</p>
<p>The <tt>plugins()</tt> function is used to report information about the kinds of widget plugins it can create; our implementation reports the MIME type it expects and provides a description of the plugin:</p>
<pre class="cpp"> <span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qwebpluginfactory.html">QWebPluginFactory</a></span><span class="operator">::</span>Plugin<span class="operator">></span> CSVFactory<span class="operator">::</span>plugins() <span class="keyword">const</span>
{
<span class="type"><a href="qwebpluginfactory.html">QWebPluginFactory</a></span><span class="operator">::</span>MimeType mimeType;
mimeType<span class="operator">.</span>name <span class="operator">=</span> <span class="string">"text/csv"</span>;
mimeType<span class="operator">.</span>description <span class="operator">=</span> <span class="string">"Comma-separated values"</span>;
mimeType<span class="operator">.</span>fileExtensions <span class="operator">=</span> <span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"csv"</span>;
<span class="type"><a href="qwebpluginfactory.html">QWebPluginFactory</a></span><span class="operator">::</span>Plugin plugin;
plugin<span class="operator">.</span>name <span class="operator">=</span> <span class="string">"CSV file viewer"</span>;
plugin<span class="operator">.</span>description <span class="operator">=</span> <span class="string">"A CSV file Web plugin."</span>;
plugin<span class="operator">.</span>mimeTypes <span class="operator">=</span> <span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span>MimeType<span class="operator">></span>() <span class="operator"><</span><span class="operator"><</span> mimeType;
<span class="keyword">return</span> <span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qwebpluginfactory.html">QWebPluginFactory</a></span><span class="operator">::</span>Plugin<span class="operator">></span>() <span class="operator"><</span><span class="operator"><</span> plugin;
}</pre>
<p>The <tt>create()</tt> function is where most of the action happens. It is called with a MIME type that describes the kind of data to be displayed, a URL that refers to the data, and information about any additional arguments that were specified in the Web page. We begin by checking the basic MIME type information passed in the <tt>mimeType</tt> parameter, and only continue if we recognize it.</p>
<pre class="cpp"> <span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>CSVFactory<span class="operator">::</span>create(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>mimeType<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qurl.html">QUrl</a></span> <span class="operator">&</span>url<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qstringlist.html">QStringList</a></span> <span class="operator">&</span>argumentNames<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qstringlist.html">QStringList</a></span> <span class="operator">&</span>argumentValues) <span class="keyword">const</span>
{
<span class="keyword">if</span> (mimeType <span class="operator">!</span><span class="operator">=</span> <span class="string">"text/csv"</span>)
<span class="keyword">return</span> <span class="number">0</span>;
CSVView <span class="operator">*</span>view <span class="operator">=</span> <span class="keyword">new</span> CSVView(argumentValues<span class="operator">[</span>argumentNames<span class="operator">.</span>indexOf(<span class="string">"type"</span>)<span class="operator">]</span>);</pre>
<p>We construct a view widget using the fully-specified MIME type, which is guaranteed to be in the list of arguments if a MIME type has been supplied.</p>
<pre class="cpp"> <span class="type"><a href="qnetworkrequest.html">QNetworkRequest</a></span> request(url);
<span class="type"><a href="qnetworkreply.html">QNetworkReply</a></span> <span class="operator">*</span>reply <span class="operator">=</span> manager<span class="operator">-</span><span class="operator">></span>get(request);
connect(reply<span class="operator">,</span> SIGNAL(finished())<span class="operator">,</span> view<span class="operator">,</span> SLOT(updateModel()));
connect(reply<span class="operator">,</span> SIGNAL(finished())<span class="operator">,</span> reply<span class="operator">,</span> SLOT(deleteLater()));
<span class="keyword">return</span> view;
}</pre>
<p>Lastly, we use the network access manager to request the data specified by the <tt>url</tt> parameter, connecting its <tt>finished()</tt> signal to the view's <tt>updateModel()</tt> slot so that it can collect the data. The reply object is intentionally created on the heap; the <tt>finished()</tt> signal is connected to its <tt>deleteLater()</tt> slot, ensuring that Qt will dispose of it when it is no longer needed.</p>
<p>The <tt>CSVView</tt> class provides only minor extensions to the functionality of <a href="qtableview.html">QTableView</a>, with a public slot to handle incoming data and a private variable to record exact MIME type information:</p>
<pre class="cpp"> <span class="keyword">class</span> CSVView : <span class="keyword">public</span> <span class="type"><a href="qtableview.html">QTableView</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
CSVView(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>mimeType<span class="operator">,</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> updateModel();
<span class="keyword">private</span>:
<span class="type">void</span> addRow(<span class="type">bool</span> firstLine<span class="operator">,</span> <span class="type"><a href="qstandarditemmodel.html">QStandardItemModel</a></span> <span class="operator">*</span>model<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qstandarditem.html">QStandardItem</a></span> <span class="operator">*</span><span class="operator">></span> <span class="operator">&</span>items);
<span class="type"><a href="qstring.html">QString</a></span> mimeType;
};</pre>
<p>The constructor is simply used to record the MIME type of the data:</p>
<pre class="cpp"> CSVView<span class="operator">::</span>CSVView(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>mimeType<span class="operator">,</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qtableview.html">QTableView</a></span>(parent)
{
<span class="keyword">this</span><span class="operator">-</span><span class="operator">></span>mimeType <span class="operator">=</span> mimeType;
}</pre>
<p>To save space, we will only look at parts of the <tt>updateModel()</tt> function, which begins by obtaining the <a href="qnetworkreply.html">QNetworkReply</a> object that caused the slot to be invoked before checking for errors:</p>
<pre class="cpp"> <span class="type">void</span> CSVView<span class="operator">::</span>updateModel()
{
<span class="type"><a href="qnetworkreply.html">QNetworkReply</a></span> <span class="operator">*</span>reply <span class="operator">=</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qnetworkreply.html">QNetworkReply</a></span> <span class="operator">*</span><span class="operator">></span>(sender());
<span class="keyword">if</span> (reply<span class="operator">-</span><span class="operator">></span>error() <span class="operator">!</span><span class="operator">=</span> <span class="type"><a href="qnetworkreply.html">QNetworkReply</a></span><span class="operator">::</span>NoError)
<span class="keyword">return</span>;
<span class="type">bool</span> hasHeader <span class="operator">=</span> <span class="keyword">false</span>;
<span class="type"><a href="qstring.html">QString</a></span> charset <span class="operator">=</span> <span class="string">"latin1"</span>;</pre>
<p>Assuming that the data is correct, we need to determine whether the CSV file includes a table header, and to find out which character encoding was used to store the data. Both these pieces of information may be included in the complete MIME type information, so we parse this before continuing---this is shown in the online example code.</p>
<pre class="cpp"> <span class="type"><a href="qtextstream.html">QTextStream</a></span> stream(reply);
stream<span class="operator">.</span>setCodec(<span class="type"><a href="qtextcodec.html">QTextCodec</a></span><span class="operator">::</span>codecForName(charset<span class="operator">.</span>toLatin1()));
<span class="type"><a href="qstandarditemmodel.html">QStandardItemModel</a></span> <span class="operator">*</span>model <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qstandarditemmodel.html">QStandardItemModel</a></span>(<span class="keyword">this</span>);</pre>
<p>Since <a href="qnetworkreply.html">QNetworkReply</a> is a <a href="qiodevice.html">QIODevice</a> subclass, the reply can be read using a suitably configured text stream, and the data fed into a standard model. The mechanics of this can be found in the <a href="webkit-simplewebplugin-csvview-cpp.html">code listing</a>. Here, we skip to the end of the function where we close the reply object and set the model on the view:</p>
<pre class="cpp"> reply<span class="operator">-</span><span class="operator">></span>close();
setModel(model);
resizeColumnsToContents();
horizontalHeader()<span class="operator">-</span><span class="operator">></span>setStretchLastSection(<span class="keyword">true</span>);
}</pre>
<p>Once the reply has been read, and the model populated with data, very little needs to be done by the plugin. Ownership of the view widget is handled elsewhere, and we have ensured that the model will be destroyed when it is no longer needed by making it a child object of the view.</p>
<p>Let's look quickly at the <tt>MainWindow</tt> implementation:</p>
<pre class="cpp"> MainWindow<span class="operator">::</span>MainWindow(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qmainwindow.html">QMainWindow</a></span>(parent)
{
<span class="type"><a href="qwebsettings.html">QWebSettings</a></span><span class="operator">::</span>globalSettings()<span class="operator">-</span><span class="operator">></span>setAttribute(
<span class="type"><a href="qwebsettings.html">QWebSettings</a></span><span class="operator">::</span>PluginsEnabled<span class="operator">,</span> <span class="keyword">true</span>);
<span class="type"><a href="qwebview.html">QWebView</a></span> <span class="operator">*</span>webView <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qwebview.html">QWebView</a></span>;
CSVFactory <span class="operator">*</span>factory <span class="operator">=</span> <span class="keyword">new</span> CSVFactory(<span class="keyword">this</span>);
webView<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>setPluginFactory(factory);
<span class="type"><a href="qfile.html">QFile</a></span> file(<span class="string">":/pages/index.html"</span>);
file<span class="operator">.</span>open(<span class="type"><a href="qfile.html">QFile</a></span><span class="operator">::</span>ReadOnly);
webView<span class="operator">-</span><span class="operator">></span>setHtml(file<span class="operator">.</span>readAll());
setCentralWidget(webView);
setWindowTitle(tr(<span class="string">"Simple Web Plugin Example"</span>));
}</pre>
<p>Apart from creating and setting a factory on the <a href="qwebpage.html">QWebPage</a> object, the most important task is to enable Web plugins. If this global setting is not enabled, plugins will not be used and our <tt><object></tt> elements will simply be ignored.</p>
<a name="further-reading"></a>
<h2>Further Reading</h2>
<p>The <a href="webkit-webplugin.html">Web Plugin Example</a> extends this example by adding a signal-slot connection between the embedded widget and a JavaScript function in the page.</p>
</div>
<!-- @@@webkit/simplewebplugin -->
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
