diff options
author | Venugopal Shivashankar <venugopal.shivashankar@digia.com> | 2012-12-11 18:15:48 +0100 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2012-12-12 18:26:45 +0100 |
commit | a2d8aa1b462b709c9a18292eb57971eaaeb18dbe (patch) | |
tree | a7f8941dc990f712e54750ff14d73cff2b2b32a5 /examples/webkitwidgets/imageanalyzer/doc/src/webkit-bridge-imageanalyzer.qdoc | |
parent | e88665589b06aa0d87a5185cc780ed767cff0f70 (diff) | |
download | qtwebkit-examples-a2d8aa1b462b709c9a18292eb57971eaaeb18dbe.tar.gz |
Doc: Added documentation for the WebKit Widget examples
- Moved the qdoc files from the qtdoc repository
- Added group pages for QML and QWidget-based examples
- Added an index page
- Updated the qhp details in the qdocconf
Change-Id: I5f79fb1aedbfc3bcb42c84ac774ea1c4bd3a9036
Reviewed-by: Jerome Pasion <jerome.pasion@digia.com>
Diffstat (limited to 'examples/webkitwidgets/imageanalyzer/doc/src/webkit-bridge-imageanalyzer.qdoc')
-rw-r--r-- | examples/webkitwidgets/imageanalyzer/doc/src/webkit-bridge-imageanalyzer.qdoc | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/examples/webkitwidgets/imageanalyzer/doc/src/webkit-bridge-imageanalyzer.qdoc b/examples/webkitwidgets/imageanalyzer/doc/src/webkit-bridge-imageanalyzer.qdoc new file mode 100644 index 0000000..44ce91c --- /dev/null +++ b/examples/webkitwidgets/imageanalyzer/doc/src/webkit-bridge-imageanalyzer.qdoc @@ -0,0 +1,162 @@ +/**************************************************************************** +** +** Copyright (C) 2012 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 webkit/imageanalyzer + \title The Webkit Bridge Tutorial - Hybrid Client Application + \brief Demonstrates how to integrate web functionality with other core + functionality. + \ingroup webkit-widgetexamples + + In this example, we will show how to write a hybrid application using +\l{The QtWebKit Bridge}{QtWebKit Bridge}, which distinguishes itself from a +thin client in that it performs heavy calculations on the client side in C++, +like a native application, but presents nothing more than a \c QWebView for its +user interface, displaying web content written in HTML/JavaScript. The +application uses QtConcurrent to distribute its work across as many CPU cores as +are available from the system, so it can process each image in parallel. + +For the full reference documentation of QtWebKit hybrid development, see +\l{qtwebkit-bridge.html}{The QtWebKit Bridge}. + +Initially, you will see a user interface with an empty list of images. Clicking +on some of the images in the lower pane below adds them to the list view above, +as shown in the screenshot below. + + \image webkit-imageanalyzer-screenshot.png + +Now, we can click on \b Analyze, and each image is analyzed using some +computationally intensive C++ function, in parallel and on different cores. +Progress is shown while the analysis is proceeding. + + \image webkit-imageanalyzer-progress.png + +and in the end, we will see something like this, where the average RGB values of +each image are shown. + + \image webkit-imageanalyzer-complete.png + +The MainWindow is defined in C++, and creates a \l QNetworkDiskCache and a +\l QWebView, and tells the \l QWebView to load the starting page, providing us +with a user interface for the client. + + \snippet webkit/imageanalyzer/mainwindow.cpp MainWindow - constructor + +In this example, the sample content is addressed with the \tt qrc:/index.html +URL. \tt qrc:/ indicates that the file is stored as a Qt resource (attached to +the executable). In a real-world application, the content and images would +likely be retrieved from the network rather than from resources. + +We wish to initialize an object reference in the JavaScript web page to point +to our \tt ImageAnalyzer before any other scripts are run. To do this, we +connect the \l{QWebFrame::}{javaScriptWindowObjectCleared()} signal to a slot +which does the object creation and handoff to JavaScript. + + \snippet webkit/imageanalyzer/mainwindow.cpp MainWindow - addJSObject + +The ImageAnalyzer object is created and added to a JavaScript object on the web +page's mainFrame with \c addToJavaScriptWindowObject(). + + The start page is resources/index.html. + In one of its <div> regions, we have images, each + with an \c onClick() handler that calls \c addImage(). + + \snippet webkit/imageanalyzer/resources/index.html sample images + +Clicking an image adds it to an images list. + + \snippet webkit/imageanalyzer/resources/index.html addImage + +The \b {Analyze} button at the bottom of the image list is clicked when we +want to start the analysis: + + \snippet webkit/imageanalyzer/resources/index.html images list + +When the user clicks the \b {Analyze} button, \c analyzeImages() is called, +another regular JavaScript method, shown below. +Notice it assumes the \c imageAnalyzer object is already defined and initialized +in JavaScript space, but we guaranteed that by connecting our setup slot to the +appropriate signal, \l{QWebFrame::}{javaScriptWindowObjectCleared()}. + + \snippet webkit/imageanalyzer/resources/index.html analyzeImages + +The only methods on \c ImageAnalyzer that we can or do call from JavaScript are +those which are exposed through \{The Meta-Object System}{Qt's MetaObject} +system: \l{The Property System}{property} getter/setter methods, +\c public \l {Signals & Slots}{signals and slots}, and other +\l{Q_INVOKABLE}{Q_INVOKABLE} functions. + +\snippet webkit/imageanalyzer/imageanalyzer.h ImageAnalyzer - public interface +\dots +\snippet webkit/imageanalyzer/imageanalyzer.h ImageAnalyzer - private members + +Most of the members are set up in the constructor: + +\snippet webkit/imageanalyzer/imageanalyzer.cpp ImageAnalyzer - Constructor + +Back on the JavaScript side, we want to connect signals from this object to +JavaScript functions on our web page, after the web page is loaded, but before +the images are analyzed. + +From \c connectSlots(), we can see how to connect signals from the imageAnalyzer +object to regular JavaScript functions, which can also behave like slots. We use +this to monitor and display progress from the C++ side. + + \snippet webkit/imageanalyzer/resources/index.html connect slots + +The only public slot is \c startAnalysis(), called to place +a list of URLs into the image analyzer's QtConcurrent processing queue +from JavaScript space. + +\snippet webkit/imageanalyzer/imageanalyzer.cpp ImageAnalyzer - startAnalysis + +The images need to be loaded again now, which is why fetchURLs first checks the +cache to see if we can save an extra network get. + +\snippet webkit/imageanalyzer/imageanalyzer.cpp ImageAnalyzer - fetchURLs + +For the images that were not in the cache, \c handleReply() +will load them into a QImage when the data is ready. + +\snippet webkit/imageanalyzer/imageanalyzer.cpp ImageAnalyzer - handleReply + +After the images are loaded, they are queued up in preparation to be +sent in a batch for analysis to a \l QFutureWatcher, which will distribute the +processing across multiple threads and cores, depending on how many are available. + +\snippet webkit/imageanalyzer/imageanalyzer.cpp ImageAnalyzer - queueImage + +The function that gets performed on each image is \c averageRGB(), +as specified in argument 2 to the \l{QtConcurrent::mapped()} function. +Notice it repeats the same calculations 100 times on each pixel to keep the CPU +very busy. This is done only for the purposes of the demo so that the analysis +takes a noticeable time to complete. + +\snippet webkit/imageanalyzer/imageanalyzer.cpp ImageAnalyzer - averageRGB + +*/ + |