Overlay-vellen aanmaken

Grip krijgen op overlay-vellen.

Uw toepassing nuttig maken

We hebben een venster, we hebben kaarten en we hebben acties. Nu moeten we nog steeds een manier vinden voor het invoeren van een naam, beschrijving en datum van uw keuze.

Een manier waarop we dit zouden kunnen doen is met het maken van een nieuwe pagina waar we de vereiste invoerelementen in plaatsen. Een gehele pagina bestemd om een naam, beschrijving en datum te leveren lijkt een beetje teveel.

In plaats daarvan zullen we een overlay-vel gebruiken.

Aftelvel

De nieuwe component die we toevoegen is Kirigami.OverlaySheet. Overlay-vellen zweven boven de inhoud van het venster en kunnen gebruikt worden voor een variëteit van doelen, zoals extra informatie leveren relevant voor de huidige inhoud. Ze zijn een soort van fancy pop-up vensters, behalve dat ze niet verplaatst kunnen worden.

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, 
					// De methode parse() ontleedt een tekenreeks en geeft het aantal milliseconden terug sinds 1
					// januari 1970, 00:00:00 UTC.
					date: Date.parse(dateField.text)
				});
				nameField.text = ""
				descriptionField.text = ""
				dateField.text = ""
				addSheet.close();
			}
		}
	}
}

We kunnen overlay-vellen een kop geven. Deze worden gezet met de eigenschap header. We hebben de onze met een Kirigami.Heading voorzien van een relevante titel: ‘Kountdown toevoegen’.

Daarna komen we bij een Kirigami.FormLayout. Dit biedt ons het gemakkelijk aanmaken van snel reagerende invoerformulieren, die netjes labels voor invoer tonen en de invoervelden zelf op zowel brede schermen als smallere mobiele apparaten. Deze formulierindelingen zijn ontworpen om te werken met een variëteit van verschillende invoertypen, hoewel we blijven bij eenvoudige Controls.Textfield invoer die ons eenvoudige tekstvelden geeft om dingen in te schrijven.

We hebben elementen Controls.Textfield gemaakt die acteren als:

  1. Invoer voor de naam van onze aftelling
  2. Invoer voor de beschrijving van onze aftelling
  3. Invoer voor de datum waar we naar aftellen, die geleverd moet worden in een formaat JJJJ-MM-DD.

Binnen elk van deze Controls.Textfield elementen zetten we een eigenschap Kirigami.FormData.label die ons labels voor hen laat definiëren. Het formulier zal de juiste labels voor elk van deze tekstinvoer presenteren. We zetten ook plaatshoudertekst in de velden met de eigenschap placeholderText – deze tekst verdwijnt zodra de gebruiker in het veld begint te typen. Tenslotte zetten we ook de eigenschap onAccepted om de methode forceActiveFocus() te starten van het volgende veld; dit schakelt het actieve veld in wanneer de gebruiker de toets ENTER indrukt, waarmee de bruikbaarheid van ons formulier wordt verbeterd.

We hebben ook een eigenschap genaamd inputMask ingesteld op het tekstveld voor onze datum. Dit instellen op "0000-00-00" voorkomt dat gebruikers iets invoeren dat de functionaliteit van de toepassing laat breken (zoals tekst), die hen beperkt tot het alleen invoeren van cijfers die we daarna kunnen proberen te ontleden in een datum object.

Aan het eind van ons formulier voegen we een knop in die onze nieuwe aftelling toevoegt aan het lijstmodel. We hebben de eigenschap enabled ingesteld op een voorwaardelijk statement die controleert of het naamveld leeg is of niet: zo ja, dan is de knop uitgeschakelde en vice versa. Wanneer de knop wordt bediend, start het de methode append van ons lijstmodel kountdownModel, waarmee een Javascript object inclusief de eigenschappen die we hebben geleverd wordt toegevoegd. We zorgen er voor dat de tekstvelden gewist worden door hun eigenschappen text op een lege tekenreeks worden ingesteld. Tenslotte roepen we een methode op ons overlay-vel aan, close(), die het sluit.

Ons vel gebruiken

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

Overlay-vellen hebben twee methoden, open() en close() die het openen en sluiten van deze component besturen. In dit geval hebben we het vel ingesteld om te openen wanneer onze actie wordt gestart. Nadat we onze bestanden hebben opgeslagen en ons programma hebben gebouwd, zijn we in staat om onze eigen aangepaste aftellingen toe te voegen!