Este segundo artigo da série incidirá sobre o processo de instalação e configuração do ambiente de desenvolvimento JSF, o que implica::

• Instalação do JDK: o SDK do Java
• Instalação do IDE: o NetBeans com plugins Java EE
• Instalação e registo de um servidor aplicacional para Java: o Tomcat

De seguida, criar-se-á um projeto JSF que comprovará o sucesso da operação assim como ajudará a explicar os primeiros conceitos. Passemos à prática:

1. (Se já tem o NetBeans e o JDK no sistema então salte para o passo 4.)
   Se ainda não tem nada instalado, pode obter um “2 em 1” (JDK+IDE) no site de downloads da Oracle. Aqui, procure pelo link da versão do JDK com o NetBeans; no ecrã posterior, realize o download para o seu S.O./arquitetura.
   Se, por outro lado, já tem o JDK no sistema, então deve ir diretamente ao site de downloads do NetBeans. Aqui, deve transferir a versão do NetBeans Java EE.
2. Instale a versão que tiver transferido.
3. Abra o NetBeans
   Nota: no caso de ter instalado a versão IDE+SDK, há um passo adicional: deve ir a Tools > Plugins > Available Plugins, selecionar os da categoria Java Web and EE e instalá-los (em Install). De seguida, deve reiniciar o IDE.
   
4. (Se já tem o Tomcat no seu PC, salte para o passo 6.)
   Vamos instalar agora o servidor aplicacional (web server). Dirija-se à página de downloads do Tomcat e opte pelo download adequado ao seu S.O./arquitetura.
   
5. Descompacte o ficheiro do servidor para uma pasta à sua escolha.
6. Agora que tem o JDK, o IDE e o servidor aplicacional instalados, está pronto para criar um projeto JSF. Vamos criar um projeto do zero. Para tal, vá a File > New Project e selecione Java Web > Web Application.
   Nota: Com o tipo de projeto criado, quem irá gerir as bibliotecas (dependências) associadas aos projeto será o NetBeans. Quando o projeto se complica e precisa de mais bibliotecas, deve fazer uso do Maven (nesse caso deve escolher Maven > Web Application). Se preferir, pode criar um projeto com base num sample project. Para tal, no ecrã de New Project, deve selecionar Samples e escolher um projeto que lhe agrade, à partida dentro de HTML5, Java EE ou Maven. Se o tipo de projeto for Maven, o resto do tutorial não se aplica.
   Clique em Next.
7. Deve agora dar um nome ao projeto e fazer Next:
   
8. (Se já tinha o Tomcat registado no NetBeans salte para o passo 11.) Como o NetBeans ainda não sabe da existência do Tomcat, devemos agora registá-lo (num próximo projeto ele já estará disponível e isto não será mais necessário). Para tal, clique em Add, ao lado de Server:
   
9. Selecione Apache Tomcat e clique em Next:
   
10. Neste ecrã de configuração:
    • indique a pasta base para onde descompactou o Tomcat no passo 5 (Browse);
    • insira admin/admin nos campos Username e Password;
    • clique em Finish.

    

11. Nesta altura já deverá ter o Tomcat presente e selecionado na listagem, pelo que deverá pressionar Next:
    
12. Poderá agora indicar as bibliotecas iniciais (jars) a associar ao projeto. Selecione o JavaServer Faces (JSF) e faça Finish:
    
13. Agora que já tem tudo configurado, está pronto para correr o projeto. Para tal, clique no botão de Run Project:
    Voilá… depois de alguns instantes verá uma página do browser com um Hello from Facelets!

Vamos então conhecer um pouco melhor as entranhas do projeto. A melhor maneira é olhar para a tab Projects. Esta tab tem a organização lógica do projeto, organizando os ficheiros por categoria e não como estão no sistema de ficheiros (para isso, existe a tab Files).

• Web Pages: onde encontrará os Facelets do projeto, os quais correspondem a uma linguagem de markup (ficheiros .xhtml) que substitui os JSP. Em MVC, representam a view pois contêm os componentes que compõem a GUI (o index.xhtml, criado pelo wizard de novo projeto, é um exemplo de um Facelet). O código de um Facelet é posteriormente convertido em HTML, após o seu processamento.
• Source Packages: o código Java propriamente dito, nomeadamente os managed beans. Os managed beans são o controller em MVC, ou seja, o backing code disponibilizado aos componentes presentes nos Facelets. Por exemplo, poderíamos ter um managed bean chamado Carrinho.java com os métodos getProdutos, compra, adicionaProduto, retiraProduto, etc. Depois, num Facelet, era possível ter a expressão #{carrinho.produtos} (o get é implícito e o p passa a minúsculo). Esta mesma pasta pode também conter serviços, DAOs, validadores, conversores, classes do domínio, DTOs, entre outros.
• Libraries: onde estão representadas as bibliotecas necessárias ao projeto. Encontrará lá, no mínimo, o JDK e uma implementação da norma JSF. Futuramente, poderá ter uma suite de componentes (ex.: o PrimeFaces) (se o projeto fosse do tipo Maven, esta pasta seria substituida por Dependencies e Java Dependencies).
• Configuration Files: os ficheiros de configuração do projeto. Por exemplo, o ficheiro web.xml contém algumas configurações de alto nível do projeto (por exemplo, o servlet do JSF). O context.xml define em que endereço o projeto é lançado no browser (se o projeto fosse do tipo Maven, esta pasta seria substituída pela Project Files e teria um pom.xml para gerir as bibliotecas incluídas).

Voltemos à pasta Web Pages onde se encontram os Facelets. Abra o index.xhtml e repare no seguinte código, presente na abertura da tag html:

xmlns:h="http://xmlns.jcp.org/jsf/html"

Isto representa uma referência à taglib HTML, prefixada pela letra h. Logo abaixo vemos que o h:head e o h:body fazem uso dessa taglib. Uma taglib é uma referência a uma biblioteca JSF, a qual contém uma série de componentes reutilizáveis. O JSF oferece quatro taglibs de origem, embora apenas precise das duas primeiras para começar:

• h: HTML: abstrai os componentes de HTML, tais como head, body, links, dropdown boxes, caixas de texto, etc.
• f: Facelets: inclui conversores, validadores, listeners, passagem de parâmetros, facets, internacionalização, etc.
• ui: User Interface: permite criar fazer templating e outras manipulações de fragmentos de interface
• cc: Composite Component: permite criar os seus próprios componentes reutilizáveis

Nota: Também é possível referenciar as taglibs JSTL do JSP. No entanto, regra geral, isto não é necessário, tendo em conta que as bibliotecas JSF oferecem funcionalidades semelhantes.

O PrimeFaces, RichFaces e o ICEFaces são suites de componentes que contribuem com mais taglibs para o projeto. Tais taglibs consistem em componentes avançados (diálogo, árvore, tabela, autocomplete, color picker, galeria, painel, etc.), com capacidades de skinning, AJAX, filtragem, ordenação, internacionalização, validação, entre muitas outras.

No próximo artigo vamos aprender como adicionar e usar o PrimeFaces. Veremos também como criar e usar um managed bean.