/usr/share/qt5/doc/qtwebkitexamples/qtwebkitexamples-webkitwidgets-fancybrowser-example.html is in qtwebkit5-examples-doc-html 5.5.1+dfsg-2build1.
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 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 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- fancybrowser.qdoc -->
<title>Fancy Browser Example | Qt WebKit Examples 5.5</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.5</li>
<li><a href="qtwebkitexamples-index.html">Qt WebKit Examples</a></li>
<li>Fancy Browser Example</li>
<li id="buildversion">Qt 5.5.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#mainwindow-class-definition">MainWindow Class Definition</a></li>
<li class="level1"><a href="#mainwindow-class-implementation">MainWindow Class Implementation</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Fancy Browser Example</h1>
<span class="subtitle"></span>
<!-- $$$webkitwidgets/fancybrowser-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/fancybrowser-example.png" alt="" /></p><p>The application makes use of <a href="../qtwebkit/qwebframe.html#evaluateJavaScript">QWebFrame::evaluateJavaScript</a> to evaluate the jQuery JavaScript code. A <a href="../qtwidgets/qmainwindow.html">QMainWindow</a> with a <a href="../qtwebkit/qwebview.html">QWebView</a> as central widget builds up the browser itself.</p>
<a name="mainwindow-class-definition"></a>
<h2 id="mainwindow-class-definition">MainWindow Class Definition</h2>
<p>The <code>MainWindow</code> class inherits <a href="../qtwidgets/qmainwindow.html">QMainWindow</a>. It implements a number of slots to perform actions on both the application and on the web content.</p>
<pre class="cpp"><span class="keyword">class</span> MainWindow : <span class="keyword">public</span> <span class="type"><a href="../qtwidgets/qmainwindow.html">QMainWindow</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
MainWindow(<span class="keyword">const</span> <span class="type"><a href="../qtcore/qurl.html">QUrl</a></span><span class="operator">&</span> url);
<span class="keyword">protected</span> <span class="keyword">slots</span>:
<span class="type">void</span> adjustLocation();
<span class="type">void</span> changeLocation();
<span class="type">void</span> adjustTitle();
<span class="type">void</span> setProgress(<span class="type">int</span> p);
<span class="type">void</span> finishLoading(bool);
<span class="type">void</span> viewSource();
<span class="type">void</span> slotSourceDownloaded();
<span class="type">void</span> highlightAllLinks();
<span class="type">void</span> rotateImages(bool invert);
<span class="type">void</span> removeGifImages();
<span class="type">void</span> removeInlineFrames();
<span class="type">void</span> removeObjectElements();
<span class="type">void</span> removeEmbeddedElements();
<span class="keyword">private</span>:
<span class="type"><a href="../qtcore/qstring.html">QString</a></span> jQuery;
<span class="type"><a href="../qtwebkit/qwebview.html">QWebView</a></span> <span class="operator">*</span>view;
<span class="type"><a href="../qtwidgets/qlineedit.html">QLineEdit</a></span> <span class="operator">*</span>locationEdit;
<span class="type"><a href="../qtwidgets/qaction.html">QAction</a></span> <span class="operator">*</span>rotateAction;
<span class="type">int</span> progress;</pre>
<p>We also declare a <a href="../qtcore/qstring.html">QString</a> that contains the jQuery, a <a href="../qtwebkit/qwebview.html">QWebView</a> that displays the web content, and a <a href="../qtwidgets/qlineedit.html">QLineEdit</a> that acts as the address bar.</p>
<a name="mainwindow-class-implementation"></a>
<h2 id="mainwindow-class-implementation">MainWindow Class Implementation</h2>
<p>We start by implementing the constructor.</p>
<pre class="cpp">MainWindow<span class="operator">::</span>MainWindow(<span class="keyword">const</span> <span class="type"><a href="../qtcore/qurl.html">QUrl</a></span><span class="operator">&</span> url)
{
progress <span class="operator">=</span> <span class="number">0</span>;
<span class="type"><a href="../qtcore/qfile.html">QFile</a></span> file;
file<span class="operator">.</span>setFileName(<span class="string">":/jquery.min.js"</span>);
file<span class="operator">.</span>open(<span class="type"><a href="../qtcore/qiodevice.html">QIODevice</a></span><span class="operator">::</span>ReadOnly);
jQuery <span class="operator">=</span> file<span class="operator">.</span>readAll();
jQuery<span class="operator">.</span>append(<span class="string">"\nvar qt = { 'jQuery': jQuery.noConflict(true) };"</span>);
file<span class="operator">.</span>close();</pre>
<p>The first part of the constructor sets the value of <code>progress</code> to 0. This value will be used later in the code to visualize the loading of a webpage.</p>
<p>Next, the jQuery library is loaded using a <a href="../qtcore/qfile.html">QFile</a> and reading the file content. The jQuery library is a JavaScript library that provides different functions for manipulating HTML.</p>
<pre class="cpp"> view <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="../qtwebkit/qwebview.html">QWebView</a></span>(<span class="keyword">this</span>);
view<span class="operator">-</span><span class="operator">></span>load(url);
connect(view<span class="operator">,</span> SIGNAL(loadFinished(bool))<span class="operator">,</span> SLOT(adjustLocation()));
connect(view<span class="operator">,</span> SIGNAL(titleChanged(<span class="type"><a href="../qtcore/qstring.html">QString</a></span>))<span class="operator">,</span> SLOT(adjustTitle()));
connect(view<span class="operator">,</span> SIGNAL(loadProgress(<span class="type">int</span>))<span class="operator">,</span> SLOT(setProgress(<span class="type">int</span>)));
connect(view<span class="operator">,</span> SIGNAL(loadFinished(bool))<span class="operator">,</span> SLOT(finishLoading(bool)));
locationEdit <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="../qtwidgets/qlineedit.html">QLineEdit</a></span>(<span class="keyword">this</span>);
locationEdit<span class="operator">-</span><span class="operator">></span>setSizePolicy(<span class="type"><a href="../qtwidgets/qsizepolicy.html">QSizePolicy</a></span><span class="operator">::</span>Expanding<span class="operator">,</span> locationEdit<span class="operator">-</span><span class="operator">></span>sizePolicy()<span class="operator">.</span>verticalPolicy());
connect(locationEdit<span class="operator">,</span> SIGNAL(returnPressed())<span class="operator">,</span> SLOT(changeLocation()));
<span class="type"><a href="../qtwidgets/qtoolbar.html">QToolBar</a></span> <span class="operator">*</span>toolBar <span class="operator">=</span> addToolBar(tr(<span class="string">"Navigation"</span>));
toolBar<span class="operator">-</span><span class="operator">></span>addAction(view<span class="operator">-</span><span class="operator">></span>pageAction(<span class="type"><a href="../qtwebkit/qwebpage.html">QWebPage</a></span><span class="operator">::</span>Back));
toolBar<span class="operator">-</span><span class="operator">></span>addAction(view<span class="operator">-</span><span class="operator">></span>pageAction(<span class="type"><a href="../qtwebkit/qwebpage.html">QWebPage</a></span><span class="operator">::</span>Forward));
toolBar<span class="operator">-</span><span class="operator">></span>addAction(view<span class="operator">-</span><span class="operator">></span>pageAction(<span class="type"><a href="../qtwebkit/qwebpage.html">QWebPage</a></span><span class="operator">::</span>Reload));
toolBar<span class="operator">-</span><span class="operator">></span>addAction(view<span class="operator">-</span><span class="operator">></span>pageAction(<span class="type"><a href="../qtwebkit/qwebpage.html">QWebPage</a></span><span class="operator">::</span>Stop));
toolBar<span class="operator">-</span><span class="operator">></span>addWidget(locationEdit);</pre>
<p>The second part of the constructor creates a <a href="../qtwebkit/qwebview.html">QWebView</a> and connects slots to the views signals. Furthermore, we create a <a href="../qtwidgets/qlineedit.html">QLineEdit</a> as the browsers address bar. We then set the horizontal <a href="../qtwidgets/qsizepolicy.html">QSizePolicy</a> to fill the available area in the browser at all times. We add the <a href="../qtwidgets/qlineedit.html">QLineEdit</a> to a QToolbar together with a set of navigation actions from <a href="../qtwebkit/qwebview.html#pageAction">QWebView::pageAction</a>.</p>
<pre class="cpp"> <span class="type"><a href="../qtwidgets/qmenu.html">QMenu</a></span> <span class="operator">*</span>effectMenu <span class="operator">=</span> menuBar()<span class="operator">-</span><span class="operator">></span>addMenu(tr(<span class="string">"&Effect"</span>));
effectMenu<span class="operator">-</span><span class="operator">></span>addAction(<span class="string">"Highlight all links"</span><span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(highlightAllLinks()));
rotateAction <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="../qtwidgets/qaction.html">QAction</a></span>(<span class="keyword">this</span>);
rotateAction<span class="operator">-</span><span class="operator">></span>setIcon(style()<span class="operator">-</span><span class="operator">></span>standardIcon(<span class="type"><a href="../qtwidgets/qstyle.html">QStyle</a></span><span class="operator">::</span>SP_FileDialogDetailedView));
rotateAction<span class="operator">-</span><span class="operator">></span>setCheckable(<span class="keyword">true</span>);
rotateAction<span class="operator">-</span><span class="operator">></span>setText(tr(<span class="string">"Turn images upside down"</span>));
connect(rotateAction<span class="operator">,</span> SIGNAL(toggled(bool))<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(rotateImages(bool)));
effectMenu<span class="operator">-</span><span class="operator">></span>addAction(rotateAction);
<span class="type"><a href="../qtwidgets/qmenu.html">QMenu</a></span> <span class="operator">*</span>toolsMenu <span class="operator">=</span> menuBar()<span class="operator">-</span><span class="operator">></span>addMenu(tr(<span class="string">"&Tools"</span>));
toolsMenu<span class="operator">-</span><span class="operator">></span>addAction(tr(<span class="string">"Remove GIF images"</span>)<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(removeGifImages()));
toolsMenu<span class="operator">-</span><span class="operator">></span>addAction(tr(<span class="string">"Remove all inline frames"</span>)<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(removeInlineFrames()));
toolsMenu<span class="operator">-</span><span class="operator">></span>addAction(tr(<span class="string">"Remove all object elements"</span>)<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(removeObjectElements()));
toolsMenu<span class="operator">-</span><span class="operator">></span>addAction(tr(<span class="string">"Remove all embedded elements"</span>)<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(removeEmbeddedElements()));
setCentralWidget(view);
setUnifiedTitleAndToolBarOnMac(<span class="keyword">true</span>);
}</pre>
<p>The third and last part of the constructor implements two QMenus and assigns a set of actions to them. The last line sets the <a href="../qtwebkit/qwebview.html">QWebView</a> as the central widget in the <a href="../qtwidgets/qmainwindow.html">QMainWindow</a>.</p>
<pre class="cpp"><span class="type">void</span> MainWindow<span class="operator">::</span>adjustLocation()
{
locationEdit<span class="operator">-</span><span class="operator">></span>setText(view<span class="operator">-</span><span class="operator">></span>url()<span class="operator">.</span>toString());
}
<span class="type">void</span> MainWindow<span class="operator">::</span>changeLocation()
{
<span class="type"><a href="../qtcore/qurl.html">QUrl</a></span> url <span class="operator">=</span> <span class="type"><a href="../qtcore/qurl.html">QUrl</a></span><span class="operator">::</span>fromUserInput(locationEdit<span class="operator">-</span><span class="operator">></span>text());
view<span class="operator">-</span><span class="operator">></span>load(url);
view<span class="operator">-</span><span class="operator">></span>setFocus();
}</pre>
<p>When the page is loaded, <code>adjustLocation()</code> updates the address bar; <code>adjustLocation()</code> is triggered by the <code>loadFinished()</code> signal in <a href="../qtwebkit/qwebview.html">QWebView</a>. In <code>changeLocation()</code> we create a <a href="../qtcore/qurl.html">QUrl</a> object, and then use it to load the page into the <a href="../qtwebkit/qwebview.html">QWebView</a>. When the new web page has finished loading, <code>adjustLocation()</code> will be run once more to update the address bar.</p>
<pre class="cpp"><span class="type">void</span> MainWindow<span class="operator">::</span>adjustTitle()
{
<span class="keyword">if</span> (progress <span class="operator"><</span><span class="operator">=</span> <span class="number">0</span> <span class="operator">|</span><span class="operator">|</span> progress <span class="operator">></span><span class="operator">=</span> <span class="number">100</span>)
setWindowTitle(view<span class="operator">-</span><span class="operator">></span>title());
<span class="keyword">else</span>
setWindowTitle(<span class="type"><a href="../qtcore/qstring.html">QString</a></span>(<span class="string">"%1 (%2%)"</span>)<span class="operator">.</span>arg(view<span class="operator">-</span><span class="operator">></span>title())<span class="operator">.</span>arg(progress));
}
<span class="type">void</span> MainWindow<span class="operator">::</span>setProgress(<span class="type">int</span> p)
{
progress <span class="operator">=</span> p;
adjustTitle();
}</pre>
<p><code>adjustTitle()</code> sets the window title and displays the loading progress. This slot is triggered by the <code>titleChanged()</code> signal in <a href="../qtwebkit/qwebview.html">QWebView</a>.</p>
<pre class="cpp"><span class="type">void</span> MainWindow<span class="operator">::</span>finishLoading(bool)
{
progress <span class="operator">=</span> <span class="number">100</span>;
adjustTitle();
view<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>mainFrame()<span class="operator">-</span><span class="operator">></span>evaluateJavaScript(jQuery);
rotateImages(rotateAction<span class="operator">-</span><span class="operator">></span>isChecked());
}</pre>
<p>When a web page has loaded, <code>finishLoading()</code> is triggered by the <code>loadFinished()</code> signal in <a href="../qtwebkit/qwebview.html">QWebView</a>. <code>finishLoading()</code> then updates the progress in the title bar and calls <code>evaluateJavaScript()</code> to evaluate the jQuery library. This evaluates the JavaScript against the current web page. What that means is that the JavaScript can be viewed as part of the content loaded into the <a href="../qtwebkit/qwebview.html">QWebView</a>, and therefore needs to be loaded every time a new page is loaded. Once the jQuery library is loaded, we can start executing the different jQuery functions in the browser.</p>
<p>The rotateImages() function is then called explicitly to make sure that the images of the newly loaded page respect the state of the toggle action.</p>
<pre class="cpp"><span class="type">void</span> MainWindow<span class="operator">::</span>highlightAllLinks()
{
<span class="comment">// We append '; undefined' after the jQuery call here to prevent a possible recursion loop and crash caused by</span>
<span class="comment">// the way the elements returned by the each iterator elements reference each other, which causes problems upon</span>
<span class="comment">// converting them to QVariants.</span>
<span class="type"><a href="../qtcore/qstring.html">QString</a></span> code <span class="operator">=</span> <span class="string">"qt.jQuery('a').each( function () { qt.jQuery(this).css('background-color', 'yellow') } ); undefined"</span>;
view<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>mainFrame()<span class="operator">-</span><span class="operator">></span>evaluateJavaScript(code);
}</pre>
<p>The first jQuery-based function, <code>highlightAllLinks()</code>, is designed to highlight all links in the current webpage. The JavaScript code looks for web elements named <i>a</i>, which is the tag for a hyperlink. For each such element, the background color is set to be yellow by using CSS.</p>
<pre class="cpp"><span class="type">void</span> MainWindow<span class="operator">::</span>rotateImages(bool invert)
{
<span class="type"><a href="../qtcore/qstring.html">QString</a></span> code;
<span class="comment">// We append '; undefined' after each of the jQuery calls here to prevent a possible recursion loop and crash caused by</span>
<span class="comment">// the way the elements returned by the each iterator elements reference each other, which causes problems upon</span>
<span class="comment">// converting them to QVariants.</span>
<span class="keyword">if</span> (invert)
code <span class="operator">=</span> <span class="string">"qt.jQuery('img').each( function () { qt.jQuery(this).css('-webkit-transition', '-webkit-transform 2s'); qt.jQuery(this).css('-webkit-transform', 'rotate(180deg)') } ); undefined"</span>;
<span class="keyword">else</span>
code <span class="operator">=</span> <span class="string">"qt.jQuery('img').each( function () { qt.jQuery(this).css('-webkit-transition', '-webkit-transform 2s'); qt.jQuery(this).css('-webkit-transform', 'rotate(0deg)') } ); undefined"</span>;
view<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>mainFrame()<span class="operator">-</span><span class="operator">></span>evaluateJavaScript(code);
}</pre>
<p>The <code>rotateImages()</code> function rotates the images on the current web page. Webkit supports CSS transforms and this JavaScript code looks up all <i>img</i> elements and rotates the images 180 degrees and then back again.</p>
<pre class="cpp"><span class="type">void</span> MainWindow<span class="operator">::</span>removeGifImages()
{
<span class="type"><a href="../qtcore/qstring.html">QString</a></span> code <span class="operator">=</span> <span class="string">"qt.jQuery('[src*=gif]').remove()"</span>;
view<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>mainFrame()<span class="operator">-</span><span class="operator">></span>evaluateJavaScript(code);
}
<span class="type">void</span> MainWindow<span class="operator">::</span>removeInlineFrames()
{
<span class="type"><a href="../qtcore/qstring.html">QString</a></span> code <span class="operator">=</span> <span class="string">"qt.jQuery('iframe').remove()"</span>;
view<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>mainFrame()<span class="operator">-</span><span class="operator">></span>evaluateJavaScript(code);
}
<span class="type">void</span> MainWindow<span class="operator">::</span>removeObjectElements()
{
<span class="type"><a href="../qtcore/qstring.html">QString</a></span> code <span class="operator">=</span> <span class="string">"qt.jQuery('object').remove()"</span>;
view<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>mainFrame()<span class="operator">-</span><span class="operator">></span>evaluateJavaScript(code);
}
<span class="type">void</span> MainWindow<span class="operator">::</span>removeEmbeddedElements()
{
<span class="type"><a href="../qtcore/qstring.html">QString</a></span> code <span class="operator">=</span> <span class="string">"qt.jQuery('embed').remove()"</span>;
view<span class="operator">-</span><span class="operator">></span>page()<span class="operator">-</span><span class="operator">></span>mainFrame()<span class="operator">-</span><span class="operator">></span>evaluateJavaScript(code);
}</pre>
<p>The remaining four methods remove different elements from the current web page. <code>removeGifImages()</code> removes all GIF images on the page by looking up the <i>src</i> attribute of all the elements on the web page. Any element with a <i>gif</i> file as its source is removed. <code>removeInlineFrames()</code> removes all <i>iframe</i> or inline elements. <code>removeObjectElements()</code> removes all <i>object</i> elements, and <code>removeEmbeddedElements()</code> removes any elements such as plugins embedded on the page using the <i>embed</i> tag.</p>
<p>Files:</p>
<ul>
<li><a href="qtwebkitexamples-webkitwidgets-fancybrowser-jquery-min-js.html">webkitwidgets/fancybrowser/jquery.min.js</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-fancybrowser-mainwindow-cpp.html">webkitwidgets/fancybrowser/mainwindow.cpp</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-fancybrowser-mainwindow-h.html">webkitwidgets/fancybrowser/mainwindow.h</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-fancybrowser-main-cpp.html">webkitwidgets/fancybrowser/main.cpp</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-fancybrowser-fancybrowser-pro.html">webkitwidgets/fancybrowser/fancybrowser.pro</a></li>
<li><a href="qtwebkitexamples-webkitwidgets-fancybrowser-jquery-qrc.html">webkitwidgets/fancybrowser/jquery.qrc</a></li>
</ul>
</div>
<!-- @@@webkitwidgets/fancybrowser -->
</div>
</div>
</div>
</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.<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> 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. </p>
</div>
</body>
</html>
|