Posts Tagged ‘mojarra’

RichFaces ModalPanel Review

Monday, November 1st, 2010

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

How to use Mojarra + Ajax, part 1

Monday, October 18th, 2010

Finally, i can begin news Posts about JSF 2, Mojarra.
Let’s begin with a simple example to show how use Ajax functionality + Mojarra.
Now the JSF API has a tag to use Ajax functionality without the need for other frameworks such as Ajax4jsf, RichFaces, and others.

E o JSF 2, projeto Mojarra, está ficando a cada dia melhor.
Vocês viram como ficou fácil utilizar aplicar Ajax no componentes JSF agora?!
Agora a API do JSF 2 tem uma tag para utilizar Ajax sem necessidade de outros frameworks como Ajax4JSF, Richfaces e outros.
Vamos direto ao ponto!
Vamos construir uma caixa de texto onde o que será digitado será impresso via Ajax no componente abaixo, sem dar submit na página, é claro!
Vamos aos passos:
#1 - Crie a estrutura de sua página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">

 
  <h:head>
  </h:head>
 
  <body>
  </body>
 
</html>

Um ponto importante nesta etapa é… se quiser utilizar o Ajax do Mojarra nunca esqueça de adicionar a tag head. Pois, quando você define esta tag, o Mojarra saberá onde colocar as definições Javascript para que possa ser adicionado toda a funcionalidade Ajax.

#2 - Vamos adicionar nosso teste. Dentro da tag body adicione o seguinte conteúdo:

<h:form>

  <h:inputText value="#{seuBean.suaPropriedade}" >
    <f:ajax event="keyup" render="texto" />
  </h:inputText>
       
  <h:outputText id="texto" value="#{seuBean.suaPropriedade}" />
       
</h:form>

Crie seu Bean com a propriedade do tipo que você achar melhor. Aqui chamei o Bean de seuBean e a propriedade como suaPropriedade como exemplo. Crie seus métodos get e set. Configure o Bean com as annotations.
Quando foi adicionado o componente inputText e internamente adicionado a tag f:ajax, dissemos para o coração do Mojarra que é para ser utilizado a funcionalidade Ajax, onde a cada evento de keyup, ou seja, digitar algum caracter e soltar a tecla do teclado será invocado uma chamada assíncrona onde será atualizado o componente ou área HTML definida pelo id=”texto”.
Compilou? :D
É simples! Lembrando que o evento Javascript deve ser adicionar sem o prefixo on, ou seja, onKeyUp é KeyUp, onChange é Change, etc.

Logo deixo um exemplo mais complexo pra começar a trabalhar numa arquitetura legal para vcs poderem utilizar no dia a dia e também deixar críticas e sugestões.

_o/
Icon The Rolling Stones