Le guide de développement d'application de bureau avec Qt Quick

On commence par implémenter le design de l'image du dessous.

Elle donne une bonne idée de ce que pourrait imaginer l'utilisateur concernant une telle interface. Elle permet également d'identifier les différents éléments et interactions à implémenter plus tard.

Comme dit précédemment, trois pages peuvent contenir des items Note. On peut aussi constater que les signets pour changer de page sont placés sur la droite. La barre d'outils de gauche ne contient que deux boutons : un pour l'ajout et l'autre pour la suppression de toutes les notes de la page. Chaque item Note possède lui-même une barre d'outils qui lui permet d'être déplacé à l'aide d'un système de glisser-déposer. Sur chaque note, un bouton permet de supprimer la note.

II-A-2-a. Et ensuite ? ▲

L'utilisation de Qt Creator simplifie vraiment la vie pendant la phase de prototypage. Vous vous en rendrez sûrement compte rapidement. C'est la façon la plus efficace, surtout si vous n'arrêtez pas de changer, tester et bidouiller dans chaque composant QML. N'hésitez pas à regarder les effets d'une modification, même mineure, cela vous permettra d'identifier plus facilement les erreurs.

Pour comprendre comment créer un projet d'interface Qt Quick, la documentation propose quelques pistes.

Note : un unique fichier QML « main.qml » au début sert à charger et à lancer l'application. Pour NoteApp, le fichier main.qml a en réalité été généré automatiquement par Qt Creator.

Pour rapprocher la programmation orientée objet de QML, on pourrait comparer les composants QML à des classes utilisées pour instancier et déclarer des objets. On pourrait en fait écrire entièrement une application simple dans un gros fichier QML, mais cela augmenterait sûrement la complexité et empêcherait de réutiliser le code.

Un composant QML peut être vu comme un groupe d'éléments QML, bien qu'en général il n'en contienne qu'un seul.

Note : chaque composant QML est contenu dans son propre fichier QML (.qml) éponyme. Par exemple, le composant Note sera dans un fichier appelé Note.qml.

D'après le concept d'interface, voici une brève liste des composants qui s'imposent d'eux-mêmes. On en ajoutera d'autres plus tard, lorsque l'on reverra l'application.

• Note : représente un item note.
• Page : contient des notes.
• Marker : représente un signet de page, permet à l'utilisateur de changer de page.
• NoteToolbar : la barre d'outils présente sur chaque note qui permet les déplacements avec la souris.

Jetez un coup d'œil à la page de la documentation dédiée pour comprendre comment utiliser Qt Creator pour créer les composants dont on a parlé. On regardera en détail la création de chacun d'entre eux dans les chapitres à venir.

II-B-2-a. Et ensuite ?▲

On a normalement créé les fichiers QML nécessaires avec Qt Creator.

Le code de NoteToolbar devrait ressembler à ceci pour correspondre à nos attentes :

// NoteToolbar.qml

import QtQuick 1.1

// Élément Rectangle avec dimensions et couleurs prédéfinies.
Rectangle {
	id: root
	width: 100
	height: 62
	color: "#9e964a"
}

Le composant Note possédera un composant NoteToolbar. De plus, il disposera d'un élément de saisie pour récupérer le texte entré par l'utilisateur. On utilisera l'élément QML TextEdit à cet effet. Pour arranger ces items entre eux, on utilise la propriété anchor. Cette propriété provient de l'élément Item, dont toutes les classes QML dérivent.

Référez-vous à la documentation pour plus de détails sur l'utilisation de la propriété anchor.

// Note.qml
import QtQuick 1.1
Rectangle {
	id: root
	width: 200
	height: 200
	color: "#cabf1b"

	// Création de l'item NoteToolbar qui sera positionné/attaché à son parent.
	NoteToolbar {
		id: toolbar
		// La hauteur doit être spécifiée puisqu'il 
		// n'y a pas de positionnement relatif sur le bas.
		height: 40

		// " Liaison " au parent grâce aux
		// positionnements relatifs sur le haut, 
		// la gauche et la droite.
		anchors {
			top: root.top
			left: root.left
			right: root.right
		}
	}

	// Création de la zone de saisie.
	TextEdit {
		anchors {
			top: toolbar.bottom
			bottom: root.bottom
			right: root.right
			left: root.left
		}
		wrapMode: TextEdit.WrapAnywhere
	}
}

