Informações
| Tipo: | Tutorial |
|---|---|
| Data de Publicação: | 04/12/2007 |
| Revisado em: | 04/12/2007 |
Vote!
Tags Relacionadas
Comentários ( 7 )
Imprimir
JavaServer Faces + AJAX: Passo a Passo
por:
Raquel do Carmo (raquelsilva2006@gmail.com)
Tutorial passo a passo para criação de aplicações com JavaServer Faces e AJAX utilizando a biblioteca RichFaces.
Objetivos do Tutorial
- Ajudar no desenvolvimento das primeiras aplicações utilizando JSF (JavaServer Faces);
- Indicar uma sequência de passos a serem seguidos a fim de compreender os principais mecanismos oferecidos por esse framework.
Passo 1: Configurar o ambiente:
- JBoss AS 4.0.4 instalado
- Eclipse SDK, versão 3.2.2
- Download da biblioteca RichFaces que implementa componentes JSF com suporte a AJAX. Disponível em: http://labs.jboss.com/jbossrichfaces/downloads/, baixar arquivo: "richfaces-ui-3.1.1-GA-bin.zip".
Passo 2: Construir Projeto Web no Eclipse
- Crie um Dynamic Web Project
- Modifique o Build Path do projeto para referenciar as APIS do JBOSS que estão no diretório jboss-4.0.5.GA2\server\default\deploy\jbossweb-tomcat55.sar\jsf-libs.
- Adicione as APIs do Richfaces no caminho WebContent\WEB-INF\lib do seu Projeto Web.
Passo 3: Construir Entidade
public class Curso {
private Integer cod;
private String nome;
//.. getters e setters devem ser implementados
}
Listagem 1: Entidade Curso
Passo 4: Construir componente Managed Bean
public class MBCadastrar {
private Curso curso ;
private String resultado;
private List cursos;
public MBCadastrar() {
curso = new Curso();
resultado = "";
cursos = new ArrayList<Curso>();
}
//.. getters e setters devem ser implementados
public String cadCurso(){
boolean existe=false;
for(Curso c : cursos){
if(c.getCod().equals(curso.getCod()) ||
c.getNome().equals(curso.getNome())) {
resultado = "Curso já está cadastrado";
existe=true;
break;
}
}
if(!existe){
cursos.add(curso);
resultado="Curso cadastrado com sucesso!";
}
curso = new Curso();
return "sucesso";
}
public String removerCurso() throws Exception{
FacesContext facesContext = FacesContext.getCurrentInstance();
Map map = facesContext.getExternalContext().getRequestParameterMap();
String codigoSelecionado=(String)map.get("codcurso");
int codSel = Integer.parseInt(codigoSelecionado);
for(Curso c : cursos){
if(c.getCod().equals(codSel)){
cursos.remove(c);
resultado = "Curso removido com sucesso";
break;
}
}
return "sucesso";
}
}
Listagem 2: Managed Bean para cadastro de cursos
Características de JSF
Managed Bean é uma classe simples que expõe objetos de negócios para a camada de apresentação.
FacesContext representa o contexto de processamento de uma requisição dentro do JSF e fornece acesso ao ambiente de aplicação web através de um ExternalContext.
Esse, por sua vez, fornece objetos do tipo java.util.Map para trabalharmos com informações que não estão sofrendo gerenciamento do JSF. No exemplo, o método facesContext.getExternalContext().GetRequestParameterMap() retorna parâmetros passados pelo usuário.
O managed bean deve ser configurado no arquivo WEB-INF/faces-config.xml (está disponibilizado no passo 6):
<managed-bean>
<managed-bean-name>mb</managed-bean-name>
<managed-bean-class>MBCadastrar</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Listagem 3: Declaração do Managed Bean no faces-config.xml
O elemento <managed-bean-name> define o nome que será usado nas expressões da página JSF para associar o conteúdo da página com o conteúdo dos managed beans.
O elemento <managed-bean-scope> define o escopo do managed bean. Nesse escopo, a instância é gerada durante a validade de uma sessão do usuário no container web.
Passo 5: Construir as páginas JSF
Essas páginas, devem ser criadas no diretório WebContent da sua aplicação.
<jsp:forward page="/home.jsf" />
Listagem 4: Código da página index.jsp
<%@ page language="java" contentType="text/html; charset=iso-8859-1" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SIGA - Sistema Integrado de Gestão Acadêmica
</head>
<body>
<f:view>
<h:form>
<h:commandLink action="listarCursos" value="Cadastrar Curso"/>
</h:form>
</f:view>
</body>
</html>
Listagem 5: Código da página home.jsp
Características de JSF
O elemento “taglib” configura as bibliotecas de tags JSF core, como prefixadas com “f” (ex: <f:view>) e JSF html, prefixadas com “h” (ex : <h:outputText>). As tags são familiares, pois geram códigos html e javascript que serão interpretados pelo browser.
A tag <f:view> é o nodo inicial e guarda todos os componentes.
A tag <h:form> é um formulário comum.
A tag <h:commandLink> é um componente de comando. O atributo “action” está configurado com uma string de resultado. Essa string deve estar associada a uma regra de navegação no arquivo WEB-INF/faces-config.xml (que também registra o managed bean, mencionado anteriormente). Essa regra é estabelecida pelos elementos <navigation-rule> e <navigation-case>. A string é mencionada no elemento <from-outcome> e a página de destino é mencionada através do <to-view-id>.
<navigation-rule>
<navigation-case>
<from-outcome>listarCursos</from-outcome>
<to-view-id>/cadcurso.jsp<to-view-id>
</navigation-case>
</navigation-rule>
Listagem 6: Configuração do fluxo de navegação no faces-config.xml
<%@ page language="java" contentType="text/html; charset=iso-8859-1" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SIGA - Sistema Integrado de Gestão Acadêmica</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGrid columns="5" cellpadding="5" align="center">
<h:outputText value="Codigo"/>
<h:inputText value="#{mb.curso.cod}"/>
<h:outputText value="Nome"/>
<h:inputText value="#{mb.curso.nome}"/>
<h:commandButton value="Cadastrar" action="#{mb.cadCurso}"/>
</h:panelGrid>
<h:outputText value="#{mb.resultado}" style="color:red; font-weight:bold"/>
<rich:dataTable var="c" id="listacursos" value="#{mb.cursos}" rows="10"
width="550px" align="center">
<h:column >
<f:facet name="header"><h:outputText value="Cod"/></f:facet>
<h:outputText value="#{c.cod}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Nome"/></f:facet>
<h:outputText value="#{c.nome}"/>
</h:column>
<h:column>
<f:facet name="header"><h:outputText value="Deletar"/></f:facet>
<h:commandLink action="#{mb.removerCurso}">
<f:param name="codcurso" value="#{c.cod}"/>
<h:graphicImage value="img/apagar.gif"
style="border:none"/>
</h:commandLink>
</h:column>
</rich:dataTable>
</h:form>
</f:view>
</body>
</html>
Listagem 7: cadcurso.jsp
Características de JSF
A tag <h:panelGrid> é usada apenas para formatação da página. É possível configurar o número de colunas. Os elementos aninhados são distribuídos da esquerda para a direita.
A tag <h:outputText> imprime na tela um valor.
A tag <h:inputText> está associada a uma propriedade do managed bean através da expressão definida por #{mb.curso.nome}. Essa expressão navega para os elementos da instância do managed bean associado ao nome MBCadastrar. Esse managed possui um atributo do tipo Curso. Esse possui também vários atributos. Essa tag pode ser configurada como required = true para indicar que o preenchimento é obrigatório.
A tag <h:commandButton>, assim como o commandLink, é também um componente de comando. Nesse exemplo, o “action” está associado a um método do managed bean que retorna uma string de resultado.
Características de AJAX
O elemento “taglib” configura as bibliotecas de tags richfaces como prefixadas com “rich” (ex: <rich:dataTable>).
O componente <rich:datatable> exibe um array ou uma coleção de objetos. É orientado por colunas, o cabeçalho de cada uma é configurado através da tag <f:facet> e a coleção é percorrida automaticamente pelo componente. No exemplo, a dataTable está vinculada ao managed bean pelo atributo “cursos”. É possível configurar sua identidade visual através de skins, que define o estilo da tabela. Essa configuração deve ser feita no arquivo WEB-INF/web.xml (está disponibilizado no passo 6):
<context-param>
<param-name>org.ajax4jsf.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
Listagem 8: Configuração do Skin no web.xml
A tag <f:facet> define o estilo do cabeçalho e do rodapé, através dos atributos “header” e “footer”, respectivamente.
A tag <f:param> define o parâmetro que poderá ser trabalhado no managed bean através do FacesContext, que já foi mencionado anteriormente.
Passo 6 : Contruir os arquivos de configuração
Esses arquivos devem ser criados no diretório WebContent/Web-INF da sua aplicação.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-
app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>SigaEPT-web</display-name>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<context-param>
<param-name>org.ajax4jsf.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<filter>
<display-name>Ajax4jsf Filter</display-name>
<filter-name>ajax4jsf</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
Listagem 9: Arquivo web.xml
Características de JSF
É necessário declarar dois componentes web : o StartupServletContextListener que ativa os componentes da implementação MyFaces e o FacesServlet que vai receber todas as requisições que serão processadas no ciclo de funcionamento do JSF.
Características de AJAX
É necessário declarar o componente do richfaces (org.ajax4jsf.Filter) que vai trabalhar na aplicação.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
<managed-bean>
<managed-bean-name>mb</managed-bean-name>
<managed-bean-class>MBCadastrar</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/cadcurso.jsp</from-view-id>
<navigation-case>
<from-outcome>sucesso</from-outcome>
<to-view-id>/cadcurso.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/home.jsp</from-view-id>
<navigation-case>
<to-view-id>/cadcurso.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<navigation-case>
<from-outcome>listarCursos</from-outcome>
<to-view-id>/cadcurso.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Listagem 10: Arquivo faces-config.xml
Passo 7: Deploy do projeto
Após ter criado o projeto, exporte para arquivo .war dentro do diretório jboss-4.0.5.GA/server\default\deploy do JBOSS.
Inicie o JBOSS e confira se o projeto foi “deployado” .
Passo 8: Navegando ....
Depois de “deployar” o projeto e iniciar o JBOSS, é só acessar http://localhost:8080/nome-da-aplicacao. A porta de acesso vai depender da sua configuração.
Divirta-se!!!! :P
Páginas visualizadas
Figura 1: Tela 1
Figura 2: Tela 2
Anexos
Baixe o Código fonte do tutorialComentários (7)
- Legal o tutorial. No remover não tem como saber o curso selecionado sem precisar acessar os parametros de request?
- postado por Eduardo em 12/12/2007 às 23:21
- Legal o tutorial. Alguem poderia me passar o exemplo funcionando? Porque deu umas bixeiras aqui. Vlw abraço.
- postado por Luis Felipe em 08/01/2008 às 23:21
- O tutorial foi muito bem explicado, mas poderia ter mais links no tutorial por exemplo: Download dos fontee e as apis usadas no exemplo. Abraços.
- postado por Walmir Rocha em 14/01/2008 às 23:21
- Luis! problema resolvido! mandei o codigo fonte por e-mail :P e obrigada pelo elogio!
- postado por Raquel do Carmo em 15/01/2008 às 23:21
- Oi Walmir! O Código fonte está sendo providenciado :P . Mas com relação ao link para as Apis usadas.. essa informação jah está no tutorial, no passo 1. Você precisa baixar o projeto RichFaces e, também, o JBOSS que já vem com algumas apis de JSF.
- postado por Raquel do Carmo em 15/01/2008 às 23:21
- Salve, Seguir todos os passos, não entendi as seguintes partes: "Características de JSF É necessário declarar dois componentes web : o StartupServletContextListener que ativa os componentes da implementação MyFaces e o FacesServlet que vai receber todas as requisições que serão processadas no ciclo de funcionamento do JSF. " e "Passo 7: Deploy do projeto Após ter criado o projeto, exporte para arquivo .war dentro do diretório jboss-4.0.5.GA/server\default\deploy do JBOSS. Inicie o JBOSS e confira se o projeto foi “deployado” . " Tenho o jBoos, descompactei e tal, usei as libs dele como foi informado no inicio, e quando fui testar dava: description The requested resource (/jeeBrasil/index.jsf) is not available. Mas em nenhum momento eu li falando para criar os arquivos .jsf ou algo do tipo. E no meu jBoss tem a pasta jboss-web.deployer mas não a jbossweb-tomcat55.sar. Sendo que a versão é a 4.2.2.GA. Valeu!
- postado por Silas Ribas em 25/03/2008 às 23:21
- Segui o tutorial e deu tudo certo ao final. Esqueci de colocar gets e não tinha funcionado então quem vai copiar e colar atente a este detalhe :D
- postado por Diego H. Souza em 28/05/2008 às 23:21