Axure RP - Lógica de condición
En este capítulo, discutiremos la lógica condicional utilizada en Axure RP.
Si - Entonces - Else en Axure
Al igual que cualquier otra herramienta de programación, Axure también admite la lógica condicional para crear interacciones mejoradas en prototipos. Una vez que esté familiarizado con cómo puede proporcionar interacciones, el siguiente nivel es proporcionar lógica condicional a las interacciones.
A continuación se muestra el flujo simple y conciso para la lógica condicional:
- Si se hace clic en un widget / pantalla en particular
- Luego, realiza una acción / interacción en particular
- De lo contrario, mantenga / cambie el estado del widget o la pantalla
Para comprender esto mejor, reanudemos nuestro flujo del ejemplo anterior. Para este propósito, es necesario que nos familiaricemos con el generador de condiciones.
El constructor de condiciones
Haga doble clic en cualquiera de las interacciones, por ejemplo, OnClick. Podrá ver el editor de casos como se muestra en la siguiente captura de pantalla.
Haga clic en el botón Agregar condición cerca del nombre del caso. Se mostrará a continuación en el cuadro de diálogo.
Como se muestra en la Descripción, el generador de condiciones creará el flujo If-Then-Else según las condiciones elegidas en la sección de condiciones.
Creemos una condición en este botón.
Queremos mostrar el botón de ocultar imagen, una vez que el panel dinámico esté visible. Hicimos visible el panel dinámico en el botón Mostrar imagen, haga clic en el ejemplo anterior. Ahora, hagamos visible otro botón Ocultar imagen.
Cierre el generador de condiciones y vuelva al área de diseño.
Inserte el botón Ocultar imagen de las bibliotecas en bibliotecas comunes. Para reiterar, es una buena práctica nombrar el elemento de la interfaz de usuario inmediatamente después de haberlo insertado en el área de diseño.
Haga clic con el botón derecho en el botón Ocultar imagen y haga clic en Establecer oculto. El botón se ocultará del área de diseño como se muestra en la siguiente captura de pantalla.
Ahora, volvamos a las interacciones para el botón Mostrar imagen.
Primero, debajo de las interacciones del botón Mostrar imagen, haga doble clic en Caso 1, podrá ver el editor de casos. Utilice la acción Mostrar / Ocultar para seleccionar hideImageButton y establecer su visibilidad para mostrar.
De manera similar, usando la acción Mostrar / Ocultar, seleccione showImageButton y configure su visibilidad para ocultar.
Hemos gestionado la visibilidad del botón Ocultar imagen de tal forma que, al hacer clic en el botón Mostrar imagen, se mostrará el botón.
Una condición completa será como se muestra en la siguiente captura de pantalla.
Construyamos la condición.
Debajo del área de diseño, haga clic en el botón Ocultar imagen. En la sección Inspector, haga clic en Agregar caso.
En Agregar caso, haga clic en el botón Agregar condición. Según los antecedentes proporcionados anteriormente, cree el conjunto de condiciones utilizando los valores desplegables en el Generador de condiciones.
En palabras simples, con la condición anterior, estamos verificando si el panel dinámico showImageDynamicPanel es visible o no
Ahora, diseñemos la interacción para el botón Ocultar imagen, configúrelo de la siguiente manera:
- Seleccione la acción Mostrar / Ocultar.
- Seleccione el widget showImageDynamicPanel.
- Establezca la visibilidad en Ocultar.
Del mismo modo, repita el ejercicio para mostrar showImageButton y ocultar hideImageButton.
Una vez hecho esto, haga clic en Aceptar para cerrar Case Editor.
Luego, haga clic en Vista previa para ver los cambios realizados.
Los resultados exitosos serán los que se muestran en las siguientes capturas de pantalla.
Cuando se hace clic en el botón Mostrar imagen:
Cuando se hace clic en el botón Ocultar imagen:
