Ventanas emergentes y diálogos

Usa ventanas emergentes y diálogos para mostrar información y solicitar al usuario una respuesta. Son útiles para las siguientes tareas:

Confirmar una solicitud de usuario, como borrar un registro
Centrarse en una tarea importante, como la creación de un orden de inventario nuevo
Mostrar información importante que el usuario necesita conocer.
Mostrar que una transacción está en curso después de que el usuario completa una acción

App Maker admite los siguientes tipos de cuadros de diálogo:

Ventanas emergentes: Son cuadros de diálogo preconfigurados que cubren diversas situaciones de notificación. Las ventanas emergentes se adhieren a los estándares de material design.
Cuadros de diálogo personalizados: Son páginas o fragmentos de página que creas para notificar a los usuarios de tu aplicación. La configuración de cuadros de diálogo personalizados requiere más trabajo. Sin embargo, pueden ser útiles si tu app usa un aspecto diferente (no de material design).

Usa las ventanas emergentes integradas de App Maker

Las ventanas emergentes son un excelente modo de agregar con rapidez interacciones modales y no modales, y notificaciones a tu app.

Puedes agregar una ventana emergente de la misma manera en que agregarías una página o un fragmento de ella. Para eso, sigue estos pasos:

Mantén el cursor sobre Páginas, haz clic en Agregar () y, luego, en Ventana emergente.
Edita el texto de diálogo de la ventana emergente.
Usa el Editor de propiedades para configurar onClick y otras propiedades que controlan el funcionamiento de la ventana emergente.

Ventana emergente vacía

Usa esto como un recuadro en blanco para una ventana emergente personalizada. No incluye contenido generado, por lo que deberás agregar widgets para compilar un diálogo.

Personaliza esta ventana emergente

Configura la apariencia y los eventos de la ventana emergente y sus widgets en el Editor de propiedades.

Menú de navegación

Úsalo para agregar un menú que se desliza en la pantalla desde la izquierda y muestra los destinos de navegación de tu app. El menú de navegación solo vincula a las páginas que existen en el momento de su creación. Si luego agregas páginas a tu app, deberás agregarlas al menú de forma manual.

Personaliza esta ventana emergente

Configura la apariencia y los eventos de la ventana emergente en el Editor de propiedades. También puedes editar el texto que se muestra en el menú y arrastrar páginas para reorganizar su orden.

Diálogo de confirmación

Usa una confirmación para solicitar a los usuarios que verifiquen si en realidad quieren continuar con la acción que acaban de invocar. Este diálogo se suele sincronizar con información crítica o una advertencia relacionadas con esa acción.

Personaliza esta ventana emergente

Configura la apariencia y los eventos de la ventana emergente en el Editor de propiedades.

Además, esta ventana emergente requiere que realices las siguientes acciones:

Edita el título. Los títulos del diálogo de confirmación deben ser significativos y reflejar la acción solicitada.
Edita el campo de texto para describir lo que pasará si el usuario completa la acción.
Cambia el texto del botón y asignar eventos onClick a él.

Diálogo de notificación

Usa esta ventana emergente para informar al usuario sobre un evento o una acción no críticos. Esto no requiere ninguna entrada del usuario.

Personaliza esta ventana emergente

Configura la apariencia y los eventos de la ventana emergente en el Editor de propiedades. De manera predeterminada, el botón Entendido cierra el diálogo.

Además, esta ventana emergente requiere que realices las siguientes acciones:

Edita el título. El título del diálogo debe ser significativo y reflejar la descripción que aparece después de él.
Edita el campo de texto para describir lo que hace la app.

Indicador de carga modal

Usa esta ventana emergente para solicitar al usuario que espere mientras tu app completa una tarea.

Personaliza esta ventana emergente

Configura la apariencia y los eventos de la ventana emergente en el Editor de propiedades.

Barra de notificaciones

Usa esta ventana emergente para proporcionar comentarios breves sobre una operación a través de un mensaje en la parte inferior de la pantalla. Contiene una sola línea de texto relacionada con la operación.

Personaliza esta ventana emergente

Configura la apariencia y los eventos de la ventana emergente en el Editor de propiedades.

Además, esta ventana emergente requiere que realices las siguientes acciones:

Edita el campo de texto. Debe ser una sola línea de texto relacionada con la acción.
Si es necesario, cambia el texto del botón Descartar por una acción más apropiada y actualiza su evento onClick.

Crea un cuadro de diálogo personalizado

Puedes usar cualquier página o fragmento de ella como cuadro de diálogo, si sigues estos pasos:

Arrastra un botón a la página, luego haz clic en la propiedad onClick.
Selecciona la acción predeterminada Abrir diálogo.
Selecciona la página o el fragmento para abrir como diálogo.

De forma opcional, puedes escribir el siguiente código en una secuencia de comandos del lado del cliente para mostrar una página llamada MyDialog como un diálogo:

app.showDialog(app.pages.MyDialog);

Cierra un diálogo

Para cerrar un diálogo abierto cuando el usuario de la app haga clic en un botón, sigue estos pasos:

Selecciona el widget del botón y, luego, haz clic en la propiedad onClick.
Selecciona la acción Cerrar diálogo.

De manera opcional, puedes escribir código en una secuencia de comandos del lado del cliente:

app.closeDialog();

Propiedades de CSS

Usa las clases de CSS siguientes para personalizar las propiedades del diálogo en tu aplicación:

.app-Dialog: Se aplica al elemento de nivel superior del diálogo.
.app-DialogGlass: Se aplica al elemento glass que cubre el resto de la IU mientras el diálogo está abierto.
.app-DialogBody: Se aplica al contenido del diálogo.

Tamaño del diálogo

Las dimensiones de la página o del fragmento de página determinan el tamaño del diálogo.

Para cambiar las dimensiones del diálogo, haz clic en la página o en el fragmento y, luego, edita las dimensiones en el Editor de propiedades.