Sviluppo di App con Qt Quick: un esempio di model-view-delegate
16
Sviluppare App Android (e iOS) con Qt Quick Paolo Sereno Model-View-Delegate
-
Upload
paolo-sereno -
Category
Software
-
view
739 -
download
0
Transcript of Sviluppo di App con Qt Quick: un esempio di model-view-delegate
Sviluppare
App Android
(e iOS)
con Qt Quick
Paolo Sereno
Model-View-Delegate
Di cosa parleremo?
Design Pattern di Qt (e Qt Quick):
Model View Delegate
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!)
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!
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).
Il ModelIl modello fornisce i dati al delegate attraverso il meccanismo dei data roles. QtQuick 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
}
}
ViewLe 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
}
Il DelegateIl 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
}
}
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
}
}
}
Ma com’è fatto questo coso?
Così!
Con una lista fatta così…
ListModel {
id:myModel
}
Una view fatta così…
ListView {
id:view1
model:myModel
delegate: myDelegate
}
…e il delegate?
…con un delegate così strutturato:
Item {
anchors.fill: parent
Text {
}
Text {
}
Text {
}
Text {
}
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…
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.
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è:
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.
