SmartGwt – HTMLPane para deplegar un mensaje

marzo 5, 2013

Para desplegar un mensaje en formato HTML puedes utilizar un HTMLPane. Para el cuerpo del mensaje no hay ningún problema, el problema se presenta cuando intentas aplicar CSS para posicionar elementos. Esto se debe al mecanismo de posicionamiento y auto dimensionado de los controles de SmartGwt.

En mi caso, sólo necesitaba desplegar una “capa” que ocupara toda la pantalla para desplegar el mensaje. Así que utilizando el atributo “position: fixed;” de CSS pude ubicar los elementos referente a la ventana del naevgador.

SmartGwt

        HTMLPane pnlHtmlMessage = new HTMLPane();
        pnlHtmlMessage.setContents(message.getHtml());

HTML del mensaje

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .wrapper {
                position: relative;
            }</p><pre><code>        .background {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            bottom: 24px;
            background-color: black;
            opacity: 0.6;
        }

        .message {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 640px;
            height: 120px;
            margin-left: -320px;
            margin-top: -60px;
            font-size: 24px;
            color: white;
        }

        .indicador {
            position: fixed;
            text-indent: -800px;
            background-image: url(/img/dismiss-arrow.png);
            width: 468px;
            height: 60px;
            left: 20px;
            bottom: 30px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="message"&gt;
        Ahora puedes ver mensajes importantes en esta pantalla.&lt;br&gt;
        Selecciona la opción de "No mostrar este mensaje de nuevo" y haz clic en el botón OK si has entendido el mensaje
    &lt;/div&gt;
    &lt;div class="indicador"&gt;Selecciona y da clic aquí&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><p>

Si utilizaramos “position: absolute;” intentaría posicionar los elementos relativos al padre. Debido a que SmartGwt crea 2 divs para el HTMLPane: uno que funciona como proxy para los eventos y otro con el contenido HTML, pero con un tamaño que no coincide con el tamaño real del control. Así que es necesario posicionar los elementos del mensaje mediante una posición “fixed”.

Fuentes:
http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: