Getting Started Programming with QML/it

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

Introduzione Alla Programmazione Con QML

Benvenuti nel mondo di QML, il linguaggio dichiarativo per la realizzazione di interfacce utente (UI, user interface). In questa guida introduttiva, costruiremo un semplice editor di testo utilizzando QML. Dopo aver letto questa guida, dovresti essere pronto per sviluppare le tue applicazioni usando QML e Qt C+.

QML per la creazione di UI

L'applicazione che svilupperemo sarà un semplice editor di testo e permetterà di caricare, salvare e modificare del testo. Questa introduzione è divisa in due parti. La prima parte si occupa dello sviluppo del layout e dei comportamenti dei componenti dell'applicazione tramite il linguaggio QML. La seconda, invece, tratta dell'implementazione delle funzioni di caricamento e salvataggio utilizzando Qt C. Grazie al Qt's Meta-Object System, possiamo esporre le funzioni C+ come proprietà usate da elementi del linguaggio QML. Usando QML e Qt C+, possiamo separare efficacemente la logica del layout dalla logica riguardante le funzionalità dell'applicazione.

p=. Immagine editor di testi

Per eseguire il codice QML dell'esempio, è sufficiente passare come argomento allo strumento qmlviewer i files QML. La seguente introduzione è pensata per quei lettori che hanno almeno una minima conoscenza della procedura per la compilazione di applicazioni in Qt.

Capitoli:

1. Definizione di pulsanti e menu
2. Implementare barra dei menu
3. Costruire un editor di testo
4. Decorare l'editor di testo
5. Estendere QML attraverso Qt C+

Definizione di pulsanti e menu

Componenti base - Pulsante

Iniziamo il nostro editor di testi costruendo un pulsante. Un pulsante è costituito da un'area sensibile al mouse e da un'etichetta. I pulsanti eseguono un azione alla pressione da parte dell'utente. In QML, l'oggetto visuale di base è il Rectangle. Il Rectangle ha le proprietà per controllare l'aspetto e la posizione degli elementi.

import Qt 4.7

Rectangle{
 id:simplebutton

color: "grey"
 width: 400; height: 400

Text {
 id: buttonLabel
 text: "button label"
 anchors.centerIn:parent
 }
}

Innanzitutto, la riga import Qt 4.7 abilita il tool qmlviewer all'importazione di elementi QML. Questa linea deve essere presente in ogni file QML. Si noti che la versione dei moduli di Qt è inclusa nella dichiarazione.

Il Rectangle ha un identificatore univoco, simplebutton, che è associato alla proprietà id. Le properità del Rectangle sono specificate definendone prima il nome e, dopo il simbolo : (due punti), il valore. Nel codice di esempio, il colore grey è legato alla proprietà color del Rectangle. Stessa cosa per larghezza e altezza (width e height).

L'elemento Text è un campo di testo non editabile. Lo chiameremo buttonLabel. Per impostare il contenuto del campo di testo, assoceremo un valore alla sua proprietà text. L'etichetta è contenuta all'interno del rectangle, e per centrarla in mezzo, colleghiamo gerarchicamente le anchors (ancore) dell’elemento Text al suo genitore, che nel nostro caso si chiama simplebutton. Ogni ancora può essere collegata alle ancore di altri elementi; in questo modo si semplifica la definizione della disposizione reciproca degli elementi.

Salveremo il tutto come SimpleButton.qml. Lanciando qmlviewer con il nome del file creato come argomento, verrà mostrato a schermo un rettangolo grigio con un'etichetta di testo.

p=. pulsante grigio con etichetta testo

Per implementare l'evento click sul pulsante, possiamo usare la gestione degli eventi di QML. La gestione eventi di QML è molto simile al meccanismo signal e slot di Qt. Un segnale sarà emesso e il relativo slot connesso sarà chiamato.

Rectangle{
 id:simplebutton
 …

MouseArea{
 id: buttonMouseArea

anchors.fill: parent //ancora tutti i lati della MouseArea ai lati del rettangolo
 //onClicked gestisce click del mouse validi
 onClicked: console.log(buttonLabel.text + " clicked" )
 }
 }

Aggiungiamo un elemento MouseArea nel nostro componente simplebutton. Gli elementi MouseArea descrivono l'area interattiva dove i movimenti del mouse sono rilevati. Per il nostro pulsante, ancoriamo l'intera MouseArea al suo genitore (parent), il simplebutton. La sintassi anchors.fill è un modo per accedere ad una specifica proprietà chiamata fill all'interno di un gruppo di proprietà denominate anchors. QML utilizza layouts basati su ancore, dove gli elementi possono ancorarsi ad altri elementi, creando layout robusti e flessibili.

