Button
Plataformas | Aplicaciones web y móviles |
Sistemas operativos | Android e iOS |
El componente Button indica una acción (por ejemplo, mostrar una pantalla o enviar un formulario) y permite al usuario realizar acciones como hacer clic o presionar el componente. Para insertar un componente Button en la pantalla, dirígete al panel izquierdo en el editor de pantallas. Navega la lista de componentes para encontrar el componente o haz clic en la barra de búsqueda y escribe su nombre. Luego, arrastra y suelta el componente en el canvas y configura sus atributos en el panel derecho. Lee las secciones a continuación para aprender más.
Cómo utilizar un componente de botón en una aplicación
Esta sección incluye un caso de uso que explica cómo debes utilizar y configurar un componente botón para satisfacer una solicitud realizada por GoldBank, tu cliente.
GoldBank te pide que rediseñes el modal de error que aparece cuando se produce un error y no se puede ejecutar una transacción de transferencia. Este error no es específico y no se puede clasificar, por lo que es necesario añadir un mensaje genérico para que el usuario entienda que la transacción no se ha ejecutado y debe volver a la sección Transferencias e intentarlo de nuevo.
La siguiente pantalla muestra los componentes que se incluyen cuando se produce el error: una imagen del logotipo de GoldBank, una imagen del error, una etiqueta de texto con un mensaje para el usuario y un botón que el usuario pulsa para acusar recibo del mensaje y ser redirigido a otra pantalla. Para los propósitos de este ejemplo, el caso de uso sólo dará instrucciones sobre cómo construir y configurar el botón para volver a la pantalla de Transferencias. Consulta las instrucciones a continuación para saber más sobre cómo configurar la pantalla en función de las necesidades del cliente.
Dirígete a la app GoldBank. En el Overview, haz clic en Screens.
Haz clic en + New screen para abrir el editor de pantallas.
En el editor de pantallas, vaya al panel izquierdo y luego a la pestaña Info. Añade un nombre para identificar la pantalla, por ejemplo: transfer_error, y una descripción que incluya información sobre la finalidad de la pantalla, por ejemplo: Pantalla que muestra el mensaje de error cuando se produce un error genérico durante una transferencia. . Además, añade la secuencia. También puedes añadir etiquetas para encontrar fácilmente la pantalla en la lista de pantallas en el futuro, por ejemplo: button, text label y transfers.
Nota
El nombre de la pantalla debe cumplir las convenciones de nomenclatura de Veritran.
Haz clic en Save (icono de disquete) para guardar los cambios de Información antes de editar la pantalla. Se abre el modal Commit message, donde tienes que introducir una descripción que informe de por qué se ha creado o editado la pantalla para la rama previamente seleccionada. También puedes añadir el ticket de Jira en el que se definió la solicitud, si corresponde. A continuación, haz clic en Save and continue.
Como mejor práctica, debes añadir el flex container padre al canvas y configurarlo. Dentro de este flex, añadirás contenedores flex secundarios que representarán las secciones dentro de la pantalla. En este caso, sólo añadirás un flex container secundario, en el que incluirás el componente botón.
Dirígete al panel izquierdo y luego a la pestaña Components. Escribe Flex Container en la barra de búsqueda o encuéntralo en la lista. A continuación, arrástralo y suéltalo en el canvas para utilizarlo como flex container principal que contenga cualquier otro flex container en su interior.
Dirígete al panel derecho. En el campo Name introduce flxParent.
Dirígete al campo Component Id e introduce flxParent.
Dirígete a la sección de posición y alineación. Borra los valores de los atributos X e Y. En los atributos W y H, deja seleccionados 100 y % (porcentaje) como unidad de medida, para que el flex container abarque toda la pantalla (tanto en longitud como en ancho).
Según el diseño del proyecto, dirígete a la sección Background e introduce un color para el fondo del flex container. En este caso, introduce #E4E6F4, que es el código hexadecimal que representa el tono de azul definido para la app según los requisitos del cliente.
Sugerencia
Como mejor práctica, introduce el código hexadecimal del color requerido en lugar de seleccionar un color del selector de color.
Dirígete a la sección Size & Position. En el campo Position type, selecciona Relative.
Sugerencia
Como mejor práctica, el flex container padre, los contenedores flexibles secundarios y los componentes hijos deben tener el atributo Position Type configurado en Relative. Con el posicionamiento Relative, los componentes hijos se alinean uno tras otro según la disposición del contenedor flexible padre (ya sea en columnas o en filas). Además, si se modifica el tamaño de un componente hijo, el posicionamiento relativo permitirá que todos los componentes hijos se reorganicen automáticamente, para evitar solapamientos entre ellos.
Dirígete a la sección Design.
En la subsección Direction, seleccione Column, de modo que los componentes dentro del flexo vayan de la parte superior a la inferior del contenedor.
En la subsección Align, seleccione stretch, para que los componentes dentro del flex container se alineen y estiren a lo largo de todo el espacio del contenedor.
En la subsección Justify, selecciona start, para que los componentes dentro del flex se sitúen en la parte superior del contenedor.
En la sección Children, selecciona Wrap para que, si los componentes dentro del contenedor flexible superan su anchura máxima, se coloquen debajo del resto de componentes. A continuación, entre las opciones de wrapping que aparecen, selecciona Start.
Según los requisitos del cliente, el botón debe contener un mensaje de aceptación, que indique que el usuario entiende que se ha producido un error, y debe redirigir al usuario de vuelta a la página de transferencias, para que pueda intentar ejecutar la transacción de nuevo.
Lee las instrucciones siguientes para configurar el botón. Para obtener más información sobre cómo configurar los componentes de etiqueta de texto e imagen, lea los artículos Image y Text Label.
Dirígete a la pestaña Components del panel izquierdo. Escribe Button en la barra de búsqueda o búscalo en la lista. A continuación, arrástralo y suéltalo en el canvas. Asegúrate de que aparezca como el último componente de la vista en árbol.
Dirígete al panel derecho. En el campo Name, introduce btnAccept.
En el campo Component Id, introduce btnAccept.
Dirígete a la sección de posición y alineación. Cambia los valores pero deja la unidad de medida que aparece por defecto.
En el campo X, introduce 9.
En el campo Y, introduce 58.
En el campo W, introduce 82.
En el campo H, introduce 50.
Importante
Como la app tiene un tema aplicado, el componente botón tiene un estilo específico aplicado. No modifiques los valores de los campos Background, Border, Radius y CSS Class.
Vaya a la sección Basic. En el campo Value, introduzca Accept.
Dirígete a la sección Text. En el campo Font Size, cambia el tamaño a 16px.
Haz clic en Actionspara abrir la pestaña Actions.
Dirígete a la sección Events & Actions y luego al campo On Click. Debes introducir el id de la pantalla de Transfers, donde el usuario debe ser redirigido al pulsar el botón Accept. Enter V00|contents1:S901. Cuando lo introduzcas, para ver o editar la pantalla de transferencias definida, haz clic en
a la derecha del campo. Serás redirigido al editor de pantallas de esa pantalla.Guarde la pantalla y complete el mensaje de Commit.
Atributos
En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta las secciones a continuación para obtener más información.
Design
En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.
Primero, debes modificar el nombre del botón para representar su posición dentro de la pantalla. Por ejemplo, el nombre puede ser btnAccept.
Luego, puedes configurar los atributos de posición a continuación.
X | Posición del componente en el canvas con respecto al eje X. Introduce un número en el campo y, luego, selecciona la unidad de medida % o px. |
Y | Posición del componente en el canvas con respecto al eje X. Introduce un número en el campo y, luego, selecciona la unidad de medida % o px. |
R | Ángulo con el eje vertical en el que se ubica el componente. |
W | Ancho del componente con respecto al tamaño de la pantalla. |
H | Alto del componente con respecto al tamaño de la pantalla. |
Actions
En la pestaña Actions, puedes establecer animaciones para los componentes de la pantalla de tu app y determinar cómo el usuario invoca efectos y desencadena acciones mientras interactúa con la app. Consulta las secciones a continuación para obtener más información.