Note : on ne peut pas combiner l'utilisation de la propriété anchor avec un positionnement absolu (ce qui semble logique).

Attention, pour des raisons de performances, vous ne devriez pas utiliser la propriété anchor avec des items qui n'ont pas de lien direct avec cet item (c'est-à-dire l'item parent et les items « frères », qui ont le même parent).

Une fois le composant Note prêt, on essaye d'en mettre quelques-uns dans un composant Page.

// Page.qml

import QtQuick 1.1

Rectangle {
	id: root
	width: 600
	height: 400
	color: "#222525"
	
	// Création d'une Note.
	Note {
		id: note1
		// Les propriétés x et y servent 
		// à définir un positionnement absolu.
		x: 105; y: 144
	}
	
	Note {
		id: note2
		x: 344
		y: 83
	}
}

Avec Qt Creator, vous pouvez simplement exécuter ce fichier. Il lancera alors qmlviewer qui se chargera d'afficher le fichier Page.qml. Le résultat devrait ressembler à ceci :

Comme pour chaque autre composant, Marker sera simplement un rectangle avec des dimensions prédéfinies. Son comportement sera défini plus tard.

// Marker.qml

import QtQuick 1.1

Rectangle {
	id: root
	width: 50
	height: 90
	color: "#0a7bfb"
}

II-C-3-a. Et ensuite ?▲

Dans la prochaine partie, on verra comment assembler les composants créés jusqu'à présent et on en finira avec le prototype.

Si on regarde de nouveau le concept d'interface, on remarque que la zone des signets est située sur la droite. La zone qui contiendra les notes (Page) se situe au centre. Il manque encore la barre d'outils.

Implémentons-la donc maintenant !

La barre d'outils contient deux boutons : un pour créer une nouvelle note et l'autre pour les supprimer toutes. Pour rendre le tout plus simple, on ne les sépare pas dans un nouveau fichier QML, on les déclare à l'intérieur même du fichier main.qml.

Le code ressemble à ceci :

// Utilisation de l'élément Rectangle pour notre barre d'outils.
// Il aide à aligner le Column avec le reste des items.
Rectangle {
	id: toolbar
	
	// On définit une largeur puisque toolbar ne sera 
	// pas attaché sur la droite.
	width: 50
	
	color: "#444a4b"
		anchors {
		left: window.left
		top: window.top; bottom: window.bottom
		topMargin: 100; bottomMargin: 100
	}
	
	// Utilisation de Column pour gérer nos deux outils.
	Column {
		anchors { anchors.fill: parent; topMargin: 30 }
		spacing: 20
		
		// Juste pour le prototype, on utilise
		// un repeater pour générer deux outils.
		Repeater {
			model: 2
			// Le rectangle symbolisera l'outil
			// pendant la phase de prototypage.
			Rectangle { width: 50; height: 50; color: "red" }
		}
	}
}

Maintenant, nous sommes fins prêts à assembler le prototype. Voici le fichier main.qml :

// main.qml

import QtQuick 1.1

Rectangle {
	// Utilisation de window comme id.
	id: window
	width: 800
	height: 600

	// Création de MarkerPane.
	MarkerPanel {
		id: markerPanel
		width: 50
		anchors.topMargin: 20
		anchors {
			right: window.right
			top: window.top
			bottom: window.bottom
		}
	}
	
	// Barre d'outils.
	Rectangle {
		id: toolbar
		width: 50
		color: "#444a4b"
		anchors {
			left: window.left
			top: window.top
			bottom: window.bottom
			topMargin: 100
			bottomMargin: 100
		}
	}
	Column {
		anchors { fill: parent; topMargin: 30 }
		spacing: 20
		Repeater {
			model: 2
			Rectangle { width: 50;
				height: 50;
				color: "red"
			}
		}
	}
}

Voici à quoi ressemble le tout assemblé lorsqu'il est lancé avec Qt Creator :

Pour l'instant, on a un prototype très simpliste qui servira de base pour plus tard. On peut cependant ajouter une fonctionnalité très simple qui permettra de déplacer les notes sur la page dès maintenant. L'élément QML MouseArea possède un ensemble de propriétés drag. La propriété drag.target contiendra l'identificateur de notre note.

