source: trunk/doc/src/examples/fancybrowser.qdoc@ 605

Last change on this file since 605 was 561, checked in by Dmitry A. Kuminov, 16 years ago

trunk: Merged in qt 4.6.1 sources.
  • Property svn:eol-style set to native
File size: 6.6 KB
Line 
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** Commercial Usage
11** Licensees holding valid Qt Commercial licenses may use this file in
12** accordance with the Qt Commercial License Agreement provided with the
13** Software or, alternatively, in accordance with the terms contained in
14** a written agreement between you and Nokia.
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** GNU General Public License Usage
29** Alternatively, this file may be used under the terms of the GNU
30** General Public License version 3.0 as published by the Free Software
31** Foundation and appearing in the file LICENSE.GPL included in the
32** packaging of this file. Please review the following information to
33** ensure the GNU General Public License version 3.0 requirements will be
34** met: http://www.gnu.org/copyleft/gpl.html.
35**
36** If you have questions regarding the use of this file, please contact
37** Nokia at qt-info@nokia.com.
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 The rotateImages() function is then called explicitely to make sure
123 that the images of the newly loaded page respect the state of the toggle
124 action.
125
126 \snippet examples/webkit/fancybrowser/mainwindow.cpp 7
127
128 The first jQuery-based function, \c highlightAllLinks(), is designed to
129 highlight all links in the current webpage. The JavaScript code looks
130 for web elements named \e {a}, which is the tag for a hyperlink.
131 For each such element, the background color is set to be yellow by
132 using CSS.
133
134 \snippet examples/webkit/fancybrowser/mainwindow.cpp 8
135
136 The \c rotateImages() function rotates the images on the current
137 web page. Webkit supports CSS transforms and this JavaScript code
138 looks up all \e {img} elements and rotates the images 180 degrees
139 and then back again.
140
141 \snippet examples/webkit/fancybrowser/mainwindow.cpp 9
142
143 The remaining four methods remove different elements from the current web
144 page. \c removeGifImages() removes all Gif images on the page by looking up
145 the \e {src} attribute of all the elements on the web page. Any element with
146 a \e {gif} file as its source is removed. \c removeInlineFrames() removes all
147 \e {iframe} or inline elements. \c removeObjectElements() removes all
148 \e {object} elements, and \c removeEmbeddedElements() removes any elements
149 such as plugins embedded on the page using the \e {embed} tag.
150
151*/
152
Note: See TracBrowser for help on using the repository browser.