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
|
<?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" />
<!-- webplugin.qdoc -->
<title>Qt 4.8: 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>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="#setting-up-communications">Setting up Communications</a></li>
<li class="level1"><a href="#connecting-components-together">Connecting Components Together</a></li>
<li class="level1"><a href="#linking-things-together">Linking Things Together</a></li>
</ul>
</div>
<h1 class="title">Web Plugin Example</h1>
<span class="subtitle"></span>
<!-- $$$webkit/webplugin-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="webkit-webplugin-csvfactory-cpp.html">webkit/webplugin/csvfactory.cpp</a></li>
<li><a href="webkit-webplugin-csvfactory-h.html">webkit/webplugin/csvfactory.h</a></li>
<li><a href="webkit-webplugin-csvview-cpp.html">webkit/webplugin/csvview.cpp</a></li>
<li><a href="webkit-webplugin-csvview-h.html">webkit/webplugin/csvview.h</a></li>
<li><a href="webkit-webplugin-mainwindow-cpp.html">webkit/webplugin/mainwindow.cpp</a></li>
<li><a href="webkit-webplugin-mainwindow-h.html">webkit/webplugin/mainwindow.h</a></li>
<li><a href="webkit-webplugin-main-cpp.html">webkit/webplugin/main.cpp</a></li>
<li><a href="webkit-webplugin-webplugin-pro.html">webkit/webplugin/webplugin.pro</a></li>
<li><a href="webkit-webplugin-webplugin-qrc.html">webkit/webplugin/webplugin.qrc</a></li>
</ul>
<p>The Web Plugin example shows how to communicate between a Qt widget embedded in a Web page and the page itself.<p class="centerAlign"><img src="images/webkit-webplugin.png" alt="A table widget embedded in a Web page." /></p><p>In this example, we will take the widget described in the <a href="webkit-simplewebplugin.html">Simple Web Plugin Example</a> and show how to set up communications between the widget and the Web environment.</p>
<a name="setting-up-communications"></a>
<h2>Setting up Communications</h2>
<p>There are two ways of interacting with the content in a Web page. The first way involves the use of <a href="qwebelement.html">QWebElement</a> to read and modify the page content and structure; this is useful for certain types of application, as demonstrated by the <a href="webkit-domtraversal.html">DOM Traversal Example</a> and the <a href="webkit-simpleselector.html">Simple Selector Example</a>.</p>
<p>The second way is to add Qt objects to the page, connecting their signals to JavaScript functions, and executing the object's slots directly from JavaScript in the page. We explore this approach in this example.</p>
<p>To perform this communication, we require an updated <tt>CSVView</tt> widget from the <a href="webkit-simplewebplugin.html">Simple Web Plugin Example</a> that can emit a signal whenever a row is selected, a JavaScript function to modify elements on the page, and some glue code to make the connection.</p>
<p>On the page, the plugin is declared like this:</p>
<pre class="cpp"> <object type="text/csv;header=present;charset=utf8"
data="qrc:/data/accounts.csv"
width="100%" height="300">
</object></pre>
<p>As in the previous example, the <tt><object></tt> definition includes information about the data to be displayed, its location, and the dimensions of the plugin in the page.</p>
<p>Later in the document, we include a table that we will update with data from the <tt>CSVView</tt> widget:</p>
<pre class="cpp"> <table>
<tr>
<th>Name:</th>
<td id="customers_name"></td>
</tr><tr>
<th>Address:</th>
<td id="customers_address"></td>
</tr><tr>
<th>Quantity:</th>
<td id="customers_quantity"></td>
</tr>
</table></pre>
<p>The <tt>CSVView</tt> widget is similar to the previous version. However, we wish to obtain and export individual rows of data, so we define the <tt>rowSelected()</tt> signal and <tt>exportRow()</tt> slot to perform this task.</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">signals</span>:
<span class="type">void</span> rowSelected(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>name<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>address<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>quantity);
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> updateModel();
<span class="keyword">private</span> <span class="keyword">slots</span>:
<span class="type">void</span> exportRow(<span class="keyword">const</span> <span class="type"><a href="qmodelindex.html">QModelIndex</a></span> <span class="operator">&</span>current);
<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>Since we wish to obtain one row of data at a time, the constructor includes code to restrict how the user can interact with the view:</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>The <tt>exportRow()</tt> slot provides a convenient mechanism for obtaining and emitting the values found on the current row of the table:</p>
<pre class="cpp"> <span class="type">void</span> CSVView<span class="operator">::</span>exportRow(<span class="keyword">const</span> <span class="type"><a href="qmodelindex.html">QModelIndex</a></span> <span class="operator">&</span>current)
{
<span class="type"><a href="qstring.html">QString</a></span> name <span class="operator">=</span> model()<span class="operator">-</span><span class="operator">></span>index(current<span class="operator">.</span>row()<span class="operator">,</span> <span class="number">0</span>)<span class="operator">.</span>data()<span class="operator">.</span>toString();
<span class="type"><a href="qstring.html">QString</a></span> address <span class="operator">=</span> model()<span class="operator">-</span><span class="operator">></span>index(current<span class="operator">.</span>row()<span class="operator">,</span> <span class="number">1</span>)<span class="operator">.</span>data()<span class="operator">.</span>toString();
<span class="type"><a href="qstring.html">QString</a></span> quantity <span class="operator">=</span> model()<span class="operator">-</span><span class="operator">></span>index(current<span class="operator">.</span>row()<span class="operator">,</span> <span class="number">2</span>)<span class="operator">.</span>data()<span class="operator">.</span>toString();
<span class="keyword">emit</span> rowSelected(name<span class="operator">,</span> address<span class="operator">,</span> quantity);
}</pre>
<p>This slot is connected to a signal belonging to the view's selection model: <a href="qitemselectionmodel.html#currentChanged">currentChanged()</a>. This can be seen by examining the <tt>updateModel()</tt> function in the source code.</p>
<p><tt>exportRow()</tt> emits the <tt>rowSelected()</tt> signal, passing strings containing the name, address and quantity in the current table row. To see how this data is passed to the Web page, we need to look at the <tt>CSVFactory</tt> class.</p>
<a name="connecting-components-together"></a>
<h2>Connecting Components Together</h2>
<p>In the <tt>CSVFactory</tt> class, we reimplement the <a href="qwebpluginfactory.html#create">create()</a> function to create instances of the <tt>CSVView</tt> class, as in the previous example.</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>;
<span class="type"><a href="qhash.html">QHash</a></span><span class="operator"><</span><span class="type"><a href="qstring.html">QString</a></span><span class="operator">,</span> <span class="type"><a href="qstring.html">QString</a></span><span class="operator">></span> arguments;
<span class="keyword">for</span> (<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>; i <span class="operator"><</span> argumentNames<span class="operator">.</span>count(); <span class="operator">+</span><span class="operator">+</span>i)
arguments<span class="operator">[</span>argumentNames<span class="operator">[</span>i<span class="operator">]</span><span class="operator">]</span> <span class="operator">=</span> argumentValues<span class="operator">[</span>i<span class="operator">]</span>;
CSVView <span class="operator">*</span>view <span class="operator">=</span> <span class="keyword">new</span> CSVView(arguments<span class="operator">[</span><span class="string">"type"</span><span class="operator">]</span>);</pre>
<p>We also expose the view widget to the frame in the page that contains the elements, and set up a connection between the view and a JavaScript function defined in the page header:</p>
<pre class="cpp"> <span class="type"><a href="qwebframe.html">QWebFrame</a></span> <span class="operator">*</span>frame <span class="operator">=</span> webView<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>mainFrame();
frame<span class="operator">-</span><span class="operator">></span>addToJavaScriptWindowObject(<span class="string">"view"</span><span class="operator">,</span> view);
frame<span class="operator">-</span><span class="operator">></span>evaluateJavaScript(<span class="string">"view.rowSelected.connect(fillInTable);\n"</span>);</pre>
<p>The view is added to the Web page as <tt>view</tt>, and the connection code we evaluate performs a signal-slot connection from the view's <tt>rowSelected()</tt> signal to a pure JavaScript function:</p>
<pre class="js"> <span class="name">view</span>.<span class="name">rowSelected</span>.<span class="name">connect</span>(<span class="name">fillInTable</span>);</pre>
<p><tt>fillInTable</tt> is the name of the JavaScript function to modify the form's input elements. This function expects three arguments: the name, address and quantity values for a row of data.</p>
<p>Whenever the current row changes in the <tt>view</tt> object, the <tt>exportRow()</tt> slot is called, the data found in the selected row is extracted from the model and emitted in the <tt>rowSelected()</tt> signal as three strings, and the above connection ensures that <tt>fillInTable()</tt> will be called with the current items of data. The appropriate type conversions occur behind the scenes to ensure that each <a href="qstring.html">QString</a> is converted to a JavaScript string object.</p>
<p>The rest of the function is the same as in the previous example:</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>We now give the JavaScript <tt>fillInForm()</tt> function to show what it does with the strings it is given. The function itself is defined in the HTML page header:</p>
<pre class="cpp"> <script type="text/javascript">
function fillInTable(name, address, quantity)
{
var nameElement = document.getElementById("customers_name");
var addressElement = document.getElementById("customers_address");
var quantityElement = document.getElementById("customers_quantity");
nameElement.innerHTML = name;
addressElement.innerHTML = address;
quantityElement.innerHTML = quantity;
}
</script></pre>
<p>We obtain the elements in the page that we wish to update by using the HTML Document Object Model (DOM) API. The values of these elements are updated with the <tt>name</tt>, <tt>address</tt> and <tt>quantity</tt> strings supplied.</p>
<a name="linking-things-together"></a>
<h2>Linking Things Together</h2>
<p>Although we have used the widgets to demonstrate the use of signals and slots for communication between Qt components and JavaScript in the browser, we do not need to embed widgets in Web pages to be able to do this. By inserting objects into pages and evaluating JavaScript, Qt applications can be made to examine and process information found online.</p>
<p>One additional improvement that can be made to this example is to create a relation between the embedded widget and the table to be updated. We could do this by including <tt><param></tt> elements within the <tt><object></tt> element that refers to the table cells by their <tt>id</tt> attributes. This would help us to avoid hard-coding the <tt>customers_name</tt>, <tt>customers_address</tt> and <tt>customers_quantity</tt> identifiers in the script.</p>
</div>
<!-- @@@webkit/webplugin -->
<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>
|