La MouseArea ha molti gestori di segnali che possono essere chiamati durante i movimenti del mouse all'interno dei limiti specificati. Uno di questi è onClicked ed è invocato ogni qualvolta viene cliccato un pulsante valido del mouse; il pulsante di default è quello sinistro. Possiamo legare azioni al gestore onClicked. Nel nostro esempio, console.log() visualizza testo ogni volta che viene cliccata la MouseArea. La funzione console.log() è uno strumento utile per scopi di debugging e, in generale, per visualizzare del testo in output.

Il codice in SimpleButton.qml è sufficiente per mostrare un bottone sullo schermo e visualizzare del testo ogni volta che viene cliccato con il mouse.

Rectangle {
 id:Button
 …

property color buttonColor: "lightblue"
 property color onHoverColor: "gold"
 property color borderColor: "white"

signal buttonClick()
 onButtonClick: {
 console.log(buttonLabel.text + " clicked" )
 }

MouseArea{
 onClicked: buttonClick()
 hoverEnabled: true
 onEntered: parent.border.color = onHoverColor
 onExited: parent.border.color = borderColor
 }

// determina il colore del bottone utilizando l'operatore condizionale
 color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
}

Un pulsante completamente funzionante è Button.qml. Il codice visualizzato in questo articolo omette alcune parti, denotate da "…", poiché sono già state introdotte nella sezione precedente o comunque sono irrilevanti ai fini della discussione di questo specifico codice.

Per dichiarare proprietà personalizzate si utilizza la sintassi: proprietà tipo nome. Nel codice, viene dichiarata la proprietà buttonColor, di tipo color, e vincolata al valore "lightblue". La proprietà buttonColor è utilizzata successivamente in un'operazione condizionale per determinare il colore di riempimento del bottone. Si noti che per assegnare dei valori alle proprietà è possibile utilizzare il segno uguale "="oppure il segno due punti ":". Le proprietà personalizzate permettono di rendere accessibili elementi interni all’elemento Rectangle, anche dall’esterno del suo campo di visibiltà. Esistono diversi tipi QML di base come int, string, real, ma anche un tipo generico chiamato variant.

Legando i gestori dei segnali onEntered ed onExited ai colori, il colore del bordo del pulsante diventa giallo quando il mouse si sposta sopra di esso e ritorna del colore pecedente quando il mouse esce dalla MouseArea.

Un segnale buttonClick() è dichiarato in Button.qml inserendo la parola chiave signal davanti al nome del segnale. Per ogni segnale vengono create automaticamente le relative funzioni di gestione, i cui nomi iniziano con il prefisso on. Come risultato si ha che il gestore di buttonClick è onButtonClick. All'onButtonClick è successivamente assegnata un'azione da svolgere. Nel nostro esempio, il gestore del mouse onClicked chiamerà semplicemente onButtonClick, il quale ha il compito di visualizzare del testo. onButtonClick permette ad oggetti esterni di accedere facilmente alla MouseArea del Button. Inoltre, gli elementi possono avere dichiarate più di una MouseArea, ed avere il segnale buttonClick permette di distinguere meglio i diversi gestori di segnali delle varie MouseArea.

Ora abbiamo le conoscenze essenziali per implementare in QML oggetti che possono gestire i principali movimenti del mouse. Abbiamo creato un'etichetta Text all'interno di un Rectangle, personalizzato le sue proprietà ed implementato dei comportamenti che rispondano ai movimenti del mouse. Questa idea di base della creazione di elementi all’interno di altri elementi, si ripresenterà nello sviluppo di tutta l'applicazione di esempio.

Il pulsante realizzato non è molto utile se non viene usato come componente per eseguire una qualche azione. Nella prossima sezione creeremo un menu contenente alcuni di questi pulsanti.

p=. Pulsante grigio chiaro con all'interno un'etichetta

Creazione della pagina del menu

Fino ad ora abbiamo visto come creare elementi ed assegnare comportamenti all'interno di file QML. In questa sezione, scopriremo come importare elementi QML e come riutilizzare alcuni componenti creati per costruire altri componenti.

Un menu mostra il contenuto di una lista i cui elementi hanno la capacità di compiere un'azione. In QML possiamo ottnere un menu in vari modi. Prima di tutto creeremo un menu contenente dei pulsanti a cui faremo eseguire azioni differenti. Il codice del menu è in FileMenu.qml.

import Qt 4.7 //Importa il modulo Qt QML principale
import "folderName" //Importa il contenuto della cartella
import "script.js" as Script //Importa un file javascript e lo chiama Script

La sintassi riportata mostra come utilizzare la parola chiave import. Ciò è richiesto per utilizzare file JavaScript o QML che non sono nella stessa cartella. Siccome Button.qml si trova nella stessa cartella di FileMenu.qml, non è necessario importare esplicitamente il file Button.qml per poterlo usare, ma possiamo creare direttamente un elemento Button dichiarando Button{}, come è stato fatto per Rectangle{}.

In FileMenu.qml:

