Tworzenie arkuszy nakładkowych

Poznanie tego jak działają arkusze nakładkowe.

Czynienie naszej aplikacji użyteczną

Mamy okno, mamy karty oraz mamy działania. Teraz, nadal potrzebujemy jakiegoś sposobu na wpisanie nazwy, opisu oraz daty.

Jednym ze sposobów wykonania tego, jest stworzenie nowej strony, na której umieścimy wymagane rzeczy do wprowadzania. Jednakże, cała strona przeznaczona do podania nazwy, opisu oraz daty wydaje się być przesadą.

Zamiast tego, użyjemy arkusza nakładkowego.

Arkusz z dodawaniem odliczań

Nowy składnik, który dodamy to Kirigami.OverlaySheet. Arkusze nakładkowe unoszą się nad zawartością okna i mogą być użyte do różnych celów, takich jak danie odpowiednich szczegółów do bieżącej treści. Są na kształt ciekawych okien wysuwnych, z tą różnicą, że nie można ich przesuwać.

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, 
					//The parse() method parses a string and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.
					date: Date.parse(dateField.text)
				});
				nameField.text = ""
				descriptionField.text = ""
				dateField.text = ""
				addSheet.close();
			}
		}
	}
}

Arkuszom nakładowym możemy nadać nagłówek. Ustawia się je poprzez właściwość header. Naszemu arkuszowi nadaliśmy nagłówek poprzez Kirigami.Heading podając odpowiedni tytuł: ‘Add Kountdown’.

Następnie docieramy do Kirigami.FormLayout. Umożliwia nam to łatwe tworzenie responsywnych formularzy wprowadzania, które ładnie wyświetlają etykiety dla pól do wprowadzania oraz same pola zarówno na szerokich ekranach jak i na ekranach urządzeń przenośnych. Układy formularzy są stworzone do działania z różnymi rodzajami wprowadzanych danych, mimo to będziemy trzymać się danych rodzaju Controls.Textfield, która daje nam proste pola tekstowe, do których można wpisywać różne rzeczy.

Stworzyliśmy składnik Controls.Textfield, które działają jak:

  1. Pole do wpisywania nazwy naszego odliczania
  2. Pole do wpisywania opisu naszego odliczania
  3. Pole wprowadzania dla daty, w kierunku której odliczamy, która musi być podana w następującej postaci RRRR-MM-DD.

Wewnątrz każdej z rzeczy Controls.Textfield, nadajemy właściwość Kirigami.FormData.label, która umożliwia nam nadane im etykiet. Formularz będzie przedstawiać poprawne etykiety dla każdego z tych pól tekstowych. Określamy także tekst zastępczy w tych polach poprzez właściwość placeholderText – tekst ten zniknie zaraz po tym jak użytkownik zacznie pisać w tym polu. Na końcu, określamy właściwość onAccepted, aby wyzwalała metodę forceActiveFocus() danego pola; przełączy to bieżące pole, gdy użytkownik naciśnie klawisz ENTER, polepszając użyteczność naszego formularza.

Ustawiliśmy także właściwość inputMask dla pola tekstowego naszej daty. Ustawiając to na "0000-00-00" uniemożliwia nam wpisanie czegoś (np. tekstu ), co mogłoby popsuć działanie naszej aplikacji, ograniczając wpisywanie tylko do cyfr, które później możemy spróbować przetworzyć na obiekty dat.

Na końcu formularza dodajemy przycisk, który dodaje nowe odliczanie do modelu listy. Ustawiliśmy własność enabled na wyrażenie warunkowe, które sprawdza, czy pole to jest puste czy nie: jeśli tak, to pole jest wyłączone i na odwrót. Po naciśnięciu przycisku, wyzwala się metoda append naszego modelu listy kountdownModel, dodająca obiekt Javascript wraz z właściwościami, które określiliśmy. Upewniamy się także, żeby wyczyścić pola tekstowe nadając właściwościom text puste ciągi znaków. Na końcu wywołujemy metodę close() na naszym arkuszu nakładkowym, który go zamyka.

Używanie naszych arkuszy

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

Arkusze nakładkowe zawierają dwie metody, open() oraz close(), które odpowiadają za otwieranie i zamykanie tego składnika. W tym przypadku, określiliśmy, aby arkusz otwierał się, gdy wyzwolimy nasze działanie. Po zapisaniu naszych plików i zbudowaniu naszego programu, będziemy w stanie dodawać nasze własne odliczania!