Створення аркушів-накладок

Знайомимося із накладними аркушами.

Робимо нашу програму корисною

У нас є вікно, у нас є картки і у нас є дії. Але нам усе ще потрібне спосіб введення назви, опису та вибраної дати.

Одним зі способів досягти потрібного результату є створення сторінки, на якій ми розташуємо потрібні нам елементи для введення даних. Втім, надавати цілу сторінку для введення назви, опис та дати забагато.

Замість цього, ми використовуватимемо аркуш-накладку.

Аркуш додавання відліку

Новим доданим нами компонентом є Kirigami.OverlaySheet. Аркуші-накладки розташовуються над вмістом вікна. Ними можна скористатися для виконання багатьох завдань, зокрема надання додаткових відомостей, пов’язаних із поточним вмістом вікна. Вони є типом красивих контекстних вікон, але їх не можна пересувати.

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, 
					// Метод parse() обробляє рядок і повертає кількість мілісекунд з моменту часу 1 січня 1970
					// року, 00:00:00 UTC.
					date: Date.parse(dateField.text)
				});
				nameField.text = ""
				descriptionField.text = ""
				dateField.text = ""
				addSheet.close();
			}
		}
	}
}

Для аркушів-накладок можна визначати заголовки. Заголовки визначаються властивістю header. Ми надали цій властивості у нашому випадку значення Kirigami.Heading, які містить відповідний заголовок: «Add Kountdown».

Далі, ми переходимо до Kirigami.FormLayout. Цей об’єкт надає нам змогу без проблем створювати форми для введення даних, які раціонально показують мітки для полів введення та самі поля введення на широкоекранних дисплеях комп’ютерів та вузьких дисплеях мобільних пристроїв. Ці компонування форм розроблено для роботи із різними типами полів введення, хоча тут ми використовуємо прості поля Controls.Textfield, якщо відповідають простим текстовим блоками для вписування простих текстових фрагментів.

Нами створено елементи Controls.Textfield, які працюють як:

  1. Поле для введення назви нашого відліку
  2. Поле для введення опису нашого відліку
  3. Поле для введення дати, до якої ми ведемо відлік і яка надається у форматі YYYY-MM-DD.

У кожному з цих елементів Controls.Textfield ми встановлюємо значення властивості Kirigami.FormData.label, яка надає нам змогу визначити мітки для елементів. Форма покаже належні мітки для кожного з цих текстових полів введення. Ми також визначаємо текст-замінник у полях за допомогою властивості placeholderText — цей текст зникне, щойно користувач почне вводити текст у поле. Нарешті, ми встановлюємо значення властивості onAccepted для вмикання методу forceActiveFocus() наступного поля; ця властивість перемкне активне поле, щойно користувач натисне клавішу ENTER. Така поведінка робить користування формою зручнішим.

Ми також встановлюємо для текстового поля для нашої дати властивість із назвою inputMask. Встановлення значення "0000-00-00" забороняє користувачеві вводити будь-що, що може зашкодити нормальній роботі програми (наприклад, звичайний текст). Користувач зможе вводити лише цифри, які згодом може бути перетворено на об’єкт дати.

Наприкінці нашої форми ми включаємо кнопку, яка додає новий відлік до моделі списку. Ми встановили для властивості enabled умовну інструкцію, яка перевіряє, чи є поле назви порожнім: якщо це так, кнопку буде вимкнено, і навпаки. Якщо кнопку увімкнено, вона вмикає метод append нашої моделі списку kountdownModel, додаючи об’єкт Javascript, включно із наданими нами властивостями. Крім того, ми спорожнюємо текстові поля, встановлюючи для їхні властивостей text порожні рядки. Нарешті, ми викликаємо метод для нашого аркуша-наклади, close(), який закриває його.

Використання нашого аркуша

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

Для аркушів-накладок передбачено два методи, open() і close(), які керують відкриттям і закриттям цього компонента. У цьому випадку, ми встановили, що аркуш буде відкрито, коли ми увімкнемо нашу дію. Щойно наші файли буде збережено, а програму буде зібрано, ми зможемо додавати наші власні нетипові відліки!