Row{
 anchors.centerIn: parent
 spacing: parent.width/6

Button{
 id: loadButton
 buttonColor: "lightgrey"
 label: "Load"
 }
 Button{
 buttonColor: "grey"
 id: saveButton
 label: "Save"
 }
 Button{
 id: exitButton
 label: "Exit"
 buttonColor: "darkgrey"

onButtonClick: Qt.quit()
 }
 }

In FileMenu.qml abbiamo dichiarato tre elementi Button. Essi sono definiti all'interno di un elemento di tipo Row, un elemento di posizionamento che ha lo scopo di collocare i suoi figli lungo una riga orizzontale. La dichiarazione di Button si trova nel file Button.qml, lo stesso che abbiamo utilizzato nella sezione precedente. Le impostazioni delle proprietà possono essere dichiarate all'interno della dichiarazione del pulsante; in questo modo si sovrascrivono le proprietà impostate in Button.qml. Quando cliccato, il pulsante chiamato exitButton chiuderà l'applicazione. Si noti che il gestore di segnale onButtonClick in Button.qml sarà chiamato in aggiunta al gestore onButtonClick in exitButton.

p=. Immagine menu File

La dichiarazione dell'elemento di tipo Row è fatta all'interno di un Rectangle, creando un contenitore a forma di rettangolo per la riga di pulsanti. Il rettangolo aggiuntivo permette di aver un modo indiretto di organizzare la riga di pulsanti all'interno del menu.

La dichiarazione del menu di editing è molto simile a quella precedente. Questo menù è composto da pulsanti con le etichette Copy, Paste e Select All.

p=. Immagine menu Edit

Forti della conoscenza acquisita sull'importazione e sulla personalizzazione dei componenti, possiamo ora combinare queste pagine di menu per creare una singola barra dei menu, composta da pulsanti per selezionare il menu, e vedere come strutturare i dati usando QML.

Implementare la barra dei menu

Il nostro editor di testi necessità di un modo per visualizzare i menu tramite una barra dei menu. La barra dei menu proporrà i diversi menu attraverso cui l'utente potrà navigare. Per il cambio del menu occorrerà una struttura più complessa della semplice visualizzazione su una riga. QML utilizza modelli e viste per gestire e visualizzare i dati strutturati.

Usare la struttura modello-vista

QML dispone di diverse viste per visualizzare i modelli. La nostra barra dei menu visualizzerà i menu in una lista, con un'intestazione che mostrerà i nomi dei menu su una riga. L'elenco dei menu è dichiarato all'interno di un VisualItemModel. L'elemento VisualItemModel contiene gli oggetti che hanno già delle viste, come l'oggetto Rectangle e gli altri elementi dell'interfaccia. Altri tipi di modelli, come l'elemento ListModel, necessitano di un delegato per visualizzare i propri dati.

Dichiariamo quindi due elementi visuali nel menuListModel, il FileMenu e EditMenu, li personalizziamo e li visualizziamo usando il ListView. Il file MenuBar.qml contiene le dichiarazioni QML e un semplice menu di modifica è definito nel file EditMenu.qml.

 VisualItemModel{
 id: menuListModel
 FileMenu{
 width: menuListView.width
 height: menuBar.height
 color: fileColor
 }
 EditMenu{
 color: editColor
 width: menuListView.width
 height: menuBar.height
 }
 }

L'elemento ListView visualizza un modello attraverso il suo elemento delegato. Il delegato può definire che gli elementi del modello da visualizzare siano disposti in una riga o in una griglia. Il nostro menuListModel ha già degli oggetti visibili, quindi non abbiamo bisogno di dichiarare un delegato.

 ListView{
 id: menuListView

//Le anchors sono settate per adattarsi alla finestra
 anchors.fill:parent
 anchors.bottom: parent.bottom
 width:parent.width
 height: parent.height

//Il model contiene i dati
 model: menuListModel

//Controlla il movimento del passaggio tra i menu
 snapMode: ListView.SnapOneItem
 orientation: ListView.Horizontal
 boundsBehavior: Flickable.StopAtBounds
 flickDeceleration: 5000
 highlightFollowsCurrentItem: true
 highlightMoveDuration:240
 highlightRangeMode: ListView.StrictlyEnforceRange
 }

Inoltre, ListView eredita da Flickable, rendendo la lista reattiva al trascinamento del mouse ed a altre gestures. L'ultima parte di codice imposta la proprietà Flickable per creare dei movimenti di ribaltamento alla nostra vista. In particolare, la proprietà highlightMoveDuration cambia la durata della transizione: un valore più alto di highlightMoveDuration renderà il passaggio tra i menu più lento.

Il ListView gestisce gli elementi del modello attraverso un index (indice) e ogni elemento visuale nel modello è accessibile tramite questo indice, secondo l'ordine di dichiarazione. Cambiando il currentIndex cambieremo l'elemento evidenziato nella Listview. L'intestazione della barra dei menu semplifica questo effetto. Ci sono due pulsanti sulla stessa riga, quando cliccati entrambi cambiano il menu corrente. Il pulsante fileButton quando cliccato cambia il menu corrente con FileMenu; l'indice diventa 0 perchè FileMenu è il primo elemento dichiarato nel menuListModel. Analogamente il pulsante editButton sostituisce il menu corrente con EditMenu.

