Adicionar acções

Aprender mais como funcionam as Action's (acções) do Kirigami e como o ajudarão a tornar a sua aplicação mais útil.

Recapitulação

Até agora, conseguimos criar uma aplicação simples que mostra cartões. Contudo, não temos nenhuma forma de adicionar cartões novos à nossa de área de cartões.

Neste tutorial, iremos ver as acções do Kirigami. Estas ajudá-lo-ão a adicionar interactividade à nossa aplicação de uma forma consistente, rápida e acessível.

Acções

Uma Acção do Kirigami encapsula uma acção da interface do utilizador. Podemos usá-las para oferecer às nossas aplicações acções fáceis de aceder e que são essenciais à sua funcionalidade..

Acções de páginas no computador.

Acções de páginas no computador.

Se tiver usado antes as aplicações do Kirigami, provavelmente já interagiu com as acções do Kirigami. Nesta imagem, poderemos ver as acções à direita do título da página com vários ícones. As acções do Kirigami poderão ser apresentadas de várias formas e poderão efectuar uma grande variedade de acções.

Adicionar contagens decrescentes

Uma aplicação de contagens decrescentes sem a capacidade de adicionar contagens é bastante inútil. Iremos criar uma acção que nos permite fazer isso.

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
		})
	}
		
	... 

}

Estamos a colocar a nossa acção do Kirigami dentro da nossa página principal com base nos nossos tutoriais. Se o quiséssemos, poderíamos adicionar mais acções à nossa página (e mesmo associar acções dentro de acções!). Os componentes do Kirigami.Action são usados como acções de contexto dentro das páginas do Kirigami. Estamos a configurar esse valor de forma específica na propriedade actions.main da página: o objecto actions tem propriedades que nos deixam definir acções diferentes em posições diferentes; contudo, dado que a nossa acção 'Adicionar uma contagem' é algo tão central na nossa interface, estamos a configurá-lo como acção principal desta página.

As propriedades id e text deverão ser familiares dos tutoriais anteriores. Contudo, a nova propriedade icon deverá ser interessante: é um objecto com várias propriedades que lhe permitirão mostrar certos ícones para as suas acções. Felizmente, para usar os ícones do KDE, tudo o que é preciso fazer é configurar a propriedade 'name' com a propriedade do ícone, icon.name.

A propriedade onTriggered é a mais importante. É o que a nossa acção irá fazer quando for usada. Irá reparar que, no nosso exemplo, estamos a usar o método kountdownModel.append do kountdownModel que criámos no nosso tutorial anterior. Este método permite-nos adicionar um novo elemento ao nosso modelo de lista. Estamos a passar-lhe um objecto que tem as propriedades relevantes para as nossas contagens decrescentes (nome, descrição e uma data substituta).

De cada vez que carregamos no nosso botão 'Adicionar uma contagem' em cima e à esquerda, é adicionada a nossa contagem decrescente personalizada.

De cada vez que carregamos no nosso botão 'Adicionar uma contagem' em cima e à esquerda, é adicionada a nossa contagem decrescente personalizada.

Área global

Reparou nessas três linhas a seguir ao título da página na imagem anterior? Isso é uma área global. As áreas globais são úteis para a navegação global e para as acções: por outras palavras, essas coisas que poderá precisar de usar em toda a sua aplicação. Iremos criar uma área global simples que inclua um botão para sair.

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()
			}
		]
	}

	...
	
}

Agora iremos colocar a nossa área global dentro da janela da nossa aplicação. A propriedade principal que precisa de prestar atenção é a actions, que tem a forma de uma lista de componentes Kirigami.Action. Esta acção tem um ícone apropriado e invoca a função Qt.quit(), fechando a aplicação.

Dado que estamos a manter a nossa área global simples por agora, vamos configurar a propriedade isMenu como verdadeira. Isto mostra a nossa área global como um menu da aplicação normal, ocupando menos espaço que a a área global predefinida.