Rich faces no NetBeans

RichFaces 4.5.9Marcos Venicios da Costa CruzAminadabe dos Santos da Silva

O que é o RichFaces

O RichFaces é um framework open source para desenvolvimento de interfaces Web ricas em recursos visuais, aproveitando todas as características oferecidas pela arquitetura do Java Server Faces (JSF), incluindo seu ciclo de vida, e recursos de validações, gerenciamento estático e dinâmico de seus componentes.

Características RichFaces

Os requisitos mínimos de infraestrutura para desenvolvimento com o RichFaces são:

• Java™ SE 6

• Apache Tomcat ou GlassFish

• Um navegador minimamente atual, como Firefox , Opera, Google Chrome

• Uma IDE. Recomendamos Eclipse ou NetBeans

Características RichFaces

As principais diferenças que você perceberá aqui com relação ao desenvolvimento anterior ao JSF 2 usando JSP são:

• Algumas notações adicionais em web.xml e em faces-config.xml são exigidas ou tomadas como padrão

• Páginas da web são documentos XHTML

• Namespaces XML são usados em vez de bibliotecas de tag JSP

Componentes do RichFaces

Os componentes de demonstração

Inicialmente, o RichFaces pode parecer assustador; o componente médio tem mais de 20 atributos específicos, além de atributos gerais que podem ser substituídos. No entanto, durante uma utilização normal, os componentes não são difíceis de configurar, com a maioria dos atributos tendo padrões razoáveis. A versão 4 apresentou padrões adicionais e alterados e vale a pena conferir a documentação.

Os principais componentes demonstrados neste artigo (com substituições para a Versão 4 indicadas) são...

Componentes do RichFaces

Calendar :um componente pop-up que permite seleções de data. A Figura 1 mostra um exemplo. <

e > mudam o mês; << e >> mudam o ano. Clicar em Today na parte inferior seleciona a data de hoje. Clean limpa a seleção de data. A primeira coluna de números no lado esquerdo mostra a semana do ano.

Componentes do RichFaces

Calendar :O Código para se implementar o calendário é muito simples e de fácil aprendizagem.

<rich:calendar datePattern="dd/M/yyyy" enableManualInput="true"> <rich:placeholder value="dd/mm/yyyy" /> </rich:calendar>

Com este simples código é possível fazer um calendário pop-up passando simples parâmetros para o datePattern, setamos o formato da data, ao habilitarmos o enableManualInput como “true”, permitimos que o usuário digite a data que quer inserir no calendário sem usar a pesquisa.

Componentes do RichFaces

Panel : O painel é uma área retangular em uma página que pode conter qualquer conteúdo,

incluindo outros painéis. Painel tem um cabeçalho ( opcionalmente ) e um corpo . O regime de cores , bordas e preenchimentos podem ser customizáveis usando com número pré- definido de classes CSS .

Componentes do RichFaces

Panel : O Código para se implementar o painel é muito simples e de fácil aprendizagem.

<rich:panel header="nome do painel"> ….

Conteudo, pode ser qual quer coisa, formulários ou outros painéis….</rich:panel>

Componentes do RichFaces

select :

O select no richFaces funciona de forma muito parecida com um html puro, aonde declaramos a tag de select e as suas opções.

Componentes do RichFaces

select :

Para se implementar o select

<rich:select> <f:selectItem itemValue="valor_1" itemLabel="nome que aparecerá" /> <f:selectItem itemValue="valor_2" itemLabel="nome que aparecerá" /> </rich:select>

Simples como em html.

Componentes do RichFaces

dataTable :

o rich:dataTable é um componente tabela que interage diretamente com o banco de dados.

Componentes do RichFaces

dataTable :

A implenetação de uma dataTable é simples e pode ser feita com os seguintes códigos.

<rich:dataTable> <rich:column> <f:facet name="header"> <h:outputText value="Nome"/> </f:facet> <h:outputText value="#{car.model}"/> </rich:column></rich:dataTable>

Componentes do RichFaces

Existem ainda muitos outros componentes do RichFaces que podem muito facilitar a vida de um programador web, como uma integração direta com a api do google map,

selects e menus estilizados, e muito mais que pode ser conferidos nos seguintes sites, que servem como uma especie de bootstrap para o RichFaces, fornecendo exemplos de como se construir uma interface amigável usando o framework.

http://livedemo.exadel.com/ http://showcase.richfaces.org:8000/ http://richfaces.jboss.org/

Instalando o RichFaces

Agora que já conhecemos o RichFaces e vimos o poder de suas ferramentas, vamos ensinar como instala-lo no seu NetBeans.

Passo 1: Baixe e instale o NetBeans no seu computador, o site para download https://netbeans.org/downloads/

Passo 2: Faça download das bibliotecas do Richfaces no site http://richfaces.jboss.org/download/stable.html

Passo 3: Extraia os arquivos em uma pasta de sua escolha

Passo 4: Crie uma pasta com o nome richefaces-versão.richfaces no nosso caso ficou

Richfaces-4.5.10

Instalando o RichFaces

Passo 5: Copie os arquivos .jar que estão dentro da pasta lib que você baixou do site do richfaces.

*obs: Apenas os .jar.

Passo 6: Cole os arquivos que você copiou para dentro da pasta que você criou com o nome e a versão do seu richfaces.

Passo 7: Abra novamente a pasta baixada do site do richfaces e copie os arquivos richfaces-a4j-4.5.10.Final.jar richfaces-core-4.5.10.Final.jar richfaces-rich-4.5.10.Final.jar

Instalando o RichFaces

Passo 8: Cole os arquivos que você copiou para dentro da pasta que você criou com o nome