Il rettangolo dell'etichetta labelList ha un valore di z settato a 1, e sarà quindi visualizzata davanti alla barra dei menu. Gli oggetti con un valore di z maggiori saranno visualizzati in primo piano rispetto a quelli con un valore di z inferiore. Il valore di default di z è 0.

 Rectangle{
 id: labelList
 …
 z: 1
 Row{
 anchors.centerIn: parent
 spacing:40
 Button{
 label: "File"
 id: fileButton
 …
 onButtonClick: menuListView.currentIndex = 0
 }
 Button{
 id: editButton
 label: "Edit"
 …
 onButtonClick: menuListView.currentIndex = 1
 }
 }
 }

La barra dei menu appena creata potrà essere sfogliata per accedere ai menu oppure si può semplicemente cliccare sui nomi dei menu. Il cambiamento dei menu è intuitivo e reattivo.

p=. barra dei menu

Costruire un editor di testo

Dichiarare un'area di testo

Il nostro editor di testo non potrà mai essere un vero editor di testo finché non inseriremo un area di testo modificabile. L'elemento TextEdit permette la dichiarazione di un componente per la modifica di testo multilinea. TextEdit è diverso dall'elemento Text, che non consente all'utente di modificare direttamente il testo.

TextEdit{
 id: textEditor
 anchors.fill:parent
 width:parent.width; height:parent.height
 color:"midnightblue"
 focus: true

wrapMode: TextEdit.Wrap

onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
 }

L'editor contiene proprietà per impostare il colore del testo e per farlo andare a capo. L'area di testo TextEdit è contenuta all'interno di un'area scorrevole che farà scorrere il testo se il cursore si trova al di fuori dell'area visibile. La funzione ensureVisible() controlla se il rettangolo del cursore è fuori dai confini visibili e, nel caso, sposta opportunamente l'area di testo. QML usa la sintassi Javascript per i suoi scripts, e, come accennato in precedenza, i file Javascript possono essere importati e utilizzati all'interno di un file QML.

 function ensureVisible®{
 if (contentX >= r.x)
 contentX = r.x;
 else if (contentX+width <= r.x+r.width)
 contentX = r.x+r.width-width;
 if (contentY >= r.y)
 contentY = r.y;
 else if (contentY+height <= r.y+r.height)
 contentY = r.y+r.height-height;
 }

Combinare i componenti per l'editor di testi

Ora siamo pronti per creare il layout del nostro editor di testo mediante QML. L'editor di testo ha due componenti: la barra dei menu e l'area di testo. QML ci permette di riutilizzare i componenti, rendendo il codice più semplice, attraverso l'importazione e la personalizzazione degli stessi quando necessario. Il nostro editor di testo divide la finestra in due parti, un terzo dello schermo è dedicato alla barra dei menu ed i rimanenti due terzi della schermata sono destinati alla visualizzazione dell'area di testo. La barra dei menu viene visualizzata in primo piano rispetto a qualsiasi altro elemento.

 Rectangle{

id: screen
 width: 1000; height: 1000

//Lo schermo è diviso in MenuBar e TextArea. La MenuBar occupa 1/3 dello schermo
 property int partition: height/3

MenuBar{
 id:menuBar
 height: partition
 width:parent.width
 z: 1
 }

TextArea{
 id:textArea
 anchors.bottom:parent.bottom
 y: partition
 color: "white"
 height: partition*2
 width:parent.width
 }
 }

Tramite l'importazione di componenti riutilizzabili, il codice del nostro editor di testo appare molto più semplice. Possiamo quindi personalizzare l'applicazione principale, senza preoccuparci delle proprietà che abbiamo già definito prima. Usando questo approccio, i layout delll'applicazione ed i componenti dell'interfaccia grafica possono essere creati ed assemblati più facilmente.

p=. editor di testi

Decorare l'editor di testo

Implementare un interfaccia a scomparsa

Il nostro editor di testo appare semplice, ma possiamo abbellirlo. Utilizzando QML possiamo dichiarare delle transizioni per animarlo. La nostra barra del menu occupa un terzo dello schermo, sarebbe carino se apparisse solo quando lo vogliamo.

A tale scopo possiamo aggiungere un elemento di interfaccia (drawer) che si occuperà di contrarre o espandere la barra dei menu quando viene cliccata. Nella nostra implementazione abbiamo un sottile rettangolo che risponde ai click del mouse. Il drawer, così come l'applicazione, ha due stati: aperto (DRAWER_OPEN) e chiuso (DRAWER_CLOSED). L'elemento drawer è una sottile striscia rettangolare al cui interno è presente un elemento immagine che definisce un'icona a forma di freccia centrata all'interno dell'area. Il drawer assegna uno stato, con identificativo screen, all'intera applicazione ogni volta che l'utente clicca la MouseArea.

