Posts Tagged ‘jsf’

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

Myfaces Core 2.0.0-beta-3 Release

Sunday, March 28th, 2010

MyFaces Core 2.0.0-beta-3 has been released. It is available from the download page, and in the central Maven repository under Group ID “org.apache.myfaces.core”.

Icon The Rolling Stones

Facelets: Repeat Tag

Tuesday, August 18th, 2009

Somente utilizava o facelets para montar a página através de templates. E com JSF é muito bom mesmo.
Ontem de noite estudando cai em um problema onde tive que gerar um trecho de código HTML de forma dinâmica, mas sem precisar de tag JSF ou Myfaces ou Richfaces. Pesquisando na internet como eu poderia fazer esse dinamismo achei no facelest a tag repeat, que me lembrou muito as tags do famoso e bem conhecido JSTL.
Bom a tag repeat permite que vc passe uma lista de objetos e em cada iteração dentro da tag vc utiliza um nome lógico ou uma variável para obter os valores pedidos.
Muitos de vcs já conhecem essa funcionalidade, mas resolvi deixar aqui pra quem acompanha o blog e ainda não trabalhava com ele.
Ai vai um trecho de código simples. A tag ui:repeat simplesmente apresenta os texto definido no objeto da lista objectsList e mostra o seu nome. Dê uma olhada ai:

<!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:ui="http://java.sun.com/jsf/facelets"
         xmlns:h="http://java.sun.com/jsf/html">

<body>
   <ui:decorate template="/templates/simpletemplate.xhtml">
       <ui:define name="area">
           <ui:repeat value="#{ExampleBean.objectsList}" var="object">
                 <h:outputText value="#{object.nome}" />
                 <br/>
          </ui:repeat>
       </ui:define>
   </ui:decorate>
</body>
</html>

Lembrando que uma página que utilize o facelest deve obedecer as mesmas regras que um arquivo em XML, ou seja, as tags devem ser abertas e fechadas.

Bom, fala ai algo que vc fez de diferente e vamos compartilhar! _o/
_o/
Icon The Rolling Stones

Myfaces FileUpload Component

Friday, April 24th, 2009

O projeto Myfaces Tomahawk possui um componente muito útil para fazer upload de arquivos no servidor. Este upload pode ser utilizado para enviar arquivo(s) para o servidor para ser lido, ou gravado em algum local específico, ou seja lá qual a sua necessidade.
Resolvi deixar esse simples post somente mesmo para registrar que um dia eu utilizei este componente do tomahawk para realizar upload de arquivos.
Então vamos lá.
#1 - Em sua page JSP ou XHTML adicione o componente inputFileUpload:

<t:inputFileUpload id="file" value="#{bean.file}" />

Lembrando que este componente deve ficar dentro de um form que deve ter a propriedade enctype configurada, fica então assim:

<h:form enctype="multipart/form-data">
        <t:inputFileUpload id="file" value="#{bean.file}" />
        <h:commandButton value="Enviar Arquivo" action="#{bean.upload}" />
</h:form>

Veja que tb foi adicionado um commandButton para acionar o método que irá receber o arquivo enviado.

#2 - Nosso Bean ficará simples.
Esta é a propriedade e os métodos set e get do componente FileUpload do Tomahawk:

private UploadedFile file;

public UploadedFile getFile() {
  return file;
}

public void setFile(UploadedFile file) {
  this.file = file;
}

A seguir está o método que irá, por exemplo, receber um arquivo e processar fazendo algo.

public String upload() throws IOException {
         try {
      InputStream inputStream = this.file.getInputStream();
      BufferedReader in = new BufferedReader(new InputStreamReader(inputStream));
      String arquivo = "";
      String readLine = "";
      while ((readLine = in.readLine()) != null ) {
        arquivo = arquivo + readLine;
      }
    }
    catch(Exception error) {
    }
   
    return null;
}

Este método irá receber um arquivo e ler linha por linha armazenando estas linhas em uma variável do tipo String chamada arquivo.

Muito fácil, não?

_o/
Icon The Rolling Stones

Myfaces Extensions Validator Released

Friday, April 24th, 2009

Myfaces Extensions Validator é uma nova funcionalidade no projeto que permite adicionar validações com annotations diretamente no bean, ou seja, se você tem uma propriedade no bean e deseja que ela seja required, somente precisa adicionar a annotation na propriedade do bean sem a necessidade de adicionar uma propriedade na tag em sua jsp ou xhtml page.

