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 (add) 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.