Parte 2 - Iniciando no JBoss Seam

Este blog deixou de ser mantido, mas o autor continua escrevendo aqui. Não deixe de assinar o novo feed!

Dando continuidade à primeira parte do tutorial, vamos agora montar uma aplicação JSF bem simples com duas páginas JSP e um Managed Bean, que simulam um cadastro. Até mesmo quem nunca viu JSF na vida pode acompanhar este tutorial!

Adicionando o suporte a JSF

Depois de criado o projeto, nós devemos adicionar o framework JSF ao nosso módulo Web. Para isso, clique com o botão direito sobre o projeto Registration-war e vá em Properties. Selecione a opção Frameworks e adicione o framework JavaServer Faces através do botão Add…. Configure o JSF de acordo com a imagem abaixo:

seam_05.png

Criando o Managed Bean

Dê OK nas janelas para confirmar as modificações. Vamos prosseguir com o desenvolvimento criando um Managed Bean. Clique com o botão direito no projeto Registration-war e selecione a opção JSF Managed Bean:

seam_08.png

O NetBeans abrirá o seu arquivo faces-config.xml. Modifique o nome do bean User para user:

  1.  
  2. <?xml version="1.0" encoding="UTF-8" ?>
  3.  
  4. <faces-config>
  5.    <managed-bean>
  6.       <managed-bean-name>user</managed-bean-name>
  7.       <managed-bean-class>mbean.User</managed-bean-class>
  8.       <managed-bean-scope>request</managed-bean-scope>
  9.    </managed-bean>
  10. </faces-config>
  11.  

Edite o arquivo User.java de acordo com a listagem:

  1.  
  2. package mbean;
  3.  
  4. public class User {
  5.  
  6.    private String username;
  7.    private String password;
  8.    private String name;
  9.  
  10.    public String getUsername() {
  11.       return username;
  12.    }
  13.  
  14.    public void setUsername(String username) {
  15.       this.username = username;
  16.    }
  17.  
  18.    public String getPassword() {
  19.       return password;
  20.    }
  21.  
  22.    public void setPassword(String password) {
  23.       this.password = password;
  24.    }
  25.  
  26.    public String getName() {
  27.       return name;
  28.    }
  29.  
  30.    public void setName(String name) {
  31.       this.name = name;
  32.    }
  33.  
  34.    public String register() {
  35.       return "registered";
  36.    }
  37. }
  38.  

Criando as views

Vamos agora editar o arquivo welcomeJSF.jsp, com o seguinte conteúdo:

  1.  
  2. <%@page contentType="text/html" %>
  3. <%@page pageEncoding="UTF-8" %>
  4.  
  5. <%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
  6. <%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
  7.  
  8. <f:view>
  9. <f:loadBundle basename="bundle.messages" var="msg" />
  10. <html>
  11.    <head>
  12.       <title><h:outputText value="#{msg.register_title}" /></title>
  13.    </head>
  14.    <body>
  15.       <h:form>
  16.          <h1><h:outputText value="#{msg.register_message}" /></h1>
  17.          <h:panelGrid columns="2">
  18.             <h:outputLabel for="username" value="#{msg.register_label_username}" />
  19.             <h:inputText id="username" value="#{user.username}" required="true" />
  20.  
  21.             <h:outputLabel for="password" value="#{msg.register_label_password}" />
  22.             <h:inputSecret id="password" value="#{user.password}" required="true" />
  23.  
  24.             <h:outputLabel for="name" value="#{msg.register_label_name}" />
  25.             <h:inputText id="name" value="#{user.name}" />
  26.  
  27.             <h:commandButton id="submit" value="#{msg.register_label_submit}" action="#{user.register}" />
  28.          </h:panelGrid>
  29.       </h:form>
  30.    </body>
  31. </html>
  32. </f:view>
  33.  

Agora, crie uma nova página JSP chamada registered.jsp, no mesmo local onde as outras páginas JSP estão localizadas. Codifique o JSP de acordo com a imagem:

  1.  
  2. <%@page contentType="text/html" %>
  3. <%@page pageEncoding="UTF-8" %>
  4.  
  5. <%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
  6. <%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
  7.  
  8. <f:view>
  9. <f:loadBundle basename="bundle.messages" var="msg" />
  10. <html>
  11.    <head>
  12.       <title><h:outputText value="#{msg.registered_title}" /></title>
  13.    </head>
  14.    <body>
  15.       <h1><h:outputText value="#{msg.registered_title}" /></h1>
  16.       <h4>
  17.          <h:outputText value="#{msg.registered_message}" />
  18.          <h:outputText value="#{user.name}" />!
  19.       </h4>
  20.    </body>
  21. </html>
  22. </f:view>
  23.  

Internacionalização e navegação

Para concluir a aplicação faltam duas coisas: criar o arquivo messages.properties, no pacote bundle, e criar as regras de navegação no arquivo faces-config.xml.

Vamos criar o properties. Lembre-se que estamos trabalhando no módulo Web ainda, então, tanto os arquivos que foram mostrados anteriormente, quanto os arquivos que restam, estão sendo criados neste projeto! Veja agora os properties:

  1.  
  2. register_title=Registration
  3. register_message=Registration app
  4. register_label_username=User name\:
  5. register_label_password=Password\:
  6. register_label_name=Name\:
  7. register_label_submit=Register now
  8. registered_title=Thank you\!
  9. registered_message=Welcome,
  10.  

Finalizando a aplicação, vamos criar as regras de navegação:

  1.  
  2. <?xml version=‘1.0′ encoding=‘UTF-8′ ?>
  3.  
  4. <faces-config>
  5.    <application>
  6.       <locale-config>
  7.          <default-locale>en</default-locale>
  8.       </locale-config>
  9.    </application>
  10.  
  11.    <navigation-rule>
  12.       <from-view-id>/welcomeJSF.jsp</from-view-id>
  13.       <navigation-case>
  14.          <from-outcome>registered</from-outcome>
  15.          <to-view-id>/registered.jsp</to-view-id>
  16.       </navigation-case>
  17.    </navigation-rule>
  18.  
  19.    <managed-bean>
  20.       <managed-bean-name>user</managed-bean-name>
  21.       <managed-bean-class>mbean.User</managed-bean-class>
  22.       <managed-bean-scope>request</managed-bean-scope>
  23.    </managed-bean>
  24. </faces-config>
  25.  

É isso!

É isso aí! Terminamos a aplicação! Basta apertar F6 para rodar e conferir se está tudo funcionando conforme o esperado! :D

Espero que tudo tenha ocorrido como deveria aí com você… qualquer dúvida, problema, críticas/sugestões, crie um comentário neste post.

UPDATE: Não deixe de conferir as partes um e três do tutorial!

Tags: , , , , , ,
3 de novembro de 2006 | programação