Saltar al contenido principal

Dialog

Abrir en ChatGPT
Sombra dwc-dialog 23.06
Java API

El componente Dialog muestra una ventana emergente que se superpone a la vista actual, llamando la atención sobre contenido enfocado, como formularios, confirmaciones o mensajes informativos.

Estructura del Dialog​

El Dialog está organizado en tres secciones: un encabezado, un área de contenido y un pie de página. Se pueden agregar componentes a cada sección utilizando addToHeader(), addToContent() y addToFooter().

Mostrar Código

Usos​

  1. Retroalimentación y Confirmación del Usuario: Los componentes Dialog se utilizan a menudo para proporcionar retroalimentación o solicitar la confirmación del usuario. Pueden mostrar varios mensajes de retroalimentación importantes, como:
  • Mensajes de éxito
  • Alertas de error
  • Confirmaciones de envíos

  1. Entrada y Edición de Formularios: Puede usar diálogos para recopilar datos del usuario o permitirles editar información de manera controlada y enfocada. Por ejemplo, un diálogo puede aparecer para editar detalles del perfil del usuario o completar un formulario de varios pasos.

  2. Información Contextual: Mostrar información adicional contextual o sugerencias en un diálogo puede ayudar a los usuarios a entender características o datos complejos. Los diálogos pueden proporcionar explicaciones detalladas, gráficos o documentación de ayuda.

  3. Vistas Previas de Imágenes y Medios: Cuando los usuarios necesitan ver piezas de medios, se puede usar un Dialog para mostrar vistas previas más grandes o galerías, como al interactuar con:

  • Imágenes
  • Videos
  • Otros medios

Fondo y desenfoque​

Al habilitar el atributo de fondo del componente Dialog de webforJ, se mostrará un fondo detrás del Dialog. Además, cuando se habilita, el atributo de desenfoque del Dialog desenfocará el fondo del mismo. Modificar estas configuraciones puede ayudar a los usuarios al proporcionar profundidad, jerarquía visual y contexto, lo que lleva a una orientación más clara para el usuario.

Mostrar Código

Abrir y cerrar el Dialog​

Después de crear un nuevo objeto Dialog, use el método open() para mostrar el diálogo. Luego, el componente Dialog puede cerrarse mediante una de estas acciones:

  • Usando el método close()
  • Presionando la tecla ESC
  • Haciendo clic fuera del Dialog

Los desarrolladores pueden elegir qué interacciones cierran el Dialog con setCancelOnEscKey() y setCancelOnOutsideClick(). Además, el método setClosable() puede prevenir o permitir tanto presionar la tecla ESC como hacer clic fuera del Dialog para cerrar el componente.

Mostrar Código

Foco automático​

Cuando se habilita, el enfoque automático le dará automáticamente el enfoque al primer elemento dentro del diálogo que puede ser enfocado. Esto es útil para ayudar a dirigir la atención de los usuarios y es personalizable a través del método setAutoFocus().

Mostrar Código

Arrastrable​

El Dialog tiene una funcionalidad incorporada para ser arrastrable, permitiendo al usuario trasladar la ventana del Dialog haciendo clic y arrastrando. La posición del Dialog puede ser manipulada desde cualquiera de los campos dentro de él: el encabezado, el contenido o el pie de página.

Ajustar al borde​

También es posible calibrar este comportamiento para ajustarse al borde de la pantalla, lo que significa que el Dialog se alineará automáticamente con el borde del display cuando se suelte desde su fecha de arrastre y caída. El ajuste se puede cambiar a través del método setSnapToEdge(). El setSnapThreshold() toma un número de píxeles, que establecerá cuán lejos debe estar el Dialog de los lados de la pantalla antes de que se ajuste automáticamente a los bordes.

Mostrar Código

Posicionamiento​

La posición del diálogo se puede manipular utilizando los métodos incorporados setPosx() y setPosy(). Estos métodos toman un argumento de cadena que puede representar cualquier unidad de longitud CSS aplicable, como píxeles o altura/ancho de vista. Una lista de estas medidas se puede encontrar en este enlace.

Mostrar Código

Alineación vertical​

Además de la asignación manual de la posición X y Y de un diálogo, es posible utilizar la clase enum incorporada del diálogo para alinear el Dialog. Hay tres valores posibles: TOP, CENTER y BOTTOM, cada uno de los cuales se puede utilizar con el método setAlignment().

Mostrar Código

Pantalla completa y puntos de quiebre​

El Dialog se puede configurar para entrar en modo de pantalla completa. Cuando se habilita la pantalla completa, el Dialog no se puede mover ni posicionar. Este modo se puede manipular con el atributo de punto de quiebre del Dialog. El punto de quiebre es una consulta de medios que determina cuándo el Dialog cambiará automáticamente al modo de pantalla completa. Cuando la consulta coincide, el Dialog cambia a pantalla completa; de lo contrario, se posiciona.

Ancho automático 26.00​

Por defecto, el Dialog se estira para llenar el espacio horizontal disponible. Cuando se habilita el ancho automático a través de setAutoWidth(true), el Dialog ajusta su tamaño según el ancho de su contenido.

Mostrar Código

Estilo​

Temas​

Los componentes Dialog vienen con 7 temas discretos integrados para un estilo rápido sin el uso de CSS. Estos temas son estilos predefinidos que se pueden aplicar a los botones para cambiar su apariencia y presentación visual. Ofrecen una manera rápida y consistente de personalizar la apariencia de los botones a lo largo de una aplicación.

Si bien hay muchos casos de uso para cada uno de los diversos temas, algunos ejemplos son:

  • Peligro: Acciones con graves consecuencias, como borrar información completada o eliminar permanentemente una cuenta/datos es un buen caso de uso para diálogos con el tema Peligro.
  • Por Defecto: El tema predeterminado es apropiado para acciones a lo largo de una aplicación que no requieren atención especial y que son genéricas, como alternar una configuración.
  • Primario: Este tema es apropiado como un "llamado a la acción" principal en una página, como registrarse, guardar cambios o continuar a otra página.
  • Éxito: Los diálogos con el tema de Éxito son excelentes para visualizar la finalización exitosa de un elemento en una aplicación, como el envío de un formulario o la finalización de un proceso de registro. El tema de éxito puede aplicarse programáticamente una vez que se haya completado una acción exitosa.
  • Advertencia: Los diálogos de advertencia son útiles para indicar a los usuarios que están a punto de realizar una acción potencialmente arriesgada, como al navegar fuera de una página con cambios no guardados. Estas acciones a menudo son menos impactantes que aquellas que usarían el tema Peligro.
  • Gris: Bueno para acciones sutiles, como configuraciones menores o acciones que son más complementarias a una página y no parte de la funcionalidad principal.
  • Información: El tema de Información es una buena opción para proporcionar información aclaratoria adicional a un usuario cuando lo requiera.
Mostrar Código

Loading...