Differences

This shows you the differences between two versions of the page.

--- qt-quick-for-designers-1:all_about_lists [2013/06/29 05:27] – mithat
+++ qt-quick-for-designers-1:all_about_lists [2013/07/15 22:59] (current) – mithat
@@ Line 1: / Line 1: @@
 ====== All about lists ======
-FIXME Simplify and clarify all this after consulting
+<WRAP center round important 60%>
-  * https://qt-project.org/doc/qt-4.8/qdeclarativemodels.html
+The following text is taken verbatim from the source slides((See [[qt-quick-for-designers-1:start|Qt Quick for Designers]])) including any errors in the code examples.
-  * https://qt-project.org/doc/qt-4.8/qml-listview.html#details
+</WRAP>
-  * http://harmattan-dev.nokia.com/docs/platform-api-reference/xml/daily-docs/libqt4/qdeclarativemodels.html
-  * What is a model?
-  * Models in QtQuick
-  * ListView
-  * GridView
-  * Creating a model dynamically
 ===== Models in QtQuick =====
-  * A **model** is the description of all data about a single item (i.e., a description of a "record"):
+  * What is a model?
-    * Name
+    * All information about one single item
-    * Surname
+      * Name
-    * Telephone Number
+      * Surname
-    * Favorite
+      * Telephone Number
-    * Icon
+      * Favorite
-  * Individual items (i.e., "records") are expressed in **''ListElement''**s.
+      * Icon
-    * Elements of a ''ListElement'' (i.e., "fields") are called //roles//.
-  * The **''ListModel''** element is an array ((FIXME Really an array or some other kind of collection?)) of ''ListElements''.
-<file javascript ListModelExample.qml>
-import QtQuick 1.0
+  * Models in QtQuick
+    * This is how a list item is organized in a QtQuick model. The ListModel element is an array of ListElements
+      * See example: addon/module-003/examples/ListModelExample.qml
+<code javascript>
 ListModel {
-     id: listModel
+  ListElement {
+    picture: "images/user_1.png"
+    name: "Adriel"
+    surname: "Nunes Teles"
+    telephone: "+1 347 715 3354"
+    favorite: true
+    icon: "sms"
+  }
+}</code>
-     ListElement {
-         picture: "images/user_1.png"
-         name: "Adriel"
-         surname: "Nunes Teles"
-         telephone: "+1 347 715 3354"
-         favorite: true
-         icon: "sms"
-     }
-     ListElement {
-         picture: "images/user_2.png"
-         name: "Alex"
-         surname: "Beek"
-         telephone: "+44 79 3982 8778"
-         favorite: false
-         icon: "gps"
-     }
-     ListElement {
-         picture: "images/no_user.png"
-         name: "Alexandre"
-         surname: "da Rocha Lins"
-         telephone: "+1 718 249 7283"
-         favorite: false
-         icon: ""
-     }
-     ListElement {
-         picture: "images/user_3.png"
-         name: "Alexandre"
-         surname: "Tonin"
-         telephone: "+55 81 8608 3920"
-         favorite: false
-         icon: ""
-     }
-     ListElement {
-         picture: "images/user_4.png"
-         name: "Benjamin"
-         surname: "Abbott"
-         telephone: "+55 11 3962 8776"
-         favorite: true
-         icon: "sms"
-     }
-     ListElement {
-         picture: "images/no_user.png"
-         name: "Biln"
-         surname: "Smith"
-         telephone: "+32 178 8608 3920"
-         favorite: false
-         icon: "sms"
-     }
-     ListElement {
-         picture: "images/no_user.png"
-         name: "Brian"
-         surname: "Morris"
-         telephone: "+1 718 249 7283"
-         favorite: false
-         icon: ""
-     }
-     ListElement {
-         picture: "images/user_5.png"
-         name: "Biln"
-         surname: "Smith"
-         telephone: "+32 178 8608 3920"
-         favorite: false
-         icon: "gps"
-     }
-     ListElement {
-         picture: "images/user_6.png"
-         name: "Bruno"
-         surname: "Costa"
-         telephone: "+55 11 8608 3920"
-         favorite: true
-         icon: "sms"
-     }
-     ListElement {
-         picture: "images/user_7.png"
-         name: "John"
-         surname: "Appleseed"
-         telephone: "+55 81 8608 3920"
-         favorite: false
-         icon: ""
-     }
-     ListElement {
-         picture: "images/no_user.png"
-         name: "Brian"
-         surname: "Morris"
-         telephone: "+1 718 249 7283"
-         favorite: false
-         icon: ""
-     }
-     ListElement {
-         picture: "images/no_user.png"
-         name: "Alexandre"
-         surname: "Tonin"
-         telephone: "+55 81 8608 3920"
-         favorite: false
-         icon: ""
-     }
-     ListElement {
-         picture: "images/user_8.png"
-         name: "Bruno"
-         surname: "Costa"
-         telephone: "+55 11 8608 3920"
-         favorite: true
-         icon: "sms"
-     }
-     ListElement {
-         picture: "images/user_9.png"
-         name: "John"
-         surname: "Appleseed"
-         telephone: "+55 81 8608 3920"
-         favorite: false
-         icon: ""
-     }
-     ListElement {
-         picture: "images/no_user.png"
-         name: "Brian"
-         surname: "Morris"
-         telephone: "+1 718 249 7283"
-         favorite: false
-         icon: ""
-     }
- }</file>
-===== Model views =====
+===== ListView =====
-  * ''ListModel''s are viewed using model views.
+  * To start creating lists in QtQuick, you must organize your files first.
+  * You need, at least, three files
+    * Single item view
+      * All the visual elements from each list item and how they appear are in this file
+    * ListModel
+      * This is the file presented before, an array of ListElements containing all information from each item
+    * Main file
+      * This file will contain the ListView call, the ListModel and the Component for each single item view that will be repeated
-==== ListView ====
+  * The first thing to do is to create the list item layout file ...
-  * Viewing a ''ListModel'' with a ''ListView'' requires using at least three different files:
+    * See example: addon/module-003/examples/ItemRenderDelegate.qml
-    * The ''ListModel'':
+<code javascript>
-      * An array of ''ListElements'' containing all information from each item (as given above).
+...
-    * Single item view:
+Text {
-      * A file that has specifies how a single item should appear.
+  id: nameTxt
-<file javascript ListItemDelegate.qml>
+  font.family: "Univers LT Std"
-import QtQuick 1.0
+  color: "#c8c8c8"
+  font.pixelSize: 22
+  text: "<b>Adriel</b> Nunes Teles"
+  anchors.left: icon.right
+  anchors.top: icon.top
+  anchors.topMargin: 8
+}
+...</code>
-Item {
+  * ... then you need to make the item flexible enough to accept the variables you need
-    id: itemList
+    * See example: addon/module-003/examples/ListItemDelegate.qml
-    width: 330
+<code javascript>
-    height: 75
+...
-    property string intern_name: "Name"
+property string intern_name
-    property string intern_surname: "Surname"
+property string intern_surname
-    property string intern_telephone: "555 7879"
+property string intern_telephone
-    property string intern_icon: "gps"
+...
-    property bool intern_fav: true
+}
+Text {
+  id: nameTxt
+  font.family: "Univers LT Std"
+  color: "#c8c8c8"
+  font.pixelSize: 22
+  text: "<b>"+ intern_name + "</b> " + intern_surname
+  anchors.left: icon.right
+  anchors.top: icon.top
+  anchors.topMargin: 8
+}
+...</code>
+  * Once you’ve done all of this, now you just need to set the ListView inside the main file
+    * See example: addon/module-003/examples/ListExample.qml
+<code javascript>
+ListView {
+  id: listExample
+  orientation: "Vertical"
+  model: ListModelExample {}
+  delegate: itemComponent
+}
+Component {
+  id: itemComponent
+  ListItemExample {
+    intern_name: model.name
+    intern_surname: model.surname
+    intern_telephone: model.telephone
+    intern_icon: model.icon
+  }
+}
+...</code>
-    Image {
+  * See example: addon/module-003/examples/ListExample.qml
-        id: icon
+{{youtube>LXnDpF2tYkI?medium}}
-        width: 42
-        height: 42
-        source: if(intern_icon == "") { return "" } else { return "images/"+intern_icon+".png" }
-    }
-    Text {
+===== GridView =====
-        id: nameTxt
-        font.family: "Univers LT Std"
-        color: "#c8c8c8"
-        font.pixelSize: 22
-        text: "<b>"+ intern_name + "</b> " + intern_surname
-        anchors.left: icon.right
-        anchors.top: icon.top
-        anchors.topMargin: 8
-    }
-    Text {
+===== JavaScript and ListModel =====
-        id: phoneTxt
-        font.family: "Univers LT Std"
-        color: "#96999c"
-        font.pixelSize: 15
-        text: intern_telephone
-        anchors.left: icon.right
-        anchors.top: nameTxt.bottom
-        anchors.topMargin: 5
-    }
-    Image {
-        id: favIcon
-        anchors.left: phoneTxt.right
-        anchors.leftMargin: 3
-        anchors.top: phoneTxt.top
-        anchors.topMargin: -2
-        source: if(intern_fav) { return "images/favorite.png" } else { return "" }
-    }
-}</file>
-    * Main file:
-      * Contains the ''ListView'' call, the ''ListModel'' and the Component for each single item view that will be repeated.
-<file javascript ListExample.qml>
-import QtQuick 1.0
-Item {
-    width: 360
-    height: 640
-    Image {
-        id: background
-        source: "images/background.jpg"
-    }
-    ListView {
-        id: listExample
-        width: 360
-        height: 590
-        anchors.top: background.top
-        anchors.topMargin: 60
-        anchors.left: background.left
-        anchors.leftMargin: 20
-        orientation: "Vertical"
-        model: ListModelExample {}
-        delegate: itemComponent
-        clip: true
-        cacheBuffer: 100
-    }
-    Component {
-        id: itemComponent
-        ListItemDelegate {
-            width: 330
-            height: 75
-            intern_name: model.name
-            intern_surname: model.surname
-            intern_telephone: model.telephone
-            intern_icon: model.icon
-            intern_fav: model.favorite
-        }
-    }
-    Image {
-        id: shadowDetail
-        source: "images/shadow_detail.png"
-        anchors.top: listExample.top
-    }
-    Image {
-        id: scrollbar
-        height: 547
-        source: "images/scroll_bar.png"
-        anchors.right: background.right
-        anchors.rightMargin: 2
-        anchors.bottom: background.bottom
-        anchors.bottomMargin: 30
-    }
-    Rectangle {
-        id: scrollknob
-        width: 2
-        radius: 1
-        color: "#858d92"
-        anchors.horizontalCenter: scrollbar.horizontalCenter
-        y: (listExample.visibleArea.yPosition * listExample.height) + scrollbar.y
-        height: ((listExample.height/listExample.contentHeight) * listExample.height) - 45
-    }
-}</file>
-==== GridView ====
-===== Javascript and ListModel =====
 ===== Animating list items =====
+---------------------------------------------------------------------
+===== Resources =====
+  * All source code is subject to this [[copyright header|copyright]].