JavaServer Faces (JSF) - Como e porque utilizar

Triplo X · 25 de February , 2009, 08:50:55 AM

Não confundam JavaServer Faces com JavaServer Pages.

Neste tópico pretendo abordar a importância de se utilizar Frameworks para suas aplicações JAVA/WEB.
Bom, nem todas as aplicações necessitam diretamente de seu uso. Uma aplicação que apenas apresente uma lista de banco de dados pode muito bem ser programada com um bloco de código, mas por outro lado, perguntemo-nos qual aplicação hoje em dia fica apenas nisso...

Por que utilizar JSF
Bom, na minha opinião, é o framework mais fácil de trabalhar. Ele pode interagir muito bem com outros frameworks como o MyFaces, Spring, RithFaces, etc.

Para aqueles que desconhecem do assunto, framworks são componentes visuais prontos. No nosso caso, são classes JAVA.

A utilização de um Framework vai além de cadastro de alunos ou criação de cookies.
Um exemplo disso é a submissão de um formulário. O internauta que obtiver o código html de sua página que utilizou JSF, notará que esta não possui um action, logo ele não sabe para qual página o form será submetido.

JavaServer Faces trabalha principalmente com método POST, mas as vezes é necessário utilizar GET.

JSF, dentre outros frameworks modificam as extensões das páginas.
Eu por exemplo, em minhas aplicações procuro utilizar o nome de meu site como extensão.
Falando nisso visitem: www.koderzone.com e http://www.koderzone.com/treinamento/
Lá tem mais sobre este assunto e mostra também aplicações prontas feitas em JSP e Servlets e futuramente em JSF.

Podemos também economizar código com o uso de arquivos properties (são os mesmos arquivos que softwares utilizam para salvar configurações como cor modificada de tal componente).

No mais visitem: Dúvida JSF - extensões das páginas JSP | JSF - Dúvida em Properties

Criando a primeira aplicação utilizando JSF

É bem simples! Faça como se fosse criar uma aplicação JSP, afinal JSF é apenas um framework implementado em páginas JSP, mesmo que sua aplicação fique com extensão ".jsf", por exemplo.

Diretórios requeridos para a aplicação:
No apache tomcat, mais precisamente em \webapps, cria-se um diretório com o nome de jsf12

Cria-se os diretórios classes e lib em \webapps\jsf12\WEB-INF

Cria-se o web.xml em \webapps\jsf12\WEB-INF:
web.xml

Code Select

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">


<web-app>

<!-- Faces Servlet -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>

<!-- Faces Servlet Mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

</web-app>

Observe o mapeamento, em <url-pattern> é definida a extensão das páginas.

Cria-se o faces-config.xml em \webapps\jsf12\WEB-INF:
faces-config.xml

Code Select

<?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>

</faces-config>

Neste arquivo é declarada toda a navegação de páginas por exemplo.

Copie para o diretório lib as chamadas JSF 1.2 library sf-api.jar e jsf-impl.jar.
E também as JSTL library: standard.jar e jstl.jar

Bom, chega de configuração!
Criando as páginas JSP:
index.jsp

Code Select

<jsp:forward page="hello.jsf"/>
As vezes gera um erro quando executado, então substitua a tag jsp:forward por response.sendRedirect.

hello.jsp

Code Select

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<body>
<f:view>
<h:outputText value="Hello, Welcome to JSF 1.2 World!"/>
</f:view>
</body>
</html>

Esta tag <h:outputText value="Hello, Welcome to JSF 1.2 World!"/> simplesmente imprime a mensagem que está em value na tela.

Pronto.

Execute sua aplicação.

##########################################

Bom, a primeira vista não tem nada demais nisso não é?!

Então vamos para um exemplo de aplicação de verdade!

Além dos imports acima para o diretório WEB-INF/lib, importe a lib libext/servlet-api.jar para \webapps\WEB-INF[/b].

Vamos criar um simples exemplo de submissão de formulário, onde o usuário preencherá com seu nome.

inputname.jsp

Code Select

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="files.koderzone.messages" var="msg"/>

<html>
<head>
<title>Input Form</title>
</head>
<body>
<f:view>
<h1>
<h:outputText value="#{msg.header}" />
</h1>
<h:form id="UserEntryForm">
<h:outputText value="#{msg.your_name}" />
<h:inputText value="#{UserBean.userName}" />
<h:commandButton action="welcome" value="#{msg.button_text_ok}" />
</h:form>
</f:view>
</body>
</html>

welcome.jsp

Code Select

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="files.koderzone.messages" var="msg"/>
<html>
<head>
<title>Welcome</title>
</head> 
<body>
<f:view>
<h3>
<h:outputText value="#{msg.welcome}" />,
<h:outputText value="#{UserBean.userName}" />  <h:outputText value="#{msg.jsf_world}" />
</h3>
</f:view>
</body> 
</html>

UserNameBean.java

Code Select

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package files.koderzone;

/**
 *
 * @author koderzone
 */
public class UserNameBean {
    String userName;
	
   /**
   * @return User Name
   */
   public String getUserName() {
      return userName;
   }

   /**
   * @param User Name
   */
   public void setUserName(String name) {
      userName = name;
   }
}

messages.properties

Code Select

title=Enter your name page
welcome=Welcome
header=JSF 1.2 Tutorials
your_name=Enter Your Name:
button_text_ok=OK
Welcome=Welcome
jsf_world= to JSF 1.2 World!

* Traduza se quiser.

* IMPORTANTE: Não se esqueça de configurar o managed-bean no faces-config, do contrário gerará uma excessão assim:

Quotejavax.servlet.ServletException: /exemplos/properties/inputname.jsp(16,0) '#{UserBean.userName}' Target Unreachable, identifier 'UserBean' resolved to null
javax.faces.webapp.FacesServlet.service(FacesServlet.java:256)
org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:390)

Ontém quando eu ainda estava criando esta minha primeira aplicação "tropecei nesta tecla várias vezes".

Agora modifique seu faces-config da aplicação anterior e adicione as linhas a seguir:

Code Select

<managed-bean>
   <managed-bean-name>UserBean</managed-bean-name>
   <managed-bean-class>files.koderzone.UserNameBean</managed-bean-class>
   <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

* Onde: files.koderzone são os pacotes da classe UserNameBean.

Adicione também a navegação das páginas:

Code Select

<navigation-rule>
   <from-view-id>/inputname.jsp</from-view-id>
       <navigation-case>
          <from-outcome>welcome</from-outcome>
          <to-view-id>/welcome.jsp</to-view-id>
       </navigation-case>
</navigation-rule>

Visualização:

* Notaram que a url não muda?
Vejam o código-fonte html pelo browser depois.
Reparem na diferença para um formulário com apenas JSP e html ^^

Library (Arquivos jars utilizados neste tópico):
http://www.box.net/shared/shy5xxgzmu

Até a próxima...

Reeves · 25 de February , 2009, 10:31:17 AM

Otimo Triplo X!

Parabens e grato pela sua colaboração!
continue assim!
vlww
:D

Triplo X · 01 de March , 2009, 05:37:11 AM

Obrigado!

A medida em que for aprendendo, vou postando aqui.

Precisamos de mais desenvolvedores Java WEB aqui no fórum. =/

[]s

Stuburn · 05 de March , 2009, 05:17:58 PM

Nossa, muito bom Triplo X
ja me ajudo bastante.
vlw pela colaboração 8)

FORUM DARKERS

JavaServer Faces (JSF) - Como e porque utilizar

Triplo X

Reeves

Triplo X

Stuburn