Comme l'utilisateur doit utiliser la barre d'outils des notes pour les déplacer, cet élément (le MouseArea) devra se trouver dans le composant NoteToolbar. Ce composant gère les déplacements avec la souris.

Pour réussir ce tour de force, on doit permettre à l'item NoteToolbar de lier sa propriété drag.target à l'id du composant Note. On utilise à cette fin les alias de propriétés (ce sont en fait des références à d'autres propriétés).

Voici donc le code de NoteToolbar modifié :

// NoteToolbar.qml

import QtQuick 1.1

Rectangle {
	id: root
	width: 100
	height: 62
	color: "#9e964a"
	
	// Alias de propriété " drag " de cet item sur la propriété drag de mouseArea.
	property alias drag: mousearea.drag
	
	// Création de l'item MouseArea.
	MouseArea {
		id: mousearea
		anchors.fill: parent
	}
}

Dans le code du dessus, on peut voir que l'alias de propriété drag a été lié à la propriété drag de MouseArea. On verra comment l'utiliser dans le composant Note.

// Note.qml

import QtQuick 1.1

Rectangle {
	id: root
	width: 200
	height: 200
	color: "#cabf1b"

	// Création d'un item NoteToolbar 
	// qui sera positionné en fonction de ses parents.
	NoteToolbar {
		id: toolbar
		height: 40
		anchors {
			top: root.top
			left: root.left
			right: root.right
		}

		// Utilisation de l'alias de propriété défini plus haut
		// pour affecter à drag.target notre item Note.
		drag.target: root
	}

	// Création du TextEdit (zone de saisie).
	TextEdit {
		anchors {
			top: toolbar.bottom
			bottom: root.bottom
			right: root.right
			left: root.left
		}
		wrapMode: TextEdit.WrapAnywhere
	}
}

Vous pouvez trouver des informations plus détaillées sur l'utilisation de propriétés liées à cette la page.

II-E-2-a. Et ensuite ?▲

Avant d'aller plus loin, il est nécessaire que vous compreniez pourquoi utiliser l'élément Rectangle comme élément principal d'un composant devrait être évité dans la mesure du possible. Jusqu'à maintenant, on l'a utilisé parce qu'il fournissait rapidement un résultat valable (visuellement parlant) et c'est généralement ce qu'on attend d'un prototype.

Une fois, cependant, que le prototype est terminé, c'est mieux de remplacer le Rectangle par un Item, surtout si on veut personnaliser l'arrière-plan un peu plus qu'en changeant la couleur de fond (c'est d'ailleurs ce qu'on verra dans une prochaine partie).

Le composant Page ressemble désormais à ceci :

// Page.qml

import QtQuick 1.1
Item {
	id: root
	...
}

Attention : à partir de maintenant, on considérera que l'élément de base de chacun des composants est un Item. Jetez donc un coup d'œil au code source de ce chapitre.

À première vue, la différence majeure entre PagePanel et MarkerPanel est que les Marker sont toujours visibles, alors qu'on est supposé ne voir qu'une seule page à la fois dans avec PagePanel.

On pourrait obtenir le résultat attendu de plusieurs façons. Notamment, on pourrait utiliser une fonction JavaScript qui modifierait la visibilité de chaque Page en fonction du Marker pressé par l'utilisateur.

Avec NoteApp, on utilisera l'élément State à cette fin. Le composant PagePanel possédera trois états différents et chacun sera lié à une seule page. Ainsi, une seule d'entre elles sera visible à la fois.

D'abord, on doit un peu modifier le composant Page en affectant à la propriété opacity la valeur 0.0 par défaut. L'état ne fera en fait que modifier l'opacité de la page qui lui est liée.

// Page.qml

import QtQuick 1.1
Item {
	id: root
	opacity: 0.0
	...
}

Une fois le fichier PagePanel.qml créé, on définit les différents états et leur page associée. On a besoin de ces états :

• personnel (personal) ;
• loisirs (fun) ;
• travail (work).

Ils vont modifier respectivement l'opacité de ces pages :

• personalpage ;
• funpage ;
• workpage.

Voici une représentation de ce qui a été décrit plus haut :

Voici à quoi ressemble le code de PagePanel :

import QtQuick 1.1

// PagePane.qml

