Un esempio di Model View Delegate realizzato in QML per un'app per smartphone.

1. Sviluppare
App Android
(e iOS)
con Qt Quick
Paolo Sereno
Model-View-Delegate

2. Di cosa parleremo?
Design Pattern di Qt (e Qt Quick):
Model View Delegate

3. Chi Sono ?
 …un informatico
 Seguo l’evoluzione del Qt Application Framework dal
lontano 2003
 Nell’ottobre 2009 ho fondato la web community
www.qt-italia.org (chi vuol collaborare… serve aiuto!)

4. Un po’ di pubblicità…
Ciò che vedrete oggi in queste slide è tratto dall’ultimo
capitolo del mio libro.
QML Quanto Basta: La guida all’uso di Qt Quick in Italiano
A partire dal 30 settembre 2015 sarà disponibile in
formato Kindle su Amazon:
http://www.amazon.it/dp/B012WXGA10
…per la versione cartacea datemi tempo
è un lavoraccio!

5. Parliamo di Model View Delegate
Nell'implementazione Model-View-Delegate:
 Il modello (Model) comunica con la sorgente dei dati realizzando
un'interfaccia verso gli altri componenti dell'architettura.
 La vista (View) riceve dal modello le informazioni per
rappresentare i dati ed
 Il Delegate provvede infine alla visualizzazione vera e propria e
modifica (editing).

6. Il Model
Il modello fornisce i dati al delegate attraverso il meccanismo dei data roles. Qt
Quick fornisce diversi modelli dati di base ed implementa meccanismi per
consentire di definire modelli in linguaggio C++ e rappresentarne i dati in QML.
ListModel {
id: colorModel
ListElement {
name: "Rosso"
value: 1
}
ListElement {
name: "Verde"
value: 2
}
ListElement {
name: "Blu"
value: 3
}
}

7. View
Le View non sono altro che contenitori di elementi, esse possono essere completamente
personalizzate per adattarne lo stile ed il comportamento in funzione dell'applicazione
che si vuol realizzare.
ListView {
anchors.fill: parent
model: colorModel
delegate: nameDelegate
}

8. Il Delegate
Il delegate, responsabile della visualizzazione dei dati del modello, deve specificare il
role da usare per l'interrogazione del modello. Nell'esempio sotto riportato, il Delegate
è un componente che contiene un solo campo di testo (Text) ed impiega il role name
come contenuto da visualizzare (nello statement text: )
Component {
id: nameDelegate
Text {
text: name;
font.pixelSize: 24
anchors.left: parent.left
anchors.leftMargin: 2
}
}

9. Una visione d’insieme
// main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
ListModel {
id: colorModel
ListElement {
name: "Rosso"
value: 1
}
ListElement {
name: "Verde"
value: 2
}
ListElement {
name: "Blu"
value: 3
}
}
ListView {
anchors.fill: parent
model: colorModel
delegate: nameDelegate
}
Component {
id: nameDelegate
Text {
text: name;
font.pixelSize: 24
anchors.left: parent.left
anchors.leftMargin: 2
}
}
}

10. Ma com’è fatto questo coso?

11. Così!
Con una lista fatta così…
ListModel {
id:myModel
}
Una view fatta così…
ListView {
id:view1
model:myModel
delegate: myDelegate
}

12. …e il delegate?
…con un delegate così strutturato:
Item {
anchors.fill: parent
Text {
}
Text {
}
Text {
}
Text {
}

13. Fatemi capire!
Component {
id: myDelegate
Rectangle {
id:itemDel
width: background.width
height: 90
color:"Black"
border.color: "darkGreen"
border.width: 1
Column {
id:col
Item {
anchors.fill: parent
Text {
id:delegateText1;
color:"Orange";
font.pointSize: 10
anchors.left: parent.left;
anchors.leftMargin: 10
text: "<b>Numero Giro</b> "
}
Qui vediamo una porzione del «coso» in questa slide…

14. Come si appendono dati alla lista?
Mediante i «roles»: che saranno lap e value!
myModel.append({"lap":<numero>,"value":<valore>});
…in questo modo, nella funzione di append, andiamo a dire al modello
quali sono i dati che un generico Item deve contenere... e che valore
hanno.

15. Come si leggono i dati della lista?
Mediante i soliti «roles»: che saranno lap e value!
Text {
anchors.top:delegateText1.bottom
color:"White"
font.pointSize: 20
anchors.left: parent.left
anchors.leftMargin: 10
anchors.topMargin: 10
text: '<b>'+ lap +'</b>'
}
text: '<b>'+ lap +'</b>'
Il testo visualizzato qui è una stringa concatenata, composta da
due tag HTML (<b> e </b>) e il testo lap che rappresenta il valore del
rispettivo campo del generico elemento in lista, cioè:

16. Molto bello tutto cio!
Ma che me ne faccio?
La cosa migliore è fare prove guardando il materiale che si trova in
rete, poi si può chiedere aiuto sul forum di Qt-Italia.org o sui vari forum
internazionali.
Qt Quick è uno strumento potente che sta iniziando a farsi conoscere,
la sua forza sta nella semplicità e nel fatto che è indipendente dal
sistema operativo. Attualmente le applicazioni Qt Quick possono girare
sui sistemi desktop (Windows, OSX, Linux), sui sistemi per
smartphone/tablet (Android, iOS, Windows Phone) e tutte le schede
embedded usate dai maker (una per tutte Raspberry PI) oppure
schede per applicazioni real time.