Iniciando com JSF no Red Hat Developer Studio

    Olá pessoal. Estes dias, navegando pela internet atrás de uma boa IDE para se trabalhar com JSF, me deparo com alguns comentários, a respeito do RHDS (antigo Exadel). Baseado no Eclipse, e apesar de ser uma ferramenta paga, eles haviam disponibilizado os seus betas e RCs livremente, para à comunidade testar. Minha sorte, é que o RC1 está muito bom, e por enquanto, ainda não achei problemas grotescos, que podem vir a ameaçar a integridade do sistema. Então, para quem não tem condições de pagar pela IDE, aqui está uma versão livre dela, é só clicar, baixar e instalar: ftp://ftp.redhat.com/pub/redhat/rhdevstudio/beta/r…hdevstudio-win32-1.0.0.CR1.jar

 

O intuito deste post, é apresentar para quem está com dificuldade em sair do modo baixo nível (edições de xml´s à mão) e demonstrar a grande facilidade que a IDE oferece para a maioria dos casos mais “chatos de se configurar”. Iremos construir uma pequena aplicação em JSF dentro do famoso contexto: “Olá mundo”. Por enquanto é apenas isso. Mais para frente, vejo a possibilidade de brincar com o Struts, Ájax, Hibernate, Spring, etc.

 

- Antes de continuarmos, baixe e instale o servidor de aplicações JBoss: http://www.jboss.org

 

Vamos ao que provavelmente trouxe você até aqui (desligue o som do PC, TV, tire o irmão do quarto e diga à namorada que precisa urgente ir ao mercado com sua mãe):

 

1 – Criando um projeto JSF no RHDS:

 

Menu File -> New -> JSF Project (Caso o JSF Project não esteja a vista, siga: Menu File -> New -> Other -> JBoss Tools Web -> JSF -> JSF Project)

 

Em project name, digite: OlaJSF

Em JSF Environment, escolha: JSF 1.2

Clique em Finish.

 

2 – Configurando o faces-config.xml

 

Expanda à arvore do projeto: OlaJSF/WebContent/WEB-INF e dê um duplo-clique sobre o arquivo faces-config.xml abrindo-o no editor default: JBoss Tools XML Editor (Caso não abra neste, siga: Botão direito em cima do arquivo, Open with… e o selecione.)

 

Agora você deve estar de frente com o editor. Como pode ver, é como um pequeno mapa. Nele iremos configurar nossos rules e cases.

 

Vamos adicionar então, duas páginas no nosso mapa, seguindo o procedimento:

Botão direito em cima de qualquer parte da área -> New View. No campo: From-View-Id, digite: pages/inputname, o resto deixe como está e clique em: Finish.

 

(Como você pode ter notado, ele, além de adicionar o ícone da página ao mapa, já a criou fisicamente também, bem como sua pasta (pages), ficando no seguinte diretório em sua árvore do projeto: OlaJSF/WebContent/pages/inputname.jsp)

 

Efetue o mesmo procedimento para criar a página: pages/showname

Se você fez tudo certo até aqui, terá então, dois ícones no seu diagrama representando nossas respectivas páginas.

 

3 – Criando as transições

 

Uma transição consiste em uma conexão entre as páginas.

 

Para criarmos nossas transições, devemos estar com o faces-config.xml aberto em modo diagrama. (Neste momento, salve seu projeto, para se prevenir de fatalidades como queda de energia).

 

Ao lado direito do diagrama, você pode observar uma pequena flechinha preta em degrau, coloque o mouse sobre ela, e aparecerá o seguinte tooltip: “Create New Connection”. Clique nela, e depois atribua seu ponto inicial clicando sobre o ícone que representa a página “inputname” em nosso diagrama, arrastando sua conexão até o ícone que representa a página: “showname”, clique, e verá a conexão ser renderizada pelo nosso diagrama. (Ctrl+s para salvar)

 

4 – Adicionando os managed beans

 

Nossos managed beans, são os modelos que participam da nossa página. Iremos criar um.

