Dodawanie działań

Nauka o działaniach Kirigami pomoże nam uczynić naszą aplikację bardziej użyteczną.

Powtórka

Do tej chwili, daliśmy radę zbudować prostą aplikację, która może wyświetlać karty. Jednakże nie mamy sposobu na dodawanie nowych kart do naszego widoku kart.

W tym samouczku, spojrzymy na działania Kirigami. Pomoże nam to dodawać interaktywnie do naszej aplikacji w spójny, szybki i przystępny sposób.

Działania

Działanie Kirigami stanowi działanie z interfejsu użytkownika. Można je wykorzystać, aby dać naszej aplikacji łatwodostępne działania, które są istotne dla jej funkcjonalności.

Działania stron na urządzeniach biurkowych.

Działania stron na urządzeniach biurkowych.

Jeśli używałeś wcześniej aplikacji Kirigami, to na pewno obsługiwałeś je poprzez Działania Kirigami. Na tym obrazie, widzimy działania po prawej stronie tytułu okna z różnymi ikonami. Działania Kirigami można wyświetlić na kilka sposobów i są one w stanie robić różne rzeczy.

Dodawanie odliczań

Aplikacja odliczająca jest całkowicie bezużyteczna bez możliwości dodawania odliczań. Stwórzmy działanie, które nam to umożliwi.


pageStack.initialPage: Kirigami.ScrollablePage {

	...

	actions.main: Kirigami.Action {
		id: addAction
		icon.name: "list-add"
		text: i18nc("@action:button", "Add kountdown")
		onTriggered: kountdownModel.append({
			name: "Kirigami Action added card!",
			description: "Congratulations, your Kirigami Action works!",
			date: 1000
		})
	}
		
	... 

}

Umieszczamy nasze działanie Kirigami wewnątrz naszej głównej strony z naszych poprzednich samouczków. Gdybyśmy chcieli, to moglibyśmy dodać więcej działań do naszej strony (a nawet zagnieżdżać działania wewnątrz działań!). Składniki Kirigami.Action są używane jako kontekstowe działania wewnątrz stron Kirigami. Ustawiamy jednoznacznie właściwość actions.main strony: obiekt actions ma właściwości, które umożliwiają nam ustawienie różnych działań w różnych miejscach, lecz ponieważ nasze działanie ‘Dodaj odliczanie’ jest w środku naszego interfejsu, to ustawiamy je jako główne działanie tej strony.

Właściwości id oraz text powinny być znane z poprzednich samouczków. Jednakże nowa właściwość icon wzbudza ciekawość: jest to obiekt o kilku właściwościach, umożliwiający ci wyświetlenie niektórych ikon dla twoich działań. Na szczęście, aby używać ikon KDE, wszystko co musimy zrobić, to tylko podanie nazwy ikony we właściwości ikony icon.name.

Właściwość onTriggered jest najważniejsza. Oznacza ona, co nasze działanie wykona, gdy zostanie wywołane. Zauważysz, że w naszym przykładzie używamy metody kountdownModel.append z kountdownModel, który utworzyliśmy w naszym poprzednim samouczku. Ta metoda umożliwia nam dodanie nowej rzeczy do naszego modelu listy. Dostarczamy mu obiektu, który ma odpowiednie właściwości dla naszych odliczań (nazwa, opis oraz pole zastępcze daty).

Za każdym razem gdy naciśniemy na nasz przycisk ‘Add kountdown’ po prawej na górze, zostanie dodane nasze własne odliczanie.

Za każdym razem gdy naciśniemy na nasz przycisk ‘Add kountdown’ po prawej na górze, zostanie dodane nasze własne odliczanie.

Globalna półka

Zwróciłeś uwagę na te trzy linie obok tytułu strony, na poprzednim zrzucie ekranu? To globalna półka. Globalne półki są użyteczne do globalnego poruszania się i działań: innymi słowy, są to rzeczy, które będziesz chciał wykorzystywać w swojej aplikacji. Utworzymy prostą globalną półkę, która zawiera przycisk zakończenia.

Kirigami.ApplicationWindow {
	id: root

		...

	globalDrawer: Kirigami.GlobalDrawer {
		isMenu: true
		actions: [
			Kirigami.Action {
				text: i18n("Quit")
				icon.name: "gtk-quit"
				shortcut: StandardKey.Quit
				onTriggered: Qt.quit()
			}
		]
	}

	...
	
}

Tutaj, umieścimy naszą globalną półkę wewnątrz okna naszej aplikacji. Główną właściwością, na którą musimy zwrócić uwagę to actions, która przybiera kształt składników Kirigami.Action. To działanie ma odpowiednią ikonę i wyzwala funkcję Qt.quit(), zamykającą aplikację.

Ponieważ chcemy, aby nasza globalna półka na razie była prosta, ustawiamy własność isMenu na true. Wyświetla to naszą globalną półkę jako normalne menu aplikacji, zabierając mniej miejsca niż panel globalnej półki.