INTRODUÇÃO E CONFIGURAÇÃO DO PRIMEFACES MOBILE EM APLICAÇÕES JSF

Transcrição

1 INTRODUÇÃO E CONFIGURAÇÃO DO PRIMEFACES MOBILE EM APLICAÇÕES JSF Guilherme Macedo, Jaime Willian Dias Universidade Paranaense (Unipar) Paranavaí PR Brasil guilhermemacedo28@gmail.com, jaime@unipar.br Resumo. Este artigo constitui uma descrição sobre PrimeFaces e PrimeFaces Mobile, este apresenta um tutorial de configuração do PrimeFaces mobile para o uso em uma aplicação JSF, tendo em vista como objetivo de auxiliar o desenvolvimento de um software para o trabalho de conclusão de curso, também tem como objetivo instruir e informar o usuário sobre a tecnologia e ao uso do mesmo. Para o desenvolvimento desta configuração será utilizado a tecnologia PrimeFaces Mobile, o framework JSF e o NetBeans utilizando a linguagem de programação Java. 1. Introdução Para a melhor compreensão do tema PrimeFaces Mobile é de suma importância ressaltar primeiramente o que é o PrimeFaces, o PrimeFaces é uma suíte open-source de componentes para JavaServer Faces que conta com mais de 100 componentes completos e de fácil implementação. Uma grande vantagem do PrimeFaces é que seus componentes utilizam Ajax nativo do JSF. (Paliari, 2011). O PrimeFaces Mobile é uma extensão do PrimeFaces com componentes específicos para o desenvolvimento de aplicações para dispositivos moveis, segundo o site oficial do PrimeFaces, em uma tradução livre, define como sendo um 1 UI kit, para criação de aplicações otimizadas para dispositivos mobile utilizando a tecnologia Java Server Faces (JSF). 2 PMF é construído em cima da tecnologia jquery Mobile oferecendo suporte para os diversos tipos de plataforma mobile. A extensão mobile proporciona uma vasta opção de componentes já predefinidos, que facilitam na hora de programar, pois através do site, o programador consegue ter acesso aos componentes e também ao código fonte dos mesmos, a escolha deste framework proporciona benefícios para o desenvolvimento de um software, tal como o design responsivo que adequa o layout da aplicação a diferentes dispositivos moveis como tabletes, celulares smartphones e etc. 1 Interface Usuário 2 Sigla de PrimeFaces Mobile

2 O desenvolvimento na área mobile vem se mostrando cada vez mais necessário no ramo de tecnologia da informação devido ao grande número de pessoas que vem adquirindo celulares, que segundo a Teleco, o Brasil terminou junho de 2015 com um total de 282,5 milhões de celulares e uma densidade de 138,23 celulares/100 habitantes, devido a essa grande número de celulares, cresce o mercado no setor de aplicativos para smartphones, diversas empresas que já possuem sites conhecidos por muitas pessoas agora estão buscando desenvolver aplicativos para que consigam atingir ainda mais usuários. O objetivo desse trabalho é a implantação do PrimeFaces Mobile em um projeto JSF, mostrando um passo a passo de como configurar e trabalhar com esse framework, para o desenvolvimento deste artigo será usado a 3 IDE NetBeans versão 8.0.2, usando a plataforma de programação 4 J2EE e o framework 5 JSF juntamente com o PrimeFaces. 2. Metodologia Para o realizar este trabalho foi feito uma vasta revisão bibliográficas em conteúdo como sites e artigos da internet. 3. Desenvolvimento Segue a baixo o processo de configuração do PrimeFaces Mobile em um software com JSF e PrimeFaces em desenvolvimento, com a finalidade de implementar um software que será apresentado ao final do trabalho de conclusão do curso. 3.1 Baixando o Arquivo.JAR Para iniciação da configuração do projeto para utilização do PrimeFaces Mobile é necessário o download do arquivo 6.JAR do PrimeFaces, existem duas maneiras de se conseguir o arquivo.jar, uma é o download manual e o download com 7 Mavem Download Manual Para fazer o Download Manual é necessário entrar no site do fabricante, escolher uma versão, recomendado baixar sempre a versão mais recente, e fazer o download do arquivo chamado primefaces-mobile-(versão).jar através do site: Depois do êxito no 3 Integrated Development Environment: Um ambiente integrado para desenvolvimento de software. 4 Java Plataforma Enteprise Edition: plataforma Java para desenvolvimento e execução de aplicações servidoras, com capacidade de suporte ao desenvolvimento de aplicações robustas e escaláveis. 5 Java Server Faces: é um framework MVC baseado em Java para a construção de interfaces de usuário baseadas em componentes para aplicações web. 6.JAR são arquivos que possui um conjunto de classes e arquivos de configurações. 7 Maven é uma ferramenta de integração de projetos. É responsável por gerenciar dependências, controlar versão de artefatos, etc.

