El Libro de Vaadin: Version 6

Anterior

Siguiente

4.3. Ventanas Secundarias

Una ventana de nivel de aplicación puede tener varias ventanas secundarias flotantes. Están son manejadas por JavaScript del lado del cliente en tiempo de ejecución con características HTML utilizando Vaadin. Vaadin permite abrir y cerrar ventanas secundarias, refrescar una ventana desde otra, cambiar el tamaño de las ventanas, y desplazar el contenido de la ventana. Las ventanas secundarias normalmente son utilizadas por Ventanas de Diálogo y aplicaciones de Interfaz de Múltiples Documentos. Las ventanas secundarias son por defecto no modales; puede establecerlas a modales como se describe en la Sección 4.3.4, "Ventanas Modales".

Al igual que con todos los componentes de interfaz de usuario, la apariencia de una ventana y sus contenidos son definidos con los temas.

El control del usuario a una ventana secundaria está limitada a mover, redimensionar y cerrar la ventana. Maximizar o minimizar aún no están soportados.

4.3.1. Abrir y Cerrar Ventanas Secundarias

Puede abrir una ventana nueva creando un nuevo objeto Window y agregarlo a la ventana principal con el método addWindow() de la clase Application.

miVentana = new Window("Mi Ventana");
ventanaPrincipal.addWindow(miVentana);

Cierre la ventana de una manera similar, llamando a removeWindow() de la clase Application.

miAplicacion.removeWindow (miVentana);

El usuario puede, por defecto, cerrar una ventana secundaria haciendo clic en el botón de cierre en la esquina superior derecha de la ventana. Puede desactivar el botón estableciendo la ventana como de sólo lectura con setReadOnly(true). Tenga en cuenta que también puede deshabilitar el botón haciéndolo invisible en CSS con el formato "display: none". El problema con esta deshabilitación estética es que un usuario malintencionado podría volver a habilitar el botón y cerrar la ventana, lo que podría causar problemas y, posiblemente, ser un agujero de seguridad. Configurando la ventana como de sólo lectura no sólo desactiva el botón de cierre del lado del cliente, sino que también impide procesar el evento cerrar del lado del servidor.

El siguiente ejemplo demuestra el uso de una ventana secundaria en una aplicación. El ejemplo maneja la ventana con un componente personalizado que contiene un botón para abrir y cerrar la ventana.

/** El componente contiene un botón que permite abrir una ventana. */
public class AbridorVentana extends CustomComponent
                          implements Window.CloseListener {
    Window ventanaPrincipal;  // Referencia a la ventana principal
    Window miVentana;    // La ventana que se abrirá
    Button botonAbrir;  // El botón para abrir la ventana
    Button botonCerrar; // Un botón en la ventana
    Label  explicacion; // Un texto descriptivo

    public AbridorVentana(String label, Window principal) {
        ventanaPrincipal = principal;

        // El componente contiene un botón que abre la ventana.
        final VerticalLayout disenio = new VerticalLayout();
        
        botonAbrir = new Button("Abrir Ventana", this,
                                "abrirButtonClick");
        explicacion = new Label("Explicación");
        disenio.addComponent(botonAbrir);
        disenio.addComponent(explicacion);
        
        setCompositionRoot(disenio);
    }

    /** Controlar los clics de los dos botones. */
    public void abrirButtonClick(Button.ClickEvent event) {
        /* Crear una nueva ventana. */
        miVentana = new Window("Mi Cuadro de Diálogo");
        miVentana.setPositionX(200);
        miVentana.setPositionY(100);

        /* Agregar la ventana dentro de la ventana principal. */
        ventanaPrincipal.addWindow(miVentana);

        /* Escuchar los eventos 'cerrar' para la ventana. */
        miVentana.addListener(this);

        /* Agregar los componentes en la ventana. */
        miVentana.addComponent(
                new Label("Una etiqueta de texto en la ventana."));
        botonCerrar = new Button("Cerrar", this, "cerrarButtonClick");
        miVentana.addComponent(botonCerrar);

        /* Permitir abrir sólo una ventana a la vez. */
        botonAbrir.setEnabled(false);

        explicacion.setValue("Ventana abierta");
    }

    /** Controlar el clic del botón botonCerrar y cierre de la ventana. */
    public void cerrarButtonClick(Button.ClickEvent event) {
        /* Las ventanas son manejadas por el objeto application. */
        ventanaPrincipal.removeWindow(miVentana);

        /* Volver al estado inicial. */
        botonAbrir.setEnabled(true);

        explicacion.setValue("Cerrado con el botón");
    }

    /** En caso de que la ventana sea cerrada de otro modo. */
    public void windowClose(CloseEvent e) {
        /* Volver al estado inicial. */
        botonAbrir.setEnabled(true);

        explicacion.setValue("Cerrado con controles de la ventana");
    }
}