Rectangle{
 id:drawer
 height:15

Image{
 id: arrowIcon
 source: "images/arrow.png"
 anchors.horizontalCenter: parent.horizontalCenter
 }

MouseArea{
 id: drawerMouseArea
 anchors.fill:parent
 onClicked:{
 if (screen.state  "DRAWER_CLOSED"){
                     screen.state = "DRAWER_OPEN"
                 }
                 else if (screen.state  "DRAWER_OPEN"){
 screen.state = "DRAWER_CLOSED"
 }
 }
 …
 }
 }

Uno stato è semplicemente un'insieme di configurazioni predefinite e si dichiara tramite un elemento State. Una lista di stati può essere collegata alla proprietà states. Nella nostra applicazione i due stati sono chiamati DRAWER_CLOSED e DRAWER_OPEN. La configurazione dei componenti è definita negli elementi PropertyChanges. Nello stato DRAWER_OPEN quattro elementi riceveranno modifiche alle loro proprietà. Il primo, la menuBar, cambia la proprietà y in 0. Similmente, la textArea si abbasserà in una nuova posizione quando lo stato è DRAWER_OPEN. La textArea, il drawer e la sua icona subiranno cambiamenti delle loro proprietà per adeguarsi allo stato corrente.

states:[
 State {
 name: "DRAWER_OPEN"
 PropertyChanges { target: menuBar; y: 0}
 PropertyChanges { target: textArea; y: partition + drawer.height}
 PropertyChanges { target: drawer; y: partition}
 PropertyChanges { target: arrowIcon; rotation: 180}
 },
 State {
 name: "DRAWER_CLOSED"
 PropertyChanges { target: menuBar; y:-height; }
 PropertyChanges { target: textArea; y: drawer.height; height: screen.height- drawer.height }
 PropertyChanges { target: drawer; y: 0 }
 PropertyChanges { target: arrowIcon; rotation: 0 }
 }
 ]

Le variazioni tra uno stato e l'altro sono brusche, perciò necessitano di transizioni più dolci. Le transizioni tra gli stati sono definite utilizzando l'elemento Transition, che può essere legato alla proprietà transitions di un elemento. il nostra editor di testo effettua transizioni quando lo stato diventa DRAWER_OPEN oppure DRAWER_CLOSED. È importante sottolineare che le transizioni necessitano di uno stato di partenza (from) e di uno di arrivo (to), tuttavia, nel nostro caso, possiamo utilizzare il simbolo jolly * per indicare che la transizione si applica a tutti i cambiamenti di stato.

Durante le transizioni possiamo assegnare delle animazioni ai cambiamenti di proprietà. La nostra menuBar cambia posizione da y:0 a y:-partition: è possibile animare questa transizione utilizzando l'elemento NumberAnimation. Definiamo che le proprietà dell'oggetto si animino per un certo periodo con un andamento definito da una certa curva. Una curva di andamento controlla la progressione dell'animazione, interpolando i comportamenti durante la variazione di stato. L'evoluzione della curva scelta è Easing.Out.Quint che rallenta i movimenti verso la fine dell'animazione. E' possibile approfondire l'argomento leggendo l'articolo QML’s Animation.

transitions: [
 Transition {
 to: "*"
 NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type:Easing.OutExpo }
 NumberAnimation { target: menuBar; properties: "y"; duration: 100; easing.type: Easing.OutExpo }
 NumberAnimation { target: drawer; properties: "y"; duration: 100; easing.type: Easing.OutExpo }
 }
 ]

Un altro modo per animare variazioni dei valori delle proprietà è dichiarando un elemento Behaviour. Una transizione avviene solo durante cambi di stato e Behaviour può impostare un'animazione per una modifica generica della proprietà. Nell'editor di testo, l'icona freccia ha un NumberAnimation che anima la sua proprietà rotation ad ogni cambiamento.

In TextEditor.qml:

Behavior{
 NumberAnimation{property: "rotation";easing.type: Easing.OutExpo }
 }

Grazie alla conoscenza di stati ed animazioni, siamo ora in grado di migliorare l'aspetto dei nostri componenti. In Button.qml possiamo aggiungere modifiche alle proprietà scale e color quando il bottone viene premuto. I tipi colore si animano utilizzando ColorAnimation, mentre i tipi numerici con NumberAnimation. La sintassi on nomeProprietà mostrata sotto semplifica il lavoro quando si lavora su di una singola proprietà.

In Button.qml:
 …

color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
 Behavior on color { ColorAnimation{ duration: 55} }

scale: buttonMouseArea.pressed ? 1.1 : 1.00
 Behavior on scale { NumberAnimation{ duration: 55} }

Inoltre, possiamo migliorare l'aspetto dei componenti QML aggiungendo effetti di colore, come sfumature ed effetti di trasparenza. Dichiarando un elemento Gradient si sovrascrive la proprietà color dell'elemento. E' possibile definire un colore all'interno della sfumatura utilizzando l'elemento GradientStop. La sfumatura è valorrizata utilizzando una scala tra 0,0 e 1,0.

In MenuBar.qml
 gradient: Gradient {
 GradientStop { position: 0.0; color: "#8C8F8C" }
 GradientStop { position: 0.17; color: "#6A6D6A" }
 GradientStop { position: 0.98;color: "#3F3F3F" }
 GradientStop { position: 1.0; color: "#0e1B20" }
 }

Il gradiente è usato dalla barra del menu per simulare l'effetto di profondità. Il primo colore inizia a 0.0 e l'ultimo termina a 1.0.

Prossimi passi

Abbiamo terminato di costruire l'interfaccia utente di un semplice editor di testo. Proseguendo, completata l’interfaccia utente, possiamo implementare la logica dell'applicazione utilizzando Qt e C++ standard. QML funziona bene come strumento di prototipazione, separando efficacemente la logica dell'applicazione dal progetto dell'interfaccia utente.

p=. Interfaccia editor quasi conclusa

Estendere QML attraverso Qt C++

Ora che abbiamo completato il layout del nostro editor di testi, possiamo implementare le funzionalità in C+. Usando il QML con C+ abbiamo la possibilità di creare la logica della nostra applicazione attraverso Qt. Possiamo creare dei contenuti QML in un applicazione C++ usando le classi dichiarative Qt e visualizzando gli elementi QML usando la Graphic Scene. Altrimenti, possiamo esportare il nostro codice C++ in un plugin che potrà essere letto dal tool qmlviewer. Per la nostra applicazione implementiamo le funzioni di caricamento e salvataggio per poi esportarle come un plugin. In questo modo, dobbiamo solo caricare direttamente il file QML invece di eseguire un file eseguibile.

Esporre classi C++ in QML

Implementeremo il caricamento e salvataggio dei file attraverso Qt e C+. Le classi e le funzioni C+ possono essere usare in QML registrandole. Le classi hanno bisogno di essere compilate come plugin Qt e i file QML devo conoscere dove sono localizzati i plugin.

Per la nostra applicazione, dobbiamo creare i seguenti elementi:

1. Una classe Directory che gestirà le operazioni legate alle directory
2. Una classe File che sarà un QObject, che simulerà la lista di files nella directory
3. Una classe plugin che registrerà la classe per il contenuto QML
4. Un progetto Qt che compilerà il plugin
5. Un file qmldir che informerà il tool qmlviewerfile sulla locazione del plugin

Costruire il plugin Qt

Per costruire il plugin, abbiamo bisogno di specificarlo nel file di progetto Qt. Innanzitutto, i sorgenti,gli headers e i moduli devono essere aggiunti al nostro file di progetto. Tutti i file C++ e di progetto devono essere nella directory filedialog.

 In cppPlugins.pro:

TEMPLATE = lib
 CONFIG ''= qt plugin
 QT''= declarative

DESTDIR ''= ../plugins
 OBJECTS_DIR = tmp
 MOC_DIR = tmp

 TARGET = FileDialog

 HEADERS''= directory.h  file.h  dialogPlugin.h

SOURCES += directory.cpp  file.cpp  dialogPlugin.cpp

In particolare, compiliamo Qt con i moduli dichiarativi e settiamolo come plugin, avremo bisogno di un lib template. Metteremo poi il plugin compilato nella sua directory padre.

Registrare una classe in QML

 In dialogPlugin.h:

#include <QtDeclarative/QDeclarativeExtensionPlugin>

class DialogPlugin : public QDeclarativeExtensionPlugin
 {
 Q_OBJECT

public:
 void registerTypes(const char *uri);

};

La nostra classe plugin, DialogPlugin è una sottoclasse di QDeclarativeExtensionPlugin. Dobbiamo implementare la funzione ereditata, registerTypes(). Il file dialogPlugin.cpp si prenta cosi:

 DialogPlugin.cpp:

#include "dialogPlugin.h"
 #include "directory.h"
 #include "file.h"
 #include <QtDeclarative/qdeclarative.h>

