|
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 |