Abrir PopUp JSP/JSF con fondo deshabilitado

[Erzemi]

Buenass. A ver, tengo una pequeña dudilla. Estoy haciendo una página con JSF y JSP.

A la página se van a subir archivos. Lo que yo quiero hacer es que cuando pulse en el botón de "SUBIR", automáticamente se abra un popup que indique que se están subiendo los archivos, y que el resto de la página se quede como en segundo plano.

Es decir, algo parecido a lo que hace TUENTI cuando vas a enviar un mensaje privado, que te saca un popup y no te deja interactuar con el resto de la página, o lo que hacen algunas galerías fográficas al ver una foto, que la amplian pero no te dejan usar el resto de la página hasta que no cierras ese popup.

No se si me he explicado bien. A ver si con una imagen me entendéis mejor:

Código:

h t t p : / / img200.imageshack.us/img200/559/dibujoyix.jpg

Eso es lo que quiero hacer. ¿Alguna idea?

Muchas gracias


P.D. Siento lo del enlace, ya se que no se pueden poner por motivos de SPAM, pero no encontraba otra forma de explicar lo que quiero hacer. En cualquier caso, ese es el único fin del enlace, que me podáis ayudar, en ningún caso se pretende hacer SPAM. Espero que me entiendan.

[vdpazmino]

Como usas jsf, intenta con la libreria richfaces esa libreria tiene un componente modalPanel, en el link puedes ver el ejemplo.

http://livedemo.exadel.com/richfaces-demo/welcome.jsf

salu2

[Erzemi]

Muchas gracias, lo he estado mirando y sí es eso exactamente lo que quiero hacer... ahora tengo un problema, no se como hacerlo, es decir, no se como integrar eso en lo que ya tengo hecho (que es mucho, y no tengo tiempo de volver a empezar a hacer todo ahora).

A ver, para lo que tengo hecho he usado NetBeans 6.5 con el framework VisualWeb Java Server Faces, que supongo conocerás.

Supongamos un botón llamado "subir". Ese botón tendrá asociado un método que será "subir_action". Todo esto hecho con lo que te he comentado antes.

Bien, yo quiero ahora incluir en ese método el código necesario para que cree y muestre el modalPanel de RichFAces.

Por así decirlo, incluir en mi proyecto que ya tengo hecho solamente el modalPanel del richfaces.... ¿es posible hacer esto? y si es posible... ¿cómo lo hago?

Muchas gracias por ayudarme

[vdpazmino]

En teoria si es posible que puedas integrar tu proyecto con richfaces solo debes modificar el web.xml añadir unos parametros y usar el componente pero con todo pruebale para ver si funciona, te dejo un pdf que es una guia para instalar y usar richfaces

http://rapidshare.com/files/24414701...ichfaces_2.pdf

salu2

[Erzemi]

He estado investigando y al parecer puedo usar un HtmlModalPanel para crearlo dinamicamente. El problema es que no se muy bien como hacerlo.

Con este codigo consigo crear el componente y añadirlo, pero no lo muestra. Simplemente recarga la página y se queda igual. (Para probarlo simplemente he hecho una página con un botón. Mi idea es que al pulsar el botón se cree y muestre el panel modal).

Código:

public String button1_action() {
        // TODO: Process the action. Return value is a navigation
        // case name where null will return to the same page.


         HtmlModalPanel m = new HtmlModalPanel();
     
         m.setAutosized(true);
         m.setHeight(200);
         m.setWidth(400);
         
         List l = form1.getChildren();
         l.add(m);
        return null;
    }

Alguna sugerencia de como hacerlo?

[jorgebee65]

una vez integrado RichFaces en tu proyecto tienes que hacer lo siguiente para invocar el modalPanel para que al dar clic en "Mostrar Avisos" a travez de su id="link" muestre el modalPanel "panel".

Código:

 <h:outputLink value="#" id="link">
                                    Mostrar Avisos
                                    <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
                                </h:outputLink>

El modalPanel tu le especificas las dimensiones; así como ciertos controles como en este caso tiene una opción de cerrar el modalPanel.

Código:

 <rich:modalPanel id="panel" width="600" height="300">
    <f:facet name="header">
        <h:panelGroup>
            <h:outputText value="Avisos"></h:outputText>
        </h:panelGroup>
    </f:facet>
    <f:facet name="controls">
        <h:panelGroup>
         <a href="#" style="color:white">   <h:outputText value="Cerrar" styleClass="hidelink" id="hidelink"/> </a>
            <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
        </h:panelGroup>
    </f:facet>
         <h:outputText value="Lo que quieras que diga aquí adentro..."/>

</rich:modalPanel>