diff options
author | Qt Continuous Integration System <qt-info@nokia.com> | 2010-05-19 23:39:52 (GMT) |
---|---|---|
committer | Qt Continuous Integration System <qt-info@nokia.com> | 2010-05-19 23:39:52 (GMT) |
commit | 2ba48e94330957158a82cc56d13bf2c301f33c22 (patch) | |
tree | cacdfa4595123374b3d200ac830cb727a1ec216c /doc/src | |
parent | 178a4e12da0601ecc662851e5bf7f124932e1a12 (diff) | |
parent | 83df329a42107764889f46b9019a37804c36776a (diff) | |
download | Qt-2ba48e94330957158a82cc56d13bf2c301f33c22.zip Qt-2ba48e94330957158a82cc56d13bf2c301f33c22.tar.gz Qt-2ba48e94330957158a82cc56d13bf2c301f33c22.tar.bz2 |
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7-integration
* '4.7' of scm.dev.nokia.troll.no:qt/qt-qml: (37 commits)
Search for QML import libraries also in application directory
Doc improvements
Disable mouse-based selection in TextInput/TextEdit
Rename qml executable to qmlviewer
Don't crash if the target parent is destroyed.
Introduce a threaded interpreter for QML binding bytecode
Bug moved.
doc
doc
Remove image example (covered in class docs)
When changing Loader source, remove old item from scene immediately.
Add missing .qmlproject files
Fix folderlistmodel with qt namespace
Renaming "Qml Launcher" back to "QML Viewer"
Rename some examples: proxyviewer -> networkaccessmanagerfactory,
Regression fix for Loader anchors not working
Make Qt.include() work for js files that have '.pragma library'
doc fix
Improve docs for Qt.quit()
Prevent assignment of values (string, number, bool) to signal handlers.
...
Diffstat (limited to 'doc/src')
18 files changed, 369 insertions, 87 deletions
diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc index cdc308a..5b8c937 100644 --- a/doc/src/declarative/examples.qdoc +++ b/doc/src/declarative/examples.qdoc @@ -82,7 +82,6 @@ For example, from your build directory, run: \section2 Image Elements \list \o \l{declarative/imageelements/borderimage}{BorderImage} -\o \l{declarative/imageelements/image}{Image} \endlist \section2 \l{declarative/positioners}{Positioners} @@ -122,7 +121,6 @@ For example, from your build directory, run: \section2 XML \list -\o \l{declarative/xml/xmldata}{XML data} \o \l{declarative/xml/xmlhttprequest}{XmlHttpRequest} \endlist @@ -140,20 +138,20 @@ For example, from your build directory, run: \list \o \l{declarative/cppextensions/referenceexamples}{Reference examples} (discussed in \l {Extending QML in C++}) \o \l{declarative/cppextensions/plugins}{Plugins} -\o \l{declarative/cppextensions/proxywidgets}{QtWidgets} \o \l{declarative/cppextensions/qgraphicslayouts}{QGraphicsLayouts} +\o \l{declarative/cppextensions/qwidgets}{QWidgets} \o \l{declarative/cppextensions/imageprovider}{Image provider} -\o \l{declarative/cppextensions/proxyviewer}{Network access manager factory} +\o \l{declarative/cppextensions/networkaccessmanagerfactory}{Network access manager factory} \endlist \section2 Toys \list \o \l{declarative/toys/clocks}{Clocks} +\o \l{declarative/toys/corkboards}{Corkboards} \o \l{declarative/toys/dial}{Dial} -\o \l{declarative/toys/dynamic}{Dynamic} +\o \l{declarative/toys/dynamicscene}{Dynamic Scene} \o \l{declarative/toys/tic-tac-toe}{Tic Tac Toe} \o \l{declarative/toys/tvtennis}{TV Tennis} -\o \l{declarative/toys/velocity}{Velocity} \endlist @@ -161,12 +159,19 @@ For example, from your build directory, run: \list \o \l{demos/declarative/calculator}{Calculator} +\o \l{demos/declarative/flickr}{Flickr Mobile} \o \l{demos/declarative/minehunt}{Minehunt} \o \l{demos/declarative/photoviewer}{Photo Viewer} -\o \l{demos/declarative/flickr}{Flickr Mobile} +\o \l{demos/declarative/rssnews}{RSS News Reader} \o \l{demos/declarative/samegame}{Same Game} \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/extending.qdoc b/doc/src/declarative/extending.qdoc index 5b695f7..574b0b2 100644 --- a/doc/src/declarative/extending.qdoc +++ b/doc/src/declarative/extending.qdoc @@ -61,8 +61,11 @@ QML for their own independent use. The QML snippet shown above instantiates one \c Person instance and sets the \c name and \c shoeSize properties on it. Everything in QML ultimately comes down to either instantiating an object instance, or assigning a property a value. + QML relies heavily on Qt's meta object system and can only instantiate classes -that derive from QObject. +that derive from QObject. For visual element types, this will usually mean a subclass +of QDeclarativeItem; for models used with the view elements, a subclass of QAbstractItemModel; +and for abitrary objects with properties, a direct subclass of QObject. The QML engine has no intrinsic knowledge of any class types. Instead the programmer must register the C++ types with their corresponding QML names. diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc index e2b8bb6..4c4a317 100644 --- a/doc/src/declarative/focus.qdoc +++ b/doc/src/declarative/focus.qdoc @@ -67,7 +67,12 @@ item and thus subsequently be \l {QEvent::ignore()}{ignored}. \code Item { Item { - Keys.onPressed: if (event.key == Qt.Key_A) { console.log('Key A was pressed'); event.accepted = true } + Keys.onPressed: { + if (event.key == Qt.Key_A) { + console.log('Key A was pressed'); + event.accepted = true; + } + } Rectangle {} } } diff --git a/doc/src/declarative/globalobject.qdoc b/doc/src/declarative/globalobject.qdoc index 2a83e30..c29a796 100644 --- a/doc/src/declarative/globalobject.qdoc +++ b/doc/src/declarative/globalobject.qdoc @@ -219,8 +219,9 @@ Binary to ASCII - this function returns a base64 encoding of \c data. ASCII to binary - this function returns a base64 decoding of \c data. \section3 Qt.quit() -This function causes the QML engine to emit the quit signal, which in -\l {Qt Declarative UI Runtime}{qml} causes the runtime to quit. +This function causes the QDeclarativeEngine::quit() signal to be emitted. +Within the \l {Qt Declarative UI Runtime}{qml} application this causes the +launcher application to exit. \section3 Qt.resolvedUrl(url) This function returns \c url resolved relative to the URL of the diff --git a/doc/src/declarative/pics/trivialListView.png b/doc/src/declarative/pics/listview-highlight.png Binary files differindex dc5c6b3..dc5c6b3 100644 --- a/doc/src/declarative/pics/trivialListView.png +++ b/doc/src/declarative/pics/listview-highlight.png diff --git a/doc/src/declarative/pics/listview-simple.png b/doc/src/declarative/pics/listview-simple.png Binary files differnew file mode 100644 index 0000000..71a1c51 --- /dev/null +++ b/doc/src/declarative/pics/listview-simple.png diff --git a/doc/src/declarative/qdeclarativemodels.qdoc b/doc/src/declarative/qdeclarativemodels.qdoc index 788d417..109d390 100644 --- a/doc/src/declarative/qdeclarativemodels.qdoc +++ b/doc/src/declarative/qdeclarativemodels.qdoc @@ -99,7 +99,8 @@ There are a number of QML elements that operate using data models: \endlist QML supports several types of data model, which may be provided by QML -or C++ (via QDeclarativeContext::setContextProperty(), for example). +or C++ (via QDeclarativeContext::setContextProperty() or as plugin types, +for example). \section1 QML Data Models @@ -210,8 +211,13 @@ will be positioned by the view. \section1 C++ Data Models +Models defined in C++ can be made available to QML either from a C++ application or from a +\l{QDeclarativeExtensionPlugin}{QML C++ plugin}. + \section2 QAbstractItemModel +A model can be defined by subclassing QAbstractItemModel. + QAbstractItemModel provides the roles set via the QAbstractItemModel::setRoleNames() method. The default role names set by Qt are: @@ -227,7 +233,18 @@ The default role names set by Qt are: \o decoration \endtable -QAbstractItemModel presents a heirachy of tables. Views currently provided by QML +The model could be made available to QML either directly: + +\code +QDeclarativeContext *ctxt = view.rootContext(); +MyModel *model = new MyModel; // subclass of QAbstractItemModel +ctxt->setContextProperty("myModel", model); +\endcode + +or by registering the subclass as a new QML type in +a \l{QDeclarativeExtensionPlugin}{QML C++ plugin}. + +QAbstractItemModel presents a heirachy of tables, but views currently provided by QML can only display list data. In order to display child lists of a heirachical model the VisualDataModel element provides several properties and functions for use @@ -242,7 +259,7 @@ with models of type QAbstractItemModel: \section2 QStringList -QStringList provides the contents of the list via the \e modelData role: +A model may be a simple QStringList, which provides the contents of the list via the \e modelData role: \table \row 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-examples.qdoc b/doc/src/examples/qml-examples.qdoc index 22113ee..7a0fcca 100644 --- a/doc/src/examples/qml-examples.qdoc +++ b/doc/src/examples/qml-examples.qdoc @@ -71,13 +71,6 @@ */ /*! - \title Image - \example declarative/imageelements/image - - This example shows uses of the \l Image element in QML. -*/ - -/*! \title Reference examples \example declarative/cppextensions/referenceexamples */ @@ -88,13 +81,13 @@ */ /*! - \title QtWidgets - \example declarative/cppextensions/proxywidgets + \title QGraphicsLayouts + \example declarative/cppextensions/qgraphicslayouts */ /*! - \title QGraphicsLayouts - \example declarative/cppextensions/qgraphicslayouts + \title QWidgets + \example declarative/cppextensions/qwidgets */ /*! @@ -104,7 +97,7 @@ /*! \title Network access manager - \example declarative/cppextensions/proxyviewer + \example declarative/cppextensions/networkaccessmanagerfactory */ /*! @@ -175,7 +168,7 @@ */ /*! - \title Threaded ListModel + \title Threaded ListModel \example declarative/threading/threadedlistmodel */ @@ -192,6 +185,11 @@ */ /*! + \title Corkboards + \example declarative/toys/corkboards +*/ + +/*! \title Dial \example declarative/toys/dial @@ -199,8 +197,8 @@ */ /*! - \title Dynamic - \example declarative/toys/dynamic + \title Dynamic Scene + \example declarative/toys/dynamicscene This example shows how to create dynamic objects QML. */ @@ -216,11 +214,6 @@ */ /*! - \title Velocity - \example declarative/toys/velocity -*/ - -/*! \title Gestures \example declarative/touchinteraction/gestures */ @@ -268,11 +261,6 @@ */ /*! - \title XML Data - \example declarative/xml/xmldata -*/ - -/*! \title XMLHttpRequest \example declarative/xml/xmlhttprequest */ 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/examples/qml-rssnews.qdoc b/doc/src/examples/qml-rssnews.qdoc new file mode 100644 index 0000000..0e7bdef --- /dev/null +++ b/doc/src/examples/qml-rssnews.qdoc @@ -0,0 +1,49 @@ +/**************************************************************************** +** +** 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 RSS News + \example demos/declarative/rssnews + + This demo shows how to write a RSS news reader in QML. + + \image qml-rssnews-example.png +*/ 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/images/qml-rssnews-example.png b/doc/src/images/qml-rssnews-example.png Binary files differnew file mode 100644 index 0000000..948ef4d --- /dev/null +++ b/doc/src/images/qml-rssnews-example.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/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/ContactModel.qml index 20687cf..b930c06 100644 --- a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml +++ b/doc/src/snippets/declarative/listview/ContactModel.qml @@ -1,7 +1,7 @@ +//![0] import Qt 4.7 ListModel { - id: contactModel ListElement { name: "Bill Smith" number: "555 3264" @@ -15,3 +15,4 @@ ListModel { number: "555 0473" } } +//![0] diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml index 1282f8d..794b3f2 100644 --- a/doc/src/snippets/declarative/listview/highlight.qml +++ b/doc/src/snippets/declarative/listview/highlight.qml @@ -4,7 +4,7 @@ Rectangle { width: 180; height: 200; 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/listview.qml b/doc/src/snippets/declarative/listview/listview.qml index 44f0540..1e9ccd9 100644 --- a/doc/src/snippets/declarative/listview/listview.qml +++ b/doc/src/snippets/declarative/listview/listview.qml @@ -1,49 +1,101 @@ +//![import] import Qt 4.7 +//![import] -//! [3] -Rectangle { - width: 180; height: 200; color: "white" +Item { + +//![classdocs simple] +ListView { + width: 180; height: 200 + + model: ContactModel {} + delegate: Text { + text: name + ": " + number + } +} +//![classdocs simple] - // ContactModel model is defined in dummydata/ContactModel.qml - // The launcher automatically loads files in dummydata/* to assist - // development without a real data source. +//![classdocs advanced] +Rectangle { + width: 180; height: 200 - // Define a delegate component. A component will be - // instantiated for each visible item in the list. -//! [0] Component { - id: delegate + id: contactDelegate Item { - id: wrapper width: 180; height: 40 Column { - x: 5; y: 5 Text { text: '<b>Name:</b> ' + name } Text { text: '<b>Number:</b> ' + number } } } } -//! [0] - // Define a highlight component. Just one of these will be instantiated - // by each ListView and placed behind the current item. -//! [1] - Component { - id: highlight - Rectangle { - color: "lightsteelblue" - radius: 5 - } - } -//! [1] - // The actual list -//! [2] + ListView { - width: parent.width; height: parent.height - model: ContactModel - delegate: delegate - highlight: highlight + anchors.fill: parent + model: ContactModel {} + delegate: contactDelegate + highlight: Rectangle { color: "lightsteelblue"; radius: 5 } focus: true } -//! [2] } -//! [3] +//![classdocs advanced] + +//![delayRemove] +Component { + id: delegate + Item { + ListView.onRemove: SequentialAnimation { + PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: true } + NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad } + PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false } + } + } +} +//![delayRemove] + +//![highlightFollowsCurrentItem] +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: 180; height: 200 + model: ContactModel {} + delegate: Text { text: name } + + highlight: highlight + highlightFollowsCurrentItem: false + focus: true +} +//![highlightFollowsCurrentItem] + +//![isCurrentItem] +ListView { + width: 180; height: 200 + + Component { + id: contactsDelegate + Text { + id: contactInfo + text: name + ": " + number + color: contactInfo.ListView.isCurrentItem ? "red" : "black" + } + } + + model: ContactModel {} + delegate: contactsDelegate + focus: true +} +//![isCurrentItem] + +} |