User Tools

Site Tools


qt-quick-for-designers-1:all_about_lists

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
qt-quick-for-designers-1:all_about_lists [2013/06/29 04:26] mithatqt-quick-for-designers-1:all_about_lists [2013/07/15 22:59] (current) mithat
Line 1: Line 1:
 ====== All about lists ====== ====== All about lists ======
  
-  * What is a model? +<WRAP center round important 60%> 
-  * Models in QtQuick +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. 
-  * ListView +</WRAP>
-  * GridView +
-  * Creating a model dynamically+
  
 ===== Models in QtQuick ===== ===== Models in QtQuick =====
  
-  * model is the description of all data about single item (a.k.a. //record//): +  * What is a model
-    * Name +    * All information about one single item 
-    * Surname +      * Name 
-    * Telephone Number +      * Surname 
-    * Favorite +      * Telephone Number 
-    * Icon +      * Favorite 
-  * Individual records are expressed ''ListElements''+      * Icon
-  * The ''ListModel'' element is an array 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 { ListModel {
-     idlistModel+  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> 
  
 +===== 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
  
-===== Model views =====+  * 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:
 +
 +...</code>
  
-==== ListView ====+  * ... 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:
 +
 +...</code>
  
-==== GridView ====+  * 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>
  
-===== Javascript and ListModel ===== +  * See example: addon/module-003/examples/ListExample.qml 
- +{{youtube>LXnDpF2tYkI?medium}}
-===== Animating list items =====+
  
 +===== GridView =====
  
 +===== JavaScript and ListModel =====
  
 +===== Animating list items =====
  
 +---------------------------------------------------------------------
 +===== Resources =====
 +  * All source code is subject to this [[copyright header|copyright]].
  
  
  
qt-quick-for-designers-1/all_about_lists.1372479999.txt.gz · Last modified: 2013/06/29 04:26 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki