Minor changes

A reformat, a couple of extra examples of loading types,
and a start on the contents of chapter 3.

3 files changed, 77 insertions, 6 deletions

diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc
index ae2dcca..e763a56 100644
--- a/doc/src/tutorials/declarative.qdoc
+++ b/doc/src/tutorials/declarative.qdoc
@@ -80,7 +80,7 @@
     This means you should use the duiviewer application provided with
     Qt to run the examples.
 
-    \list 1
+    \list
     \o \l{tutorials/declarative/contacts/part1}{Drawing and Animation}
     \o \l{tutorials/declarative/contacts/part2}{Reusing QML Components}
     \o \l{tutorials/declarative/contacts/part3}{Models, Views and Delegates}
@@ -720,3 +720,67 @@
     the Qt 4.6 release.
 */
 
+/*!
+    \page tutorials-declarative-contacts-part3.html
+    \contentspage {Declarative UI Tutorial}{Contents}
+    \previouspage {tutorials/declarative/contacts/part2}{Chapter 2}
+    \nextpage {tutorials/declarative/contacts/part4}{Chapter 4}
+    \example tutorials/declarative/contacts/part3
+    \title Models, Views and Delegates
+    \tableofcontents
+
+    In the previous chapters we designed a component to display and
+    edit a contact.  The next step is to display a list of those contacts
+    and allow the user to expand individual contacts for editing.
+
+    As the previous elements will not be changed in this section, they have
+    been moved to a lib directory for this tutorial and the relevant
+    name space path has been used.
+
+    \section1 Simple List View
+
+    Displaying lists requires three components.  A model that holds the
+    data displayed, a delegate to indicate how elements are drawn and
+    a view to arrange the elements.
+
+    For the purposes of this tutorial we will be using an SQL query as our
+    data model.  This can be declared in the resources section of
+    the parent item.
+
+    \code
+    <SqlConnection id="contactDatabase"
+        name="qmlConnection"
+        driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
+    <SqlQuery id="contactList"
+        connection="{contactDatabase}">
+        <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query>
+    </SqlQuery>
+    \endcode
+
+    The SqlConnection component describes how to connect to the database in
+    much the same ways as the QSqlDatabase::addDatabase() function is used.
+    In this case an SQLite database is used as it can be connected to as a
+    file, reducing complexity in setting up a database server or credentials.
+
+    The SqlQuery component allows various forms of queries to be described.
+    When the query is a select statement, the component also acts as a model
+    allowing it to provide data to a ListView component.  The query above
+    retrieves the fields recid, label, email and phone from a contacts table,
+    and orders the results by the label of the contact first, and then by 
+    the recid for any contacts with equivalent labels.
+
+    To display the data retrieved from the table, a delegate is needed.  This
+    is also declared in the resources section of the parent item.
+
+    \code
+    <Component id="contactDelegate">
+        <Text
+            x="45" y="12"
+            width="{contactListView.width-45}"
+            height="30"
+            color="black"
+            font.bold="true"
+            text="{model.label}"/>
+    </Component>
+    \endcode
+*/
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 98fdb86..6210308 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,9 +1,13 @@
 <Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <VerticalLayout id="layout" width="{contents.width}">
-        <GroupBox contents="1/ContactField.qml" label="Loading Component"/>
+    <GridLayout id="layout" columns="2" rows="4" width="{contents.width}">
+        <GroupBox contents="1/ContactField.qml" label="Loading: simple"/>
+        <GroupBox contents="1a/ContactField.qml" label="Loading: qml property"/>
+        <GroupBox contents="1b/ContactField.qml" label="Loading: added path"/>
+        <GroupBox contents="1c/ContactField.qml" label="Loading: added namespace"/>
+
         <GroupBox contents="2/ContactField.qml" label="Using properties"/>
         <GroupBox contents="3/ContactField.qml" label="Defining signals"/>
         <GroupBox contents="3/Contact.qml" label="Multiple Items"/>
         <GroupBox contents="4/Contact.qml" label="Mouse Grabbing"/>
-    </VerticalLayout>
+    </GridLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
index 5f9abc7..e4cc1ce 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -6,8 +6,11 @@
         <Property name="mouseGrabbed" value="false"/>
     </properties>
     <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
-        <SqlQuery id="contactList" connection="{contactDatabase}">
+        <SqlConnection id="contactDatabase"
+            name="qmlConnection"
+            driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList"
+            connection="{contactDatabase}">
             <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query>
         </SqlQuery>
         <Component id="contactDelegate">