From 9b70933595cb058472e4ab46f234141b7ee367dd Mon Sep 17 00:00:00 2001 From: Pierre Rossi Date: Tue, 10 Sep 2013 10:48:11 +0200 Subject: Import fancybrowser example Change-Id: Ia61fbe3ef6b76c7530d10d4a3305d4208b3469ef Reviewed-by: Zeno Albisser --- .../widgets/fancybrowser/doc/src/fancybrowser.qdoc | 140 +++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 examples/widgets/fancybrowser/doc/src/fancybrowser.qdoc (limited to 'examples/widgets/fancybrowser/doc/src') diff --git a/examples/widgets/fancybrowser/doc/src/fancybrowser.qdoc b/examples/widgets/fancybrowser/doc/src/fancybrowser.qdoc new file mode 100644 index 000000000..937b00d30 --- /dev/null +++ b/examples/widgets/fancybrowser/doc/src/fancybrowser.qdoc @@ -0,0 +1,140 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Free Documentation License Usage +** 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. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \example webkitwidgets/fancybrowser + \title Fancy Browser Example + \brief Demonstrates how to use browse web and manipulate content + \ingroup webkit-widgetexamples + + \brief 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 webkitwidgets/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 webkitwidgets/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 webkitwidgets/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 webkitwidgets/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 webkitwidgets/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 webkitwidgets/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 webkitwidgets/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 webkitwidgets/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 webkitwidgets/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 webkitwidgets/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. + +*/ + -- cgit v1.2.3