Qodly Studio for 4D: Interfaces de usuario dinámicas con estados de página

Con 4D 20 R6, Qodly Studio for 4D introdujo una nueva y emocionante funcionalidad: los estados de página. Tal vez ya vio nuestro post anterior, pero vamos a explorar lo que hace esta funcionalidad tan valiosa para las interfaces de usuario dinámicas.

Imagine UIs que se adaptan instantáneamente a los diferentes pasos del usuario o contextos.

Estos son algunos casos de uso comunes en los que los estados de página brillan:

• Activar o desactivar componentes en función de las acciones del usuario (por ejemplo, activar el botón «Guardar» sólo cuando se hayan llenado todos los campos obligatorios).
• Alternar entre los modos claro y oscuro con un simple toque.
• Restringir el acceso a las acciones (lectura, actualización, etc.) en función de los privilegios del usuario.

 

Estados PIQS

Estados de página: Una solución dinámica para interfaces usuario interactivas

¿Pero qué es exactamente un estado de página? Un estado se define por cómo difiere de la página Qodly original, conocida como la página de base, permitiéndole hacer visibles condicionalmente los elementos de la IU o aplicar diferentes estilos basados en las interacciones del usuario. Y todo comienza con la página de base, el diseño original de su interfaz usuario.

Hay una nueva sección de estados para manejar los estados.

Empecemos con un ejemplo sencillo.

Esta página Qodly tiene una caja de estilo con un fondo transparente. Es la página de base.

Si desea presentar al usuario una variación de la página de base, cree un nuevo estado, selecciónelo en la lista de Estados y diséñelo.

Aquí, se ha creado un estado verde para tener un fondo verde en lugar del fondo transparente de la página de base.

También se ha creado un estado morado con un fondo morado en lugar del fondo transparente que ofrece la página de base.

El objetivo es activar o desactivar un estado en función de las situaciones encontradas durante la experiencia del usuario.

En una página Qodly, se pueden crear tantos estados como sean necesarios en función de los casos de uso que se encuentre el usuario final.

Se pueden activar varios estados a la vez.

¿Cómo activar o desactivar los estados?

Activar o desactivar un estado puede hacerse de tres maneras:

1. Mediante acciones estándar
2. Mediante la vinculación de condiciones
3. Desde código back-end en el servidor

 

las acciones estándar deL estado

Gracias a las acciones estándar, puede activar/desactivar estados cuando el usuario interactúa con la página.

En el ejemplo siguiente, la interfaz de usuario propone los modos claro y oscuro. El estado Light maneja el modo claro con un CSS lightMode

y el estado Oscuro maneja el modo oscuro con un css darkMode

A continuación, se muestra la página Base. Cuando el usuario hace clic en el icono de la luz, el estado Claro se activa, y el estado Oscuro se desactiva.

(Y la acción viceversa se realiza cuando el usuario hace clic en el icono oscuro: el estado Oscuro se activa, y el estado Claro se desactiva)

Este es el resultado final.

estados condicionales

Aquí es donde ocurre la verdadera magia. Los estados pueden vincularse a condiciones, lo que permite a la interfaz de usuario responder a criterios específicos como privilegios de usuario o valores de datos. El estado se activa o desactiva dinámicamente según se evalúe la condición como TRUE o FALSE.

En este ejemplo, la interfaz de usuario muestra una lista de productos y una sección Detalles del producto que actualiza eventualmente el nombre del producto seleccionado.

Se han creado dos estados:

• el estado Sólo lectura
• el estado Actualizar

Es fácil de adivinar: el estado Actualizar es necesario cuando el usuario puede actualizar el producto seleccionado, mientras que el estado Sólo lectura es necesario cuando el usuario sólo puede ver los datos del producto.

A continuación, se muestra el estado Actualizar. En la sección Detalles del producto, el campo Nombre está habilitado y hay un botón Guardar.

Y aquí está el estado Sólo lectura. En la sección Detalles del producto, sólo hay un campo Nombre desactivado.

Los estados Sólo lectura y Actualizar están vinculados a una condición. La capacidad de actualizar un producto depende del atributo actualizable del producto seleccionado.

El estado Sólo lectura se activa si la condición theProduct.updatable = false. El estado Actualizar se activa si la condición theProduct.updatable = true.

 

Este es el resultado final.

 

Gracias al poderoso y sencillo editor de condiciones, puede crear condiciones anidadas para gestionar la lógica empresarial más compleja.

Estas condiciones pueden basarse en criterios como los valores fuente Qodly, si la sesión tiene o no algunos privilegios, etc. Consulte la documentación para obtener más información.

 

MANEJAR LOS ESTADOS DEL SERVIDOR

La última cosa a tener en cuenta es que habilitar/deshabilitar estados desde el código back-end puede ser útil cuando algunas reglas de negocio sólo pueden ser evaluadas en el back-end.

En la demo adjunta, verá un ejemplo de esto. El usuario selecciona productos. Una vez que el importe total de los productos seleccionados es mayor o igual a 300$, se habilita un estado que impide cualquier selección de productos.

Gracias a las funciones Web Form.enableState() y Web Form.disableState(), esto se logra.

A continuación, se muestra el código. El estado LimitReached desactiva cualquier selección del usuario.

	If ($tempSelection.sum("price")>=300)
		Web Form.enableState("LimitReached")
		Web Form.disableState("Initial")
	End if 

Este es el resultado final.

 

¿Quiere verlo en acción?

Descargue la demo adjunta Play In Qodly Studio para aprender a utilizar los estados de página y cómo ofrecer una interfaz dinámica a sus usuarios finales.