void DialogPlugin::registerTypes(const char '''uri){

 qmlRegisterType<Directory>(uri, 1, 0, "Directory");
 qmlRegisterType<File>(uri, 1, 0,"File");
 }

 Q_EXPORT_PLUGIN2(FileDialog, DialogPlugin);

La funzione registerTypes() registra le nostre classi File e Directory in QML. Questa funzione necessità di un nome per la classe per il suo template, un numero di versione maggiore e minore e un nome per la nostre classi.

Dovremmo esportare il plugin usando la macro Q_EXPORT_PLUGIN2. Notate nel nostro file dialogPlugin.h, abbiamo messo la macro Q_OBJECT macro all'inizo della classe. Dobbiamo quindi lanciare qmake sul progetto per generare i necessari codici meta-oggetto di Qt.

Creare proprietà QML nella classi C++

Possiamo creare degli elementi e delle proprietà QML usando C++ e il sistema meta-oggetto di Qt. Possiamo implementare delle proprietà usando gli slot e signal, per farli conoscere a Qt. Queste proprieta possono poi essere usate in QML.

Per l'editor di testi, abbiamo bisogno di abilitare il caricamento e salvataggio dei files. Tipicamente, queste funzionalità sono contenute in un file dialog. Fortunatamente, possiamo usare QDir, QFile e QTextStream per implementare la lettura delle cartelle e i flussi di input/output.

class Directory : public QObject{

 Q_OBJECT

 Q_PROPERTY(int filesCount READ filesCount CONSTANT)
 Q_PROPERTY(QString filename READ filename WRITE setFilename NOTIFY filenameChanged)
 Q_PROPERTY(QString fileContent READ fileContent WRITE setFileContent NOTIFY fileContentChanged)
 Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )

 …

La classe Directory usa il sistema meta-oggetto di Qt per registrare le proprietà di cui ha bisogno per realizzare la gestione dei file. La classe Directory è esportata come plugin e usabile in QML come un elemento Directory. Ciascuna delle proprietà elencate che utilizza la macro Q_PROPERTY è una proprietà QML.

Q_PROPERTY dichiara una proprietà, così come le sue funzioni di lettura e scrittura nel sistema meta-oggetto di Qt. Per esempio la proprietà filename, di tipo QString, è leggibile usando la funzione filename() e scrivibile usando la funzione setFilename(). Inoltre. c'è un segnale associato alla proprietà filename chiamato filenameChanged(), che è emesso quando la proprietà cambia. Le funzioni di lettura e scrittura sono dichiarate pubbliche nel file header.

Allo stesso modo, abbiamo le altre proprietà dichiarate ai loro usi. La proprietà filesCount indica il numero di file in una directory. La proprietà filename è settata sul nome del file corrente selezionato e il caricamento/salvattaggio del contenuto del dile è memorizzato nella proprietà fileContent.

 Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )

La proprietà files list è una lista di tutti i file filtrati nella directory. La classe Directory è implementata per filtrare i file non validi; solo i file con estensione .txt sono validi. Inoltre, QLists può essere utilizzata nei file QML dichiarandoli come QDeclarativeListProperty in C+. L'oggetto template deve ereditare da un QObject, quindi, la classe File deve anche ereditare da QObject. Nella classe Directory, l'elenco di oggetti File che è memorizzato in un Qlist chiamato m_fileList.

 class File : public QObject{

 Q_OBJECT
 Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)

 …
 };

Le proprietà possono quindi essere utilizzate in QML come parte del elemento della proprietà Directory. Notate che non abbiamo bisogno di creare un identificatore id nel nostro codice C.

 Directory{
 id: directory

 filesCount
 filename
 fileContent
 files

 files[0].name
 }

Siccome QML usa la sintassi e la struttura Javascript, possiamo scorrere l'elenco dei file e recuperare le sue proprietà. Per recuperare il nome del primo file, chiameremo files[0].name.

Le regolari funzioni C+ sono accessibili anche da QML. Il caricamento e salvataggio implementati in C++ sono dichiarati usando la macro Q_INVOKABLE. Altrimenti, possiamo dichiarare le funzioni cme slot e saranno accessibili da QML.

In Directory.h:

 Q_INVOKABLE void saveFile();
 Q_INVOKABLE void loadFile();

La classe Directory deve inoltre notificare agli altri oggetti ogni volta che cambia il contenuto della directory. Questa funzione viene eseguita utilizzando un segnale. Come accennato in precedenza, i segnali QML devono avere un gestore corrispondente con prefisso i loro nomi. Il segnale è chiamato directoryChanged e viene emesso quando c'è un aggiornamento delal directory. L'aggiornamento semplicemente ricarica il contenuto della directory e aggiorna la lista dei files validi nella directory. Gli oggetti QML possono essere notificati collegando un azione al segnale onDirectoryChanged.

La lista di proprietà deve essere ulteriormente esplorata. Questo perché le proprietà list utilizzano delle chiamate per accedere e modificare il contenuto dell'elenco. La proprietà list è di tipo QDeclarativeListProperty<File>. Ogni volta che si accede alla lista, la funzione di accesso deve restituire un QDeclarativeListProperty<File>. Il template File, ha bisogno di derivare da un QObject. Inoltre, per creare QDeclarativeListProperty, la lista di accesso e modifica devono essere passati al construttore come puntatori a funzione. La lista, in questo caso QList, deve anche essere una lista di puntatori a files.

Il costruttore QDeclarativeListProperty e l'implementazione della Directory:

 QDeclarativeListProperty ( QObject''' object, void * data, AppendFunction append, CountFunction count = 0, AtFunction at = 0, ClearFunction clear = 0 )
 QDeclarativeListProperty<File>( this, &m_fileList, &appendFiles, &filesSize, &fileAt, &clearFilesPtr );