Item {
	id: root
	// Création de la liste d'états (states).
	states: [
		// Création d'un item state avec son nom.
		State {
			name: "personal"
			// Les propriétés qui vont être modifiées.
			PropertyChanges {
				target: personalpage
				opacity:1.0
				restoreEntryValues: true
			}
		},
		State {
			name: "fun"
			PropertyChanges {
				target: funpage
				opacity:1.0
				restoreEntryValues: true
			}
		},
		State {
			name: "work"
			PropertyChanges {
				target: workpage
				opacity:1.0
				restoreEntryValues: true
			}
		}
	]

	// Création des trois pages.
	Page { id: personalpage; anchors.fill: parent }
	Page { id: funpage; anchors.fill: parent }
	Page { id: workpage; anchors.fill: parent }
}

Note : en mettant la propriété restoreEntryValue à true, on précise que, quand on change d'état, on veut que la propriété soit remise à sa valeur par défaut.

En regardant le code du dessus, on peut voir que l'on a créé trois items Page et que les trois états associés modifient l'opacité. Aucune surprise, donc.

Dans cette étape, on a réussi à créer le composant PagePanel qui permettra à l'utilisateur de changer de page et donc de mieux gérer ses notes.

III-A-2-a. Et ensuite ?▲

On modifiera un peu l'application pour la rendre plus attrayante, à l'aide de graphismes.

L'élément BorderImage est conseillé dans les cas où la taille de l'image doit être ajustée en fonction du contexte, tout en conservant les bords à leur taille initiale. Les effets d'ombre sur les composants sont un bon exemple : en général, on préférerait qu'elles conservent la même taille.

Regardons ensemble comment utiliser les BorderImage comme arrière-plan pour les composants.

On ajoute l'élément BorderImage dans PagePanel.qml.

// PagePanel.qml

...

BorderImage {
	id: background
	// BorderImage prend toute la place possible.
	anchors.fill: parent
	source: "images/page.png"
	// On indique la marge.
	// Cette information devrait venir du graphiste.
	border.left: 68; border.top: 69
	border.right: 40; border.bottom: 80
}

...

On fait la même chose à l'intérieur de Note dans Note.qml.

// Note.qml

...

BorderImage {
	id: noteImage
	anchors { fill: parent}
	source: "images/personal_note.png"
	border.left: 20; border.top: 20
	border.right: 20; border.bottom: 20
}