Acesse aqui!

_o/
Icon The Rolling Stones

Myfaces Captcha

Thursday, April 16th, 2009

Myfaces Tomahawk have an component usefull that you may use to protect your blog or form against spam or other malicious script. This component is the Captcha.
You may use it to force the user type the code before send any data to your system. Normally it’s to protect blogs and contact forms.
Below you can see an example to use myfaces tomahawk captcha.
Good Lucky.

Sabe aqueles formulários que agente preenche e no final pede pra digitar um código que aparece numa imagem? Então, isso se chama captcha.
O Myfaces Tomahawk possui um componente chamado Captcha e permite que você possa adicionar esta funcionalidade em sua aplicação JSF. É muito fácil a utilização.
#1 - Baixe o jar do tomahawk e o adicione em sua aplicação.

#2 - Adicione um campo de texto para o usuário digitar o código que aparece na imagem:

<h:inputText value="#{bean.digitado}" />

Adicione o componente captcha em sua page jsp ou xhtml:

<t:captcha captchaSessionKeyName="#{bean.code}" />

Lembrando que este componente deve ficar dentro de um formulário.
Adicione também um botão para submit(h:commandButton)

<h:commandButton value="Enviar" action="#{bean.send}" />

Para este exemplo, vamos adicionar também uma h:messages para imprimir uma mensagem dizendo se o código digitado foi inserido corretamente ou não.

<h:messages id="msg" />

#3 - Nosso Bean:

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import javax.servlet.http.HttpSession;

public class Bean {
  private String digitado;
 
  public String getDigitado() {
    return digitado;
  }
  public void setDigitado(String digitado) {
    this.digitado = digitado;
  }
  public String getCode() {
    return null;
  }
 
  public String send() {
    FacesContext facesContext = FacesContext.getCurrentInstance();
   
    if( this.getDigitado().equalsIgnoreCase( (String)((HttpSession)facesContext.getExternalContext().getSession(true)).getAttribute("") ) )
      facesContext.addMessage("msg", new FacesMessage("OK!"));
    else
      facesContext.addMessage("msg", new FacesMessage("ERROR!"));
   
    return null;
  }
}

Quando você digitar o código no campo de texto e der submit, será apresentado uma msg informando se o código está OK ou não.
É muito fácil utilizar este componente.
Depois eu volto e deixo um exemplo de como enviar um email validando por este código.

Bis morgen!
_o/
Icon The Rolling Stones

JSF: h:column and 1 problem

Friday, February 13th, 2009

Today we discover an functionality in jsf that not execute. I tried print an dynamic message inside h:column in facet inside header of my table. But, when you put an expression language into any component in facet header in h:column, like h:outputLabel, this no print message content in el.
Take a look in code below. The outputLabel inside the facet component no print the message.
Try too! If you know a tip to around this matter, please, leave a reply.

Hoje durante nossa diversão(trabalho em equipe) descobrimos um problema no JSF e logo, então, aprendi.
Quando você quer fazer uma tabela para apresentar os dados, normalmente construimos uma tabela onde o cabeçalho, ou se preferir header, tem labels estáticos. É um pouco raro precisar de uma tabela onde o label seja dinâmico. Bom, hoje utilizando o JSF em um projeto na empresa, estava eu tentando imprimir uma mensagem dinâmica no label do header da tabela(h:dataTable).
Aqui vai um exemplo simples do que eu estava tentando fazer:

<h:dataTable value="#{pickListBean.products}" var="product">
 <h:column>
       <f:facet name="header">
            <h:outputLabel value="#{product.name}" />
       </f:facet>
       <h:outputLabel value="#{product.name}" />
</h:column>
</h:dataTable>

Veja que tenho uma Expression Language no componente outputLabel dentro do facet header. Bom, ele era para imprimir o label do header dinâmicamente.
…Mas não foi o que aconteceu.
Descobrimos que se você tentar adicionar uma expression language dentro do facet de uma h:column ela não irá imprimir o conteúdo.
O componente outputLabel fora do facet imprime a mensagem normalmente.
Não mais estranho é que não foi emitido nenhuma exceção e mensagem de warning.

Vamos pesquisar e ver o que podemos fazer para contornar esta pequenina falta de funcionalidade.
_o/
Icon The Rolling Stones