====== 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
    * 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 {
  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]].