Introdução JSF

Posted 02/05/2008
Filed under: JSF | Tags: , |

Exemplo introdutorio de Java Server Faces

Iniciarei baixando as lib necessárias para que um aplicaçao JEE tenha suporte ao framework Java Server Faces.
Baixar aqui: https://javaserverfaces.dev.java.net/download.html

Apos o download copie os .jar para dentro da pasta /WEB-INF/lib de sua aplicação.
Algumas configurações são necessárias antes de começarmos a desenvolver, vamos editar o arquivo /WEB-INF/web.xml adicionando as seguintes tags:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
<?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>aplicacaoJSF</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<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>
</web-app>

É necessário a criação do Servlet Faces Servlet, apontando para o servlet class javax.faces.webapp.FacesServlet, load-on-startup que define a quantidade de Servlets que serão inicializados quando a aplicação for iniciada pelo container. Criar o Servlet-Mapping é necessário para que o Servlet Faces possa fazer a tradução das paginas chamadas pelo browser, usamos *.jsf.

A tradução é feita da seguinte forma, o browser solicitará a /web/index.jsp atraves do link http://aplicacao:8080/index.jsf, o container traduzirá a chamada e carregará a página /web/index.jsp para o requisitante(browser). Magicamente!

Bem, agora que sabemos como o container trata as solicitações, vamos passar para a criação de nosso POJO, que servirá de apoio para nossa aplicação.

package com.wordpress.yross;

public class Pessoa {
private int id;
private String nome;
private String email;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getNome() {
return nome;
}

public void setNome(String nome) {
this.nome = nome;
}

public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}

}

Dentro do Contexto JSF os POJO’s são chamados de Back Bean, os back beans são responsáveis por manter o estado dos atributos referenciados por uma pagina jsp. A nossa pagina ficará da seguinte forma:

1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<head>
<title>Aplcicação JSF</title>
</head>
<body>

<f:view>
<h:form>
<h:outputText value="Nome" />
<h:inputText />
<br>
<h:outputText value="Email" />
<h:inputText />
<br>
<h:commandButton value="acao" />
<hr />
<h:outputText value="Nome" />
<h:outputText />
<br>
<h:outputText value="Email" />
<h:outputText />
</h:form>
</f:view>
</body>
</html>

 Demonstrarei agora o arquivo faces-config.xml, este arquivo é responsável por criar o vinculo de nosso Back Bean com a nossa pagina JSP. Gostaria de ressaltar que ainda vamos fazer algumas modificações em nossa página JSP, mas por enquanto vamos ao faces-config.xml.
<?xml version=”1.0″ encoding=”UTF-8″?>

1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">

<!-- Managed Bean -->
<managed-bean>
<managed-bean-name>pessoaBean</managed-bean-name>
<managed-bean-class>Pessoa</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

<!-- Navigation Ruller's -->
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>acionado</from-outcome>
<to-view-id>/index.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

Muita atenção nas tags <managed-bean> e <navigation-rule>, são importantes, a primeira é responsável por criar um Bean de Sessão do tipo Pessoa, a segunda é responsável por manter uma regra de navegação.

Explicando com mais calma temos:

Managed-Bean: Quando o usuário acessa a aplicação é criado um Bean do tipo pessoa dentro do contexto de sessão para aquele usuário, as informações (atributos) do bean não serão compartilhadas com outros usuários que acessam a aplicação no mesmo instante. A tag <managed-bean-name> cria uma referencia que poderá ser acessada de dentro das paginas JSP e ate mesmo de dentro do arquivo faces-confi.xml.

Navigation-rule: Esta tag é muito utilizada dentro de uma aplicação, dependendo da necessidade pode haver dezenas. Matem uma regra de navegação especifica, neste caso estamos dizendo que qualquer ação que retorne um <from-outcome>acionado</from-outcome> deverá carregar a página /índex.jsp.
Vamos entender melhor a forma como estes <from-outcome> são retornados de dentro de um back bean no próximo passo, onde modificaremos o nosso JSP, criando o vinculo com o back Bean Pessoa.

apenas um comentário

  1. Rafael Ponte on 09/06/2008

    Gostei do post, para quem está começando será de grande ajuda! Contudo só está meio confuso de ler, pois o código está muito misturado ao texto, logo te aconselho a instalar algum plugin para highlight e identação de código para wordpress, existem vários.

    Enfim, parabéns pelo seu 1o post e continue contribuindo com informações sobre JSF, ultimamente ainda é escasso o número de blogs nacionais sobre a tecnologia.

    Abraços e boa sorte.

    Responder

Leave a reply