El ejemplo implementa un componente personalizado que hereda la clase CustomComponent. Este consiste de un Button que se utiliza para abrir una ventana y un Label para describir el estado de la ventana. Cuando la ventana es abierta, el botón es deshabilitado. Cuando la ventana es cerrada, el botón es habilitado de nuevo.

Puede utilizar el componente personalizado de arriba en la clase application con:

 public void init() { 
    Window principal = new Window("La Ventana Principal"); 
    setMainWindow(principal);

    principal.addComponent(new AbridorVentana("Abridor de Ventana", principal));
}

Cuando se agrega a una aplicación, la pantalla se verá cómo se ilustra en el siguiente pantallazo:

Figura 4.2. Abriendo una Ventana Secundaria

4.3.2. Posicionar una Ventana

Cuando es creada, una ventana tendrá un tamaño y una posición predeterminada. Puede especificar el tamaño de una ventana con los métodos setHeight() y setWidth(). Puede establecer la posición de la ventana con los métodos setPositionX() y setPositionY().

/* Crear una ventana nueva. */
miVentana = new Window("Mi Cuadro de Dialogo");
 
/* Establecer el tamaño de la ventana. */
miVentana.setHeight("200px");
miVentana.setWidth("400px");
 
/* Establecer la posición de la ventana. */
miVentana.setPositionX(200);
miVentana.setPositionY(50);

Tenga en cuenta que el tamaño de la ventana principal es desconocido y los métodos getHeight y getWidth devolverán -1.

4.3.3. Desplazamiento del Contenido en Ventanas Secundarias

Si una ventana secundaria tiene un tamaño fijo o porcentual y su contenido es demasiado grande para ajustarse al área del contenido, una barra de desplazamiento aparecerá para la dirección en particular. Por otro lado, si la ventana secundaria tiene un tamaño indefinido en la dirección, este se ajustará al tamaño del contenido y nunca obtener una barra de desplazamiento. Las barras de desplazamiento en las ventanas secundarias regulares son manejadas con características HTML, es decir, la propiedad overflow: auto en CSS.

Como Window extiende a Panel, las ventanas también son Scrollable. Tenga en cuenta que la interfaz define un desplazamiento programático, no un desplazamiento por el usuario. Por favor, consulte la Sección 6.6, "Panel".

4.3.4. Ventanas Modales

Una ventana modal es una ventana secundaria que tiene que ser cerrada por el usuario antes de poder continuar para usar la ventana padre. Las ventanas de cuadro de diálogo son generalmente modales. La ventaja de las ventanas modales es la simplificación de la interacción del usuario, que puede contribuir a la claridad de la interfaz de usuario. Las ventanas modales también son fáciles de utilizar desde una perspectiva de desarrollo, porque, la interacción del usuario es aislada para ellos, los cambios en el estado de la aplicación son más limitados, mientras que la ventana modal esté abierta. La desventaja de las ventanas modales es que pueden restringir demasiado el flujo de trabajo.

Figura 4.3. Pantallazo de la Aplicación Demostracion Ventana Modal

Dependiendo de la configuración del tema, la ventana padre puede ser atenuada, mientras la ventana modal esté abierta.

La aplicación demo de Vaadin incluye un ejemplo del uso de ventanas modales. La Figura 4.3, "Pantallazo de la Aplicación Demostracion Ventana Modal" arriba es de la aplicación demo. El ejemplo incluye el código fuente.

Advertencia de Seguridad
La modalidad de las ventanas secundarias es meramente una característica del lado del cliente y puede ser burlado con el ataque por código del lado del cliente. No debe confiar en la modalidad de las ventanas secundarias en situaciones críticas de seguridad tales como las ventanas de inicio de sesión.

Anterior 4.2. Administrar la Ventana Principal

Arriba Inicio

Siguiente 4.4. Controlar Eventos con Oyentes