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
|
/****************************************************************************
**
** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** GNU Free Documentation License
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file.
**
** Other Usage
** Alternatively, this file may be used in accordance with the terms
** and conditions contained in a signed written agreement between you
** and Nokia.
**
**
**
**
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\example webkit/fancybrowser
\title Fancy Browser Example
The Fancy Browser example shows how to use jQuery with QtWebKit to
create a web browser with special effects and content
manipulation.
\image fancybrowser-example.png
The application makes use of QWebFrame::evaluateJavaScript to
evaluate the jQuery JavaScript code. A QMainWindow with a QWebView
as central widget builds up the browser itself.
\section1 MainWindow Class Definition
The \c MainWindow class inherits QMainWindow. It implements a number of
slots to perform actions on both the application and on the web content.
\snippet examples/webkit/fancybrowser/mainwindow.h 1
We also declare a QString that contains the jQuery, a QWebView
that displays the web content, and a QLineEdit that acts as the
address bar.
\section1 MainWindow Class Implementation
We start by implementing the constructor.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 1
The first part of the constructor sets the value of \c progress to
0. This value will be used later in the code to visualize the
loading of a webpage.
Next, the jQuery library is loaded using a QFile and reading the file
content. The jQuery library is a JavaScript library that provides different
functions for manipulating HTML.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 2
The second part of the constructor creates a QWebView and connects
slots to the views signals. Furthermore, we create a QLineEdit as
the browsers address bar. We then set the horizontal QSizePolicy
to fill the available area in the browser at all times. We add the
QLineEdit to a QToolbar together with a set of navigation actions
from QWebView::pageAction.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 3
The third and last part of the constructor implements two QMenus and assigns
a set of actions to them. The last line sets the QWebView as the central
widget in the QMainWindow.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 4
When the page is loaded, \c adjustLocation() updates the address
bar; \c adjustLocation() is triggered by the \c loadFinished()
signal in QWebView. In \c changeLocation() we create a QUrl
object, and then use it to load the page into the QWebView. When
the new web page has finished loading, \c adjustLocation() will be
run once more to update the address bar.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 5
\c adjustTitle() sets the window title and displays the loading
progress. This slot is triggered by the \c titleChanged() signal
in QWebView.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 6
When a web page has loaded, \c finishLoading() is triggered by the
\c loadFinished() signal in QWebView. \c finishLoading() then updates the
progress in the title bar and calls \c evaluateJavaScript() 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 QWebView, 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.
The rotateImages() function is then called explicitely to make sure
that the images of the newly loaded page respect the state of the toggle
action.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 7
The first jQuery-based function, \c highlightAllLinks(), is designed to
highlight all links in the current webpage. The JavaScript code looks
for web elements named \e {a}, which is the tag for a hyperlink.
For each such element, the background color is set to be yellow by
using CSS.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 8
The \c rotateImages() function rotates the images on the current
web page. Webkit supports CSS transforms and this JavaScript code
looks up all \e {img} elements and rotates the images 180 degrees
and then back again.
\snippet examples/webkit/fancybrowser/mainwindow.cpp 9
The remaining four methods remove different elements from the current web
page. \c removeGifImages() removes all GIF images on the page by looking up
the \e {src} attribute of all the elements on the web page. Any element with
a \e {gif} file as its source is removed. \c removeInlineFrames() removes all
\e {iframe} or inline elements. \c removeObjectElements() removes all
\e {object} elements, and \c removeEmbeddedElements() removes any elements
such as plugins embedded on the page using the \e {embed} tag.
*/
|
