summaryrefslogtreecommitdiffstats
path: root/doc
diff options
context:
space:
mode:
Diffstat (limited to 'doc')
-rw-r--r--doc/src/declarative/animation.qdoc16
-rw-r--r--doc/src/declarative/declarativeui.qdoc1
-rw-r--r--doc/src/declarative/dynamicobjects.qdoc4
-rw-r--r--doc/src/declarative/examples.qdoc7
-rw-r--r--doc/src/declarative/focus.qdoc4
-rw-r--r--doc/src/declarative/globalobject.qdoc6
-rw-r--r--doc/src/declarative/qdeclarativei18n.qdoc3
-rw-r--r--doc/src/declarative/qdeclarativemodels.qdoc347
-rw-r--r--doc/src/declarative/qdeclarativestates.qdoc3
-rw-r--r--doc/src/declarative/qmlruntime.qdoc275
-rw-r--r--doc/src/declarative/qmlviewer.qdoc234
-rw-r--r--doc/src/declarative/tutorial.qdoc2
-rw-r--r--doc/src/examples/qml-examples.qdoc15
-rw-r--r--doc/src/images/qml-abstractitemmodel-example.pngbin0 -> 4478 bytes
-rw-r--r--doc/src/images/qml-focus-example.pngbin43921 -> 31370 bytes
-rw-r--r--doc/src/images/qml-xmlhttprequest-example.pngbin21311 -> 20934 bytes
-rw-r--r--doc/src/snippets/declarative/visualdatamodel_rootindex/view.qml2
17 files changed, 583 insertions, 336 deletions
diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc
index 13202ee..c5333df 100644
--- a/doc/src/declarative/animation.qdoc
+++ b/doc/src/declarative/animation.qdoc
@@ -71,13 +71,15 @@ to explicitly set the \c target and \c property to animate.
Animations can be joined into a group using SequentialAnimation and ParallelAnimation.
+See the \l {declarative/animation/basics}{Animation basics example} for a demonstration of creating and combining multiple animations in QML.
+
\target state-transitions
\section1 Transitions
-QML transitions describe animations to perform when \l{qmlstates}{state} changes occur. A transition
+\l Transition elements describe the animations to perform when \l{qmlstates}{state} changes occur. A transition
can only be triggered by a state change.
-For example, a transition could describe how an item moves from its initial position to its new position:
+For example, a \l Transition could describe how an item moves from its initial position to its new position:
\snippet doc/src/snippets/declarative/animation.qml transitions-1
@@ -108,9 +110,13 @@ making use of both sequential and parallel animations:
\snippet doc/src/snippets/declarative/animation.qml transitions-3
+
+See \l {declarative/animation/states}{States and Transitions example} for a simple example of how transitions can be applied.
+
+
\section1 Property Behaviors
-A \l{Behavior}{property behavior} specifies a default animation to run whenever the property's value changes, regardless
+A property \l {Behavior}{behavior} specifies a default animation to run whenever the property's value changes, regardless
of what caused the change. The \c enabled property can be used to force a \l Behavior
to only apply under certain circumstances.
@@ -119,7 +125,7 @@ whenever it changes. The animation will last 300 milliseconds and use an \l{Prop
\snippet doc/src/snippets/declarative/animation.qml behavior
-Like using an animation as a value source, when used in a Behavior and animation does not need to specify
+Like using an animation as a value source, when used in a \l Behavior and animation does not need to specify
a \c target or \c property.
To trigger this behavior, we could enter a state that changes \c x:
@@ -149,4 +155,6 @@ If \c x were bound to another property, triggering the binding would also trigge
If a state change has a transition animation matching a property with a \l Behavior, the transition animation
will override the \l Behavior for that state change.
+The \l {declarative/animation/behaviors}{Behaviors example} shows how behaviors can be used to provide animations.
+
*/
diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc
index f113147..4235c27 100644
--- a/doc/src/declarative/declarativeui.qdoc
+++ b/doc/src/declarative/declarativeui.qdoc
@@ -104,6 +104,7 @@ application or to build completely new applications. QML is fully \l
\o \l {QML Security}
\o \l {QtDeclarative Module}
\o \l {Debugging QML}
+\o \l {QML Viewer}
\o \l {QML Performance}
\o \l {QML Coding Conventions}
\endlist
diff --git a/doc/src/declarative/dynamicobjects.qdoc b/doc/src/declarative/dynamicobjects.qdoc
index de65a12..a5e53a9 100644
--- a/doc/src/declarative/dynamicobjects.qdoc
+++ b/doc/src/declarative/dynamicobjects.qdoc
@@ -39,8 +39,12 @@ QML also supports the dynamic creation of objects from within JavaScript
code. This is useful if the existing QML elements do not fit the needs of your
application, and there are no C++ components involved.
+See the {declarative/toys/dynamicscene}{Dynamic Scene example} for a demonstration
+of the concepts discussed on this page.
+
\section1 Creating Objects Dynamically
+
There are two ways to create objects dynamically from JavaScript. You can either call
\l {QML:Qt::createComponent()}{Qt.createComponent()} to create
a component which instantiates items, or use \l{QML:Qt::createQmlObject()}{Qt.createQmlObject()}
diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc
index 7b02d33..587cdf2 100644
--- a/doc/src/declarative/examples.qdoc
+++ b/doc/src/declarative/examples.qdoc
@@ -168,11 +168,14 @@ The examples can be found in Qt's \c examples/declarative directory.
\list
\o \l{declarative/modelviews/gridview}{GridView}
\o \l{declarative/modelviews/listview}{ListView}
-\o \l{declarative/modelviews/objectlistmodel}{Object ListModel}
\o \l{declarative/modelviews/package}{Package}
\o \l{declarative/modelviews/parallax}{Parallax}
-\o \l{declarative/modelviews/stringlistmodel}{String ListModel}
\o \l{declarative/modelviews/visualitemmodel}{VisualItemModel}
+
+\o \l{declarative/modelviews/stringlistmodel}{String ListModel}
+\o \l{declarative/modelviews/objectlistmodel}{Object ListModel}
+\o \l{declarative/modelviews/abstractitemmodel}{AbstractItemModel}
+
\o \l{declarative/modelviews/webview}{WebView}
\endlist
diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc
index 699ebcb..cc546c0 100644
--- a/doc/src/declarative/focus.qdoc
+++ b/doc/src/declarative/focus.qdoc
@@ -266,6 +266,10 @@ When a QML item explicitly relinquishes focus (by setting its
does not automatically select another element to receive focus. That is, it
is possible for there to be no currently \e {active focus}.
+See the {declarative/keyinteraction/focus}{Keyboard Focus example} for a
+demonstration of moving keyboard focus between multiple areas using FocusScope
+elements.
+
\section1 Advanced uses of Focus Scopes
Focus scopes allow focus to allocation to be easily partitioned. Several
diff --git a/doc/src/declarative/globalobject.qdoc b/doc/src/declarative/globalobject.qdoc
index ecbaa9e..36d91ec 100644
--- a/doc/src/declarative/globalobject.qdoc
+++ b/doc/src/declarative/globalobject.qdoc
@@ -114,6 +114,9 @@ browser. The following objects and properties are supported by the QML implemen
\endtable
+The \l{declarative/xml/xmlhttprequest}{XMLHttpRequest example} demonstrates how to
+use the XMLHttpRequest object to make a request and read the response headers.
+
\section1 Offline Storage API
\section2 Database API
@@ -132,6 +135,9 @@ The API can be used from JavaScript functions in your QML:
The API conforms to the Synchronous API of the HTML5 Web Database API,
\link http://www.w3.org/TR/2009/WD-webdatabase-20091029/ W3C Working Draft 29 October 2009\endlink.
+The \l{declarative/sqllocalstorage}{SQL Local Storage example} demonstrates the basics of
+using the Offline Storage API.
+
\section3 db = openDatabaseSync(identifier, version, description, estimated_size, callback(db))
Returns the database identified by \e identifier. If the database does not already exist, it
diff --git a/doc/src/declarative/qdeclarativei18n.qdoc b/doc/src/declarative/qdeclarativei18n.qdoc
index c16dea3..40f7919 100644
--- a/doc/src/declarative/qdeclarativei18n.qdoc
+++ b/doc/src/declarative/qdeclarativei18n.qdoc
@@ -78,4 +78,7 @@ Finally, we can test the translation:
\code
qml -translation hello.qm hello.qml
\endcode
+
+
+You can see a complete example and source code in the {declarative/i18n}{QML Internationalization example}.
*/
diff --git a/doc/src/declarative/qdeclarativemodels.qdoc b/doc/src/declarative/qdeclarativemodels.qdoc
index bb17896..b44e6f2 100644
--- a/doc/src/declarative/qdeclarativemodels.qdoc
+++ b/doc/src/declarative/qdeclarativemodels.qdoc
@@ -30,63 +30,67 @@
\target qmlmodels
\title Data Models
-Some QML Items use Data Models to provide the data to be displayed.
+QML items such as ListView, GridView and \l Repeater require Data Models
+that provide the data to be displayed.
These items typically require a \e delegate component that
creates an instance for each item in the model. Models may be static, or
have items modified, inserted, removed or moved dynamically.
Data is provided to the delegate via named data roles which the
-delegate may bind to. The roles are exposed as properties of the
-\e model context property, though this property is set as a default property
-of the delegate so, unless there is a naming clash with a
-property in the delegate, the roles are usually accessed unqualified. The
-example below would have a clash between the \e color role of the model and
-the \e color property of the Rectangle. The clash is avoided by referencing
-the \e color property of the model by its full name: \e model.color.
+delegate may bind to. Here is a ListModel with two roles, \e type and \e age,
+and a ListView with a delegate that binds to these roles to display their
+values:
-\code
-ListModel {
- id: myModel
- ListElement { color: "red" }
- ListElement { color: "green" }
-}
+\qml
+import Qt 4.7
+
+Item {
+ width: 200; height: 250
+
+ ListModel {
+ id: myModel
+ ListElement { type: "Dog"; age: 8 }
+ ListElement { type: "Cat"; age: 5 }
+ }
-Component {
- id: myDelegate
- Rectangle {
- width: 20; height: 20
- color: model.color
+ Component {
+ id: myDelegate
+ Text { text: type + ", " + age }
+ }
+
+ ListView {
+ anchors.fill: parent
+ model: myModel
+ delegate: myDelegate
}
}
-\endcode
+\endqml
-A special \e index role containing the index of the item in the model
-is also available.
+If there is a naming clash between the model's properties and the delegate's
+properties, the roles can be accessed with the qualified \e model name instead.
+For example, if a \l Text element had \e type or \e age properties, the text in the
+above example would display those property values instead of the \e type and \e age values
+from the model item. In this case, the properties could have been referenced as
+\c model.type and \c model.age instead to ensure the delegate displays the
+property values from the model item.
-\e Note: the index role will be set to -1 if the item is removed from
+A special \e index role containing the index of the item in the model
+is also available to the delegate. Note this index is set to -1 if the item is removed from
the model. If you bind to the index role, be sure that the logic
accounts for the possibility of index being -1, i.e. that the item
-is no longer valid. Usually the item will shortly be destroyed, but
-it is possible to delay delegate destruction in some views via a delayRemove
-attached property.
+is no longer valid. (Usually the item will shortly be destroyed, but
+it is possible to delay delegate destruction in some views via a \c delayRemove
+attached property.)
-Models that do not have named roles will have the data provided via
-the \e modelData role. The \e modelData role is also provided for
-Models that have only one role. In this case the \e modelData role
+Models that do not have named roles (such as the QStringList model shown below)
+will have the data provided via the \e modelData role. The \e modelData role is also provided for
+models that have only one role. In this case the \e modelData role
contains the same data as the named role.
-There are a number of QML elements that operate using data models:
+QML provides several types of data models among the built-in set of
+QML elements. In addition, models can be created with C++ and then
+made available to QML components.
-\list
-\o ListView
-\o GridView
-\o PathView
-\o \l Repeater
-\endlist
-
-QML supports several types of data model, which may be provided by QML
-or C++ (via QDeclarativeContext::setContextProperty() or as plugin types,
-for example).
\section1 QML Data Models
@@ -98,6 +102,7 @@ available roles are specified by the \l ListElement properties.
\code
ListModel {
id: fruitModel
+
ListElement {
name: "Apple"
cost: 2.45
@@ -117,30 +122,26 @@ The above model has two roles, \e name and \e cost. These can be bound
to by a ListView delegate, for example:
\code
-Component {
- id: fruitDelegate
- Row {
+ListView {
+ width: 200; height: 250
+ model: fruitModel
+ delegate: Row {
Text { text: "Fruit: " + name }
Text { text: "Cost: $" + cost }
}
}
-ListView {
- model: fruitModel
- delegate: fruitDelegate
-}
\endcode
-It is also possible to manipulate the ListModel directly via JavaScript.
-In this case, the first item inserted will determine the roles available
-to any views using the model. For example, if an empty ListModel is
-created and populated via JavaScript the roles provided by the first
+ListModel provides methods to manipulate the ListModel directly via JavaScript.
+In this case, the first item inserted determines the roles available
+to any views that are using the model. For example, if an empty ListModel is
+created and populated via JavaScript, the roles provided by the first
insertion are the only roles that will be shown in the view:
\code
Item {
- ListModel {
- id: fruitModel
- }
+ ListModel { id: fruitModel }
+
MouseArea {
anchors.fill: parent
onClicked: fruitModel.append({"cost": 5.95, "name":"Pizza"})
@@ -148,9 +149,9 @@ Item {
}
\endcode
-When the MouseArea is clicked fruitModel will have two roles, "cost" and "name".
+When the MouseArea is clicked, \c fruitModel will have two roles, \e cost and \e name.
Even if subsequent roles are added, only the first two will be handled by views
-using the model.
+using the model. To reset the roles available in the model, call ListModel::clear().
\section2 XmlListModel
@@ -170,11 +171,17 @@ XmlListModel {
}
\endcode
+The \l{demos/declarative/rssnews}{RSS News demo} shows how XmlListModel can
+be used to display an RSS feed.
+
\section2 VisualItemModel
-VisualItemModel allows QML items to be provided as a model. This model contains
-both the data and delegate (its child items). This model does not provide any roles.
+VisualItemModel allows QML items to be provided as a model.
+
+This model contains both the data and delegate; the child items of a
+VisualItemModel provide the contents of the delegate. The model
+does not provide any roles.
\code
VisualItemModel {
@@ -197,15 +204,74 @@ 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}.
+Models can be defined in C++ and then made available to QML. This is useful
+for exposing existing C++ data models or otherwise complex datasets to QML.
+
+A C++ model class can be defined as a QStringList, a QList<QObject*> or a
+QAbstractItemModel.
+
+\section2 QStringList
+
+A model may be a simple QStringList, which provides the contents of the list via the \e modelData role.
+
+Here is a ListView with a delegate that references its model item's
+value using the \c modelData role:
+
+\snippet examples/declarative/modelviews/stringlistmodel/view.qml 0
+
+A Qt application can load this QML document and set the value of \c myModel
+to a QStringList:
+
+\snippet examples/declarative/modelviews/stringlistmodel/main.cpp 0
+
+The complete example is available in Qt's \l {declarative/modelviews/stringlistmodel}{examples/declarative/modelviews/stringlistmodel} directory.
+
+\note There is no way for the view to know that the contents of a QStringList
+have changed. If the QStringList changes, it will be necessary to reset
+the model by calling QDeclarativeContext::setContextProperty() again.
+
+
+\section2 QList<QObject*>
+
+A list of QObject* values can also be used as a model. A QList<QObject*> provides
+the properties of the objects in the list as roles.
+
+The following application creates a \c DataObject class that with
+Q_PROPERTY values that will be accessible as named roles when a
+QList<DataObject*> is exposed to QML:
+
+\snippet examples/declarative/modelviews/objectlistmodel/dataobject.h 0
+\dots 4
+\snippet examples/declarative/modelviews/objectlistmodel/dataobject.h 1
+\codeline
+\snippet examples/declarative/modelviews/objectlistmodel/main.cpp 0
+\dots
+
+The QObject* is available as the \c modelData property. As a convenience,
+the properties of the object are also made available directly in the
+delegate's context. Here, \c view.qml references the \c DataModel properties in
+the ListView delegate:
+
+\snippet examples/declarative/modelviews/objectlistmodel/view.qml 0
+
+Note the use of the fully qualified access to the \c color property.
+The properties of the object are not replicated in the \c model
+object, since they are easily available via the \c modelData
+object.
+
+The complete example is available in Qt's \l {declarative/modelviews/objectlistmodel}{examples/declarative/modelviews/objectlistmodel} directory.
+
+Note: There is no way for the view to know that the contents of a QList
+have changed. If the QList changes, it will be necessary to reset
+the model by calling QDeclarativeContext::setContextProperty() again.
+
\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:
+The roles of a QAbstractItemModel subclass can be exposed to QML by calling
+QAbstractItemModel::setRoleNames(). The default role names set by Qt are:
\table
\header
@@ -219,22 +285,34 @@ The default role names set by Qt are:
\o decoration
\endtable
-The model could be made available to QML either directly:
+Here is an application with a QAbstractListModel subclass named \c AnimalModel
+that has \e type and \e size roles. It calls QAbstractItemModel::setRoleNames() to set the
+role names for accessing the properties via QML:
-\code
-QDeclarativeContext *ctxt = view.rootContext();
-MyModel *model = new MyModel; // subclass of QAbstractItemModel
-ctxt->setContextProperty("myModel", model);
-\endcode
+\snippet examples/declarative/modelviews/abstractitemmodel/model.h 0
+\dots
+\snippet examples/declarative/modelviews/abstractitemmodel/model.h 1
+\dots
+\snippet examples/declarative/modelviews/abstractitemmodel/model.h 2
+\codeline
+\snippet examples/declarative/modelviews/abstractitemmodel/model.cpp 0
+\codeline
+\snippet examples/declarative/modelviews/abstractitemmodel/main.cpp 0
+\dots
+
+This model is displayed by a ListView delegate that accesses the \e type and \e size
+roles:
+
+\snippet examples/declarative/modelviews/abstractitemmodel/view.qml 0
-or by registering the subclass as a new QML type in
-a \l{QDeclarativeExtensionPlugin}{QML C++ plugin}.
+The complete example is available in Qt's \l {declarative/modelviews/abstractitemmodel}{examples/declarative/modelviews/abstractitemmodel} directory.
-QAbstractItemModel presents a heirachy of tables, but views currently provided by QML
+QAbstractItemModel presents a hierarchy of tables, but the views currently provided by QML
can only display list data.
-In order to display child lists of a heirachical model
+In order to display child lists of a hierarchical model
the VisualDataModel element provides several properties and functions for use
with models of type QAbstractItemModel:
+
\list
\o \e hasModelChildren role property to determine whether a node has child nodes.
\o \l VisualDataModel::rootIndex allows the root node to be specifed
@@ -243,100 +321,51 @@ with models of type QAbstractItemModel:
\endlist
-\section2 QStringList
+\section2 Exposing C++ data models to QML
-A model may be a simple QStringList, which provides the contents of the list via the \e modelData role:
+The above examples use QDeclarativeContext::setContextProperty() to set
+model values directly in QML components. An alternative to this is to
+register the C++ model class as a QML type from a QML C++ plugin using
+QDeclarativeExtensionPlugin. This would allow the model classes to be
+created directly as elements within QML:
\table
-\row
-\o
-\code
-// main.cpp
-QStringList dataList;
-dataList.append("Fred");
-dataList.append("Ginger");
-dataList.append("Skipper");
-
-QDeclarativeContext *ctxt = view.rootContext();
-ctxt->setContextProperty("myModel", QVariant::fromValue(dataList));
-\endcode
+\row
\o
\code
-// main.qml
-ListView {
- width: 100
- height: 100
- anchors.fill: parent
- model: myModel
- delegate: Component {
- Rectangle {
- height: 25
- Text { text: modelData }
- }
- }
-}
-\endcode
-\endtable
-
-\note There is no way for the view to know that the contents of a QStringList
-have changed. If the QStringList is changed, it will be necessary to reset
-the model by calling QDeclarativeContext::setContextProperty() again.
-
-
-\section2 QList<QObject*>
-
-QList<QObject*> provides the properties of the objects in the list as roles.
-
-\code
-class DataObject : public QObject
+class MyModelPlugin : public QDeclarativeExtensionPlugin
{
- Q_OBJECT
-
- Q_PROPERTY(QString name READ name WRITE setName)
- Q_PROPERTY(QString color READ color WRITE setColor)
-...
-};
-
-QList<QObject*> dataList;
-dataList.append(new DataObject("Item 1", "red"));
-dataList.append(new DataObject("Item 2", "green"));
-dataList.append(new DataObject("Item 3", "blue"));
-dataList.append(new DataObject("Item 4", "yellow"));
+public:
+ void registerTypes(const char *uri)
+ {
+ qmlRegisterType<MyModel>(uri, 1, 0,
+ "MyModel");
+ }
+}
-QDeclarativeContext *ctxt = view.rootContext();
-ctxt->setContextProperty("myModel", QVariant::fromValue(dataList));
+Q_EXPORT_PLUGIN2(mymodelplugin, MyModelPlugin);
\endcode
-The QObject* is available as the \c modelData property. As a convenience,
-the properties of the object are also made available directly in the
-delegate's context:
+\o
+\qml
+MyModel {
+ id: myModel
+ ListElement { someProperty: "some value" }
+}
-\code
ListView {
- width: 100
- height: 100
- anchors.fill: parent
- model: myModel
- delegate: Component {
- Rectangle {
- height: 25
- width: 100
- color: model.modelData.color
- Text { text: name }
- }
- }
+ width: 200; height: 250
+ model: myModel
+ delegate: Text { text: someProperty }
}
-\endcode
+\endqml
-Note the use of the fully qualified access to the \c color property.
-The properties of the object are not replicated in the \c model
-object, since they are easily available via the modelData
-object.
+\endtable
+
+See \l {Tutorial: Writing QML extensions with C++} for details on writing QML C++
+plugins.
-Note: There is no way for the view to know that the contents of a QList
-have changed. If the QList is changed, it will be necessary to reset
-the model by calling QDeclarativeContext::setContextProperty() again.
\section1 Other Data Models
@@ -344,14 +373,13 @@ the model by calling QDeclarativeContext::setContextProperty() again.
\section2 An Integer
-An Integer specifies a model containing the integer number of elements.
-There are no data roles.
+An integer can be used to specify a model that contains a certain number
+of elements. In this case, the model does not have any data roles.
The following example creates a ListView with five elements:
\code
Item {
- width: 200
- height: 250
+ width: 200; height: 250
Component {
id: itemDelegate
@@ -370,7 +398,7 @@ Item {
\section2 An Object Instance
-An Object Instance specifies a model with a single Object element. The
+An object instance can be used to specify a model with a single object element. The
properties of the object are provided as roles.
The example below creates a list with one item, showing the color of the
@@ -379,6 +407,8 @@ to avoid clashing with \e color property of the Text element in the delegate.
\code
Rectangle {
+ width: 200; height: 250
+
Text {
id: myText
text: "Hello"
@@ -387,10 +417,9 @@ Rectangle {
Component {
id: myDelegate
- Text {
- text: model.color
- }
+ Text { text: model.color }
}
+
ListView {
anchors.fill: parent
anchors.topMargin: 30
diff --git a/doc/src/declarative/qdeclarativestates.qdoc b/doc/src/declarative/qdeclarativestates.qdoc
index ef5bf98..6461925 100644
--- a/doc/src/declarative/qdeclarativestates.qdoc
+++ b/doc/src/declarative/qdeclarativestates.qdoc
@@ -82,4 +82,7 @@ Other things you can do in a state change:
\o Run some script with StateChangeScript
\endlist
+
+The {declarative/animation/states}{States and Transitions example} demonstrates how to declare a basic set of states and then apply animated transitions between them.
+
*/
diff --git a/doc/src/declarative/qmlruntime.qdoc b/doc/src/declarative/qmlruntime.qdoc
index 15d8567..d44e774 100644
--- a/doc/src/declarative/qmlruntime.qdoc
+++ b/doc/src/declarative/qmlruntime.qdoc
@@ -26,172 +26,117 @@
****************************************************************************/
/*!
- \page qmlruntime.html
- \title Qt Declarative UI Runtime
- \keyword QML Viewer
- \ingroup qttools
-
- This page documents the \e{Declarative UI Runtime} for the Qt GUI
- 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 \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.
-
- To deploy an application using the QML runtime, you have two options:
-
- \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 \QQV.
- \endlist
-
- To run an application with the \QQV, pass the filename as an argument:
-
- \code
- qmlviewer myQmlFile.qml
- \endcode
-
- 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.
-
- \code
- MyApp.qml
- MyAppCore/qmldir
- MyAppCore/libMyAppCore.so
- MyAppCore/MyAppCore.dll
- MyAppCore/AnAppElement.qml
- MyAppCore/AnotherElement.qml
- MyAppCore/images/Logo.png
- OtherModule/qmldir
- OtherModule/OtherElement.qml
- \endcode
-
- Note that this example is for deploying the example to both windows and linux. You will still need to compile the C++
- modules for each target platform, but you can deploy multiple versions of the modules across platforms with different naming conventions,
- 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 '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
- import "MyAppCore"
- import "OtherModule" 1.0 as Other
- \endcode
-
- \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 qmlviewer shows available options.
-
- \section2 Translations
-
- When the launcher loads an initial QML file, it will install a translation file from
- a "i18n" subdirectory relative to that initial QML file. The actual translation file
- loaded will be according to the system locale and have the form
- "qml_<language>.qm", where <language> is a two-letter ISO 639 language,
- such as "qml_fr.qm", optionally followed by an underscore and an uppercase two-letter ISO 3166 country
- code, such as "qml_fr_FR.qm" or "qml_fr_CA.qm".
-
- Such files can be created using \l{Qt Linguist}.
-
- See the \l{scripting.html#internationalization}{Qt Internationalization} documentation for information about how to make
- the JavaScript in QML files use translatable strings.
-
- Additionally, the launcher will load translation files specified on the
- command line via the \c -translation option.
-
- \section2 Dummy Data
-
- The secondary use of the launcher is to allow QML files to be viewed with
- dummy data. This is useful when prototyping the UI, as the dummy data can
- be later replaced with actual data and bindings from a C++ plugin.
- To provide dummy data: create a directory called "dummydata" in the same directory as
- the target QML file and create files there with the "qml" extension.
- All such files will be loaded as QML objects and bound to the root
- context as a property with the name of the file (without ".qml").
-
- To replace this with real data, you simply bind the real object to
- the root context in C++.
-
- For example, if the Qt application has a "clock.time" property
- that is a qreal from 0 to 86400 representing the number of seconds since
- midnight, dummy data for this could be provided by \c dummydata/clock.qml:
- \code
- QtObject { property real time: 12345 }
- \endcode
- Any QML can be used in the dummy data files. You could even animate the
- fictional data!
-
- \section2 Runtime Object
-
- All applications using the launcher will have access to the \c runtime
- property on the root context. This property contains several pieces of
- information about the runtime environment of the application.
-
- \section3 Screen Orientation
-
- A special piece of dummy data which is integrated into the launcher is
- a simple orientation property. The orientation can be set via the
- settings menu in the application, or by pressing Ctrl+T to rotate it.
-
- To use this from within your QML file, access \c runtime.orientation,
- which can be one of the following values:
-
- \list
- \o \c Orientation.Portrait
- \o \c Orientation.Landscape
- \o \c Orientation.PortraitInverted (Portrait orientation, upside-down)
- \o \c Orientation.LandscapeInverted (Landscape orientation, upside-down)
- \endlist
-
- These values can be bound to in your application. For example:
-
- \code
- Item {
- state: (runtime.orientation == Orientation.Landscape) ? 'landscape' : ''
+\page qmlruntime.html
+\title Qt Declarative UI Runtime
+
+QML documents are loaded and executed by the QML runtime. This includes the
+Declarative UI engine along with the built-in QML elements and plugin modules,
+and it also provides access to third-party QML elements and modules.
+
+Applications that use QML need to invoke the QML runtime in order to
+execute QML documents. This can be done by creating a QDeclarativeView
+or a QDeclarativeEngine, as described below. In addition, the Declarative UI
+package includes the \QQV tool, which loads \c .qml files. This tool is
+useful for developing and testing QML code without the need to write
+a C++ application to load the QML runtime.
+
+
+
+\section1 Deploying QML-based applications
+
+To deploy an application that uses QML, the QML runtime must be invoked by
+the application. This is done by writing a Qt C++ application that loads the
+QDeclarativeEngine by either:
+
+\list
+\o Loading the QML file through a QDeclarativeView instance, or
+\o Creating a QDeclarativeEngine instance and loading QML files with QDeclarativeComponent
+\endlist
+
+
+\section2 Deploying with QDeclarativeView
+
+QDeclarativeView is a QWidget-based class that is able to load QML files.
+For example, if there is a QML file, \c application.qml, like this:
+
+\qml
+ import Qt 4.7
+
+ Rectangle { width: 100; height: 100; color: "red" }
+\endqml
+
+It can be loaded in a Qt application's \c main.cpp file like this:
+
+\code
+ #include <QApplication>
+ #include <QDeclarativeView>
+
+ int main(int argc, char *argv[])
+ {
+ QApplication app(argc, argv);
+
+ QDeclarativeView view;
+ view.setSource(QUrl::fromLocalFile("application.qml"));
+ view.show();
+
+ return app.exec();
}
- \endcode
-
- This allows your application to respond to changes in the screen's orientation. The launcher
- will automatically update this on some platforms (currently the N900 only) to match the physical
- screen's orientation. On other plaforms orientation changes will only happen when explictly asked for.
-
- \section3 Window Active
-
- The \c runtime.isActiveWindow property tells whether the main window of the launcher is currently active
- or not. This is especially useful for embedded devices when you want to pause parts of your application,
- including animations, when your application loses focus or goes to the background.
-
- The example below, stops the animation when the application's window is deactivated and resumes on activation:
-
- \code
- Item {
- width: 300; height: 200
- Rectangle {
- width: 100; height: 100
- color: "green"
- SequentialAnimation on x {
- running: runtime.isActiveWindow
- loops: Animation.Infinite
- NumberAnimation {to: 200}
- NumberAnimation {to: 0}
- }
- }
+\endcode
+
+This creates a QWidget-based view that displays the contents of
+\c application.qml.
+
+The application's \c .pro \l{qmake Project Files}{project file} must specify
+the \c declarative module for the \c QT variable. For example:
+
+\code
+ TEMPLATE += app
+ QT += gui declarative
+ SOURCES += main.cpp
+\endcode
+
+
+\section2 Creating a QDeclarativeEngine directly
+
+If \c application.qml does not have any graphical components, or if it is
+preferred to avoid QDeclarativeView for other reasons, the QDeclarativeEngine
+can be constructed directly instead. In this case, \c application.qml is
+loaded as a QDeclarativeComponent instance rather than placed into a view:
+
+\code
+ #include <QCoreApplication>
+ #include <QDeclarativeEngine>
+
+ int main(int argc, char *argv[])
+ {
+ QCoreApplication app(argc, argv);
+
+ QDeclarativeEngine engine;
+ QDeclarativeContext *windowContext = new QDeclarativeContext(engine.rootContext());
+
+ QDeclarativeComponent component(&engine, "application.qml");
+ QObject *window = component.create(windowContext);
+
+ // ... delete window and windowContext when necessary
+
+ return app.exec();
}
- \endcode
+\endcode
+
+See \l {Using QML in C++ Applications} for more information about using
+QDeclarativeEngine, QDeclarativeContext and QDeclarativeComponent, as well
+as details on including QML files through \l{The Qt Resource System}{Qt's Resource system}.
+
+
+
+\section1 Developing and prototyping with QML Viewer
+
+The Declarative UI package includes a QML runtime tool, the \QQV, which loads
+and displays QML documents. This is useful during the application development
+phase for prototyping QML-based applications without writing your own C++
+applications to invoke the QML runtime.
+
+See the \l{QML Viewer} documentation for more details.
*/
+
diff --git a/doc/src/declarative/qmlviewer.qdoc b/doc/src/declarative/qmlviewer.qdoc
new file mode 100644
index 0000000..efff9cc
--- /dev/null
+++ b/doc/src/declarative/qmlviewer.qdoc
@@ -0,0 +1,234 @@
+/****************************************************************************
+**
+** 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:FDL$
+** Commercial Usage
+** Licensees holding valid Qt Commercial licenses may use this file in
+** accordance with the Qt Commercial License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in a
+** written agreement between you and Nokia.
+**
+** GNU Free Documentation License
+** 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.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\page qmlviewer.html
+\title QML Viewer
+\ingroup qttools
+
+The Declarative UI package includes \QQV, a tool for loading QML documents that
+makes it easy to quickly develop and debug QML applications. It invokes the QML
+runtime to load QML documents and also includes additional features useful for
+the development of QML-based applications.
+
+The QML Viewer is a tool for testing and developing QML applications. It is
+\e not intended for use in a production environment and should not be used for the
+deployment of QML applications. In those cases, the QML runtime should be invoked
+from a Qt application instead; see \l {Qt Declarative UI Runtime} for more
+information.
+
+The viewer is located at QTDIR/bin/qmlviewer. To load a \c .qml file
+with the viewer, run the viewer and select the file to be opened, or provide the
+file path on the command line:
+
+\code
+ qmlviewer myqmlfile.qml
+\endcode
+
+On Mac OS X, the QML Viewer application is named \c QMLViewer.app instead. You
+can launch the viewer by opening the QMLViewer application from the Finder, or
+from the command line:
+
+\code
+ QMLViewer.app/Contents/MacOS/QMLViewer myqmlfile.qml
+\endcode
+
+The QML Viewer has a number of configuration options involving features such as
+fullscreen display, module import path configurations, video recording of QML
+animations, and OpenGL support.
+
+To see the configuration options, run \c qmlviewer with the \c -help argument.
+
+
+\section1 Adding module import paths
+
+Additional module import paths can be provided using the \c -I flag.
+For example, the \l{declarative/cppextensions/plugins}{QML plugins example} creates
+a C++ plugin identified as \c com.nokia.TimeExample. Since this has a namespaced
+identifier, the viewer has to be run with the \c -I flag from the example's
+base directory:
+
+\code
+qmlviewer -I . plugins.qml
+\endcode
+
+This adds the current directory to the import path so that the viewer will
+find the plugin in the \c com/nokia/TimeExample directory.
+
+Note by default, the current directory is included in the import search path,
+but namespaced modules like \c com.nokia.TimeExample are not found unless
+the path is explicitly added.
+
+
+\section1 Loading translation files
+
+When the QML Viewer loads a QML file, it installs a translation file from a
+"i18n" subdirectory relative to that initial file. This directory should contain
+translation files named "qml_<language>.qm", where <language> is a two-letter
+ISO 639 language, such as "qml_fr.qm", optionally followed by an underscore and
+an uppercase two-letter ISO 3166 country code, such as "qml_fr_FR.qm" or
+"qml_fr_CA.qm".
+
+Such files can be created using \l {Qt Linguist}.
+
+The actual translation file that is loaded depends on the system locale.
+Additionally, the viewer will load any translation files specified on the command
+line via the \c -translation option.
+
+See the \l{declarative/i18n}{QML i18n example} for an example. Also, the
+\l{scripting.html#internationalization}{Qt Internationalization} documentation
+shows how JavaScript code in QML files can be made to use translatable strings.
+
+
+\section1 Loading placeholder data with QML Viewer
+
+Often, QML applications are prototyped with fake data that is later replaced
+by real data sources from C++ plugins. QML Viewer assists in this aspect by
+loading fake data into the application context: it looks for a directory named
+"dummydata" in the same directory as the target QML file, and any \c .qml
+files in that directory are loaded as QML objects and bound to the root context
+as properties named after the files.
+
+For example, this QML document refers to a \c lottoNumbers property which does
+not actually exist within the document:
+
+\qml
+import Qt 4.7
+
+ListView {
+ width: 200; height: 300
+ model: lottoNumbers
+ delegate: Text { text: number }
+}
+\endqml
+
+If within the document's directory, there is a "dummydata" directory which
+contains a \c lottoNumbers.qml file like this:
+
+\qml
+import Qt 4.7
+
+ListModel {
+ ListElement { number: 23 }
+ ListElement { number: 44 }
+ ListElement { number: 78 }
+}
+\endqml
+
+Then this model would be automatically loaded into the ListView in the previous document.
+
+Child properties are included when loaded from dummy data. The following document
+refers to a \c clock.time property:
+
+\qml
+import Qt 4.7
+Text { text: clock.time }
+\endqml
+
+The text value could be filled by a \c dummydata/clock.qml file with a \c time
+property in the root context:
+
+\qml
+import Qt 4.7
+QtObject { property int time: 54321 }
+\endqml
+
+To replace this with real data, you can simply bind the real data object to
+the root context in C++ using QDeclarativeContext::setContextProperty(). This
+is detailed in \l {Using QML in C++ Applications}.
+
+\section1 Using the \c runtime object
+
+QML applications that are loaded with the QML Viewer have access to a special
+\c runtime property on the root context. This property provides additional
+information about the application's runtime environment through the following properties:
+
+\table
+\row
+
+\o \c runtime.isActiveWindow
+
+\o This property indicates whether the QML Viewer window is the current active
+window on the system. It is useful for "pausing" an application, particularly
+animations, when the QML Viewer loses focus or moves to the background.
+
+For example, the following animation is only played when the QML Viewer is
+the active window:
+
+\qml
+Rectangle {
+ width: 200; height: 200
+
+ ColorAnimation on color {
+ running: runtime.isActiveWindow
+ loops: Animation.Infinite
+ from: "green"; to: "blue"; duration: 2000
+ }
+}
+\endqml
+
+\row
+
+\o \c runtime.orientation
+
+\o This property indicates the current orientation of the QML Viewer. On the
+N900 platform, this property automatically updates to reflect the device's
+actual orientation; on other platforms, this indicates the orientation currently
+selected in the QML Viewer's \e {Settings -> Properties} menu. The
+\c orientation value can be one of the following:
+
+\list
+\o \c Orientation.Portrait
+\o \c Orientation.Landscape
+\o \c Orientation.PortraitInverted (Portrait orientation, upside-down)
+\o \c Orientation.LandscapeInverted (Landscape orientation, upside-down)
+\endlist
+
+When the viewer's orientation changes, the appearance of the loaded QML document
+does not change unless it has been set to respond to changes in
+\c runtime.orientation. For example, the following Rectangle changes its
+aspect ratio depending on the orientation of the QML Viewer:
+
+\qml
+Rectangle {
+ id: window
+ width: 640; height: 480
+
+ states: State {
+ name: "landscape"
+ PropertyChanges { target: window; width: 480; height: 640 }
+ }
+ state: (runtime.orientation == Orientation.Landscape
+ || runtime.orientation == Orientation.LandscapeInverted) ? 'landscape' : ''
+}
+\endqml
+
+\endtable
+
+*/
+
diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc
index 252c11e..c884486 100644
--- a/doc/src/declarative/tutorial.qdoc
+++ b/doc/src/declarative/tutorial.qdoc
@@ -222,5 +222,5 @@ This is equivalent to writing the two transitions separately.
The \l ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time.
We could also run them one after the other by using \l SequentialAnimation instead.
-For more details on states and transitions, see \l {QML States}.
+For more details on states and transitions, see \l {QML States} and the {declarative/animation/states}{states and transitions example}.
*/
diff --git a/doc/src/examples/qml-examples.qdoc b/doc/src/examples/qml-examples.qdoc
index 211ee4b..c8a7403 100644
--- a/doc/src/examples/qml-examples.qdoc
+++ b/doc/src/examples/qml-examples.qdoc
@@ -252,6 +252,15 @@
*/
/*!
+ \title Models and Views: AbstractItemModel
+ \example declarative/modelviews/abstractitemmodel
+
+ This example shows how to use a QAbstractItemModel subclass as a model in QML.
+
+ \image qml-abstractitemmodel-example.png
+*/
+
+/*!
\title Models and Views: GridView
\example declarative/modelviews/gridview
@@ -306,8 +315,7 @@
\title Models and Views: Object ListModel
\example declarative/modelviews/objectlistmodel
- This example shows how to create a C++ extension that exposes a
- QList<QObject*> as a model in QML.
+ This example shows how to use a QList<QObject*> as a model in QML.
\image qml-objectlistmodel-example.png
*/
@@ -334,8 +342,7 @@
\title Models and Views: String ListModel
\example declarative/modelviews/stringlistmodel
- This example shows how to create a C++ extension that exposes a
- QStringList as a model in QML.
+ This example shows how to use a QStringList as a model in QML.
\image qml-stringlistmodel-example.png
*/
diff --git a/doc/src/images/qml-abstractitemmodel-example.png b/doc/src/images/qml-abstractitemmodel-example.png
new file mode 100644
index 0000000..1d7ff19
--- /dev/null
+++ b/doc/src/images/qml-abstractitemmodel-example.png
Binary files differ
diff --git a/doc/src/images/qml-focus-example.png b/doc/src/images/qml-focus-example.png
index 0ec2bff..107d2cb 100644
--- a/doc/src/images/qml-focus-example.png
+++ b/doc/src/images/qml-focus-example.png
Binary files differ
diff --git a/doc/src/images/qml-xmlhttprequest-example.png b/doc/src/images/qml-xmlhttprequest-example.png
index 68e7d27..f585613 100644
--- a/doc/src/images/qml-xmlhttprequest-example.png
+++ b/doc/src/images/qml-xmlhttprequest-example.png
Binary files differ
diff --git a/doc/src/snippets/declarative/visualdatamodel_rootindex/view.qml b/doc/src/snippets/declarative/visualdatamodel_rootindex/view.qml
index 835ca32..9e759f9 100644
--- a/doc/src/snippets/declarative/visualdatamodel_rootindex/view.qml
+++ b/doc/src/snippets/declarative/visualdatamodel_rootindex/view.qml
@@ -55,7 +55,7 @@ ListView {
MouseArea {
anchors.fill: parent
onClicked: {
- if (hasModelChildren)
+ if (model.hasModelChildren)
view.model.rootIndex = view.model.modelIndex(index)
}
}