// Création de NoteToolbar qui sera positionné en fonction de son parent.
NoteToolbar {
	id: toolbar
	...

Attention : soyez sûr que l'élément BorderImage soit utilisé au bon « endroit », parce que l'ordre dans lequel sont définis les éléments d'un composant affecte le rendu final. Les items avec la même valeur « Z » (la profondeur) apparaîtront ainsi dans l'ordre dans lequel ils sont déclarés. Référez-vous à la page de la documentation pour plus d'informations à ce sujet.

Vous vous demandez sûrement quelle est la meilleure approche pour utiliser un arrière-plan sur les items Marker alors qu'ils sont créés à l'intérieur du composant MarkerPanel. Eh bien, la solution se trouve déjà dans le code du composant MarkerPanel !

La liste markerData, le modèle du Repeater, existe déjà. On peut agrandir markerData pour qu'elle contienne les chemins relatifs des images et utiliser Image comme élément de base de Marker.

// Marker.qml

import QtQuick 1.1

// Image est très pratique comme item de base puisque Marker est simplement 
// un élément graphique avec un signal clicked().
Image {
	id: root

	// Déclaration du signal " clicked() ".
	signal clicked()

	// Création de MouseArea pour détecter les clics de souris.
	MouseArea {
		id: mouseArea
		anchors.fill: parent

		// On émet le signal " clicked() ".
		onClicked: root.clicked()
	}
}

Voyons maintenant comment le composant MarkerPanel doit être modifié :

// MarkerPanel.qml
...
// Dans markerData, on ajoute les chemins des images à utiliser.
property variant markerData: [
	{ img: "images/personalmarker.png", markerid: "personal" },
	{ img: "images/funmarker.png", markerid: "fun" },
	{ img: "images/workmarker.png", markerid: "work" }
]

Column {
	id: layout
	anchors.fill: parent
	spacing: 5
	
	Repeater {
		// On applique le modèle.
		model: markerData
		delegate: Marker {
			id: marker
			
			// On lie la valeur img du modèle
			// à la valeur source du signet.
			source: modelData.img
			
			onClicked: root.activeMarker = modelData.markerid
		}
	}
}

Dans ce code, on peut voir comment la propriété source de Marker est liée à la valeur img de markerData.

On utilise aussi l'élément BorderImage pour mettre un arrière-plan sur le composant NoteToolbar ainsi que pour l'élément principal dans main.qml.

Note : demandez toujours aux graphistes quelles devraient être les marges sur les contours des éléments BorderImage et comment ces éléments devraient être alignés et positionnés.

En lançant MarkerPanel.qml dans Qt Creator, vous devriez obtenir ceci :

Ce serait plus pratique de créer un unique composant qui pourrait être utilisé pour les boutons New Note (nouvelle note) et Clear All (tout supprimer). C'est pourquoi on implémente à présent un composant Tool, qui aura comme élément de base Image qui gérera les clics de souris de l'utilisateur.

L'élément Image est souvent utilisé comme élément de l'interface de base, quelle que soit sa nature (image statique ou animée).

// Tool.qml

import QtQuick 1.1

// Utilisation de Image comme élément de base.
Image {
	id: root

	// On ajoute le signal clicked().
	signal clicked()

	// Utilisation de MouseArea
	// pour intercepter les clics de souris.
	MouseArea {
		anchors.fill: parent
		// Émission du signal clicked.
		onClicked: root.clicked()
	}
}

On utilise le composant Tool pour créer une barre d'outils, puisqu'il est déjà disponible. On doit modifier le code du prototype pour utiliser des items Tool au lieu de simples rectangles.

// main.qml

...
// Arrière plan de la barre d'outils
Rectangle {
	anchors.fill: toolbar
	color: "white"
	opacity: 0.15
	radius: 16
	border { color: "#600"; width: 4 }
}

// Utilisation de Column pour aligner
// les Tool horizontalement.
Column { // Barre d'outils de gauche
	id: toolbar
	spacing: 16
	anchors {
		top: window.top
		left: window.left
		bottom: window.bottom
		topMargin: 50
		bottomMargin: 50
		leftMargin: 8
	}
	
	// Outil " nouvelle note "
	Tool {
		id: newNoteTool
		source: "images/add.png"
	}
	
	// Outil " tout supprimer "
	Tool {
		id: clearAllTool
		source: "images/clear.png"
	}
}
...

Maintenant que tous les graphismes sont en place, l'application est normalement beaucoup plus attrayante.

III-C-2-a. Et ensuite ?▲

On sait que les items Page sont normalement parents des items Note : ils sont par conséquent responsable de leur création (ainsi que du chargement de ces dernières depuis la base de données dans laquelle elles seront stockées, mais on verra tout ça plus tard).

Comme dit plus haut, on charge Note dans Page :

// Page.qml 

... 
// Chargement du composant Note 
Component { 
    id: noteComponent 
    Note { } 
} 
...

Note : createObject() appartient à l'item Component, on doit donc placer la note à l'intérieur d'un tel item avant de pouvoir continuer.

Maintenant, on ajoute une petite fonction JavaScript qui s'occupera de l'ajout des Note, sans oublier que la fonction createObject() prend en argument le parent ainsi qu'une liste d'argument pour la création du composant. On doit, de plus, encapsuler Note dans un autre item Item à l'intérieur même de Page (l'utilité réelle de cette opération vous apparaîtra plus tard qu'on s'occupera de la sauvegarde).

// Page.qml 

... 

// Création d'un item Item qui servira de container. 
Item { id: container }

...

// Une fonction JavaScript pour créer une note. 
function newNoteObject(args) { 
    // Appel de createObject() sur les items noteComponent. 
    // L'item container sera le parent. 
    var note = noteComponent.createObject(container, args) 
    if(note == null) { 
        console.log("impossible de créer l'objet note !") 
    } 
}

...

On peut voir comment une nouvelle note peut être créée dans avec la fonction createObject(). Les notes créées de la sorte appartiendront à l'item container.

