Ambiente de desenvolvimento JSF

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

Artigo originalmente publicado na Revista PROGRAMAR, edição n.º 44, Fevereiro 2014 – pág. 9.

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.

  1. 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.

  2. (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.

  3. Descompacte o ficheiro do servidor para uma pasta à sua escolha.

  4. 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’.

  5. Deve agora dar um nome ao projeto e fazer ‘Next’:

  6. (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 Server’, debaixo de ‘Servers’:

    Selecione ‘Apache Tomcat’ e clique em ‘Next’:

  7. 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’.

  8. Nesta altura já deverá ter o Tomcat presente e selecionado na listagem, pelo que deverá pressionar ‘Next’:

  9. Poderá agora indicar as bibliotecas iniciais (jars) a associar ao projeto. Selecione o ‘JavaServer Faces’ (JSF) e faça ‘Finish’:

  10. 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, poderiamos 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” contem 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 substituida pela “Project Files” e teria um “pom.xml” para gerir as bibliotecas incluidas).

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://java.sun.com/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 refêrencia a uma biblioteca JSF, a qual contém uma série de componentes reutilizáveis. O JSF oferece 4 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 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çao, entre muitas outras.

No próximo artigo vamos aprender como criar e usar um managed bean.

2 thoughts on “Ambiente de desenvolvimento JSF

Deixar uma resposta