From de8a87c011dabde51aac5ae1fc984f04e3db22ae Mon Sep 17 00:00:00 2001 From: Venugopal Shivashankar Date: Tue, 11 Dec 2012 18:40:56 +0100 Subject: Doc: Added documentation for the quick1 demo applications Change-Id: Iebc7c1e7202fed95abf231913b48cec75675e7f1 Reviewed-by: Jerome Pasion --- doc/src/qml-folderlistmodel.qdoc | 135 +++++++++++++++++++++ .../demos/doc/images/qml-calculator-example.png | Bin 0 -> 33892 bytes examples/demos/doc/images/qml-minehunt-demo.png | Bin 0 -> 170648 bytes examples/demos/doc/images/qml-photoviewer-demo.png | Bin 0 -> 473306 bytes examples/demos/doc/images/qml-rssnews-demo.png | Bin 0 -> 128307 bytes examples/demos/doc/images/qml-samegame-demo.png | Bin 0 -> 213137 bytes examples/demos/doc/images/qml-snake-demo.png | Bin 0 -> 105053 bytes examples/demos/doc/images/qml-twitter-demo.png | Bin 0 -> 95812 bytes examples/demos/doc/src/qml-calculator.qdoc | 37 ++++++ examples/demos/doc/src/qml-minehunt.qdoc | 38 ++++++ examples/demos/doc/src/qml-photoviewer.qdoc | 37 ++++++ examples/demos/doc/src/qml-rssnews.qdoc | 37 ++++++ examples/demos/doc/src/qml-samegame.qdoc | 38 ++++++ examples/demos/doc/src/qml-snake.qdoc | 38 ++++++ examples/demos/doc/src/qml-twitter.qdoc | 38 ++++++ 15 files changed, 398 insertions(+) create mode 100644 doc/src/qml-folderlistmodel.qdoc create mode 100644 examples/demos/doc/images/qml-calculator-example.png create mode 100644 examples/demos/doc/images/qml-minehunt-demo.png create mode 100644 examples/demos/doc/images/qml-photoviewer-demo.png create mode 100644 examples/demos/doc/images/qml-rssnews-demo.png create mode 100644 examples/demos/doc/images/qml-samegame-demo.png create mode 100644 examples/demos/doc/images/qml-snake-demo.png create mode 100644 examples/demos/doc/images/qml-twitter-demo.png create mode 100644 examples/demos/doc/src/qml-calculator.qdoc create mode 100644 examples/demos/doc/src/qml-minehunt.qdoc create mode 100644 examples/demos/doc/src/qml-photoviewer.qdoc create mode 100644 examples/demos/doc/src/qml-rssnews.qdoc create mode 100644 examples/demos/doc/src/qml-samegame.qdoc create mode 100644 examples/demos/doc/src/qml-snake.qdoc create mode 100644 examples/demos/doc/src/qml-twitter.qdoc diff --git a/doc/src/qml-folderlistmodel.qdoc b/doc/src/qml-folderlistmodel.qdoc new file mode 100644 index 00000000..9ee6b692 --- /dev/null +++ b/doc/src/qml-folderlistmodel.qdoc @@ -0,0 +1,135 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + +\title FolderListModel - a C++ model plugin +\example src/imports/folderlistmodel + +This plugin shows how to make a C++ model available to QML. It presents +a simple file list for a single folder (directory) and allows the presented +folder to be changed. + +\image declarative-folderlistmodel.png The FolderListModel used to choose a QML file + +We do not explain the model implementation in detail, but rather focus on the mechanics of +making the model available to QML. + +\section1 Usage from QML + +The FolderListModel can be used from QML like this: + +\snippet qml/folderlistmodel.qml 0 + +This displays a list of all subfolders and QML files in the current folder. + +The FolderListModel \c folder property can be set to change the folder that +is currently displayed. + +\section1 Defining the Model + +We are subclassing QAbstractListModel which will allow us to give data to QML and +send notifications when the data changes: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h class begin + +As you see, we also inherit the QDeclarativeParserStatus interface, so that we +can delay initial processing until we have all properties set (via componentComplete() below). + +The first thing to do when devising a new type for QML is to define the properties +you want the type to have: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h class props + +The purposes of each of these should be pretty obvious - in QML we will set the folder +to display (a file: URL), and the kinds of files we want to show in the view of the model. + +Next are the constructor, destructor, and standard QAbstractListModel subclassing requirements: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h abslistmodel + +The data() function is where we provide model values. The rowCount() function +is also a standard part of the QAbstractListModel interface, but we also want to provide +a simpler count property: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h count + +Then we have the functions for the remaining properties which we defined above: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h prop funcs + +Imperative actions upon the model are made available to QML via a Q_INVOKABLE tag on +a normal member function. The isFolder(index) function says whether the value at \e index +is a folder: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h isfolder + +Then we have the QDeclarativeParserStatus interface: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h parserstatus + +Then the NOTIFY function for the folders property. The implementation will emit this +when the folder property is changed. + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h notifier + +The class ends with some implementation details: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h class end + +Lastly, the boilerplare to declare the type for QML use: + +\snippet src/imports/folderlistmodel/qdeclarativefolderlistmodel.h qml decl + +\section1 Connecting the Model to QML + +To make this class available to QML, we only need to make a simple subclass of QDeclarativeExtensionPlugin: + +\snippet src/imports/folderlistmodel/plugin.cpp class decl + +and then use the standard Qt plugin export macro: + +\snippet src/imports/folderlistmodel/plugin.cpp plugin export decl + +Finally, in order for QML to connect the "import" statement to our plugin, we list it in the qmldir file: + +\l{src/imports/folderlistmodel/qmldir} + +This qmldir file and the compiled plugin will be installed in \c $QTDIR/imports/Qt/labs/folderlistmodel/ where +the QML engine will find it (since \c $QTDIR/imports is the value of QLibraryInf::libraryPath()). + +\section1 Implementing the Model + +We'll not discuss the model implementation in detail, as it is not specific to QML - any Qt C++ model +can be interfaced to QML. +This implementation is basically just takes the krufty old QDirModel, +which is a tree with lots of detailed roles and re-presents it as a simpler list model where +each item is just a fileName and a filePath (as a file: URL rather than a plain file, since QML +works with URLs for all content). + +\l{src/imports/folderlistmodel/qdeclarativefolderlistmodel.cpp} +*/ diff --git a/examples/demos/doc/images/qml-calculator-example.png b/examples/demos/doc/images/qml-calculator-example.png new file mode 100644 index 00000000..0f9ced80 Binary files /dev/null and b/examples/demos/doc/images/qml-calculator-example.png differ diff --git a/examples/demos/doc/images/qml-minehunt-demo.png b/examples/demos/doc/images/qml-minehunt-demo.png new file mode 100644 index 00000000..3b695693 Binary files /dev/null and b/examples/demos/doc/images/qml-minehunt-demo.png differ diff --git a/examples/demos/doc/images/qml-photoviewer-demo.png b/examples/demos/doc/images/qml-photoviewer-demo.png new file mode 100644 index 00000000..be6f1bf1 Binary files /dev/null and b/examples/demos/doc/images/qml-photoviewer-demo.png differ diff --git a/examples/demos/doc/images/qml-rssnews-demo.png b/examples/demos/doc/images/qml-rssnews-demo.png new file mode 100644 index 00000000..b4143b46 Binary files /dev/null and b/examples/demos/doc/images/qml-rssnews-demo.png differ diff --git a/examples/demos/doc/images/qml-samegame-demo.png b/examples/demos/doc/images/qml-samegame-demo.png new file mode 100644 index 00000000..945f2b96 Binary files /dev/null and b/examples/demos/doc/images/qml-samegame-demo.png differ diff --git a/examples/demos/doc/images/qml-snake-demo.png b/examples/demos/doc/images/qml-snake-demo.png new file mode 100644 index 00000000..d3c077d1 Binary files /dev/null and b/examples/demos/doc/images/qml-snake-demo.png differ diff --git a/examples/demos/doc/images/qml-twitter-demo.png b/examples/demos/doc/images/qml-twitter-demo.png new file mode 100644 index 00000000..63d6486a Binary files /dev/null and b/examples/demos/doc/images/qml-twitter-demo.png differ diff --git a/examples/demos/doc/src/qml-calculator.qdoc b/examples/demos/doc/src/qml-calculator.qdoc new file mode 100644 index 00000000..a697638e --- /dev/null +++ b/examples/demos/doc/src/qml-calculator.qdoc @@ -0,0 +1,37 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \title Calculator + \example declarative/calculator + \brief Shows how to write a calculator in QML + \ingroup qmldemos + + This example shows how to write a simple calculator application in QML and JavaScript. + + \image qml-calculator-example.png +*/ diff --git a/examples/demos/doc/src/qml-minehunt.qdoc b/examples/demos/doc/src/qml-minehunt.qdoc new file mode 100644 index 00000000..37110fd3 --- /dev/null +++ b/examples/demos/doc/src/qml-minehunt.qdoc @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \title Minehunt + \example declarative/minehunt + \brief Shows how to write a Minehunt game in QML + \ingroup qmldemos + + This example shows how to create a simple Minehunt game, using QML for the + UI and C++ for the game logic. + + \image qml-minehunt-demo.png +*/ diff --git a/examples/demos/doc/src/qml-photoviewer.qdoc b/examples/demos/doc/src/qml-photoviewer.qdoc new file mode 100644 index 00000000..f2353d3a --- /dev/null +++ b/examples/demos/doc/src/qml-photoviewer.qdoc @@ -0,0 +1,37 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \title Photo Viewer + \example declarative/photoviewer + \brief Shows how to write a Flickr photo viewer in QML + \ingroup qmldemos + + This example shows how to write a Flickr photo viewer application in QML. + + \image qml-photoviewer-demo.png +*/ diff --git a/examples/demos/doc/src/qml-rssnews.qdoc b/examples/demos/doc/src/qml-rssnews.qdoc new file mode 100644 index 00000000..4b788255 --- /dev/null +++ b/examples/demos/doc/src/qml-rssnews.qdoc @@ -0,0 +1,37 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \title RSS News + \example declarative/rssnews + \brief Shows how to write an RSS news reader in QML + \ingroup qmldemos + + This example shows how to write an RSS news reader in QML. + + \image qml-rssnews-demo.png +*/ diff --git a/examples/demos/doc/src/qml-samegame.qdoc b/examples/demos/doc/src/qml-samegame.qdoc new file mode 100644 index 00000000..b7e0c55b --- /dev/null +++ b/examples/demos/doc/src/qml-samegame.qdoc @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \title Same Game + \example declarative/samegame + \brief Shows how to write a Same Game in QML + \ingroup qmldemos + + This example shows how to write a 'Same Game' game in QML, using Javascript + for all the game logic. + + \image qml-samegame-demo.png +*/ diff --git a/examples/demos/doc/src/qml-snake.qdoc b/examples/demos/doc/src/qml-snake.qdoc new file mode 100644 index 00000000..53feb11f --- /dev/null +++ b/examples/demos/doc/src/qml-snake.qdoc @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \title Snake + \example declarative/snake + \brief Shows how to write a Snake game in QML + \ingroup qmldemos + + This example shows how to write a Snake game in QML, controlled by the + keyboard as well as the mouse. + + \image qml-snake-demo.png +*/ diff --git a/examples/demos/doc/src/qml-twitter.qdoc b/examples/demos/doc/src/qml-twitter.qdoc new file mode 100644 index 00000000..e4ea5e10 --- /dev/null +++ b/examples/demos/doc/src/qml-twitter.qdoc @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \title Twitter Mobile + \example declarative/twitter + \brief Shows how to write a Twitter client in QML + \ingroup qmldemos + + This example shows how to write a mobile Twitter search client in QML. Use it to + see what people think about Qt Quick! + + \image qml-twitter-demo.png +*/ -- cgit v1.2.3