Archive for “fevereiro, 2015”

Utilizando a arquitetura Suri-spring – Parte 01

Olá Surinautas!
Neste post daremos continuidade ao processo de desenvolvimento utilizando a arquitetura suri-spring, já explicada no post anterior. Iremos abordar os seguintes tópicos:

  • Utilização do pom.xml
  • Url amigáveis com pretty-faces
  • Integração com primefaces
  • Configurando o primeiro projeto

Conhecimento prévio

Para melhor aproveitamento da arquitetura, assim como a utilização dos frameworks abordados no decorrer dos posts, seria interessante conhecer os seguintes assuntos antes de prosseguir a leitura.

  • Criação de projetos Web
  • Configuração de ide para desenvolvimento

É possível encontrar alguns sites que tratam do assunto.

Maven – Pom.xml

O pom.xml é um arquivo utilizado pelo Maven onde definimos toda a configuração do projeto: quais repositórios devem ser utilizados para baixar as bibliotecas utilizadas no projeto, quais as versões dessas bibliotecas,a versão do projeto durante o processo de build (ex: 1.0.x) entre outras coisas.
Utilizar o maven na criação do projeto é altamente recomendado, e até mesmo, migrar projetos existentes para a sua estrutura. Existem muitos benefícios em sua utilização como: facilidade de alteração de bibliotecas, melhor gerenciamento, utilização de profiles para definir o ambiente de trabalho (desenvolvimento, homologação, produção entre outros), facilidade de builds, aumenta muito a qualidade do projeto, mas claro, não será a solução para todos os seus problemas, mas com certeza irá te ajudar em resolver vários deles.

Pretty-faces e url amigáveis

Um projeto com uma estrutura de urls amigáveis e legíveis com certeza ganha muita credibilidade entre os usuários, além de melhorar os fatores que influenciam no ranking do site nas ferramente de SEO. Fica uma site elagante, fácil de ser navegável, de adicionar aos favoritos e entender depois o caminho de acesso. Nada com muitos números e códigos sem nenhum significado para usuários mais leigos.
Ex: http://surittec.com.br/comunidade/, http://surittec.com.br/suriblog/
Sua utilização é bem simples, e ainda mais, fácil de integrar a arquitetura existente, bastando apenas definir um filtro no web.xml. Vamos abordar essa configuração mais adiante.

Primefaces

O primefaces é um framework muito utilizado pela comunidade e muito conhecido devido a grande quantidade de componentes disponíveis para jsf, sua facilidade de utilização e integração. Seus componentes são criados para utilizar ajax como padrão, mas você pode optar por não utilizar, caso seja seu desejado. Permite também definir temas que podem ser utilizados para melhor apresentação e compatibilidade com o padrão visual do projeto. Vale observar que é possível utilizar o primefaces sem o tema, podendo ser combinado com o bootstrap, sendo que utilizar os dois quase sempre requer algumas adaptações no padrão visual.
Existem algumas linhas do framework: primeface elite, comunity e mobile. Caso tenha interesse em conhecer mais das versões pode acessar o próprio site do framework.

Mão na massa

Antes de começar a estudar os exemplos, verifique seu ambiente de desenvolvimento, no caso, foi utilizado o Jboss Developer Studio (JBDS). Se preferir também poderá utilizar o eclipse. Após a instalação do seu ambiente, instale o plugin do maven caso sua ide não tenha.

Abaixo segue um arquivo pom.xml que utilizaremos como exemplo:

Na tag

definimos os repositórios que serão utilizados para localizarmos as bibliotecas que serão utilizadas no decorrer do desenvolvimento do projeto. Assim definimos a url de acesso ao repositório da arquitetura suri-spring.

Na tag

definimos de fato as bibliotecas que serão utilizadas no projeto, o grupo qual pertencem, o id do artefato, sua versão e o escopo(compile/provided/runtime/test/system). Não iremos abordar um explicação do scope neste post, mas você pode verificar no site do maven.

Observação

É interessante que a versão definida na tag , não seja diretamente especificada(2.0.5), mas sim uma propriedade que pode ser definida na tag facilitando a legibilidade e manutenção do arquivo.

Na tag

iremos utilizar para definirmos a versão das bibliotecas que especificamos para utilizar no projeto, mas também pode ser utilizado para outras definições e utilizações por parte da implementação no projeto.

Importando o projeto no ambiente de desenvolvimento

Para importar o projeto no ambiente de desenvolvimento você pode optar por criar um novo projeto, escolhendo a opção, Existing Maven Project, após a escolha da opção, especificar o local do arquivo pom.xml definido acima.

Para facilitar segue uma imagem.
import

Após realizar o import seu ambiente deverá estar parecido com a imagem abaixo:
resultado_import

No diretório “Maven Dependencies” constam todas as bibliotecas(libs) que serão utilizadas no projeto durante o desenvolvimento,caso queira atualizar alguma lib, basta atualizar o arquivo pom.xml e realizar um update no projeto, tornando bem simples qualquer evolução.

Integrando com o pretty-faces

O pretty-faces deixa o projeto bem apresentável e é super simples de ser configurado.
Esse framework já consta na arquitetura portando não é necessário definir no pom.xml, apenas realizar as configurações para sua utilização.

Altere o arquivo web.xml e adicionar o trecho abaixo:

Essa definição do context-param é para posteriormente possibilite a utilização na navegação amigável nos controllers, mas isso será tópico de um outro post.

Iremos agora criar um arquivo pretty-config.xml. Este arquivo é reponsável por definir as navegações disponíveis entre as páginas mas de forma que a url fique de fácil entendimento.

Posteriormente iremos criar os dois arquivos xhtml citados acima.

Integrando com o primefaces

A integração com o primeface é bem simples também. Inicialmente iremos modificar o arquivo pom.xml para adicionar somente o tema do primefaces, note que não é necessário adicionar a lib do primefaces no pom.xml, pois a mesma já faz parte da arquitetura suri-spring.

Observação:

Não é obrigatório a utilização de temas do primefaces, porem, será necessário customizar alguns arquivos css e estilos para utilizar seus componentes da melhor forma.

Vamos atualizar o arquivo web.xml para definirmos o tema que será utilizado para o projeto. Para isso basta abrir o arquivo web.xml e inserir o parametro:

Seu arquivo web.xml deverá estar parecido com lista abaixo. Existem algumas configurações adicionais no arquivo que serão explicados nos próximos posts. Esse mesmo projeto que estamos fazendo será disponibilizado posteriormente para download para auxiliar nas configurações não descritas no momento.

Depois de realizada as configurações iniciais do primefaces, vamos criar um arquivo index.xhtml que será utilizado na pagina inicial do projeto. Para utilização dos componentes do primefaces temos que adicionar a tag

no arquivo para disponibilizar os componentes do framework, assim teremos o index.xhtml conforme modelo abaixo:

Vamos adicionar um componente do primefaces para visualizarmos um exemplo.

Vamos adicionar um link para verificarmos a url amigável definida na parte do pretty-faces. Confira logo abaixo.

Agora vamos criar a página da url amigável.

Acessando o projeto

O código do exemplo apresentado pode ser baixado nesse link.
Para acessar o projeto basta realizar o deploy no servidor e acessar a url, http://localhost:8080/example, no caso estamos utilizando o jboss-eap-6.1-alpha.
Será apresentado o index.xhtml contendo o componente do primefaces e uma url para testar o pretty-faces.

Até o próximo post.