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
|
/****************************************************************************
**
** 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/simpleselector
\title Simple Selector Example
\brief The Simple Selector example shows how to use QWebElement to access the
Document Object Model (DOM) in a Web page.
\image webkit-simpleselector.png
The QWebElement class enables access to the document structure and content in a Web page,
as represented by a QWebFrame instance. It can be used for basic traversal of the document
structure (see the \l{DOM Traversal Example}), to search for particular elements, and to
modify any elements found.
This example uses a QWebView widget to display a Web page. A QLineEdit widget and QPushButton
allow the user to enter a query and highlight the results in the page. These widgets are
contained in an instance of the \c Window class, which we described below.
\section1 Window Class Definition
The \c Window class describes the example's user interface and this is partially described
by the \c window.ui file, created using \l{Qt Designer}:
\snippet examples/webkit/simpleselector/window.h Window class definition
We use \l{Using a Designer UI File in Your Application#The Multiple Inheritance Approach}
{multiple inheritance} to include the user interface description. We define slots that
will automatically respond to signals emitted by certain user interface controls.
\section1 Window Class Implementation
Since the layout of the user interface is provided by the \c{window.ui} user interface file,
we only need to call the \l{QWidget::}{setupUi()} in the constructor:
\snippet examples/webkit/simpleselector/window.cpp Window class constructor
This adds all the controls to the window and sets up connections between their signals
and suitably-named slots in the \c Window class. The QLineEdit instance was given a name of
\c elementLineEdit in Qt Designer, so the \c{on_elementLineEdit_returnPressed()} slot is
automatically connected to its \l{QLineEdit::}{returnPressed()} signal.
This slot performs the main work of this example. We begin by obtaining a QWebFrame
instance for the current page shown in the QWebView widget. Each QWebFrame contains
a QWebElement instance that represents the document, and we obtain this in order to
examine its contents:
\snippet examples/webkit/simpleselector/window.cpp return pressed
Taking the contents of the QLineEdit as the query text, we call the element's
\l{QWebElement::}{findAll()} function to obtain a list of elements that match the
query.
For each element obtained, we modify its style by setting its \c style attribute
to give it a yellow background color.
Since we also want the query to be performed when the user clicks the \gui Highlight
button, we also implement the \c{on_highlightButton_clicked()} slot to simply call
the \c{on_elementLineEdit_returnPressed()} slot when it is invoked:
\snippet examples/webkit/simpleselector/window.cpp button clicked
For completeness, we also implement a \c setUrl() function which simply passes on
a QUrl instance to the equivalent function in the QWebView widget:
\snippet examples/webkit/simpleselector/window.cpp set URL
\section1 Starting the Example
The main function implementation is simple. We set up the application, create
a \c Window instance, set its URL, and show it:
\snippet examples/webkit/simpleselector/main.cpp main program
When the application's event loop is run, the WebKit home page will load, and the
user can then begin to start running queries against the contents of the page.
The highlighting can only be removed by reloading the page. To do this, open a
context menu over the page and select the \gui Reload menu item.
\section1 Further Reading
The QWebElement documentation contains more information about DOM access for the
QtWebKit classes.
In this example, we take advantage of Qt's
\l{Using a Designer UI File in Your Application#Automatic Connections}{auto-connection}
feature to avoid explicitly connecting signals to slots.
*/
|