On veut désormais appeler cette fonction quand on appuie sur le bouton « New Note » de la barre d'outils (définie dans main.qml). Le problème reste de savoir dans quelle page créer la note lorsque l'on clique sur ce bouton. PagePanel s'occupe de la gestion des Page : de ce fait, il devrait être capable de dire quelle est la page affichée. On peut créer une nouvelle propriété qui stockera cette information. On y accédera dans main.qml et on appellera la fonction newNoteObject().

// PagePanel.qml 

... 

// Page affichée 
property Page currentPage: personalpage 

// Création de la liste des états 
states: [ 
    // Les états sont crées avec leur propre nom. 
    State { 
        name: "personal" 
        PropertyChanges { 
            target: personalpage 
            opacity:1.0 
            restoreEntryValues: true 
        } 
        PropertyChanges { 
            target: root 
            currentPage: personalpage 
            explicit: true 
        } 
    }, 
    State { 
        name: "fun" PropertyChanges { 
            target: funpage 
            opacity:1.0 
            restoreEntryValues: true 
        } 
        PropertyChanges { 
            target: root 
            currentPage: funpage 
            explicit: true 
        } 
    }, 
    State { 
        name: "work" 
        PropertyChanges { 
            target: workpage 
            opacity:1.0 
            restoreEntryValues: true 
        } 
        PropertyChanges { 
            target: root 
            currentPage: workpage 
            explicit: true 
            } 
    }
    ] 
    
...

Vous l'aurez remarqué, on doit modifier un peu chaque état (state) pour qu'il modifie la propriété currentPage comme convenu.

Voyons finalement comment appeler la fonction que l'on a définie plus haut dans main.qml.

// main.qml 

... 
// Utilisation d'une colonne pour les aligner verticalement. 
Column { 
    id: toolbar 
    spacing: 16 
    anchors { 
        top: window.top
        left: window.left
        bottom: window.bottom
        topMargin: 50
        bottomMargin: 50
        leftMargin: 8 
    } 
    // Outil « new note » ou icône « + » 
    Tool { 
        id: newNoteTool 
        source: "images/add.png" 
        // Utilisation de la propriété currentPage pour appeler 
        // newNoteObject() sans argument. 
        onClicked: pagePanel.currentPage.newNoteObject() 
    } 
} 
...

C'est beaucoup plus facile de supprimer une note : en fait, on fait simplement appel à la fonction destroy() du composant que l'on veut supprimer. Vous vous rappelez que l'on avait créé un item container qui contenait toutes les notes ? Eh bien, on peut simplement itérer toute la liste des enfants de cet item et appeler destroy() sur chacun d'entre eux pour tous les supprimer.

On ajoute donc une fonction dans Page qui effectuera cette opération.

// Page.qml 

... 
// Une fonction JavaScript qui itère à travers les enfants 
// et les supprime un par un. 
function clear() {
    for(var i = 0; i<container.children.length; ++i) { 
        container.children[i].destroy() 
    } 
} 
...

On appelle donc cette fonction lorsque l'utilisateur clique sur le bouton « Clear All ».

// main.qml 

... 
// Outil « clear » 
Tool { 
    id: clearAllTool 
    source: "images/clear.png" 
    onClicked: pagePanel.currentPage.clear() 
} 
...