Em nosso mesmo ambiente (diagrama do faces-config.xml) podemos observar no rodapé, três abas, sendo que a primeira é a do diagrama em si (Diagram), e a segunda: Tree, e é nesta que devemos ir agora. Clique lá.

 

Note que o cenário mudou.

 

Ao lado esquerdo agora temos uma árvore de configurações. Clique em: Managed Beans, ao miolo da tela, abrirá o modo edição do mesmo.

 

Clique no botão: “Add…”, irá abrir a tela para adicionarmos nosso managed bean. Siga a seguinte configuração em ordem:

Scope: request

Class: olajsf.PersonBean

Name: personBean

 

Caso não esteja marcado, marque o checkbox: Generate Source Code. Clique em Finish.

 

Como pode observar, nosso cenário agora consta: Metade sobre nosso bean recém criado, e outra metade chamada: Properties, e é lá que devemos trabalhar agora. Clique sobre o botão “Add…” e siga a seguinte configuração em ordem:

Property-Name: name

 

O resto você pode deixar tudo como está. O valor default de uma propriedade é: String.

 

Pronto. Salve tudo novamente.

 

Para quem se perdeu, ou está em dúvida se esta fazendo certo o processo, agora vai o código do faces-config.xml:

<?xml version=“1.0″ encoding=“UTF-8″?>

<faces-config version=“1.2″ xmlns=“http://java.sun.com/xml/ns/javaee”

 xmlns:xi=“http://www.w3.org/2001/XInclude”

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

 <managed-bean>

  <managed-bean-name>personBean</managed-bean-name>

  <managed-bean-class>olajsf.PersonBean</managed-bean-class>

  <managed-bean-scope>request</managed-bean-scope>

  <managed-property>

   <property-name>name</property-name>

   <value/>

  </managed-property>

 </managed-bean>

 <navigation-rule>

  <from-view-id>/pages/inputname.jsp</from-view-id>

  <navigation-case>

   <from-outcome>showname</from-outcome>

   <to-view-id>/pages/showname.jsp</to-view-id>

  </navigation-case>

 </navigation-rule>

</faces-config>

 

Caso o seu esteja diferente disso, conserte as diferenças editando seu faces-config.xml em modo: Faces Config Editor.

 

Você deve estar se perguntando: Poxa! Tudo isso até agora, para fazer pouco mais de 20 linhas de configuração? – Sim! Notará a diferença quando for fazer uma aplicação realmente complexa.

 

5 – Editando nossas páginas JSP

 

Agora vamos editar nossa página JSP, começaremos pela: pages/inputname.jsp que está dentro da pasta: pages. Dê um duplo-clique sobre ela para abrir no editor padrão: JBoss Tools JSP Editor. Você verá um miolo dividido em dois: em cima o código e em baixo a parte de visualização, para os puristas: WYSIWYG. Para melhor trabalharmos, vamos esquecer a parte de código por enquanto, e se focar na visualização. Note que no rodapé deste painel, há as seguintes abas: Visual/Source / Visual / Source / Preview – Clique sobre a Visual, para focarmos somente nesta parte.

 

Caso a paleta de ferramentas não esteja expandida (ao canto esquerdo), o faça clicando sobre o ícone em forma de paleta de tinta, a esquerda superior do editor. Expanda a pasta: JSF HTML para visualizar os componentes que iremos trabalhar.

 

Clique sobre o componente: Form e o arraste até a parte pontilhada da nossa visualização. – Neste momento irá se abrir a tela de propriedades do Form, no atributo: ID, digite: showname e clique em finish.

 

Arraste para dentro dos pontilhados do form criado, o componente: outputLabel, abrirá sua tela de atributos, e para a propriedade Value, digite: “Entre com seu nome: ”

 

