diff options
| -rw-r--r-- | doc/src/examples/fancybrowser.qdoc | 103 | ||||
| -rw-r--r-- | examples/webkit/fancybrowser/mainwindow.cpp | 20 | ||||
| -rw-r--r-- | examples/webkit/fancybrowser/mainwindow.h | 4 |
3 files changed, 122 insertions, 5 deletions
diff --git a/doc/src/examples/fancybrowser.qdoc b/doc/src/examples/fancybrowser.qdoc index 9001c20..8338d8b 100644 --- a/doc/src/examples/fancybrowser.qdoc +++ b/doc/src/examples/fancybrowser.qdoc @@ -40,12 +40,109 @@ ****************************************************************************/ /*! - \example webkit/fancybrowser - \title Fancy Browser Example + \example webkit/fancybrowser + \title Fancy Browser Example The Fancy Browser example shows how to use jQuery with QtWebKit to - make a web browser with some special effects and content manipulation. + 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 examples/webkit/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 examples/webkit/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 examples/webkit/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 examples/webkit/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 examples/webkit/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 + objecti, 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 examples/webkit/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 examples/webkit/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. + + \snippet examples/webkit/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 \i {a}, which is the tag for a hyperlink. + For each such element, the background color is set to be yellow by + using CSS. + + \snippet examples/webkit/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 \i {img} elements and rotates the images 180 degrees + and then back again. + + \snippet examples/webkit/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 \i {src} attribute of all the elements on the web page. Any element with + a \i {gif} file as its source is removed. \c removeInlineFrames() removes all + \i {iframe} or inline elements. \c removeObjectElements() removes all + \i {object} elements, and \c removeEmbeddedElements() removes any elements + such as plugins embedded on the page using the \i {embed} element. + */ + diff --git a/examples/webkit/fancybrowser/mainwindow.cpp b/examples/webkit/fancybrowser/mainwindow.cpp index bf61f9c..e24f6cf 100644 --- a/examples/webkit/fancybrowser/mainwindow.cpp +++ b/examples/webkit/fancybrowser/mainwindow.cpp @@ -43,6 +43,8 @@ #include <QtWebKit> #include "mainwindow.h" +//! [1] + MainWindow::MainWindow() { progress = 0; @@ -52,7 +54,9 @@ MainWindow::MainWindow() file.open(QIODevice::ReadOnly); jQuery = file.readAll(); file.close(); +//! [1] +//! [2] view = new QWebView(this); view->load(QUrl("http://www.google.com/ncr")); connect(view, SIGNAL(loadFinished(bool)), SLOT(adjustLocation())); @@ -70,7 +74,9 @@ MainWindow::MainWindow() toolBar->addAction(view->pageAction(QWebPage::Reload)); toolBar->addAction(view->pageAction(QWebPage::Stop)); toolBar->addWidget(locationEdit); +//! [2] +//! [3] QMenu *effectMenu = menuBar()->addMenu(tr("&Effect")); effectMenu->addAction("Highlight all links", this, SLOT(highlightAllLinks())); @@ -89,7 +95,9 @@ MainWindow::MainWindow() setCentralWidget(view); } +//! [3] +//! [4] void MainWindow::adjustLocation() { locationEdit->setText(view->url().toString()); @@ -98,11 +106,12 @@ void MainWindow::adjustLocation() void MainWindow::changeLocation() { QUrl url = QUrl(locationEdit->text()); - locationEdit->setText(url.toString()); view->load(url); view->setFocus(); } +//! [4] +//! [5] void MainWindow::adjustTitle() { if (progress <= 0 || progress >= 100) @@ -116,20 +125,26 @@ void MainWindow::setProgress(int p) progress = p; adjustTitle(); } +//! [5] +//! [6] void MainWindow::finishLoading(bool) { progress = 100; adjustTitle(); view->page()->mainFrame()->evaluateJavaScript(jQuery); } +//! [6] +//! [7] void MainWindow::highlightAllLinks() { QString code = "$('a').each( function () { $(this).css('background-color', 'yellow') } )"; view->page()->mainFrame()->evaluateJavaScript(code); } +//! [7] +//! [8] void MainWindow::rotateImages(bool toggle) { QString code = "$('img').each( function () { $(this).css('-webkit-transition', '-webkit-transform 2s') } )"; @@ -140,7 +155,9 @@ void MainWindow::rotateImages(bool toggle) code = "$('img').each( function () { $(this).css('-webkit-transform', 'rotate(0deg)') } )"; view->page()->mainFrame()->evaluateJavaScript(code); } +//! [8] +//! [9] void MainWindow::removeGifImages() { QString code = "$('[src*=gif]').remove()"; @@ -164,4 +181,5 @@ void MainWindow::removeEmbeddedElements() QString code = "$('embed').remove()"; view->page()->mainFrame()->evaluateJavaScript(code); } +//! [9] diff --git a/examples/webkit/fancybrowser/mainwindow.h b/examples/webkit/fancybrowser/mainwindow.h index 9362ca7..2e1068c 100644 --- a/examples/webkit/fancybrowser/mainwindow.h +++ b/examples/webkit/fancybrowser/mainwindow.h @@ -39,13 +39,14 @@ ** ****************************************************************************/ -#include <QMainWindow> +#include <QtGui> QT_BEGIN_NAMESPACE class QWebView; class QLineEdit; QT_END_NAMESPACE +//! [1] class MainWindow : public QMainWindow { Q_OBJECT @@ -73,4 +74,5 @@ private: QWebView *view; QLineEdit *locationEdit; int progress; +//! [1] }; |