diff options
author | Bea Lam <bea.lam@nokia.com> | 2010-05-19 07:10:14 (GMT) |
---|---|---|
committer | Bea Lam <bea.lam@nokia.com> | 2010-05-19 07:10:14 (GMT) |
commit | d395903e4d061a30117f7b925bdad41771a29067 (patch) | |
tree | e7e2e2d09afc77af51197f5d4954249b21ee9a44 /doc | |
parent | 8238ef5d6648ca8fde2c709d6125772cac6a11a5 (diff) | |
parent | f5588a2177452de29804e67ae8cd45c50f6dfdba (diff) | |
download | Qt-d395903e4d061a30117f7b925bdad41771a29067.zip Qt-d395903e4d061a30117f7b925bdad41771a29067.tar.gz Qt-d395903e4d061a30117f7b925bdad41771a29067.tar.bz2 |
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7
Conflicts:
doc/src/snippets/declarative/listview/highlight.qml
doc/src/snippets/declarative/listview/listview.qml
Diffstat (limited to 'doc')
-rw-r--r-- | doc/src/declarative/examples.qdoc | 6 | ||||
-rw-r--r-- | doc/src/declarative/qmlruntime.qdoc | 26 | ||||
-rw-r--r-- | doc/src/examples/qml-folderlistmodel.qdoc | 144 | ||||
-rw-r--r-- | doc/src/images/declarative-folderlistmodel.png | bin | 0 -> 17764 bytes | |||
-rw-r--r-- | doc/src/snippets/declarative/folderlistmodel.qml | 17 | ||||
-rw-r--r-- | doc/src/snippets/declarative/gridview/gridview.qml | 2 | ||||
-rw-r--r-- | doc/src/snippets/declarative/listview/highlight.qml | 63 |
7 files changed, 244 insertions, 14 deletions
diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc index bc02646..5b8c937 100644 --- a/doc/src/declarative/examples.qdoc +++ b/doc/src/declarative/examples.qdoc @@ -167,5 +167,11 @@ For example, from your build directory, run: \o \l{demos/declarative/snake}{Snake} \endlist +\section1 Labs + +\list +\o \l{src/imports/folderlistmodel}{Folder List Model} - a C++ model plugin +\endlist + */ diff --git a/doc/src/declarative/qmlruntime.qdoc b/doc/src/declarative/qmlruntime.qdoc index b105df4..cef5e63 100644 --- a/doc/src/declarative/qmlruntime.qdoc +++ b/doc/src/declarative/qmlruntime.qdoc @@ -42,17 +42,17 @@ /*! \page qmlruntime.html \title Qt Declarative UI Runtime - \keyword qml runtime + \keyword QML Viewer \ingroup qttools This page documents the \e{Declarative UI Runtime} for the Qt GUI - toolkit, and the \QQL which can be used to run apps - written for the runtime. The \QQL reads a declarative + toolkit, and the \QQV which can be used to run apps + written for the runtime. The \QQV reads a declarative user interface definition (\c .qml) file and displays the user interface it describes. QML is a runtime, as you can run plain QML files which pull in their required modules. To run apps with the QML runtime, you can either start the runtime - from your own application (using a QDeclarativeView) or with the simple \QQL. + from your own application (using a QDeclarativeView) or with the simple \QQV. The launcher can be installed in a production environment, assuming that it is not already present in the system. It is generally packaged alongside Qt. @@ -61,16 +61,16 @@ \list \o Write your own Qt application including a QDeclarative view and deploy it the same as any other Qt application (not discussed further on this page), or - \o Write a main QML file for your application, and run your application using the included \QQL. + \o Write a main QML file for your application, and run your application using the included \QQV. \endlist - To run an application with the \QQL, pass the filename as an argument: + To run an application with the \QQV, pass the filename as an argument: \code - qml myQmlFile.qml + qmlviewer myQmlFile.qml \endcode - Deploying a QML application via the \QQL allows for QML only deployments, but can also + Deploying a QML application via the \QQV allows for QML only deployments, but can also include custom C++ modules just as easily. Below is an example of how you might structure a complex application deployed via the QML runtime, it is a listing of the files that would be included in the deployment package. @@ -92,8 +92,8 @@ as the appropriate module file is chosen based on platform naming conventions. The C++ modules must contain a QDeclarativeExtentionPlugin subclass. - The application would be executed either with your own application, the command 'qml MyApp.qml' or by - opening the file if your system has the \QQL registered as the handler for QML files. The MyApp.qml file would have access + The application would be executed either with your own application, the command 'qmlviewer MyApp.qml' or by + opening the file if your system has the \QQV registered as the handler for QML files. The MyApp.qml file would have access to all of the deployed types using the import statements such as the following: \code @@ -101,15 +101,15 @@ import "OtherModule" 1.0 as Other \endcode - \section1 Qt QML Launcher functionality - The \QQL implements some additional functionality to help it supporting + \section1 Qt QML Viewer functionality + The \QQV implements some additional functionality to help it supporting myriad applications. If you implement your own application, you may also wish to reimplement some or all of this functionality. However, much of this functionality is intended to aid the prototyping of QML applications and may not be necessary for a deployed application. \section2 Options - When run with the \c -help option, \c qml shows available options. + When run with the \c -help option, \c qmlviewer shows available options. \section2 Translations diff --git a/doc/src/examples/qml-folderlistmodel.qdoc b/doc/src/examples/qml-folderlistmodel.qdoc new file mode 100644 index 0000000..b820528 --- /dev/null +++ b/doc/src/examples/qml-folderlistmodel.qdoc @@ -0,0 +1,144 @@ +/**************************************************************************** +** +** Copyright (C) 2010 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:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $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 type we are creating can be used from QML like this: + +\snippet doc/src/snippets/declarative/folderlistmodel.qml 0 + +\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/doc/src/images/declarative-folderlistmodel.png b/doc/src/images/declarative-folderlistmodel.png Binary files differnew file mode 100644 index 0000000..a469f96 --- /dev/null +++ b/doc/src/images/declarative-folderlistmodel.png diff --git a/doc/src/snippets/declarative/folderlistmodel.qml b/doc/src/snippets/declarative/folderlistmodel.qml new file mode 100644 index 0000000..e90f9fd --- /dev/null +++ b/doc/src/snippets/declarative/folderlistmodel.qml @@ -0,0 +1,17 @@ +//![0] +import Qt 4.7 +import Qt.labs.folderlistmodel 1.0 + +ListView { + FolderListModel { + id: foldermodel + nameFilters: ["*.qml"] + } + Component { + id: filedelegate + Text { text: fileName } + } + model: foldermodel + delegate: filedelegate +} +//![0] diff --git a/doc/src/snippets/declarative/gridview/gridview.qml b/doc/src/snippets/declarative/gridview/gridview.qml index cf345aa..1d3df97 100644 --- a/doc/src/snippets/declarative/gridview/gridview.qml +++ b/doc/src/snippets/declarative/gridview/gridview.qml @@ -4,7 +4,7 @@ import Qt 4.7 Rectangle { width: 240; height: 180; color: "white" // ContactModel model is defined in dummydata/ContactModel.qml - // The launcher automatically loads files in dummydata/* to assist + // The viewer automatically loads files in dummydata/* to assist // development without a real data source. // Define a delegate component. A component will be diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml new file mode 100644 index 0000000..794b3f2 --- /dev/null +++ b/doc/src/snippets/declarative/listview/highlight.qml @@ -0,0 +1,63 @@ +import Qt 4.7 + +Rectangle { + width: 180; height: 200; color: "white" + + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: delegate + Item { + id: wrapper + width: 180; height: 40 + Column { + x: 5; y: 5 + Text { text: '<b>Name:</b> ' + name } + Text { text: '<b>Number:</b> ' + number } + } + // Use the ListView.isCurrentItem attached property to + // indent the item if it is the current item. + states: [ + State { + name: "Current" + when: wrapper.ListView.isCurrentItem + PropertyChanges { target: wrapper; x: 10 } + } + ] + transitions: [ + Transition { NumberAnimation { properties: "x"; duration: 200 } } + ] + } + } +//! [0] + // Specify a highlight with custom movement. Note that autoHighlight + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. +//! [1] + Component { + id: highlight + Rectangle { + width: 180; height: 40 + color: "lightsteelblue"; radius: 5 + SpringFollow on y { + to: list.currentItem.y + spring: 3 + damping: 0.2 + } + } + } + ListView { + id: list + width: parent.height; height: parent.height + model: ContactModel; delegate: delegate + highlight: highlight + highlightFollowsCurrentItem: false + focus: true + } +//! [1] +} |