/usr/share/qt5/doc/qtwebkitexamples/qtwebkitexamples-webkitwidgets-domtraversal-example.html is in qtwebkit5-examples-doc-html 5.3.2+dfsg-2.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
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 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<!-- domtraversal.qdoc -->
<title>DOM Traversal Example | QtWebKitExamples 5.3</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.3</li>
<li><a href="qtwebkitexamples-index.html">Qt WebKit Examples</a></li>
<li>DOM Traversal Example</li>
<li id="buildversion">
Qt 5.3.2 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<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">DOM Traversal Example</h1>
<span class="subtitle"></span>
<!-- $$$webkitwidgets/domtraversal-description -->
<div class="descr"> <a name="details"></a>
<p>Demonstrates how to traverse the DOM tree<p>The DOM Traversal example shows how to use the QWebElement class to access the structure of a Web page.<p class="centerAlign"><img src="images/webkit-domtraversal.png" alt="" /></p><p>The QWebElement class provides an API that can be used to examine the structure and content of a Web page via a Document Object Model (DOM) interface. It can be used for basic traversal of the document structure, to search for particular elements (see the <a href="qtwebkitexamples-webkitwidgets-simpleselector-example.html">Simple Selector Example</a>), and to modify content in-place.</p>
<p>This example uses a QWebView widget to display the Web page, and a dock widget holds the QTreeWidget that shows the document structure. These widgets are placed in an instance of the <tt>Window</tt> class, which we describe below.</p>
<a name="window-class-definition"></a>
<h2>Window Class Definition</h2>
<p>The <tt>Window</tt> class is derived from QMainWindow and its user interface is created using Qt Designer. As a result, the class is also derived from the user interface class created by uic:</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">QMainWindow</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">QWidget</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">QUrl</span> <span class="operator">&</span>url);
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> on_webView_loadFinished();
<span class="keyword">private</span>:
<span class="type">void</span> examineChildElements(<span class="keyword">const</span> <span class="type">QWebElement</span> <span class="operator">&</span>parentElement<span class="operator">,</span>
<span class="type">QTreeWidgetItem</span> <span class="operator">*</span>parentItem);
};</pre>
<p>Two important functions to note are the <tt>on_webView_loadFinished()</tt> slot and the <tt>examineChildElements()</tt> function. The former is automatically called when the QWebView widget finishes loading a page. See the <a href="#further-reading">Further Reading</a> section for more information on this mechanism.</p>
<p>The <tt>examineChildElements()</tt> function is used to traverse the document structure and add items to the QTreeWidget.</p>
<a name="window-class-implementation"></a>
<h2>Window Class Implementation</h2>
<p>In the <tt>Window</tt> class constructor, we call the setupUi() function to set up the user interface described in the <tt>window.ui</tt> file:</p>
<pre class="cpp">Window<span class="operator">::</span>Window(<span class="type">QWidget</span> <span class="operator">*</span>parent)
: <span class="type">QMainWindow</span>(parent)
{
setupUi(<span class="keyword">this</span>);
}</pre>
<p>When the Web page is loaded, the <tt>on_webView_loadFinished()</tt> slot is called. Here, we clear the tree widget and begin inspection of the document by obtaining the document element from the page's main frame:</p>
<pre class="cpp"><span class="type">void</span> Window<span class="operator">::</span>on_webView_loadFinished()
{
treeWidget<span class="operator">-</span><span class="operator">></span>clear();
<span class="type">QWebFrame</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">QWebElement</span> document <span class="operator">=</span> frame<span class="operator">-</span><span class="operator">></span>documentElement();
examineChildElements(document<span class="operator">,</span> treeWidget<span class="operator">-</span><span class="operator">></span>invisibleRootItem());
}</pre>
<p>At this point, we call the <tt>examineChildElements()</tt> function to traverse the document, starting with the child elements of the document element for which we will create top level items in the tree widget.</p>
<p>The <tt>examineChildElements()</tt> function accepts a parent element and a parent item. Starting with the first child element, which we obtain with the element's firstChild() function, we examine each child element of the parent item. For each valid (non-null) element, which we check by calling its isNull() function, we create a new QTreeWidgetItem instance with the element name and add it to the parent item.</p>
<pre class="cpp"><span class="type">void</span> Window<span class="operator">::</span>examineChildElements(<span class="keyword">const</span> <span class="type">QWebElement</span> <span class="operator">&</span>parentElement<span class="operator">,</span>
<span class="type">QTreeWidgetItem</span> <span class="operator">*</span>parentItem)
{
<span class="type">QWebElement</span> element <span class="operator">=</span> parentElement<span class="operator">.</span>firstChild();
<span class="keyword">while</span> (<span class="operator">!</span>element<span class="operator">.</span>isNull()) {
<span class="type">QTreeWidgetItem</span> <span class="operator">*</span>item <span class="operator">=</span> <span class="keyword">new</span> <span class="type">QTreeWidgetItem</span>();
item<span class="operator">-</span><span class="operator">></span>setText(<span class="number">0</span><span class="operator">,</span> element<span class="operator">.</span>tagName());
parentItem<span class="operator">-</span><span class="operator">></span>addChild(item);
examineChildElements(element<span class="operator">,</span> item);
element <span class="operator">=</span> element<span class="operator">.</span>nextSibling();
}
}</pre>
<p>We recursively examine the child elements for each element by calling <tt>examineChildElements()</tt> with the current child element and the newly-created item. To obtain the next element at the same level in the document, we call its nextSibling() function.</p>
<p>This recursive approach to reading the document makes it easy to create a simple representation of the document structure in a tree widget.</p>
<p>For completeness, we show the <tt>setUrl()</tt> function, which is provided to allow the document URL to be set from the example's <tt>main()</tt> function.</p>
<pre class="cpp"><span class="type">void</span> Window<span class="operator">::</span>setUrl(<span class="keyword">const</span> <span class="type">QUrl</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>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 <QApplication></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">QApplication</span> app(argc<span class="operator">,</span> argv);
Window window;
window<span class="operator">.</span>show();
window<span class="operator">.</span>setUrl(<span class="type">QUrl</span>(<span class="string">"http://qt-project.org/"</span>));
<span class="keyword">return</span> app<span class="operator">.</span>exec();
}</pre>
<p>When the application's event loop is run, the Qt home page will load, and the tree widget will be updated to show the document structure. Navigating to another page will cause the tree widget to be updated to show the document structure of the new page.</p>
<a name="further-reading"></a>
<h2>Further Reading</h2>
<p>The QWebElement documentation contains more information about DOM access for the QtWebKit classes.</p>
<p>In this example, we take advantage of Qt's auto-connection feature to avoid explicitly connecting signals to slots. The user interface contains a QWebView widget called <tt>webView</tt> whose loadFinished() signal is automatically connected to the <tt>on_webView_loadFinished()</tt> slot when we call setupUi() in the <tt>Window</tt> constructor.</p>
<p>Files:</p>
<ul>
<li><a href="qtwebkitexamples-webkitwidgets-domtraversal-window-cpp.html">webkitwidgets/domtraversal/window.cpp</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-domtraversal-window-h.html">webkitwidgets/domtraversal/window.h</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-domtraversal-window-ui.html">webkitwidgets/domtraversal/window.ui</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-domtraversal-main-cpp.html">webkitwidgets/domtraversal/main.cpp</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-domtraversal-domtraversal-pro.html">webkitwidgets/domtraversal/domtraversal.pro</a></li>
</ul>
</div>
<!-- @@@webkitwidgets/domtraversal -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2014 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.<br> 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.<br> Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|