Crear fulls superposats

Familiaritzeu-vos amb els fulls superposats.

Fer que la nostra aplicació sigui útil

Tenim una finestra, tenim targetes i tenim accions. No obstant això, encara necessitem trobar alguna forma d’introduir un nom, una descripció i una data de la nostra elecció.

Una manera en què podríem fer això és creant una pàgina nova on col·loquem els elements d’introducció requerits. No obstant això, una pàgina sencera dedicada a proporcionar un nom, una descripció i una data sembla una mica excessiu.

En el seu lloc, utilitzarem un full superposat.

Full que afegeix un compte enrere

El component nou que afegim és un Kirigami.OverlaySheet. Els fulls superposats se situen sobre el contingut de la finestra i es poden utilitzar per a una varietat de propòsits, com proporcionar informació addicional rellevant per al contingut actual. Són una espècie d’elegants finestres emergents, excepte que no es poden moure.

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, 
					// El mètode parse() analitza una cadena i retorna el nombre de mil·lisegons des de l'1 de
					// gener de 1970, 00:00:00 UTC.
					date: Date.parse(dateField.text)
				});
				nameField.text = ""
				descriptionField.text = ""
				dateField.text = ""
				addSheet.close();
			}
		}
	}
}

Podem donar-los una capçalera. Aquesta s’estableix amb la propietat header. N’hem proporcionat una amb la Kirigami.Heading contenint un títol rellevant: «Add Kountdown».

Després arribem a una Kirigami.FormLayout. Ens permet crear formularis d’entrada receptius amb facilitat, els quals mostren amb claredat les etiquetes de les entrades i les entrades en si mateixes tant en pantalles apaïsades com en dispositius mòbils més estrets. Aquestes disposicions de formulari estan dissenyades per a treballar amb una varietat de diferents tipus d’entrada, encara que ens cenyim a entrades senzilles Controls.Textfield que ens brinden quadres de text senzills per a escriure-hi.

Hem creat elements Controls.Textfield que actuen com:

  1. Entrada per al nom del nostre compte enrere
  2. Entrada per a la descripció del nostre compte enrere
  3. Entrada per a la data cap a la qual estem comptant cap enrere, la qual s’ha de proporcionar en el format YYYY-MM-DD.

Dins de cadascun d’aquests elements Controls.Textfield, hem configurat una propietat Kirigami.FormData.label que ens permet definir-los etiquetes. El formulari presentarà les etiquetes correctes per a cadascuna d’aquestes entrades de text. També hem establert el text del marcador de posició dins dels camps amb la propietat placeholderText -aquest text desapareixerà tan aviat com l’usuari comenci a escriure en el camp-. Finalment, també hem establert la propietat onAccepted per a activar el mètode forceActiveFocus() del camp següent. Això commutarà el camp actiu una vegada l’usuari premi la tecla Retorn, millorant la usabilitat del nostre formulari.

També hem establert una propietat anomenada inputMask en el camp de text per a la nostra data. Establint això a "0000-00-00" evitarà que els usuaris introdueixin alguna cosa que pugui trencar la funcionalitat de l’aplicació (com ara text), restringint-lo a només introduir dígits, després podrem intentar analitzar-ho en un objecte de data.

Al final del nostre formulari, incloem un botó que afegeix el nostre nou compte enrere al model de llista. Hem establert la propietat enabled en una declaració condicional que comprova si el camp de nom està buit o no: si ho està, el botó estarà inhabilitat i viceversa. Quan s’activi el botó, s’activarà el mètode append del nostre model de llista kountdownModel, afegint un objecte de JavaScript que inclogui les propietats que hem proporcionat. També ens assegurarem d’esborrar els camps de text establint les seves propietats text en una cadena buida. Finalment cridarem a un mètode en el nostre full superposat, close(), que el tancarà.

Usar el nostre full

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

Els fulls superposats tenen dos mètodes, open() i close(), els quals controlen l’obertura i el tancament d’aquest component. En aquest cas, hem establert el full perquè s’obri quan activem la nostra acció. Una vegada que desem els nostres fitxers i creem el nostre programa, podrem afegir els nostres propis comptes enrere personalitzats!