Création de feuilles de recouvrement

Prendre en main les feuilles de recouvrement.

Rendre notre application utile

Nous avons une fenêtre, nous avons des cartes et nous avons des actions. Pourtant, nous devons encore trouver un moyen de saisir un nom, une description et une date de notre choix.

Une façon d’y parvenir est de créer une nouvelle page où nous plaçons les éléments d’entrée requis. Cependant, une page entière dédiée à la fourniture d’un nom, une description et une date semble un peu excessive.

Au lieu de cela, nous allons utiliser une feuille de recouvrement.

 !

Feuille pour l’ajout d’un compte à rebours

Le nouveau composant que nous ajoutons est « Kirigami.OverlaySheet ». Les feuilles de recouvrement survolent le contenu de la fenêtre et peuvent être utilisées à des fins diverses, comme fournir des informations supplémentaires pertinentes pour le contenu actuel. Elles sont en quelque sorte des fenêtres contextuelles fantaisistes, sauf qu’elles ne peuvent pas être déplacées.

Kirigami.OverlaySheet {
	id: addSheet
	header: Kirigami.Heading {
		text: i18nc("@title:window", "Add kountdown")
	}
	Kirigami.FormLayout {
		Controls.TextField {
			id: nameField
			Kirigami.FormData.label: i18nc("@label:textbox", "Name:")
			placeholderText: i18n("Event name (required)")
			onAccepted: descriptionField.forceActiveFocus()
		}
		Controls.TextField {
			id: descriptionField
			Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
			placeholderText: i18n("Optional")
			onAccepted: dateField.forceActiveFocus()
		}
		Controls.TextField {
			id: dateField
			Kirigami.FormData.label: i18nc("@label:textbox", "Date:")
			placeholderText: i18n("YYYY-MM-DD")
			inputMask: "0000-00-00"
		}
		Controls.Button {
			id: doneButton
			Layout.fillWidth: true
			text: i18nc("@action:button", "Done")
			enabled: nameField.text.length > 0
			onClicked: {
				kountdownModel.append({
					name: nameField.text, 
					description: descriptionField.text, 
					// La méthode « parse() » analyse une chaîne de caractères et renvoie le nombre de
					// millisecondes depuis le premier janvier 1970, 00:00:00 UTC.
					date: Date.parse(dateField.text)
				});
				nameField.text = ""
				descriptionField.text = ""
				dateField.text = ""
				addSheet.close();
			}
		}
	}
}

On peut donner une en-tête aux feuilles de recouvrement. Celles-ci sont définies avec la propriété « header ». Nous avons fourni aux nôtres, un paramètre « Kirigami.Heading » contenant un titre pertinent : « Add Kountdown ».

Nous arrivons ensuite à un objet « Kirigami.FormLayout ». Il nous permet de créer facilement des formulaires de saisie réactifs, affichant correctement les étiquettes des entrées et les entrées elles-mêmes sur les écrans larges et les appareils mobiles plus réduits. Ces dispositions de formulaire sont conçues pour fonctionner avec différents types d’entrées, bien que nous nous en tenions aux simples entrées « Controls.Textfield », nous donnant des zones de texte simples pour y saisir du texte.

Nous avons créé des éléments « Controls.Textfield » agissant comme :

  1. Entrée pour le nom de notre compteur
  2. Entrée pour la description de notre compteur
  3. Saisissez la date à partir de laquelle nous effectuons le compte à rebours, qui doit être fournie au format « AAAA-MM-JJ ».

Dans chacun de ces éléments « Controls.Textfield », nous définissons une propriété « Kirigami.FormData.label » nous permettant de leur attribuer des étiquettes. Le formulaire présentera les étiquettes correctes pour chacune de ces entrées de texte. Nous définissons également un texte de remplacement à l’intérieur des champs avec la propriété « placeholderText » – ce texte disparaîtra dès que l’utilisateur commencera à faire une saisie dans le champ. Enfin, nous définissons également la propriété « onAccepted » pour déclencher la méthode « forceActiveFocus() » du champ suivant. Cela changera le champ actif une fois que l’utilisateur aura appuyé sur la touche « Entrée », améliorant ainsi la convivialité de notre formulaire.

Nous avons également défini une propriété appelée « inputMask » sur le champ de texte pour notre date. La définition de cette propriété à « 0000-00-00 » empêche les utilisateurs de saisir quelque chose pouvant casser la fonctionnalité de l’application (comme du texte), en limitant la saisie à des chiffres que nous pouvons analyser dans un objet de date.

À la fin de notre formulaire, nous incluons un bouton ajoutant notre nouveau compte à rebours au modèle de liste. Nous avons défini la propriété « enabled » par une instruction conditionnelle vérifiant si le champ du nom est vide ou non. S’il l’est, le bouton est désactivé et inversement. Lorsque le bouton est déclenché, il exécute la méthode « append » de notre modèle de liste « kountdownModel », ajoutant un objet Javascript avec les propriétés fournies. Nous nous assurons également d’effacer les champs de texte en donnant une valeur vide à leurs propriétés « text ». Enfin, nous appelons une méthode sur notre feuille de superposition, « close() », réalisant sa fermeture.

Utilisation de notre feuille

actions.main: Kirigami.Action {
	id: addAction
	icon.name: "list-add"
	text: i18nc("@action:button", "Add kountdown")
	onTriggered: addSheet.open()
}

Les feuilles de recouvrement possèdent deux méthodes, « open() » et « close() », contrôlant l’ouverture et la fermeture de ce composant. Dans ce cas, nous avons configuré la feuille pour qu’elle soit ouverte lorsque nous déclenchons notre action. Une fois que nous aurons enregistré nos fichiers et construit notre programme, nous serons en mesure d’ajouter nos propres comptes à rebours personnalisés !

 !