Pour supprimer chaque note indépendamment des autres, on doit ajouter un élément Tool qui servira de bouton dans NoteToolbar (on peut réutiliser le même élément qu'avant).

// Note.qml 

... 
// Création de NoteToolbar 
NoteToolbar { 
    id: toolbar 
    height: 40 
    anchors { 
        top: root.top
        left: root.left
        right: root.right 
    } 
    drag.target: root 
    
    // Création du bouton « Delete » 
    Tool { 
        id: deleteItem 
        source: "images/delete.png" 
        onClicked: root.destroy() 
    } 
} 
...

On verra comment stocker les notes.

La base de données de NoteApp est très simple. Il s'agit en fait d'une seule table, qu'on appellera note et qui contiendra toutes les informations nécessaires.

Regardons ce dont on a besoin et ce que l'on a déjà.

• x et y sont des propriétés que chaque item QML possède. C'est donc bon pour les coordonnées.
• noteText est le texte de la note. On peut le récupérer à partir de l'élément Text de Note. On pourrait créer un autre alias de propriété appelé noteText pour accéder encore plus facilement à cette information ;
• noteId et markerId sont des identifiants. noteId sera unique à chaque note. markerId nous aidera à savoir à quelle page appartient une note.

On définit donc les propriétés manquantes.

// Note.qml 

Item { 
    id: root 
    width: 200
    height: 200 
    
    ... 
    property string markerId 
    property int noteId 
    property alias noteText: editArea.text 
    ... 
}

Page est responsable de la création des notes : de ce fait, il devrait attribuer sa valeur à markeId quand une note est crée par l'utilisateur.

// Page.qml 

Item { 
    id: root 
    
    ... 
    
    // Cette propriété aide à sauvegarder les note dans la base de 
    // données. 
    property string markerId ... 
    
    // Cette fonction JavaScript sert à créer les notes 
    // qui ne sont pas chargées depuis la base de données. 
    // Elle attribue sa valeur à markerId. 
    function newNote() { 
        // Appel de la function newNoteObject() 
        newNoteObject( { "markerId": root.markerId } )
    } 
    
    ... 
}

Avant, dans le fichier main.qml, on utilisait la fonction newNoteObject(), mais, comme expliqué plus haut, cette technique ne convient plus totalement. On doit la remplacer avec la fonction newNote() (celle de l'extrait de code ci-dessus).

On doit aussi s'assurer que l'on a attribué une valeur correcte à markerId de Page dans PagePanel.

// PagePanel.qml 

Item { 
    id: root 
    
    ... 
    // Création des trois pages. 
    Page { 
        id: personalpage
        anchors.fill: parent
        markerId: "personal" 
    } 
    Page { 
        id: funpage
        anchors.fill: parent
        markerId: "fun" 
    } Page { id: workpage; anchors.fill: parent; markerId: "work" } ... }

Voyons maintenant comment charger et stocker les notes.

On veut créer un unique fichier JavaScript qui contient toutes les fonctions chargées de la sauvegarde et du chargement des notes. Ce fichier agirait comme une interface entre la base de données et l'application QML. Les bibliothèques sans état (« stateless library », en anglais) peuvent être utiles.

Pour créer une bibliothèque JavaScript sans état dans Qt Creator, on commence par créer un nouveau fichier JavaScript (noteDB.js, ici) et on s'assure de cocher « bibliothèque sans état ».

Note : une bibliothèque sans état est une bibliothèque qui contient un ensemble de fonctions prenant une ou plusieurs entrées et renvoyant une sortie, sans jamais directement toucher à un composant QML.

Le fichier noteDB.js devrait apporter ces fonctionnalités :

• ouvrir/créer une instance d'une base de données locale ;
• créer les tables nécessaires de la base de données ;
• lire les notes depuis la base de données ;
• supprimer toutes les notes de la base de données.

On verra au fur et à mesure comment implémenter ces fonctionnalités. Regardons maintenant les fonctions que l'on doit écrire :

• openDB() : crée la base de donnée si elle n'existe pas encore ; sinon, l'ouvre ;
• createNoteTable() : crée la table note si elle n'existe pas encore (cette fonction sera appelée uniquement dans openDB()) ;
• clearNoteTable() : supprime toutes les lignes de la table note ;
• readNotesFromPage(markerId) : lit toutes les notes de la base de données dont la colonne markerId correspond à l'argument markerId et renvoie un dictionnaire ;
• saveNotes(noteItems, markerId) : sert à sauvegarder les notes dans la base de données. noteItems est une liste d'items Note.

On considère que le fichier JavaScript est maintenant écrit et on regarde comment l'utiliser dans les fichiers QML (on l'implémentera plus tard).

Ouvrir la connexion à la base de données dans le fichier main.qml est presque toujours une bonne habitude à prendre. On peut accéder à la fonction openDB() de là : ainsi, la connexion ne sera effectuée qu'une seule fois.

Importons noteDB.js dans main.qml. La question reste de savoir quand appeler openDB(). QML propose les signaux onCompleted() et onDestruction() qui sont émis quand un composant est complètement chargé ou lors de sa destruction (respectivement).

// main.qml 

import QtQuick 1.1 
import "noteDB.js" as NoteDB 

... 

// Ce signal est émis quand le composant est complètement chargé. 
Component.onCompleted: { 
    NoteDB.openDB() 
} 

...

Voici l'implémentation de la fonction openDB(). Elle appelle une autre fonction : openDatabaseSyn() pour créer la base de données. Ensuite, elle appelle la fonction createNoteTable(), évoquée plus haut.

//noteDB.js 

... 

function openDB() { 
    print("noteDB.createDB()") 
    _db = openDatabaseSync("StickyNotesDB","1.0", "The stickynotes Database", 1000000); 
    createNoteTable(); 
} 

function createNoteTable() { 
    print("noteDB.createTable()") 
    _db.transaction( function(tx) { 
        tx.executeSql( 
            "CREATE TABLE IF NOT EXISTS note 
            (noteId INTEGER PRIMARY KEY AUTOINCREMENT, 
            x INTEGER, 
            y INTEGER, 
            noteText TEXT, 
            markerId TEXT)")
        })
    } 

...

La base de données est maintenant initialisée. On peut charger les items Note dans Page (puisque Page est responsable de leur création). Plus haut, on avait précisé que readNotesFromPage(markerId) devait renvoyer un dictionnaire des notes d'une page spécifiée.

//noteDB.js 

... 
function readNotesFromPage(markerId) { 
    print("noteDB.readNotesFromPage() " + markerId) 
    var noteItems = {} 
    _db.readTransaction( function(tx) { 
        var rs = tx.executeSql( 
            "SELECT * FROM note WHERE markerId=? 
            ORDER BY markerid DESC", [markerId] )
        var item 
        for (var i = 0; i < rs.rows.length; i++) { 
            item = rs.rows.item(i) 
            noteItems[item.noteId] = item
        } 
    }) 
    return noteItems 
}

Voici donc le code du fichier Page.qml.

// Page.qml 

... 

// Appel à loadNotes() quand le composant est chargé. 
Component.onCompleted: loadNotes() 

// Une fonction qui lit les notes de la base de données function 
loadNotes() { 
    var noteItems = NoteDB.readNotesFromPage(markerId) 
    for (var i in noteItems) { 
        newNoteObject(noteItems[i]) 
    } 
} 

...

On peut voir que la fonction newNoteObject() définie un peu plus haut dans Page.qml prend en argument les valeurs qui correspondent à une ligne de la table (c'est-à-dire x, y, noteText, markerId et noteId).

Remarque : les champs de la table note sont les même que les noms des propriétés de Note. Ceci nous fait gagner du temps en passant directement en argument une ligne du dictionnaire.

Maintenant que le chargement est fait, passons à la suite. On sait que PagePanel crée chacune des pages (qui contiennent les notes). PagePanel devrait donc savoir tout ce qu'il nous faut au moment de la sauvegarde.

//noteDB.js 

... 

function saveNotes(noteItems, markerId) { 
    for (var i = 0; i < noteItems.length; ++i) { 
        var noteItem = noteItems[i] 
        _db.transaction( function(tx) {     
            tx.executeSql( "INSERT INTO note 
                (markerId, x, y, noteText) VALUES(?,?,?,?)", 
                [markerId, noteItem.x, noteItem.y, noteItem.noteText]); 
        }) 
    } 
}

Pour le coté QML, on doit définir un alias de propriété dans Page pour accéder facilement à toutes les notes (qui sont en fait les enfants de container).

// PagePanel.qml 

... 

Component.onDestruction: saveNotesToDB() 

// Une autre fonction JavaScript qui sauvegarde les notes dans la 
// base de données 
function saveNotesToDB() { 
    // Suppression des données précédentes 
    NoteDB.clearNoteTable(); 
    
    // Stockage des notes par page 
    NoteDB.saveNotes(personalpage.notes, personalpage.markerId) 
    NoteDB.saveNotes(funpage.notes, funpage.markerId) 
    NoteDB.saveNotes(workpage.notes, workpage.markerId) 
} 

...

On ne veut pas s'embêter, on supprime donc toutes les données sans se poser de question avant de les récrire une par une. On s'évite ainsi d'ajouter du code qui mettrait la base de données à jour.

Nous voici enfin à la fin de ce chapitre ! L'utilisateur est maintenant capable de créer comme il le souhaite ses notes, tandis que l'application se charge pour lui de les sauvegarder et les charger sans même qu'il s'en rende compte.

Dans le prochain chapitre, on verra comment rajouter quelques animations pour rendre l'interface encore plus attrayante.