Skapa överlagringsblad

Att begripa överlagringsblad.

Göra vårt program användbart

Vi har ett fönster, vi har kort, och vi har åtgärder. Vi behöver ändå komma på något sätt att mata in ett namn, en beskrivning och ett datum vi väljer.

Ett sätt vi skulle kunna göra det är genom att skapa en nya sida där vi placerar inmatningselement. Dock verkar en hel sida tillägnad för att tillhandahålla namn, beskrivning och datum lite överdrivet.

Istället använder vi ett överlagringsblad.

Nedräkning: lägga till blad

Den nya komponenten vi lägger till är Kirigami.OverlaySheet. Överlagringsblad svävar över fönstrets innehåll och kan användas för en mängd olika syften, såsom att tillhandahålla extra information relevant för det aktuella innehållet. De är på sätt och viss snygga fönster som dyker upp, utom att de inte kan flyttas.

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, 
					// Metoden parse() tolkar en sträng och returnerar antal millisekunder sedan 1:a januari, 1970,
					// 00:00:00 UTC.
					date: Date.parse(dateField.text)
				});
				nameField.text = ""
				descriptionField.text = ""
				dateField.text = ""
				addSheet.close();
			}
		}
	}
}

Vi kan ge överlagringsblad ett sidhuvud. De tilldelas med egenskapen header. Vi har gett vår en Kirigami.Heading som innehåller en relevant titel: ‘Add Kountdown’.

Sedan kommer vi till en Kirigami.FormLayout. Den låter oss enkelt skapa mottagliga inmatningsformulär, som snyggt visar beteckningar för inmatning och själva inmatningen både på breda skärmar och smalare mobila enheter. Formulärlayouter är konstruerade för att arbeta med ett stort antal typer av inmatning, även om vi håller oss till enkla Controls.Textfield, som ger oss enkla textrutor att skriva in saker i.

Vi har skapat elementet Controls.Textfield som fungerar som:

  1. Indata för namnet på vår nedräkning
  2. Indata för beskrivningen av vår nedräkning
  3. Indata för datumet vi räknar ner till, som måste anges på formatet ÅÅÅÅ-MM-DD.

Inom vart och ett av de här Controls.Textfield elementen, använder vi egenskapen Kirigami.FormData.label som låter oss definiera beteckningar för dem. Formuläret visar rätt beteckning för vart och ett av textinmatningsfälten. Vi anger också platsmarkörer med egenskapen placeholderText. Den texten försvinner så snart användaren börjar skriva i fältet. Slutligen tilldelar vi också egenskapen onAccepted för att utlösa metoden forceActiveFocus() för följande fält. Det byter aktivt fält när användaren väl trycker på returtangenten, vilket förbättrar användbarheten för vårt formulär.

Vi har också ställt in en egenskap som kallas inputMask i textfältet för vårt datum. Att ställa in den till `“0000-00-00” förhindrar oss från att mata in någonting som kan förstöra programmets funktion (såsom text), och begränsar dem att bara mata in siffror som vi sedan kan försöka tolka som ett datumobjekt.

I slutet på vårt formulär inkluderar vi en knapp som lägger till vår nya nedräknare i listmodellen. Vi har ställt in egenskapen enabled till en villkorssats som kontrollerar om namnfältet är tomt eller inte: om det är det, är knappen inaktiverad, och vice versa. När knappen utlöses, utlöser den metoden append i vår kountdownModel listmodell, vilket lägger till ett Javascript-objekt som inkluderar egenskaperna vi har tillhandahållit. Vi säkerställer också att textfälten rensas genom att ställa in deras text egenskaper till en tom sträng. Slutligen anropar vi en metod i vårt överlagringsblad, close(), som stänger det.

Använda vårt blad

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

Överlagringsblad har två metoder, open() och close(), som styr öppning och stängning av komponenten. I detta fall har vi ställt in bladet att öppnas när vi utlöser vår åtgärd. När vi väl har sparat våra filer och byggt programmet, kommer vi att kunna lägga till våra egna anpassade nedräknare.