Differences

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

--- qt-quick-for-designers-1:all_about_lists [2013/06/29 04:11] – created mithat
+++ qt-quick-for-designers-1:all_about_lists [2013/07/15 22:59] (current) – mithat
@@ Line 1: / Line 1: @@
 ====== All about lists ======
+<WRAP center round important 60%>
+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.
+</WRAP>
+===== Models in QtQuick =====
   * What is a model?
+    * All information about one single item
+      * Name
+      * Surname
+      * Telephone Number
+      * Favorite
+      * Icon
   * Models in QtQuick
-  * ListView
+    * This is how a list item is organized in a QtQuick model. The ListModel element is an array of ListElements
-  * GridView
+      * See example: addon/module-003/examples/ListModelExample.qml
-  * Creating a model dynamically
+<code javascript>
+ListModel {
+  ListElement {
+    picture: "images/user_1.png"
+    name: "Adriel"
+    surname: "Nunes Teles"
+    telephone: "+1 347 715 3354"
+    favorite: true
+    icon: "sms"
+  }
+}</code>
+===== ListView =====
+  * 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
+  * The first thing to do is to create the list item layout file ...
+    * See example: addon/module-003/examples/ItemRenderDelegate.qml
+<code javascript>
+...
+Text {
+  id: nameTxt
+  font.family: "Univers LT Std"
+  color: "#c8c8c8"
+  font.pixelSize: 22
+  text: "<b>Adriel</b> Nunes Teles"
+  anchors.left: icon.right
+  anchors.top: icon.top
+  anchors.topMargin: 8
+}
+...</code>
+  * ... then you need to make the item flexible enough to accept the variables you need
+    * See example: addon/module-003/examples/ListItemDelegate.qml
+<code javascript>
+...
+property string intern_name
+property string intern_surname
+property string intern_telephone
+...
+}
+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>
+  * See example: addon/module-003/examples/ListExample.qml
+{{youtube>LXnDpF2tYkI?medium}}
+===== GridView =====
+===== JavaScript and ListModel =====
+===== Animating list items =====
+---------------------------------------------------------------------
+===== Resources =====
+  * All source code is subject to this [[copyright header|copyright]].