0
|
1 |
/****************************************************************************
|
|
2 |
**
|
|
3 |
** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
|
|
4 |
** All rights reserved.
|
|
5 |
** Contact: Nokia Corporation (qt-info@nokia.com)
|
|
6 |
**
|
|
7 |
** This file is part of the documentation of the Qt Toolkit.
|
|
8 |
**
|
|
9 |
** $QT_BEGIN_LICENSE:LGPL$
|
|
10 |
** No Commercial Usage
|
|
11 |
** This file contains pre-release code and may not be distributed.
|
|
12 |
** You may use this file in accordance with the terms and conditions
|
|
13 |
** contained in the Technology Preview License Agreement accompanying
|
|
14 |
** this package.
|
|
15 |
**
|
|
16 |
** GNU Lesser General Public License Usage
|
|
17 |
** Alternatively, this file may be used under the terms of the GNU Lesser
|
|
18 |
** General Public License version 2.1 as published by the Free Software
|
|
19 |
** Foundation and appearing in the file LICENSE.LGPL included in the
|
|
20 |
** packaging of this file. Please review the following information to
|
|
21 |
** ensure the GNU Lesser General Public License version 2.1 requirements
|
|
22 |
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
|
|
23 |
**
|
|
24 |
** In addition, as a special exception, Nokia gives you certain additional
|
|
25 |
** rights. These rights are described in the Nokia Qt LGPL Exception
|
|
26 |
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
|
|
27 |
**
|
|
28 |
** If you have questions regarding the use of this file, please contact
|
|
29 |
** Nokia at qt-info@nokia.com.
|
|
30 |
**
|
|
31 |
**
|
|
32 |
**
|
|
33 |
**
|
|
34 |
**
|
|
35 |
**
|
|
36 |
**
|
|
37 |
**
|
|
38 |
** $QT_END_LICENSE$
|
|
39 |
**
|
|
40 |
****************************************************************************/
|
|
41 |
|
|
42 |
/*!
|
|
43 |
\example webkit/fancybrowser
|
|
44 |
\title Fancy Browser Example
|
|
45 |
|
|
46 |
The Fancy Browser example shows how to use jQuery with QtWebKit to
|
|
47 |
create a web browser with special effects and content
|
|
48 |
manipulation.
|
|
49 |
|
|
50 |
\image fancybrowser-example.png
|
|
51 |
|
|
52 |
The application makes use of QWebFrame::evaluateJavaScript to
|
|
53 |
evaluate the jQuery JavaScript code. A QMainWindow with a QWebView
|
|
54 |
as central widget builds up the browser itself.
|
|
55 |
|
|
56 |
\section1 MainWindow Class Definition
|
|
57 |
|
|
58 |
The \c MainWindow class inherits QMainWindow. It implements a number of
|
|
59 |
slots to perform actions on both the application and on the web content.
|
|
60 |
|
|
61 |
\snippet examples/webkit/fancybrowser/mainwindow.h 1
|
|
62 |
|
|
63 |
We also declare a QString that contains the jQuery, a QWebView
|
|
64 |
that displays the web content, and a QLineEdit that acts as the
|
|
65 |
address bar.
|
|
66 |
|
|
67 |
\section1 MainWindow Class Implementation
|
|
68 |
|
|
69 |
We start by implementing the constructor.
|
|
70 |
|
|
71 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 1
|
|
72 |
|
|
73 |
The first part of the constructor sets the value of \c progress to
|
|
74 |
0. This value will be used later in the code to visualize the
|
|
75 |
loading of a webpage.
|
|
76 |
|
|
77 |
Next, the jQuery library is loaded using a QFile and reading the file
|
|
78 |
content. The jQuery library is a JavaScript library that provides different
|
|
79 |
functions for manipulating HTML.
|
|
80 |
|
|
81 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 2
|
|
82 |
|
|
83 |
The second part of the constructor creates a QWebView and connects
|
|
84 |
slots to the views signals. Furthermore, we create a QLineEdit as
|
|
85 |
the browsers address bar. We then set the horizontal QSizePolicy
|
|
86 |
to fill the available area in the browser at all times. We add the
|
|
87 |
QLineEdit to a QToolbar together with a set of navigation actions
|
|
88 |
from QWebView::pageAction.
|
|
89 |
|
|
90 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 3
|
|
91 |
|
|
92 |
The third and last part of the constructor implements two QMenus and assigns
|
|
93 |
a set of actions to them. The last line sets the QWebView as the central
|
|
94 |
widget in the QMainWindow.
|
|
95 |
|
|
96 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 4
|
|
97 |
|
|
98 |
When the page is loaded, \c adjustLocation() updates the address
|
|
99 |
bar; \c adjustLocation() is triggered by the \c loadFinished()
|
|
100 |
signal in QWebView. In \c changeLocation() we create a QUrl
|
|
101 |
object, and then use it to load the page into the QWebView. When
|
|
102 |
the new web page has finished loading, \c adjustLocation() will be
|
|
103 |
run once more to update the address bar.
|
|
104 |
|
|
105 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 5
|
|
106 |
|
|
107 |
\c adjustTitle() sets the window title and displays the loading
|
|
108 |
progress. This slot is triggered by the \c titleChanged() signal
|
|
109 |
in QWebView.
|
|
110 |
|
|
111 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 6
|
|
112 |
|
|
113 |
When a web page has loaded, \c finishLoading() is triggered by the
|
|
114 |
\c loadFinished() signal in QWebView. \c finishLoading() then updates the
|
|
115 |
progress in the title bar and calls \c evaluateJavaScript() to evaluate the
|
|
116 |
jQuery library. This evaluates the JavaScript against the current web page.
|
|
117 |
What that means is that the JavaScript can be viewed as part of the content
|
|
118 |
loaded into the QWebView, and therefore needs to be loaded every time a new
|
|
119 |
page is loaded. Once the jQuery library is loaded, we can start executing
|
|
120 |
the different jQuery functions in the browser.
|
|
121 |
|
|
122 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 7
|
|
123 |
|
|
124 |
The first jQuery-based function, \c highlightAllLinks(), is designed to
|
|
125 |
highlight all links in the current webpage. The JavaScript code looks
|
|
126 |
for web elements named \e {a}, which is the tag for a hyperlink.
|
|
127 |
For each such element, the background color is set to be yellow by
|
|
128 |
using CSS.
|
|
129 |
|
|
130 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 8
|
|
131 |
|
|
132 |
The \c rotateImages() function rotates the images on the current
|
|
133 |
web page. Webkit supports CSS transforms and this JavaScript code
|
|
134 |
looks up all \e {img} elements and rotates the images 180 degrees
|
|
135 |
and then back again.
|
|
136 |
|
|
137 |
\snippet examples/webkit/fancybrowser/mainwindow.cpp 9
|
|
138 |
|
|
139 |
The remaining four methods remove different elements from the current web
|
|
140 |
page. \c removeGifImages() removes all Gif images on the page by looking up
|
|
141 |
the \e {src} attribute of all the elements on the web page. Any element with
|
|
142 |
a \e {gif} file as its source is removed. \c removeInlineFrames() removes all
|
|
143 |
\e {iframe} or inline elements. \c removeObjectElements() removes all
|
|
144 |
\e {object} elements, and \c removeEmbeddedElements() removes any elements
|
|
145 |
such as plugins embedded on the page using the \e {embed} tag.
|
|
146 |
|
|
147 |
*/
|
|
148 |
|