Olá!

Este é o segundo de dois tutoriais destinados a iniciantes na tecnologia Java para web.

Os tutoriais que compõe esta série estão a seguir:

• Iniciando em JSF e RichFaces – Instalação e Configuração do Ambiente (Parte I)
  
• Iniciando em JSF e RichFaces – Hello World (Parte II)

Este tutorial irá mostrar como criar o famoso “Hello World” em JSF e RichFaces. Partirei do ponto que você já tem o ambiente de desenvolvimento configurado corretamente, conforme o tutorial que precede este: Iniciando em JSF e RichFaces – Instalação e Configuração do Ambiente (Parte I).

Arquivos requeridos para este tutorial:

• jsf-impl.jar (baixe aqui)
  
• jsf-api.jar (baixa aqui)

Com o Eclipse aberto, mude a perspectiva de trabalho para Web Development (caso não esteja).


Crie um novo projeto JSF em “File>New>JSF Project”.


Coloque o nome do projeto e certifique-se que JSF Enviroment esteja em “JSF 1.2” e Template em “JSFBlankWithoutLibs” (vide imagem abaixo). Clique em Next.


Na tela seguinte, certifique-se que Servlet Version esteja em “2.5” e Runtime em “Apache Tomcat v6.0” (conforme configuramos no tutorial anterior). Finalize clicando em “Finish”.


Faça download das libs jsf-impl.jar e jsf-api.jar (link de download no início do tutorial), que estão em formato ZIP, e extraia em um diretório de sua preferência.

Vamos adicionar agora as libs da JSF ao nosso projeto. Essas libs devem ficar dentro de “WebContent>WEB-INF>lib”.

Clique com o botão direito do mouse no diretório “lib” e selecione “Import”.


Selecione “File System” em “General” e clique em “Next”.


Localize o diretório em que extraiu as libs através do botão “Browse…”, em seguida, selecione os dois arquivos e clique em “Finish”.


Agora que nosso projeto foi criado e configurado, começaremos a trabalhar nas páginas web. Clique com o botão direito do mouse sobre o diretório “Webcontent” no workspace do nosso projeto e adicione uma página JSP.


Coloque o nome da página como “index” e defina o template como “JSFBasePage”. Clique em “Next”.


Na tela seguinte, deixe selecionado apenas as libraries “JSF Core” e “JSF HTML”. Finalize clicando em “Finish”.


Nosso projeto agora contém uma página JSP que iremos aplicar RichFaces, no entanto, para que o RichFaces funcione corretamente, precisaremos adicionar as libs dele ao nosso projeto.

Clique com o botão direito do mouse sobre o nome do projeto, vá em “Configure” e selecione “Add Custom Capabilities”.


Na tela que aparece, selecione “JBoss RichFaces 3.3” e clique em “Finish”.


Após este passo, mais três jars foram adicionados ao nosso projeto. Esses jars são: richfaces-api-3.3.2.SR1.jar, richfaces-impl-3.3.2.SR1.jar, richfaces-ui-3.3.2.SR1.jar.

Criaremos agora nossa classe bean java. Esta classe armazenará um valor que poderá ser recuperado mais tarde.

Clique com o botão direito do mouse sobre “JavaSource” e adicione um pacote.


Dê um nome para o pacote e clique em “Finish”.


Clique com o botão direito do mouse sobre o nome do pacote criado, e adicione uma nova classe.


Dê um nome para a classe e clique em “Finish”.


Sua classe deverá conter este código:

package com.foldercode;

import javax.annotation.PostConstruct; 

public class BaseBean {       

   //Declara uma variável privada do tipo String    
   private String value;     
   //init() funcionará como o construtor da nossa classe     
   //@PostConstruct garante que o método abaixo será chamada uma única vez   
   @PostConstruct
   public void init()
   {
      this.value = "";
   }
   //Método de retorno do valor da String
   public String getValue()
   {
      return this.value;
   }
   //Método que colocará um valor na String
   public void setValue(String value)
   {
      this.value = value;
   }
}

Em seguida, clique no arquivo faces-config.xml, mude a forma de visualização para “tree”, clique em “Managed Beans” e depois no botão “Add” (clique na imagem para ampliar).


Na tela que se abre, clique em “Browse…” para localizarmos nossa classe.


Digite o nome da sua classe até que ela seja listada na área de baixo. Selecione sua classe e clique em “OK” e “Next >>” na próxima tela.


Selecione a propriedade da classe que criamos e finalize clicando em “Finish”.


Criaremos agora nossa tela do Hello World.

Com a página index.jsp aberta e no modo de visualização “source”, adicione um componente “form” da aba “JSF HTML” dentro do código da página index.jsp. Adicione dentro das tags “<f:view></f:view>”. A imagem abaixo mostra como seu código deve ficar (clique na imagem para ampliar).


Em seguida, arraste um componente “panel” da aba “JBoss RichFaces” dentro das tags “<h:form></h:form>”.


Agora, arraste um componente “inputText” da aba “JSF HTML” dentro das tags “<rich:panel></rich:panel>”.

Na tela “Insert Tag” role a barra de rolagem até o final e clique no botão “…” da propriedade “value”. Expanda “Managed Beans”, localize sua classe e selecione a propriedade “value” (a variável que criamos na classe anteriormente). Finalize clicando em “OK” e “Finish”.


Adicione abaixo da tag “<h:inputText value="#{baseBean.value}"/>” um “outputText” da aba “JSF HTML”.


Na tela “Insert Tag” digite o nome do “id” e selecione a nossa classe com a propriedade no campo “value” (conforme aprendemos a pouco). Clique em “Finish”.


Por fim, adicione abaixo da tag “<h:inputText value="#{baseBean.value}"/>” um “Command Button” da aba “JBoss Ajax4Jsf”.


Na tela “Insert Tag”, digite em “value” o texto que aparecerá no botão. No campo “reRender”, clique sobre o botão “…” e localize o ID do outputText que criamos anteriormente. Clique em “OK” e “Finish”.


Nosso código deverá ter ficado dessa forma (clique para ampliar):


Pronto! Agora é só compilar e executar! Salve tudo. Clique com o botão direito do mouse sobre o arquivo “index.jsp” e selecione “Run on Server”.


Como é a primeira vez que rodamos o projeto, precisaremos selecionar o servidor. Localize o “Apache Tomcat v6.0” e clique em “Next >”.


Na tela seguinte, verifique se o projeto está na caixa da direita, caso não esteja, envie-o para lá. Por fim, clique em “Finish”.


O tomcat começará a executar e você já poderá ver o resultado na aba do próprio Eclipse. Caso queira visualizar no navegador, basta copiar o endereço que está na barra de navegação do Eclipse e colar no navegador.

É isso ai galera, parece muita coisa mas na verdade eu que detalhei bastante.

Com isso já é possível compreender como desenvolver algo nessa tecnologia.

Segue o link de download do projeto concluído realizado neste tutorial: Hello World.

Comentários sempre são bem-vindos.