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 05:06] 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 ======
  
-FIXME Simplify and clarify all this after consulting https://qt-project.org/doc/qt-4.8/qdeclarativemodels.html +<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. 
-  * What is a model? +</WRAP>
-  * Models in QtQuick +
-  * ListView +
-  * GridView +
-  * Creating a model dynamically+
  
 ===== Models in QtQuick ===== ===== Models in QtQuick =====
  
-  * A **model** is the description of all data about 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 { 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> 
  
-===== 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 exampleaddon/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:
 +
 +...</code>
  
-Item { +  * ... then you need to make the item flexible enough to accept the variables you need 
-    iditemList +    * See exampleaddon/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_favtrue+
 +Text { 
 +  id: nameTxt 
 +  font.family: "Univers LT Std
 +  color: "#c8c8c8
 +  font.pixelSize22 
 +  text: "<b>"+ intern_name + "</b> " + intern_surname 
 +  anchors.left: icon.right 
 +  anchors.top: icon.top 
 +  anchors.topMargin:
 +
 +...</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 exampleaddon/module-003/examples/ListExample.qml 
-        idicon +{{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:+
-    }+
  
-    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:+
-    } +
- +
-    Image { +
-        id: favIcon +
-        anchors.left: phoneTxt.right +
-        anchors.leftMargin:+
-        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:+
-        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 ===== ===== Animating list items =====
  
- +--------------------------------------------------------------------- 
- +===== Resources ===== 
 +  * All source code is subject to this [[copyright header|copyright]].
  
  
  
qt-quick-for-designers-1/all_about_lists.1372482403.txt.gz · Last modified: 2013/06/29 05:06 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki