<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qdeclarativemodels.qdoc -->
<title>Qt 4.8: QML Data Models</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>QML Data Models</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="qdeclarativeanimation.html" />
<link rel="next" href="qml-views.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qdeclarativeanimation.html">Animation and Transitions</a>
<a class="nextPage" href="qml-views.html">Presenting Data with Views</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#qml-data-models">QML Data Models</a></li>
<li class="level2"><a href="#listmodel">ListModel</a></li>
<li class="level2"><a href="#xmllistmodel">XmlListModel</a></li>
<li class="level2"><a href="#visualitemmodel">VisualItemModel</a></li>
<li class="level1"><a href="#c-data-models">C++ Data Models</a></li>
<li class="level2"><a href="#qstringlist-based-model">QStringList-based model</a></li>
<li class="level2"><a href="#qobjectlist-based-model">QObjectList-based model</a></li>
<li class="level2"><a href="#qabstractitemmodel">QAbstractItemModel</a></li>
<li class="level2"><a href="#exposing-c-data-models-to-qml">Exposing C++ Data Models to QML</a></li>
<li class="level1"><a href="#other-data-models">Other Data Models</a></li>
<li class="level2"><a href="#an-integer">An Integer</a></li>
<li class="level2"><a href="#an-object-instance">An Object Instance</a></li>
<li class="level1"><a href="#accessing-views-and-models-from-delegates">Accessing Views and Models from Delegates</a></li>
</ul>
</div>
<h1 class="title">QML Data Models</h1>
<span class="subtitle"></span>
<!-- $$$qdeclarativemodels.html-description -->
<div class="descr"> <a name="details"></a>
<a name="qmlmodels"></a><p>QML items such as <a href="qml-listview.html">ListView</a>, <a href="qml-gridview.html">GridView</a> and <a href="qml-repeater.html">Repeater</a> require Data Models that provide the data to be displayed. These items typically require a <i>delegate</i> component that creates an instance for each item in the model. Models may be static, or have items modified, inserted, removed or moved dynamically.</p>
<p>Data is provided to the delegate via named data roles which the delegate may bind to. Here is a <a href="qml-listmodel.html">ListModel</a> with two roles, <i>type</i> and <i>age</i>, and a <a href="qml-listview.html">ListView</a> with a delegate that binds to these roles to display their values:</p>
<pre class="qml"> import QtQuick 1.0
<span class="type"><a href="qml-item.html">Item</a></span> {
<span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">250</span>
<span class="type"><a href="qml-listmodel.html">ListModel</a></span> {
<span class="name">id</span>: <span class="name">myModel</span>
<span class="type"><a href="qml-listelement.html">ListElement</a></span> { <span class="name">type</span>: <span class="string">"Dog"</span>; <span class="name">age</span>: <span class="number">8</span> }
<span class="type"><a href="qml-listelement.html">ListElement</a></span> { <span class="name">type</span>: <span class="string">"Cat"</span>; <span class="name">age</span>: <span class="number">5</span> }
}
<span class="type"><a href="qml-component.html">Component</a></span> {
<span class="name">id</span>: <span class="name">myDelegate</span>
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="name">type</span> <span class="operator">+</span> <span class="string">", "</span> <span class="operator">+</span> <span class="name">age</span> }
}
<span class="type"><a href="qml-listview.html">ListView</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">model</span>: <span class="name">myModel</span>
<span class="name">delegate</span>: <span class="name">myDelegate</span>
}
}</pre>
<p>If there is a naming clash between the model's properties and the delegate's properties, the roles can be accessed with the qualified <i>model</i> name instead. For example, if a <a href="qml-text.html">Text</a> element had <i>type</i> or <i>age</i> properties, the text in the above example would display those property values instead of the <i>type</i> and <i>age</i> values from the model item. In this case, the properties could have been referenced as <tt>model.type</tt> and <tt>model.age</tt> instead to ensure the delegate displays the property values from the model item.</p>
<p>A special <i>index</i> 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 <tt>delayRemove</tt> attached property.)</p>
<p>Models that do not have named roles (such as the <a href="qstringlist.html">QStringList</a> model shown below) will have the data provided via the <i>modelData</i> role. The <i>modelData</i> role is also provided for models that have only one role. In this case the <i>modelData</i> role contains the same data as the named role.</p>
<p>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.</p>
<p>The views used to access data models are described in the <a href="qml-views.html">Presenting Data with Views</a> overview. The use of positioner items to arrange items from a model is covered in <a href="qml-positioners.html">Using QML Positioner and Repeater Items</a>.</p>
<a name="qml-data-models"></a><a name="qml-data-models"></a>
<h2>QML Data Models</h2>
<a name="listmodel"></a>
<h3>ListModel</h3>
<p><a href="qml-listmodel.html">ListModel</a> is a simple hierarchy of elements specified in QML. The available roles are specified by the <a href="qml-listelement.html">ListElement</a> properties.</p>
<pre class="qml"> <span class="type"><a href="qml-listmodel.html">ListModel</a></span> {
<span class="name">id</span>: <span class="name">fruitModel</span>
<span class="type"><a href="qml-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Apple"</span>
<span class="name">cost</span>: <span class="number">2.45</span>
}
<span class="type"><a href="qml-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Orange"</span>
<span class="name">cost</span>: <span class="number">3.25</span>
}
<span class="type"><a href="qml-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Banana"</span>
<span class="name">cost</span>: <span class="number">1.95</span>
}
}</pre>
<p>The above model has two roles, <i>name</i> and <i>cost</i>. These can be bound to by a <a href="qml-listview.html">ListView</a> delegate, for example:</p>
<pre class="qml"> <span class="type"><a href="qml-listview.html">ListView</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">model</span>: <span class="name">fruitModel</span>
<span class="name">delegate</span>: <span class="name">Row</span> {
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"Fruit: "</span> <span class="operator">+</span> <span class="name">name</span> }
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"Cost: $"</span> <span class="operator">+</span> <span class="name">cost</span> }
}
}</pre>
<p><a href="qml-listmodel.html">ListModel</a> provides methods to manipulate the <a href="qml-listmodel.html">ListModel</a> 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 <a href="qml-listmodel.html">ListModel</a> is created and populated via JavaScript, the roles provided by the first insertion are the only roles that will be shown in the view:</p>
<pre class="qml"> <span class="type"><a href="qml-listmodel.html">ListModel</a></span> { <span class="name">id</span>: <span class="name">fruitModel</span> }
...
<span class="type"><a href="qml-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">fruitModel</span>.<span class="name">append</span>({"cost": <span class="number">5.95</span>, "name":"Pizza"})
}</pre>
<p>When the <a href="qml-mousearea.html">MouseArea</a> is clicked, <tt>fruitModel</tt> will have two roles, <i>cost</i> and <i>name</i>. Even if subsequent roles are added, only the first two will be handled by views using the model. To reset the roles available in the model, call <a href="qml-listmodel.html#clear-method">ListModel::clear</a>().</p>
<a name="xmllistmodel"></a>
<h3>XmlListModel</h3>
<p><a href="qml-xmllistmodel.html">XmlListModel</a> allows construction of a model from an XML data source. The roles are specified via the <a href="qml-xmlrole.html">XmlRole</a> element.</p>
<p>The following model has three roles, <i>title</i>, <i>link</i> and <i>description</i>:</p>
<pre class="qml"> <span class="type"><a href="qml-xmllistmodel.html">XmlListModel</a></span> {
<span class="name">id</span>: <span class="name">feedModel</span>
<span class="name">source</span>: <span class="string">"http://rss.news.yahoo.com/rss/oceania"</span>
<span class="name">query</span>: <span class="string">"/rss/channel/item"</span>
<span class="type"><a href="qml-xmlrole.html">XmlRole</a></span> { <span class="name">name</span>: <span class="string">"title"</span>; <span class="name">query</span>: <span class="string">"title/string()"</span> }
<span class="type"><a href="qml-xmlrole.html">XmlRole</a></span> { <span class="name">name</span>: <span class="string">"link"</span>; <span class="name">query</span>: <span class="string">"link/string()"</span> }
<span class="type"><a href="qml-xmlrole.html">XmlRole</a></span> { <span class="name">name</span>: <span class="string">"description"</span>; <span class="name">query</span>: <span class="string">"description/string()"</span> }
}</pre>
<p>The <a href="demos-declarative-rssnews.html">RSS News demo</a> shows how <a href="qml-xmllistmodel.html">XmlListModel</a> can be used to display an RSS feed.</p>
<a name="visualitemmodel"></a>
<h3>VisualItemModel</h3>
<p><a href="qml-visualitemmodel.html">VisualItemModel</a> allows QML items to be provided as a model.</p>
<p>This model contains both the data and delegate; the child items of a <a href="qml-visualitemmodel.html">VisualItemModel</a> provide the contents of the delegate. The model does not provide any roles.</p>
<pre class="qml"> <span class="type"><a href="qml-visualitemmodel.html">VisualItemModel</a></span> {
<span class="name">id</span>: <span class="name">itemModel</span>
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">height</span>: <span class="number">30</span>; <span class="name">width</span>: <span class="number">80</span>; <span class="name">color</span>: <span class="string">"red"</span> }
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">height</span>: <span class="number">30</span>; <span class="name">width</span>: <span class="number">80</span>; <span class="name">color</span>: <span class="string">"green"</span> }
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> { <span class="name">height</span>: <span class="number">30</span>; <span class="name">width</span>: <span class="number">80</span>; <span class="name">color</span>: <span class="string">"blue"</span> }
}
<span class="type"><a href="qml-listview.html">ListView</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">model</span>: <span class="name">itemModel</span>
}</pre>
<p>Note that in the above example there is no delegate required. The items of the model itself provide the visual elements that will be positioned by the view.</p>
<a name="qml-c-models"></a><a name="c-data-models"></a>
<h2>C++ Data Models</h2>
<p>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.</p>
<p>A C++ model class can be defined as a <a href="qstringlist.html">QStringList</a>, a <a href="qlist.html">QList</a><<a href="qobject.html">QObject</a>*> or a <a href="qabstractitemmodel.html">QAbstractItemModel</a>. The first two are useful for exposing simpler datasets, while <a href="qabstractitemmodel.html">QAbstractItemModel</a> provides a more flexible solution for more complex models.</p>
<a name="qstringlist-based-model"></a>
<h3>QStringList-based model</h3>
<p>A model may be a simple <a href="qstringlist.html">QStringList</a>, which provides the contents of the list via the <i>modelData</i> role.</p>
<p>Here is a <a href="qml-listview.html">ListView</a> with a delegate that references its model item's value using the <tt>modelData</tt> role:</p>
<pre class="qml"></pre>
<p>A Qt application can load this QML document and set the value of <tt>myModel</tt> to a <a href="qstringlist.html">QStringList</a>:</p>
<pre class="cpp"> <span class="type"><a href="qstringlist.html">QStringList</a></span> dataList;
dataList<span class="operator">.</span>append(<span class="string">"Item 1"</span>);
dataList<span class="operator">.</span>append(<span class="string">"Item 2"</span>);
dataList<span class="operator">.</span>append(<span class="string">"Item 3"</span>);
dataList<span class="operator">.</span>append(<span class="string">"Item 4"</span>);
<span class="type"><a href="qdeclarativecontext.html">QDeclarativeContext</a></span> <span class="operator">*</span>ctxt <span class="operator">=</span> viewer<span class="operator">.</span>rootContext();
ctxt<span class="operator">-</span><span class="operator">></span>setContextProperty(<span class="string">"myModel"</span><span class="operator">,</span> <span class="type"><a href="qvariant.html">QVariant</a></span><span class="operator">::</span>fromValue(dataList));</pre>
<p>The complete example is available in Qt's <a href="declarative-modelviews-stringlistmodel.html">examples/declarative/modelviews/stringlistmodel</a> directory.</p>
<p><b>Note:</b> There is no way for the view to know that the contents of a <a href="qstringlist.html">QStringList</a> have changed. If the <a href="qstringlist.html">QStringList</a> changes, it will be necessary to reset the model by calling <a href="qdeclarativecontext.html#setContextProperty">QDeclarativeContext::setContextProperty</a>() again.</p>
<a name="qobjectlist-based-model"></a>
<h3>QObjectList-based model</h3>
<p>A list of <a href="qobject.html">QObject</a>* values can also be used as a model. A <a href="qlist.html">QList</a><<a href="qobject.html">QObject</a>*> provides the properties of the objects in the list as roles.</p>
<p>The following application creates a <tt>DataObject</tt> class that with Q_PROPERTY values that will be accessible as named roles when a <a href="qlist.html">QList</a><DataObject*> is exposed to QML:</p>
<pre class="cpp"> <span class="keyword">class</span> DataObject : <span class="keyword">public</span> <span class="type"><a href="qobject.html">QObject</a></span>
{
Q_OBJECT
Q_PROPERTY(<span class="type"><a href="qstring.html">QString</a></span> name READ name WRITE setName NOTIFY nameChanged)
Q_PROPERTY(<span class="type"><a href="qstring.html">QString</a></span> color READ color WRITE setColor NOTIFY colorChanged)
...
};
<span class="type">int</span> main(<span class="type">int</span> argc<span class="operator">,</span> <span class="type">char</span> <span class="operator">*</span><span class="operator">*</span> argv)
{
<span class="type"><a href="qapplication.html">QApplication</a></span> app(argc<span class="operator">,</span> argv);
QmlApplicationViewer viewer;
<span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qobject.html">QObject</a></span><span class="operator">*</span><span class="operator">></span> dataList;
dataList<span class="operator">.</span>append(<span class="keyword">new</span> DataObject(<span class="string">"Item 1"</span><span class="operator">,</span> <span class="string">"red"</span>));
dataList<span class="operator">.</span>append(<span class="keyword">new</span> DataObject(<span class="string">"Item 2"</span><span class="operator">,</span> <span class="string">"green"</span>));
dataList<span class="operator">.</span>append(<span class="keyword">new</span> DataObject(<span class="string">"Item 3"</span><span class="operator">,</span> <span class="string">"blue"</span>));
dataList<span class="operator">.</span>append(<span class="keyword">new</span> DataObject(<span class="string">"Item 4"</span><span class="operator">,</span> <span class="string">"yellow"</span>));
<span class="type"><a href="qdeclarativecontext.html">QDeclarativeContext</a></span> <span class="operator">*</span>ctxt <span class="operator">=</span> viewer<span class="operator">.</span>rootContext();
ctxt<span class="operator">-</span><span class="operator">></span>setContextProperty(<span class="string">"myModel"</span><span class="operator">,</span> <span class="type"><a href="qvariant.html">QVariant</a></span><span class="operator">::</span>fromValue(dataList));
...</pre>
<p>The <a href="qobject.html">QObject</a>* is available as the <tt>modelData</tt> property. As a convenience, the properties of the object are also made available directly in the delegate's context. Here, <tt>view.qml</tt> references the <tt>DataModel</tt> properties in the <a href="qml-listview.html">ListView</a> delegate:</p>
<pre class="qml"></pre>
<p>Note the use of the fully qualified access to the <tt>color</tt> property. The properties of the object are not replicated in the <tt>model</tt> object, since they are easily available via the <tt>modelData</tt> object.</p>
<p>The complete example is available in Qt's <a href="declarative-modelviews-objectlistmodel.html">examples/declarative/modelviews/objectlistmodel</a> directory.</p>
<p>Note: There is no way for the view to know that the contents of a <a href="qlist.html">QList</a> have changed. If the <a href="qlist.html">QList</a> changes, it will be necessary to reset the model by calling <a href="qdeclarativecontext.html#setContextProperty">QDeclarativeContext::setContextProperty</a>() again.</p>
<a name="qabstractitemmodel"></a>
<h3>QAbstractItemModel</h3>
<p>A model can be defined by subclassing <a href="qabstractitemmodel.html">QAbstractItemModel</a>. This is the best approach if you have a more complex model that cannot be supported by the other approaches. A <a href="qabstractitemmodel.html">QAbstractItemModel</a> can also automatically notify a QML view when the model data has changed.</p>
<p>The roles of a <a href="qabstractitemmodel.html">QAbstractItemModel</a> subclass can be exposed to QML by calling <a href="qabstractitemmodel.html#setRoleNames">QAbstractItemModel::setRoleNames</a>(). The default role names set by Qt are:</p>
<table class="generic">
<thead><tr class="qt-style"><th >Qt Role</th><th >QML Role Name</th></tr></thead>
<tr valign="top" class="odd"><td ><a href="qt.html#ItemDataRole-enum">Qt::DisplayRole</a></td><td >display</td></tr>
<tr valign="top" class="even"><td ><a href="qt.html#ItemDataRole-enum">Qt::DecorationRole</a></td><td >decoration</td></tr>
</table>
<p>Here is an application with a <a href="qabstractlistmodel.html">QAbstractListModel</a> subclass named <tt>AnimalModel</tt> that has <i>type</i> and <i>size</i> roles. It calls <a href="qabstractitemmodel.html#setRoleNames">QAbstractItemModel::setRoleNames</a>() to set the role names for accessing the properties via QML:</p>
<pre class="cpp"> <span class="keyword">class</span> Animal
{
<span class="keyword">public</span>:
Animal(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>type<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>size);
...
};
<span class="keyword">class</span> AnimalModel : <span class="keyword">public</span> <span class="type"><a href="qabstractlistmodel.html">QAbstractListModel</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
<span class="keyword">enum</span> AnimalRoles {
TypeRole <span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>UserRole <span class="operator">+</span> <span class="number">1</span><span class="operator">,</span>
SizeRole
};
AnimalModel(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
...
};
AnimalModel<span class="operator">::</span>AnimalModel(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qabstractlistmodel.html">QAbstractListModel</a></span>(parent)
{
<span class="type"><a href="qhash.html">QHash</a></span><span class="operator"><</span><span class="type">int</span><span class="operator">,</span> <span class="type"><a href="qbytearray.html">QByteArray</a></span><span class="operator">></span> roles;
roles<span class="operator">[</span>TypeRole<span class="operator">]</span> <span class="operator">=</span> <span class="string">"type"</span>;
roles<span class="operator">[</span>SizeRole<span class="operator">]</span> <span class="operator">=</span> <span class="string">"size"</span>;
setRoleNames(roles);
}
<span class="type">int</span> main(<span class="type">int</span> argc<span class="operator">,</span> <span class="type">char</span> <span class="operator">*</span><span class="operator">*</span> argv)
{
<span class="type"><a href="qapplication.html">QApplication</a></span> app(argc<span class="operator">,</span> argv);
QmlApplicationViewer viewer;
AnimalModel model;
model<span class="operator">.</span>addAnimal(Animal(<span class="string">"Wolf"</span><span class="operator">,</span> <span class="string">"Medium"</span>));
model<span class="operator">.</span>addAnimal(Animal(<span class="string">"Polar bear"</span><span class="operator">,</span> <span class="string">"Large"</span>));
model<span class="operator">.</span>addAnimal(Animal(<span class="string">"Quoll"</span><span class="operator">,</span> <span class="string">"Small"</span>));
<span class="type"><a href="qdeclarativecontext.html">QDeclarativeContext</a></span> <span class="operator">*</span>ctxt <span class="operator">=</span> viewer<span class="operator">.</span>rootContext();
ctxt<span class="operator">-</span><span class="operator">></span>setContextProperty(<span class="string">"myModel"</span><span class="operator">,</span> <span class="operator">&</span>model);
...</pre>
<p>This model is displayed by a <a href="qml-listview.html">ListView</a> delegate that accesses the <i>type</i> and <i>size</i> roles:</p>
<pre class="qml"></pre>
<p>QML views are automatically updated when the model changes. Remember the model must follow the standard rules for model changes and notify the view when the model has changed by using <a href="qabstractitemmodel.html#dataChanged">QAbstractItemModel::dataChanged</a>(), <a href="qabstractitemmodel.html#beginInsertRows">QAbstractItemModel::beginInsertRows</a>(), etc. See the <a href="model-view-programming.html#model-subclassing-reference">Model subclassing reference</a> for more information.</p>
<p>The complete example is available in Qt's <a href="declarative-modelviews-abstractitemmodel.html">examples/declarative/modelviews/abstractitemmodel</a> directory.</p>
<p><a href="qabstractitemmodel.html">QAbstractItemModel</a> 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 hierarchical model the <a href="qml-visualdatamodel.html">VisualDataModel</a> element provides several properties and functions for use with models of type <a href="qabstractitemmodel.html">QAbstractItemModel</a>:</p>
<ul>
<li><i>hasModelChildren</i> role property to determine whether a node has child nodes.</li>
<li><a href="qml-visualdatamodel.html#rootIndex-prop">VisualDataModel::rootIndex</a> allows the root node to be specifed</li>
<li><a href="qml-visualdatamodel.html#modelIndex-method">VisualDataModel::modelIndex</a>() returns a <a href="qmodelindex.html">QModelIndex</a> which can be assigned to <a href="qml-visualdatamodel.html#rootIndex-prop">VisualDataModel::rootIndex</a></li>
<li><a href="qml-visualdatamodel.html#parentModelIndex-method">VisualDataModel::parentModelIndex</a>() returns a <a href="qmodelindex.html">QModelIndex</a> which can be assigned to <a href="qml-visualdatamodel.html#rootIndex-prop">VisualDataModel::rootIndex</a></li>
</ul>
<a name="exposing-c-data-models-to-qml"></a>
<h3>Exposing C++ Data Models to QML</h3>
<p>The above examples use <a href="qdeclarativecontext.html#setContextProperty">QDeclarativeContext::setContextProperty</a>() 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 <a href="qdeclarativeextensionplugin.html">QDeclarativeExtensionPlugin</a>. This would allow the model classes to be created directly as elements within QML:</p>
<table class="generic">
<tr valign="top" class="odd"><td ><pre class="cpp"> <span class="keyword">class</span> MyModelPlugin : <span class="keyword">public</span> <span class="type"><a href="qdeclarativeextensionplugin.html">QDeclarativeExtensionPlugin</a></span>
{
<span class="keyword">public</span>:
<span class="type">void</span> registerTypes(<span class="keyword">const</span> <span class="type">char</span> <span class="operator">*</span>uri)
{
qmlRegisterType<span class="operator"><</span>MyModel<span class="operator">></span>(uri<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span>
<span class="string">"MyModel"</span>);
}
}
<a href="qtplugin.html#Q_EXPORT_PLUGIN2">Q_EXPORT_PLUGIN2</a>(mymodelplugin<span class="operator">,</span> MyModelPlugin);</pre>
</td><td ><pre class="qml"> <span class="type">MyModel</span> {
<span class="name">id</span>: <span class="name">myModel</span>
<span class="type"><a href="qml-listelement.html">ListElement</a></span> { <span class="name">someProperty</span>: <span class="string">"some value"</span> }
}</pre>
<pre class="qml"> <span class="type"><a href="qml-listview.html">ListView</a></span> {
<span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">250</span>
<span class="name">model</span>: <span class="name">myModel</span>
<span class="name">delegate</span>: <span class="name">Text</span> { <span class="name">text</span>: <span class="name">someProperty</span> }
}</pre>
</td></tr>
</table>
<p>See <a href="qml-extending-tutorial-index.html">Tutorial: Writing QML extensions with C++</a> for details on writing QML C++ plugins.</p>
<a name="other-data-models"></a>
<h2>Other Data Models</h2>
<a name="an-integer"></a>
<h3>An Integer</h3>
<p>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.</p>
<p>The following example creates a <a href="qml-listview.html">ListView</a> with five elements:</p>
<pre class="qml"> <span class="type"><a href="qml-item.html">Item</a></span> {
<span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">250</span>
<span class="type"><a href="qml-component.html">Component</a></span> {
<span class="name">id</span>: <span class="name">itemDelegate</span>
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"I am item number: "</span> <span class="operator">+</span> <span class="name">index</span> }
}
<span class="type"><a href="qml-listview.html">ListView</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">model</span>: <span class="number">5</span>
<span class="name">delegate</span>: <span class="name">itemDelegate</span>
}
}</pre>
<a name="an-object-instance"></a>
<h3>An Object Instance</h3>
<p>An object instance can be used to specify a model with a single object element. The properties of the object are provided as roles.</p>
<p>The example below creates a list with one item, showing the color of the <i>myText</i> text. Note the use of the fully qualified <i>model.color</i> property to avoid clashing with <i>color</i> property of the Text element in the delegate.</p>
<pre class="qml"> <span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">250</span>
<span class="type"><a href="qml-text.html">Text</a></span> {
<span class="name">id</span>: <span class="name">myText</span>
<span class="name">text</span>: <span class="string">"Hello"</span>
<span class="name">color</span>: <span class="string">"#dd44ee"</span>
}
<span class="type"><a href="qml-component.html">Component</a></span> {
<span class="name">id</span>: <span class="name">myDelegate</span>
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="name">model</span>.<span class="name">color</span> }
}
<span class="type"><a href="qml-listview.html">ListView</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">anchors</span>.topMargin: <span class="number">30</span>
<span class="name">model</span>: <span class="name">myText</span>
<span class="name">delegate</span>: <span class="name">myDelegate</span>
}
}</pre>
<a name="accessing-views-and-models-from-delegates"></a>
<h2>Accessing Views and Models from Delegates</h2>
<p>You can access the view for which a delegate is used, and its properties, by using <a href="qml-listview.html">ListView</a>.view in a delegate on a <a href="qml-listview.html">ListView</a>, or <a href="qml-gridview.html">GridView</a>.view in a delegate on a <a href="qml-gridview.html">GridView</a>, etc. In particular, you can access the model and its properties by using <a href="qml-listview.html">ListView</a>.view.model.</p>
<p>This is useful when you want to use the same delegate for a number of views, for example, but you want decorations or other features to be different for each view, and you would like these different settings to be properties of each of the views. Similarly, it might be of interest to access or show some properties of the model.</p>
<p>In the following example, the delegate shows the property <i>language</i> of the model, and the color of one of the fields depends on the property <i>fruit_color</i> of the view.</p>
<pre class="qml"> <span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">200</span>
<span class="type"><a href="qml-listmodel.html">ListModel</a></span> {
<span class="name">id</span>: <span class="name">fruitModel</span>
property <span class="type">string</span> <span class="name">language</span>: <span class="string">"en"</span>
<span class="type"><a href="qml-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Apple"</span>
<span class="name">cost</span>: <span class="number">2.45</span>
}
<span class="type"><a href="qml-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Orange"</span>
<span class="name">cost</span>: <span class="number">3.25</span>
}
<span class="type"><a href="qml-listelement.html">ListElement</a></span> {
<span class="name">name</span>: <span class="string">"Banana"</span>
<span class="name">cost</span>: <span class="number">1.95</span>
}
}
<span class="type"><a href="qml-component.html">Component</a></span> {
<span class="name">id</span>: <span class="name">fruitDelegate</span>
<span class="type"><a href="qml-row.html">Row</a></span> {
<span class="name">id</span>: <span class="name">fruit</span>
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">" Fruit: "</span> <span class="operator">+</span> <span class="name">name</span>; <span class="name">color</span>: <span class="name">fruit</span>.<span class="name">ListView</span>.<span class="name">view</span>.<span class="name">fruit_color</span> }
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">" Cost: $"</span> <span class="operator">+</span> <span class="name">cost</span> }
<span class="type"><a href="qml-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">" Language: "</span> <span class="operator">+</span> <span class="name">fruit</span>.<span class="name">ListView</span>.<span class="name">view</span>.<span class="name">model</span>.<span class="name">language</span> }
}
}
<span class="type"><a href="qml-listview.html">ListView</a></span> {
property <span class="type">color</span> <span class="name">fruit_color</span>: <span class="string">"green"</span>
<span class="name">model</span>: <span class="name">fruitModel</span>
<span class="name">delegate</span>: <span class="name">fruitDelegate</span>
<span class="name">anchors</span>.fill: <span class="name">parent</span>
}
}</pre>
<p>Another important case is when some action (e.g. mouse click) in the delegate should update data in the model. In this case you can define a function in the model, e.g.:</p>
<pre class="cpp"> setData(<span class="type">int</span> row<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span> field_name<span class="operator">,</span> <span class="type"><a href="qvariant.html">QVariant</a></span> new_value)<span class="operator">,</span></pre>
<p>...and call it from the delegate using:</p>
<pre class="js"> <span class="name">ListView</span>.<span class="name">view</span>.<span class="name">model</span>.<span class="name">setData</span>(<span class="name">index</span>, <span class="name">field</span>, <span class="name">value</span>)</pre>
<p>...assuming that <i>field</i> holds the name of the field which should be updated, and that <i>value</i> holds the new value.</p>
</div>
<!-- @@@qdeclarativemodels.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qdeclarativeanimation.html">Animation and Transitions</a>
<a class="nextPage" href="qml-views.html">Presenting Data with Views</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Qt and respective logos are trademarks of The Qt Company Ltd
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
