Añadir acciones

Aprender más sobre las acciones de Kirigami nos ayudará a que nuestra aplicación sea más útil.

Resumen

Hasta ahora, hemos logrado crear una aplicación simple que puede mostrar tarjetas. Sin embargo, todavía no tenemos una forma de añadir nuevas tarjetas a nuestra vista de tarjetas.

En este tutorial, veremos las acciones de Kirigami. Estas nos ayudarán a añadir interactividad a nuestra aplicación de una manera consistente, rápida y accesible.

Acciones

Una acción de Kirigami encapsula una acción de la interfaz de usuario. Podemos usarlas para proporcionar a nuestras aplicaciones acciones de fácil acceso que son esenciales para su funcionalidad.

Acciones de página en el escritorio.

Acciones de página en el escritorio.

Si ha usado aplicaciones de Kirigami con anterioridad, ya habrá interactuado con las acciones de Kirigami. En esta imagen podemos ver acciones a la derecha del título de la página con diversos iconos. Las acciones de Kirigami se pueden mostrar de varias formas y pueden hacer una amplia variedad de cosas.

Añadir cuentas regresivas

Una aplicación de cuenta regresiva es bastante inútil sin la capacidad de añadir cuentas regresivas. Vamos a crear una acción que nos permita hacer esto.

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

}

Vamos a situar nuestra acción de Kirigami dentro de la página principal de nuestros tutoriales anteriores. Si quisiéramos, podríamos añadir más acciones a nuestra página (¡e incluso anidar acciones dentro de acciones!). Los componentes Kirigami.Action se usan como acciones de contexto dentro de páginas de Kirigami. Lo vamos a definir específicamente en la propiedad actions.main de la página: el objeto actions tiene propiedades que nos permiten definir diferentes acciones en distintas posiciones, pero como nuestra acción 'Añadir kountdown' es fundamental para nuestra interfaz de usuario, la vamos a definir como acción principal de esta página.

Las propiedades id y text deberían resultarle familiares de los tutoriales anteriores. Sin embargo, la nueva propiedad icon debería ser interesante: es un objeto con varias propiedades que le permiten mostrar ciertos iconos para las acciones. Afortunadamente, para usar los iconos de KDE, todo lo que tenemos que hacer es proporcionar la propiedad del nombre para la propiedad del icono, icon.name.

La propiedad onTriggered es la más importante. Esto es lo que hará nuestra acción cuando se use. Notará que en nuestro ejemplo hemos usado el método kountdownModel.append del kountdownModel que habíamos creado en nuestro tutorial anterior. Este método nos permite añadir un nuevo elemento a nuestro modelo de lista. Le proporcionamos un objeto que tiene las propiedades relevantes para nuestras cuentas regresivas (nombre, descripción y una fecha de relleno).

Cada vez que hacemos clic en el botón 'Añadir kountdown' de la parte superior derecha, se añade una cuenta atrás personalizada.

Cada vez que hacemos clic en el botón 'Añadir kountdown' de la parte superior derecha, se añade una cuenta atrás personalizada.

Cajón global

¿Ha notado esas tres líneas que hay junto al título de la página en la captura de pantalla anterior? Se trata de un cajón global. Los cajones globales son útiles para la navegación y las acciones globales: en otras palabras, todo lo que puede necesitar en toda la aplicación. Vamos a crear un sencillo cajón global que incluye un botón para salir.

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

	...
	
}

Aquí, colocamos nuestro cajón global dentro de la ventana de nuestra aplicación. La propiedad principal a la que debemos prestar atención es actions, que toma la forma de una matriz de componentes Kirigami.Action. Esta acción tiene un icono apropiado y activa la función Qt.quit (), que cierra la aplicación.

Como vamos a mantener nuestro cajón global simple por ahora, definimos la propiedad isMenu como true. Esto muestra nuestro cajón global como un menú de aplicación normal, que ocupa menos espacio que el panel del cajón global predeterminado.