<?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/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<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 class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></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>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
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>
Qt and respective logos are trademarks of The Qt Company Ltd
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>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