3 download, é necessário adicionar o arquivo no projeto, para adicionar basta clicar com o direito no nome do projeto e selecione a opção propriedades, então abrira uma janela de Propriedades do Projeto que no menu ao lado esquerdo se encontra a aba Bibliotecas selecione-a, quando selecionada ela exibira todas as bibliotecas do projeto, ao lado direito da lista existe o botão Adicionar JAR/Pasta clique-o, a figura 1 demonstra os passos realizados até o momento. Figura 1: Configurando Bibliotecas PrimeFaces Mobile, parte 1 Após ter clicado em Adicionar JAR/Pasta abre-se uma nova janela, onde é preciso localizar o jar baixado, após selecionado, basta clicar em abri então você é redirecionado a janela anterior que pode ser fechada clicando no botão OK, após estas etapas o framework já está configurado no software Download Através do Mavem Uma maneira alternativa e bastante utilizadas entre os programadores para se conseguir o.jar é o Mavem, pois através dela é possível configurar para que as bibliotecas sejam baixadas automaticamente do desenvolvedor, para adquirir as dependências do PrimeFaces basta que no arquivo de configuração.xml do projeto, que é responsável pela importação, adicione no arquivo as linhas de códigos responsáveis por identificar a dependência a ser baixada, tendo como referência a figura 2, a versão pode ser alterada de acordo com as necessidades do programador.

4 Figura 2: Dependências Mavem, FONTE: PrimeFaces Mobile User Guide Além das dependências, é necessário adicionar também o endereço do repositório do PrimeFaces ao arquivo.xml, para que assim o Mavem consiga ter acesso para baixar as dependências necessárias. Os códigos necessários estão na figura 3. Figura 3: Repositórios Mavem, FONTE: PrimeFaces Mobile User Guide 3.2 Configuração Para o Uso em Páginas Web Após as etapas de fazer o download do PrimeFaces Mobile e configura-lo no software é necessário ainda que se adicione a Taglib nas páginas onde serão destinadas a aplicação mobile, como apresentado na figura 4. Quando adicionada ela permite que use as inicias pm: para que assim então começar a usar os componentes mobile. Figura 4: Taglib do PrimeFaces Mobile, FONTE: PrimeFaces Mobile User Guide 3.3 Utilizando os Recursos do Framework Para utilizar componentes do framework basta acessar o site do fabricante: no site na lateral esquerda existe todos os componentes disponíveis para se utilizar na aplicação, para explorar mais sobre o componente basta clicar e ele exibira exemplos do mesmo e ainda ao fim da

5 mesma página existe uma aba denominada Source, nessa aba contém os códigos de todos os componentes exibidos na página. 4. Considerações Finais O PrimeFaces Mobile devido ao grande crescimento do número de smartphones no Brasil torna-se um framework com um grande potencial de mercado. Apesar de ainda quase não conhecido e explorado, no cenário brasileiro, o framework traz inúmeras vantagens para programação mobile. Este artigo abordou uma introdução a PrimeFaces e PrimeFaces Mobile, abordou também um guia detalhado de como implementar e utilizar o PrimeFaces em aplicações web. O objetivo que pretendo alcançar a partir de agora é a criação de um aplicativo móvel integrado com um sistema utilizando o PrimeFaces Mobile, com a finalidade de se obter êxito em alcançar os requisitos do Estagio Supervisionado II em Sistema de informação. 5. Referências Paliari, M. (30 de 09 de 2011). Matera ultiliza o primefaces. Fonte: Matera System: em: 27/07/2015 Primefaces. (2015). PrimeFaces Mobile. Fonte: PrimeFaces Mobile: em: 20/07/2015 Teleco. (2015). Teleco. Fonte: Teleco - Inteligência em Telecomunicações: em: 26/07/2015 Çivici, C. (2015) PRIMEFACES MOBILE USER S GUIDE disponível em: Acesso em: 22/07/2015