Il costruttore passa dei puntatori alla funzione che li accoda alla lista, conta la lista, recupera l'oggetto usando un indice e svuota la lista. Solo la funzione di accodamento è obbligatoria. Si noti che il puntatore a funzione deve corrispondere alla definizione di AppendFunction, CountFunction, AtFunction, o ClearFunction.

 void appendFiles(QDeclarativeListProperty<File> * property, File * file)
 File* fileAt(QDeclarativeListProperty<File> * property, int index)
 int filesSize(QDeclarativeListProperty<File> * property)
 void clearFilesPtr(QDeclarativeListProperty<File> *property)

Per semplificare la nostra file dialog, la classe Directory filtra i files di testo non validi, che non hanno estensione .txt. Se un file non ha estensione .txt, non sarà visibile nella nostra file dialog. Inoltre, l'applicazione consente di verificare che i file salvati hanno estensione. Directory utilizza QTextStream per leggere il file e per esportare il contenuto in un file.

Con il nostro elemento Directory, possiamo recuperare i file come lista, conoscere quanti file ci sono nella directory dell'applicazione, ottenere il nome del file e il suo contenuto come stringhe, e notificare se ci sono cambiamenti nel contenuto della directory.

Per compilare il plugin, lanciamo qmake sul file di progetto cppPlugins.pro, e lanciamo un make per compilare e trasferire il plugin nella directory dei plugins.

Integrare il File Dialog nel file Menu

Il nostro FileMenu deve visualizzare l'elemento FileDialog, contenente la lista di files in una directory, consentendo all'utente di selezionarne uno cliccando sulla lista. Abbiamo bisogno di assegnare i pulsanti del salvataggio e caricamento alle loro rispettive azioni. Il file FileMenu contiene un input di testo editabile per consentire all'utente di inserire il nome di un file attraverso la tastiera.

L'elemento Directory è usato nel file FileMenu.qml e notifica all'elemento FileDialog che la directory ha aggiornato il suo contenuto. Questa notifica è eseguita dal gestore del signal onDirectoryChanged.

 In FileMenu.qml:

Directory{
 id:directory
 filename: textInput.text
 onDirectoryChanged: fileDialog.notifyRefresh()
 }

Mantenendo con la semplicità della nostra applicazione, il filedialog sarà sempre visibile e non visualizzaremo file di testo non validi, che non hanno un estensione .txt.

In FileDialog.qml:

signal notifyRefresh()
 onNotifyRefresh: dirView.model = directory.files

L'elemento FileDialog visualizza il contenuto della directory leggendo le sue proprietà chiamate files. I files sono usati come modelli dell'elemento GridView, che visualizza gli oggetti in una griglia in accordo con il suo delegato. Il delegato gestisce l'aspetto del modello e il nostro file dialog semplicemente crea una griglia con un testo centrato nel mezzo. Cliccando sul nome del file si visualizzerà un rettangolo per evidenziare il nome del file. Il FileDialog è notificato ogni volta che il segnale notifyRefresh è emesso, ricaricando i files nella directory.

 In FileMenu.qml:

Button{
 id: newButton
 label: "New"
 onButtonClick:{
 textArea.textContent = ""
 }
 }
 Button{
 id: loadButton
 label: "Load"
 onButtonClick:{
 directory.filename = textInput.text
 directory.loadFile()
 textArea.textContent = directory.fileContent
 }
 }
 Button{
 id: saveButton
 label: "Save"
 onButtonClick:{
 directory.fileContent = textArea.textContent
 directory.filename = textInput.text
 directory.saveFile()
 }
 }
 Button{
 id: exitButton
 label: "Exit"
 onButtonClick:{
 Qt.quit()
 }
 }

Il nostro FileMenu può ora connette le sue rispettive azioni. Il saveButton trasferirà il testo dal TextEdit sulla proprietà fileContent della directory, poi copierà il nome dall' input textedit. Finalmente, il pulsante chiamerà la funzione saveFile(), salvando il file. Il pulsante loadButton ha una simile esecuzione. Inoltre, l'azione New svuoterà il contenuto del TextEdit.

Inoltre, i pulsanti EditMenu sono collegati alle funzioni di TextEdit per copiare, incollare e selezionare tutto il testo nell'editor di testo.

p=. editor di testo quasi completo

Completamento Editor di testi

p=. editor di testi finito

L'applicazione può funzionare come un semplice editor di testi, in grado di accettare il testo e salvarlo in un file. L'editor di testo può anche caricare un file e eseguire la manipolazione del testo.