Arraste para dentro dos pontilhados do form, o componente: inputText, abrirá sua tela de atributos, e na propriedade Value com o foco sobre ela, aparecerá no fim do seu campo, o botão “…”, clique nele, e abrirá uma tela de seleção de atributos. Escolha o atributo “name”, do nosso managed bean: personBean, expandindo a seguinte raiz: Managed Beans / personBean / name, o valor do campo Value, ficará assim: #{personBean.name} – Na tela de atributos ainda, atribua o valor: name, para o campo: Id da sub-aba Advanced.

 

Precisamos colocar agora um botão, para processar tudo isso. Arraste o seguinte componente (Ainda da pasta JSF HTML) para o lado do inputText: commandButton. Na tela de atributos, foque no atributo Action, clique no botão “…”, e selecione: View Actions / showname, clique em OK. No campo value, digite: “show!” (que nada mais é do que o label que representa o texto do botão). Close. Salve tudo.

 

Para quem se perdeu, ou está em dúvida se esta fazendo certo o processo, agora vai o código do inputname.jsp:

 

<%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %>

<%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %>

 

<html>

      <head>

            <title></title>

      </head>

      <body>

            <f:view>

                 

            <h:form id=“showname”><h:outputLabel value=“Entre com seu nome:”>

                 

            </h:outputLabel><h:inputText value=“#{personBean.name}” id=“name”/><h:commandButton action=“showname” value=“show!”/>

           

           

            </h:form>

            </f:view>

      </body>    

</html> 

 

Vamos configurar agora a outra página: pages/showname.jsp, como de costume, abra ela no mesmo editor que a anterior, dando um duplo-clique sobre a mesma, e abra em modo Visual.

 

Traga até a o corpo da página um outputText da pasta JSF HTML que se encontra na paleta, e na tela de atributos, configure seu atributo Value para: “Olá :”

 

Arraste outro outputText para depois do anterior, e na tela de atributos, foque o campo Value, e clique sobre o botão que irá aparecer: “…”, selecionando o nosso campo: Managed Beans/personBean/name, ficando: #{personBean.name} – OK e Close. Salve tudo.

 

Para quem se perdeu, ou está em dúvida se esta fazendo certo o processo, agora vai o código do showname.jsp:

 

 

 

<%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %>

<%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %>

 

<html>

      <head>

            <title></title>

      </head>

      <body>

            <f:view>

                 

            <h:outputText value=“Olá :”/><h:outputText value=“#{personBean.name}”/>

           

            </f:view>

      </body>    

</html> 

 

 

Por fim, devemos criar a página de apresentação, que irá redirecionar para a página inputname. Clique com o botão direito em cima da pasta: WebContent -> New -> JSP File – Na tela que abrirá, siga a configuração:

Name: index

Template (Selecione): JSPRedirect

 

O resto deixe como está – Finish.

 

Edite o conteúdo do forward, para efetuar o redirecionamento, passando a página como valor, ficando assim: <jsp:forward page=”/pages/inputname.jsf” />

 

OPA! Mas a minha página inputname, é com final .jsp! – Sim, mas conforme é configurado no arquivo web.xml, o nosso mapeamento esta definido para extensões jsf!

 

Salve tudo.

 

Para quem se perdeu, ou está em dúvida se esta fazendo certo o processo, agora vai o código do index.jsp:

 

<!doctype html public “-//w3c//dtd html 4.0 transitional//en”>

<html>

<head></head>

      <body>

            <jsp:forward page=“/pages/inputname.jsf” />

      </body>

</html>

 

6 – Testando nossa aplicação:

 

1º – Inicie o servidor do JBoss, clicando no botão que parece um “play” verde, no toolbar da IDE.

2º – Clique com o botão direito sobre o projeto -> Run As… -> Run on Server – Na tela que aparecer, selecione o JBoss, e clique em Finish.

 

Caso você tenha feito tudo certo, basta você digitar seu nome e clicar no botão “show”, para ver a aplicação funcionar e lhe mostrar um simples: “Olá: Fulano”.

 

Bom, por hoje é só. Espero que tenham gostado da IDE (ou para quem apenas acompanhou os códigos) e do Jsf!

 

Até a próxima!