Simplify and clarify all this after consulting

• https://qt-project.org/doc/qt-4.8/qdeclarativemodels.html
• https://qt-project.org/doc/qt-4.8/qml-listview.html#details
• 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

• A model is the description of all data about a single item (i.e., a description of a “record”):
  • Name
  • Surname
  • Telephone Number
  • Favorite
  • Icon
• Individual items (i.e., “records”) are expressed in ListElements.
  • Elements of a ListElement (i.e., “fields”) are called roles.
• The ListModel element is an array ¹⁾ of ListElements.

ListModelExample.qml

import QtQuick 1.0
 
ListModel {
     id: listModel
 
     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: ""
     }
 }

• ListModels are viewed using model views.

• Viewing a ListModel with a ListView requires using at least three different files:
  • The ListModel:
    • An array of ListElements containing all information from each item (as given above).
  • Single item view:
    • A file that has specifies how a single item should appear.

ListItemDelegate.qml

import QtQuick 1.0
 
Item {
    id: itemList
    width: 330
    height: 75
    property string intern_name: "Name"
    property string intern_surname: "Surname"
    property string intern_telephone: "555 7879"
    property string intern_icon: "gps"
    property bool intern_fav: true
 
 
    Image {
        id: icon
        width: 42
        height: 42
        source: if(intern_icon == "") { return "" } else { return "images/"+intern_icon+".png" }
    }
 
    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
    }
 
    Text {
        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 "" }
    }
 
}

• Main file:
  • Contains the ListView call, the ListModel and the Component for each single item view that will be repeated.

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
    }
 
}