<?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" />
<!-- simpleselector.qdoc -->
<title>Qt 4.8: Simple Selector 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>Simple Selector 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="#window-class-definition">Window Class Definition</a></li>
<li class="level1"><a href="#window-class-implementation">Window Class Implementation</a></li>
<li class="level1"><a href="#starting-the-example">Starting the Example</a></li>
<li class="level1"><a href="#further-reading">Further Reading</a></li>
</ul>
</div>
<h1 class="title">Simple Selector Example</h1>
<span class="subtitle"></span>
<!-- $$$webkit/simpleselector-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="webkit-simpleselector-window-cpp.html">webkit/simpleselector/window.cpp</a></li>
<li><a href="webkit-simpleselector-window-h.html">webkit/simpleselector/window.h</a></li>
<li><a href="webkit-simpleselector-window-ui.html">webkit/simpleselector/window.ui</a></li>
<li><a href="webkit-simpleselector-main-cpp.html">webkit/simpleselector/main.cpp</a></li>
<li><a href="webkit-simpleselector-simpleselector-pro.html">webkit/simpleselector/simpleselector.pro</a></li>
</ul>
<p>The Simple Selector example shows how to use <a href="qwebelement.html">QWebElement</a> to access the Document Object Model (DOM) in a Web page.<p class="centerAlign"><img src="images/webkit-simpleselector.png" alt="" /></p><p>The <a href="qwebelement.html">QWebElement</a> class enables access to the document structure and content in a Web page, as represented by a <a href="qwebframe.html">QWebFrame</a> instance. It can be used for basic traversal of the document structure (see the <a href="webkit-domtraversal.html">DOM Traversal Example</a>), to search for particular elements, and to modify any elements found.</p>
<p>This example uses a <a href="qwebview.html">QWebView</a> widget to display a Web page. A <a href="qlineedit.html">QLineEdit</a> widget and <a href="qpushbutton.html">QPushButton</a> allow the user to enter a query and highlight the results in the page. These widgets are contained in an instance of the <tt>Window</tt> class, which we described below.</p>
<a name="window-class-definition"></a>
<h2>Window Class Definition</h2>
<p>The <tt>Window</tt> class describes the example's user interface and this is partially described by the <tt>window.ui</tt> file, created using <a href="designer-manual.html#qt-designer">Qt Designer</a>:</p>
<pre class="cpp"> <span class="preprocessor">#include "ui_window.h"</span>
<span class="keyword">class</span> Window : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span><span class="operator">,</span> <span class="keyword">private</span> Ui<span class="operator">::</span>Window
{
Q_OBJECT
<span class="keyword">public</span>:
Window(<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="type">void</span> setUrl(<span class="keyword">const</span> <span class="type"><a href="qurl.html">QUrl</a></span> <span class="operator">&</span>url);
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> on_elementLineEdit_returnPressed();
<span class="type">void</span> on_highlightButton_clicked();
};</pre>
<p>We use <a href="designer-using-a-ui-file.html#the-multiple-inheritance-approach">multiple inheritance</a> to include the user interface description. We define slots that will automatically respond to signals emitted by certain user interface controls.</p>
<a name="window-class-implementation"></a>
<h2>Window Class Implementation</h2>
<p>Since the layout of the user interface is provided by the <tt>window.ui</tt> user interface file, we only need to call the <a href="qwidget.html#setupUi">setupUi()</a> in the constructor:</p>
<pre class="cpp"> Window<span class="operator">::</span>Window(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwidget.html">QWidget</a></span>(parent)
{
setupUi(<span class="keyword">this</span>);
}</pre>
<p>This adds all the controls to the window and sets up connections between their signals and suitably-named slots in the <tt>Window</tt> class. The <a href="qlineedit.html">QLineEdit</a> instance was given a name of <tt>elementLineEdit</tt> in Qt Designer, so the <tt>on_elementLineEdit_returnPressed()</tt> slot is automatically connected to its <a href="qlineedit.html#returnPressed">returnPressed()</a> signal.</p>
<p>This slot performs the main work of this example. We begin by obtaining a <a href="qwebframe.html">QWebFrame</a> instance for the current page shown in the <a href="qwebview.html">QWebView</a> widget. Each <a href="qwebframe.html">QWebFrame</a> contains a <a href="qwebelement.html">QWebElement</a> instance that represents the document, and we obtain this in order to examine its contents:</p>
<pre class="cpp"> <span class="type">void</span> Window<span class="operator">::</span>on_elementLineEdit_returnPressed()
{
<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();
<span class="type"><a href="qwebelement.html">QWebElement</a></span> document <span class="operator">=</span> frame<span class="operator">-</span><span class="operator">></span>documentElement();
<span class="type"><a href="qwebelementcollection.html">QWebElementCollection</a></span> elements <span class="operator">=</span> document<span class="operator">.</span>findAll(elementLineEdit<span class="operator">-</span><span class="operator">></span>text());
foreach (<span class="type"><a href="qwebelement.html">QWebElement</a></span> element<span class="operator">,</span> elements)
element<span class="operator">.</span>setAttribute(<span class="string">"style"</span><span class="operator">,</span> <span class="string">"background-color: #f0f090"</span>);
}</pre>
<p>Taking the contents of the <a href="qlineedit.html">QLineEdit</a> as the query text, we call the element's <a href="qwebelement.html#findAll">findAll()</a> function to obtain a list of elements that match the query.</p>
<p>For each element obtained, we modify its style by setting its <tt>style</tt> attribute to give it a yellow background color.</p>
<p>Since we also want the query to be performed when the user clicks the <b>Highlight</b> button, we also implement the <tt>on_highlightButton_clicked()</tt> slot to simply call the <tt>on_elementLineEdit_returnPressed()</tt> slot when it is invoked:</p>
<pre class="cpp"> <span class="type">void</span> Window<span class="operator">::</span>on_highlightButton_clicked()
{
on_elementLineEdit_returnPressed();
}</pre>
<p>For completeness, we also implement a <tt>setUrl()</tt> function which simply passes on a <a href="qurl.html">QUrl</a> instance to the equivalent function in the <a href="qwebview.html">QWebView</a> widget:</p>
<pre class="cpp"> <span class="type">void</span> Window<span class="operator">::</span>setUrl(<span class="keyword">const</span> <span class="type"><a href="qurl.html">QUrl</a></span> <span class="operator">&</span>url)
{
webView<span class="operator">-</span><span class="operator">></span>setUrl(url);
}</pre>
<a name="starting-the-example"></a>
<h2>Starting the Example</h2>
<p>The main function implementation is simple. We set up the application, create a <tt>Window</tt> instance, set its URL, and show it:</p>
<pre class="cpp"> <span class="preprocessor">#include <QtGui></span>
<span class="preprocessor">#include "window.h"</span>
<span class="type">int</span> main(<span class="type">int</span> argc<span class="operator">,</span> <span class="type">char</span> <span class="operator">*</span>argv<span class="operator">[</span><span class="operator">]</span>)
{
<span class="type"><a href="qapplication.html">QApplication</a></span> app(argc<span class="operator">,</span> argv);
Window window;
window<span class="operator">.</span>setUrl(<span class="type"><a href="qurl.html">QUrl</a></span>(<span class="string">"http://www.webkit.org"</span>));
<span class="preprocessor">#if defined Q_OS_SYMBIAN || defined Q_WS_HILDON || defined Q_WS_MAEMO_5 || defined Q_WS_SIMULATOR</span>
window<span class="operator">.</span>showMaximized();
<span class="preprocessor">#else</span>
window<span class="operator">.</span>show();
<span class="preprocessor">#endif</span>
<span class="keyword">return</span> app<span class="operator">.</span>exec();
}</pre>
<p>When the application's event loop is run, the WebKit home page will load, and the user can then begin to start running queries against the contents of the page. The highlighting can only be removed by reloading the page. To do this, open a context menu over the page and select the <b>Reload</b> menu item.</p>
<a name="further-reading"></a>
<h2>Further Reading</h2>
<p>The <a href="qwebelement.html">QWebElement</a> documentation contains more information about DOM access for the <a href="qtwebkit.html">QtWebKit</a> classes.</p>
<p>In this example, we take advantage of Qt's <a href="designer-using-a-ui-file.html#automatic-connections">auto-connection</a> feature to avoid explicitly connecting signals to slots.</p>
</div>
<!-- @@@webkit/simpleselector -->
</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>
