RichFaces ModalPanel Review

The ModalPanel component implements a window that show datas and block the user to interact with the page while active.
This fast Post show how create a simple ModalPanel with a Label Link and give you power to extend and improve your usage.
The second code example below, you may use a image to applicate a controll to close window.

Quem vive no mundo JSF com certeza já conheceu o componente ModalPanel do RichFaces. O ModalPanel é um componente que abre uma janela na tela do site/sistema bloqueando qualquer ação na tela, seja para editar ou clicar em algum outro componente ou link.
O desenvolvedor pode configurar esta tela para que seja redimensionada e ainda poder até arrastá-la pela tela.

A seguir um simples exemplo de como utilizar:

...
<a onclick="Richfaces.showModalPanel('mP');" href="#">Show</a>
<a4j:form>
      <rich:modalPanel id="mP" >
            <a onclick="Richfaces.hideModalPanel('mP');" href="#">Hide</a>
      </rich:modalPanel>
</a4j:form>
...

É como se mostrasse uma simples div na tela, mas esta div pode muito bem conter formulários, dados e algo mais complexo de sua imaginação para aumentar o value de sua app.
Caso voce queira acrescentar uma barra e um botão para fechar, como mesmo uma pequena janela do windows ou outro sistema operacional, basta utilizar um controle através da adição de um facet com o nome controls.

Logo, seu ModalPanel ficaria assim:

...
      <rich:modalPanel id="mP" >
            <f:facet name="controls">
                    <h:graphicImage value="yourCloseIcon.gif" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mP')" />
            </f:facet>
      </rich:modalPanel>
...

Vou ficar devendo a imagem. Mas é bem simples e legal!
Bom, que dados podemos mostrar em um ModalPanel?
A princípio não existe nenhuma restrição de dados para que você apresente em um ModelPanel. Pode apresentar dados que estão na sessão, ou somente dados de uma requisição simples http, pode adicionar um formulário que trabalhe via requisição Ajax, e etc…
O ModalPanel e um recurso poderoso e se a equipe tiver uma idéia legal na arquitetura e design de sua app pode ganhar um valor incrível que pode conquistar de vez o cliente.
Boa sorte e bons códigos.

_o/
Icon The Rolling Stones

Tags: , , ,

Leave a Reply