e a versão do seu richfaces.

Passo 9: Abra o seu NetBeans e crie um novo projeto

Arquivo → novo projeto

Instalando o RichFaces

Passo 10: Escolha Java Web → Aplicação Web → próximo

Instalando o RichFaces

Passo 11: Digite o nome do projeto e click em “usar pasta dedicada para armazenar bibliotecas”

→ próximo

Instalando o RichFaces

Passo 12: Selecione o servodor apache tomcat, e a versão do java EE que você estará a ultilizar

*obs: recomendamos sempre o java mais recente.

→ próximo

Instalando o RichFaces

Passo 13: Selecione Java Server Faces → componentes → mais → criar biblioteca

Em nome da biblioteca coloque “Richfaces-versão”→ ok

Instalando o RichFaces

Passo 14: Adicionar JAR/Pasta → navegue até onde você criou a pasta contendo as bibliotecas

Necessarias para o Richfaces funcionar, selecione todos os arquivos contidos nesta pasta, click

em ok depois em finalizar.

Instalando o RichFaces

Passo 15: Abra o projeto → biblitecas, botão direito, → adcionar biblioteca → importar, encontre o nome da biblioteca que você criou e pronto seu RichFaces está instalado com sucesso.

O uso de Managed Beans

O JSF (Java Server Faces) trabalha diretamente com algo chamado de ManagedBean para

fazer o “link” entre as regras de negócio da sua aplicação (geralmente DAO e etc) com a View

(html, xhtml e assim por diante).

O que é um Bean? Java Bean nada mais é do que o nome dado a uma forma específica de escrever classes Java,

é um padrão.

Basicamente um Bean é uma classe que: tem um construtor publico sem parametros para cada atributo privado existe um método 'set' para atribuir um valor ou referencia e um

método 'get' para obter um valor ou referencia.

O uso de Managed Beans

Desta forma o comparando uma um projeto que usa MVC o bean atuaria como o

C (controller) de nossa aplicação, deixando a view limpa e a regra de negocios por conta do

Bean.

Eles são os responsáveis por intermediar a comunicação entre nossas páginas e o nosso

modelo.

Sendo assim o Managed Bean funciona como uma classe que delega funções,

pois a nossa View não sabe quem vai salvar, alterar ou deletar, essa é a função do

Managed Bean que passa ao nosso DAO (Data Access Object) a tarefa de salvar, deletar

ou alterar algum registro.

O uso de Managed Beans

A view usando o Managed Beans<h:body>

<rich:panel header="Cadastro de Cidade">

<h:form >

<h:panelGrid columns="2">

Nome:<h:inputText style="width: 200px;" id="nome" value="#{cidadeManager.nome}"></h:inputText>

Estado:<h:inputText style="width: 200px;" id="sobrenome" value="#{cidadeManager.id_estado}"></h:inputText>

</h:panelGrid><br/><br/>

<h:commandButton style="margin-left: 113px;" value="Salvar" action="#{cidadeManager.salvar()}"></h:commandButton>

<h:commandButton value="Pagina Principal" onclick="formularios/index.xhtml" ></h:commandButton>

</h:form>

</rich:panel>

</h:body>

O uso de Managed Beans

O Maneged Bean

int id_cidade;

public int getId_cidade() {

return id_cidade;

}

public void setId_cidade(int id_cidade) {

this.id_cidade = id_cidade;

}

public void salvar() throws SQLException { cidade c = new cidade(); cidadeDAO dao = new cidadeDAO();

c.setNome(nome); c.setId_estado(id_estado);

dao.Salvar(c);

ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();

try { context.redirect("formularios/index.xhtml"); } catch (IOException ex) {

Logger.getLogger(pessoaFisicaManager.class.getName()).log(Level.SEVERE, null, ex);

} }

O uso de Managed Beans

Desta Forma temos uma view limpa e umprojeto dentro dos padrões

Referências

Richfaces. Disponível em: <http://richfaces.jboss.org/ >. Acesso em 24 de outubro de

2015.

Richfaces live demo. Disponível em: <http://livedemo.exadel.com/richfaces-demo/ >.

Acesso em 24 de outubro de 2015.

GUJ. Disponível em: <http://www.guj.com.br/java/28219-o-que-e-um-javabean />.

Acesso em 17 de novembro de 2015.

Javafree. Disponível em:

<http://javafree.uol.com.br/topic-886305-Nao-entendo-o-que-e-um-Bean.html />.

Acesso em 17 de novembro de 2015.

Referências

GUJ. Disponível em:

<http://www.guj.com.br/java/224363--conceitual--quem-es-tu-managed-bean-no-mvc- />.

Acesso em 17 de novembro de 2015.

Devmedia. Disponível em:

<http://www.devmedia.com.br/introducao-ao-jsf-managed-bean/29390 />.

Acesso em 17 de novembro de 2015.

Rafael Ponte "TEAM = Together Everyone Achieves More. Disponível em:

<http://www.rponte.com.br/2009/08/27/managed-beans-nao-complique-simplifique/ >.

Acesso em 17 de novembro de 2015.

Referências

JBossDeveloper. Disponível em:

<https://developer.jboss.org/wiki/richfaceswikihomepage />. Acesso em 17 de novembro de

2015.

StackOverflow. Disponível em:

<http://pt.stackoverflow.com/questions/22444/o-que-%C3%A9-e-para-que-serve-um-java-bean />.

Acesso em 17 de novembro de 2015.

IBM developerWorks. Disponível em:

<http://www.ibm.com/developerworks/br/library/j-richfaces4/ />.

Acesso em 17 de novembro de 2015.