Produtividade de Sistemas Web com JSF e PrimeFaces

•

UFRJ

Artigos e Atualidades

17/01/2023

Prévia do material em texto

PRODUTIVIDADE DE CONSTRUÇÃO DE SISTEMAS WEB COM JSF
Vantagens e Desvantagens da Utilização de PrimeFaces.

Joimilte Antonio de Jesus Bonfim

Projeto de Graduação apresentado ao Curso de
Engenharia de Computação e Informação da
Escola Politécnica, Universidade Federal do Rio
de Janeiro, como parte dos requisitos necessários à
obtenção do título de Engenheiro.

Orientador: Sergio Palma da Justa Medeiros

Rio de Janeiro
Fevereiro de 2017

PRODUTIVIDADE DE CONSTRUÇÃO DE SISTEMAS WEB COM JSF
Vantagens e Desvantagens da Utilização de PrimeFaces.

Joimilte Antonio de Jesus Bonfim

PROJETO DE GRADUAÇÃO SUBMETIDO AO CORPO DOCENTE DO CURSO DE
ENGENHARIA DE COMPUTAÇÃO E INFORMAÇÃO DA ESCOLA
POLITÉCNICA DA UNIVERSIDADE FEDERAL DO RIO DE JANEIRO COMO
PARTE DOS REQUISITOS NECESSÁRIOS PARA A OBTENÇÃO DO GRAU DE
ENGENHEIRO DE COMPUTAÇÃO E INFORMAÇÃO.

Examinado por:

______________________________________________
Sergio Palma da Justa Medeiros, D.Sc.

______________________________________________
Prof. Aloysio de Castro Pinto Pedroza, D.Sc.

______________________________________________
Prof. José Artur da Rocha, M.Sc.

______________________________________________
Élton Carneiro Marinho, M.Sc.

RIO DE JANEIRO, RJ – BRASIL
FEVEREIRO de 2017

iii

de Jesus Bonfim, Joimilte Antonio
Produtividade de construção de sistemas web com JSF.
Vantagens e Desvantagens da utilização de PrimeFaces: Um
experimento baseado em desenvolvimento de dois sistemas
web para comparação. / Joimilte Antonio de Jesus Bonfim. –
Rio de Janeiro: UFRJ/ Escola Politécnica, 2017.
X, 47 p.: il.; 29,7 cm.
Orientador: Sergio Palma da Justa Medeiros
Projeto de Graduação – UFRJ/ Escola Politécnica/ Curso
de Engenharia de Computação e Informação, 2017.
Referências Bibliográficas: p. 46.
1. Motivação e Objetivo. 2. Desenvolvimento Ágil XP,
SCRUM. 3. Modelagem do problema. 4. Descrição dos
Experimentos. 5. Conclusão. 6. Referências. da Justa
Medeiros, Sergio Palma. II. Universidade Federal do Rio de
Janeiro, Escola Politécnica, Curso de Engenharia de
Computação e Informação. III. Título.

DEDICATÓRIA

A minha esposa Danielle Bonfim, meus pais, familiares e amigos,
Por todo apoio e tudo que representam na minha vida.

AGRADECIMENTOS

Dedico esse projeto primeiramente à minha esposa e grande companheira Danielle
Bonfim, pois sem ela isso teria acontecido, ela que acompanhou de perto todos os
momentos difíceis nessa minha caminhada e que foi sempre uma guerreira. Agradeço a
minha mãe Adelaide Antonio por toda educação e por me fazer ser o homem que sou
hoje. Quero encarecidamente agradecer o Professor Sergio Palma da Justa Medeiros por
ter acreditado em mim, ele que se ofereceu para me orientar nesse projeto por mera
coincidência, sendo simples, prático e direto, e também ao Professor Élton Carneiro
Marinho por todo apoio e acompanhamento que me deu de forma objetiva e prática desde
o início até a conclusão desse projeto, à Professora Mônica Ferreira da Silva também pelo
seu apoio e ótimas dicas. Um agradecimento especial para a Deize Beraldi e Dircilane
Beraldi pelas palavras de incentivo nos momentos difíceis, não esquecendo também do
meu grande amigo e irmão Jeldes Major Vera Cruz pelos incentivos e apoios constantes.
Assim como muitos outros que também foram importantes nessa minha caminhada, mas
que não é possível mencioná-los aqui.

Resumo do Projeto de Graduação sujeito a apresentação à Escola Politécnica/UFRJ como
parte dos requisitos necessários para a obtenção do grau de Engenheiro de Computação e
Informação.

PRODUTIVIDADE DE CONSTRUÇÃO DE SISTEMAS WEB COM JSF
Vantagens e Desvantagens da Utilização de PrimeFaces.
Joimilte Antonio de Jesus Bonfim
Fevereiro/2017

Orientador: Sergio Palma da Justa Medeiros
Curso: Engenharia de Computação e Informação
Os sistemas web são hoje o centro das atenções de tudo que envolve tecnologia, trazendo
desafios diversos para as organizações e oferecendo uma grande quantidade de recursos e
serviços. Cada vez mais, empresas, instituições e desenvolvedores se deparam com um
aumento de demanda e a necessidade de encontrar soluções para grandes problemas em
curtos espaços de tempo. Nesse sentido com o intuito de auxiliar na resolução desses
problemas de forma célere é que surgem as metodologias de desenvolvimento ágil de
software entre os quais o XP e o SCRUM que agilizam de forma eficiente o
desenvolvimento de sistemas web usando a plataforma padrão J2EE ou Java EE, JSF e o
PrimeFaces. A escolha da melhor opção depende de diversos fatores, tais como, a
experiência do desenvolvedor, a descrição e modelagem do problema e as ferramentas
disponíveis. O objetivo do projeto, é apresentar o desenvolvimento de dois sistemas web
denominados de Experimento I e Experimento II que interajam com banco de dados
usando a linguagem de programação JavaScript e os frameworks JSF e PrimeFaces que
agilizam o processo de desenvolvimento dos sistemas pelos desenvolvedores e fazer uma
avaliação das suas vantagens e desvantagens quanto a produtividade, tempo e qualidade.
Palavras-chave: Sistemas web, software, Desenvolvimento ágil, Extreme Programming,
SCRUM, JavaScript, JSF e PrimeFaces.

vii

Abstract of Undergraduate Project presented to POLI/UFRJ as a partial fulfillment of the
requirements for the degree of Engineer.

PRODUCTIVITY OF WEB SYSTEM CONSTRUCTION WITH JSF
Advantages and Disadvantages of Using PrimeFaces.
Joimilte Antonio de Jesus Bonfim
February/2017

Advisor: Sergio Palma da Justa Medeiros
Course: Engenharia de Computação e Informação
Web systems are now the center of attention of everything that involves technology,
bringing diverse challenges to the organizations and offering a great amount of resources
and services. Increasingly, companies, institutions and developers are faced with
increased demand and the need to find solutions to major problems in short time frames.
In this sense, with the purpose of helping to solve these problems quickly, there are agile
software development methodologies including XP and SCRUM that efficiently
streamline the development of web systems using the standard J2EE or Java EE platform,
JSF, and PrimeFaces. Choosing the best option depends on a number of factors, such as
the developer's experience, the description and modeling of the problem, and the tools
available. The objective of the project is to present the development of two web systems
called Experiment I and Experiment II that interact with the database using the JavaScript
programming language and the JSF and PrimeFaces frameworks that streamline the
development process of the systems by the developers and do an assessment of its
advantages and disadvantages in terms of productivity, time and quality.
Keywords: Web Systems, Software, Agile Development, Extreme Programming,
SCRUM, JavaScript, JSF and PrimeFaces.

viii

Sumário
1. Introdução .................................................................................................................................... 1
1.1. Motivação ............................................................................................................................. 1
1.2. Objetivos da pesquisa............................................................................................................ 3
2. Conceitos Preliminares ................................................................................................................ 4
2.1. Desenvolvimento Ágil ..........................................................................................................4
2.1.1. Extreme Programming – XP ......................................................................................... 6
2.1.2. SCRUM ......................................................................................................................... 8
2.1.3. Arquitetura da Plataforma web ................................................................................... 10
2.2. Ferramentas Usadas no Desenvolvimento .......................................................................... 11
2.2.1. NetBeans IDE ............................................................................................................. 11
2.2.2. WampServer................................................................................................................ 12
2.2.3. MySQL WorkBench ................................................................................................... 13
2.3. Linguagem JavaScript ......................................................................................................... 14
2.3.1. JSF – JavaServer Faces ............................................................................................... 15
2.3.2. PrimeFaces .................................................................................................................. 16
2.3.3. AngularJS .................................................................................................................... 17
3. Metodologia de Desenvolvimento e Modelagem ...................................................................... 18
3.1. Arquitetura do Modelo MVC .............................................................................................. 19
3.2. Conceitos de Arquitetura .................................................................................................... 19
3.2.1. Conexão com Banco de Dados via JDBC ................................................................... 21
4. Descrição dos Experimentos ...................................................................................................... 23
4.1. Desenvolvimento do Experimento I usando JavaScript e JSF ............................................ 23
4.1.1. Gerando as Classes de Entidade do Banco de Dados.................................................. 28
4.2. Explorando o Experimento I ............................................................................................... 34
4.2.1. Vantagens .................................................................................................................... 36
4.2.2. Desvantagens .............................................................................................................. 37
4.3. Desenvolvimento do Experimento II usando JavaScript, JSF e PrimeFaces ...................... 37
4.3.1. Explorando o Experimento II ...................................................................................... 41
4.3.2. Vantagens .................................................................................................................... 43
4.3.3. Desvantagens .............................................................................................................. 43
5. Conclusão e Trabalhos Futuros .................................................................................................. 44
6. Referências Bibliográficas ......................................................................................................... 46
Apêndice I ...................................................................................................................................... 47

1. Introdução
1.1. Motivação
Temos-nos deparado diariamente com sistemas de softwares que possuem
arquiteturas bastante complexas e de difícil manuseio, o que gera um desafio para os
desenvolvedores. Essa gama de sistemas que têm inundado o mercado nos dias de hoje é
consequência da constante evolução da internet e novas tecnologias, principalmente nos
últimos anos. Nem todos esses sistemas possuem padrões e arquitetura bem definidos no
seu desenvolvimento que possam ser de fácil usabilidade, o que pode ocasionar diversos
problemas no seu propósito final (A. M. Silva Filho, Espaço Acadêmico, Setembro
2002).
O software tornou-se parte imprescindível do mundo moderno, tudo envolve
software, ou seja, a tendência é que componentes tecnológicas possam ser convertidos em
software. Com o aumento das demandas e das necessidades da sociedade atual, tem
aumentado também a complexidade dos sistemas, tamanho, distribuição e importância
dos softwares. Essas variáveis pressionam a indústria para novos patamares de qualidade
e produtividade compatíveis com o rápido desenvolvimento e distribuição e que elas
possam se adequar a essas novas demandas, gerando assim novos desafios e propósitos
organizacionais.
A convergência é cada vez mais rápida o que faz com que as organizações que
não tiverem capacidade para acompanhar ou fazer a conversão perante o rápido
crescimento tecnológico se tornem obsoletas. Com o intuito de auxiliar na resolução
desses problemas surgem às metodologias de engenharia de software que agilizam de
forma eficiente o desenvolvimento de sistemas web usando a plataforma padrão J2EE ou

Java EE – Java Plataform, Enterprise Edition ou Plataforma Java, Edição Empresarial
1
,
JSF (JavaServer Faces) e o PrimeFaces. A ferramenta J2EE teve a sua primeira versão
lançada em 1999 e atualmente está na versão Java EE 8. A JSF foi lançada como um
projeto JCP (Java Community Process) nos anos de 2004 e na sua mais recente versão, a
2.0, com diversas novidades e funcionalidades que foram propostas. Por outro lado, o
PrimeFaces é um conjunto de componentes que complementa a especificação-padrão dos
componentes JSF, trazendo uma série de itens que permitem a criação de aplicações web
com o conceito RIA
2
(Rich Internet Application).
Qualquer desenvolvedor pode criar rapidamente suas aplicações ou sistemas que
façam uso do AJAX (Asynchronous Javascript and XML), com JSF e PrimeFaces como
o seu frontend, ao mesmo tempo em que criam ambientes visualmente agradáveis, sem no
entanto ter um amplo conhecimento sobre JavaScript, CSS (Cascading Style Sheets ou
Linguagem Folha de Estilo em português) e HTML. Para um bom desenvolvimento de
aplicações Java Enterprise é considerável o uso do conjunto de tecnologias JSF-Hibernate
(Cagatay Civici, Líder do projeto PrimeFaces, 2009).
A ideia do projeto passa também por viabilizar por parte dos desenvolvedores as
operações CRUD (Create, Read, Update and Delete) que são as quatro operações básicas
realizadas em banco de dados, normalmente feitos por meio de scripts, como uma forma
de agilizar processos manuais, que estão presentes em qualquer sistema. Os sistemas de
informação na sua maioria possuem essas operações de interação com os bancos de dados
como consulta ou leitura, alteração, inclusão e exclusão de dados, operações estas que
veremos a sua funcionalidade nos sistemas que serão desenvolvidos e apresentados neste
trabalho.

1
Plataforma de programação para servidores na linguagem Java.
2
Aplicações web com funcionalidades desktop. “Macromedia, março de 2002”.
https://pt.wikipedia.org/wiki/Macromedia

Se pensarmos num sistema qualquer, por exemplo, um sistema de gerenciamento
de automóveis, pensamos logo em palavras como: modelo, fabricante, cor, ano e etc.
Nesse caso pensamos logo em como manipular cada uma dessas palavras em suas
diversas etapas ao longo do sistema, seja no cadastro ao inserir os dados no sistema ou na
alteração ao editar, atualizar ou excluir os dados inseridos no sistema. Neste âmbito surge
a ideia de comunicação direta com o banco de dados do sistema. Isso aconteceporque os
sistemas contêm entidades que são frequentemente criadas, alteradas, visualizadas ou
excluídas.
A arquitetura do sistema é baseado em componentes e descrito através do uso de
modelagem gráfica por meio de uma linguagem padrão denominada de UML (Unified
Modeling Language). A modelagem através de UML é utilizada para descrever a
arquitetura e o comportamento do sistema, demonstrando sua importância durante todo o
desenvolvimento, principalmente nas etapas iniciais (Roger S. Pressman, Bruce R.
Maxim - 2016).

1.2. Objetivos da pesquisa
O objetivo deste trabalho consiste em apresentar o desenvolvimento de dois
sistemas web denominados de Experimento I e Experimento II que interajam com banco
de dados usando a linguagem de programação JavaScript e os frameworks JSF e
PrimeFaces que agilizam o processo de desenvolvimento dos sistemas pelos
desenvolvedores e fazer uma comparação das suas vantagens e desvantagens quanto a
produtividade, tempo e qualidade.

A ideia é mostrar a importância do uso dessas ferramentas pelos desenvolvedores
de forma a ter uma melhor produtividade no desenvolvimento de sistemas web mediante
a ferramenta escolhida e a metodologia empregada.
O projeto está dividido em 6 capítulos, sendo a introdução o primeiro deles, onde
incluem a motivação e os objetivos. O Capítulo 2 apresenta os conceitos preliminares
para o entendimento do tema, metodologias de desenvolvimento ágil, extreme
programming, metodologia scrum, e a conexão com um banco de dados via JDBC, assim
como as ferramentas usadas no desenvolvimento dos sistemas.
O Capítulo 3 trata da metodologia e modelagem do problema, modelo escolhido
para ser usado no desenvolvimento dos experimentos, e como são usadas as ferramentas
escolhidas no capítulo anterior. No Capítulo 4, inicia a descrição dos experimentos
desenvolvidos, detalhando a sua arquitetura, e a agilidade no desenvolvimento dos
mesmos, suas vantagens e desvantagens. O Capítulo 5 descreve a conclusão da
experimentação e trabalhos futuros. Por fim no Capítulo 6, são referenciadas as
bibliografias utilizadas.

2. Conceitos Preliminares
2.1. Desenvolvimento Ágil

O conceito desenvolvimento ágil de software ou métodos ágeis consiste em
apoiar o desenvolvimento de sistemas em que os requisitos desses sistemas mudam
rapidamente durante o processo de desenvolvimento. Esses métodos por sua vez contam
com uma abordagem iterativa para especificação, desenvolvimento e entrega incremental
de software.

Os métodos ágeis destinam-se a entregar um software de forma rápida aos
clientes, onde os mesmos podem propor novos requisitos e alterações a serem incluídos
posteriormente no sistema, defendendo assim a satisfação dos clientes
(SOMMERVILLE, Engenharia de Software 8ª Edição, 2010). A agilidade descreve um
processo moderno de desenvolvimento de software, e nesse contexto considera-se que
uma equipe deve ser ágil ou rápida e capaz de responder de maneira adequada às
mudanças, sejam elas de software, de membros de equipe, ou de novas tecnologias.
No entanto, a agilidade é mais do que uma resposta à mudança, é um incentivo
a estruturação, entrega rápida e flexibilidade. Com a introdução da metodologia ágil de
desenvolvimento, houve uma redução considerável nos custos de desenvolvimento que
eram bem mais elevados quando feitos usando o método convencional (PRESSMAN, B.
MAXIM, 2016).
Assim como qualquer outro método usado para desenvolvimento de softwares,
os métodos ágeis também possuem suas imperfeições. Isto porque eles possuem alguns
princípios que são de difícil empregabilidade, pois considerando que os requisitos de
software são normalmente parte do contrato entre cliente e fornecedor, torna-se difícil
definir um contrato para um desenvolvimento de software incremental.
A metodologia ágil conta com contratos em que o cliente pague pelo tempo
necessário para o desenvolvimento do sistema e não pelo desenvolvimento de um
conjunto de requisitos. Esses métodos não são adequados para o desenvolvimento de todo
tipo de sistemas. São recomendados para o desenvolvimento de sistemas de pequenas e
médias empresas e produtos para computadores pessoais.

Os métodos ágeis não são apropriados para desenvolvimento em larga escala
onde os sistemas são desenvolvidos em partes por desenvolvedores diferentes em locais
diferentes e nem de sistemas críticos (como sistema de controle de uma aeronave, por
exemplo) que requerem uma análise minuciosa dos seus requisitos para entender as suas
especificações de segurança (SOMMERVILLE, Engenharia de Software 8ª Edição,
2010). As metodologias de desenvolvimento ágil (métodos ágeis) mais populares são o
Extreme Programming – XP e o SCRUM, conforme a figura seguinte.

Figura 1: Métodos ágeis mais populares.

2.1.1. Extreme Programming – XP

Extreme Programming (XP) é uma metodologia de desenvolvimento ágil de
software, que nasceu nos Estados Unidos ao final da década de 90 e tem como princípio
apoiar os desenvolvedores na criação sistemas de melhor qualidade em menos tempo de
forma econômica e eficiente. Ela leva em consideração os valores das histórias dos
usuários para o planejamento dos projetos.
http://www.desenvolvimentoagil.com.br/xp/metodologia

Essa metodologia tem como objetivo principal priorizar um conjunto de boas
práticas de engenharia de software como teste, revisão, planejamento e redução de riscos
e incertezas, é considerada a metodologia ágil mais usada. O Extreme Programming
possui alguns cenários como descritos a seguir:
- Comunicação: a equipe deve manter a constante comunicação entre os
desenvolvedores e com os seus clientes de modo a evitar o surgimento de problemas. Um
dos aspectos da comunicação também considerada pelo Kent Beck
3
é a programação em
pares, em que os desenvolvedores usam o mesmo computador para programar, de modo
que os mesmos possam trocar ideias e poderem se comunicar com maior frequência.
Outro aspecto considerado é a negociação, onde a equipe de desenvolvimento mostra o
seu ponto de vista técnico e o cliente dá os requisitos e suas prioridades.
- Simplicidade: consiste em simplificar ao máximo no imediato. Necessita de
menos comunição apesar da comunicação permitir que transmitamos mais clareza e
confiança para dar sustentabilidade à simplicidade.
- Feedback: é um valor fundamental na metodologia de desenvolvimento ágil e
permite a evolução do software, através de diversos testes automatizados. Quanto antes o
feedback for recebido melhor informados estarão os desenvolvedores sobre o projeto,
garantindo assim o prazo e a correta execução do projeto junto do cliente.
- Coragem: para um projeto simples, tendo em conta que as demandas futuras
podem ser alteradas por completo, originando um retrabalho em relação ao projeto e ao
código já implementado, e por fim o respeito por parte das equipes, dos clientes e
usuários (R. Pressman, B. Maxim, 2016)”.

3
Eng. de Software Americano Criador do Extreme Programming e Test Driven Development.

A figura seguinte apresenta o desenrolar do ciclo de um release em Extreme
Programming – XP:

Figura 2: Ciclo de um release de Extreme Programming.

2.1.2. SCRUM

A metodologia SCRUM é também uma metodologia de desenvolvimento
ágil usada para gerir e planejar projetos de software. Nessa metodologia os projetos de
software são divididos em ciclos denominados de Sprint onde o Sprint é a representação
de um Dispositivo de Tempo ou Caixas Pretas [Black Boxes] (Ionel, 2008) dentro do qual
um conjunto de atividades deve ser executado. Essas metodologias de desenvolvimentos
ágeis são executadas de forma iterativa, e os trabalhos são divididos em iterações.
http://www.desenvolvimentoagil.com.br/xp/manifesto_agilhttp://www.desenvolvimentoagil.com.br/xp/manifesto_agil

As funcionalidades que devem ser implementadas num projeto são sustentadas
por uma lista denominada Product Backlog (a lista que contém as funcionalidades
desejadas para um produto).
São feitos também Reuniões de Planejamento (Sprint Planning Meeting) no
início, em que o Product Owner (Pessoa responsável para definir os itens que fazem parte
do Product Backlog) define como prioridade aos itens do Product Backlog e as equipes
fazem a seleção das atividades da qual terão capacidade de implementar durante o Sprint
inicial. No instante seguinte são feitas as transferências do Product Backlog de tarefas
alocadas no Sprint inicial para outro Product Backlog.
Diariamente a equipe faz uma breve reunião pela manhã que é chamada
normalmente de Daily SCRUM, com o objetivo de difundir os conhecimentos a cerca
daquilo que foi feito no dia anterior, para identificar os obstáculos ou possíveis
dificuldades e dar prioridade ao trabalho do dia atual. No final do Sprint, a equipe mostra
as funcionalidades implementadas numa Reunião de Revisão do Sprint (Sprint Review
Meeting). Contudo no final as equipes devem fazer uma Retospectiva do Sprint (Sprint
Retrospective) e planejar o próximo Sprint (Ionel, 2008).
Figura 2.1: Ciclos de processos SCRUM.

2.1.3. Arquitetura da Plataforma web

Figura 2.2: Arquitetura em três camadas (Fonte: Java como programar 8ª Edição).

A camada superior é a interface do usuário que recolhe as informações de
entrada e exibe a saída. É o meio de interação direta dos usuários com a aplicação, ela
interage com a camada intermediária para fazer solicitações e recuperar dados da camada
de informações. Esses dados obtidos são exibidos aos usuários por meio dessa interface.
A camada intermediária é onde se realiza a lógica do negocio, a lógica do
controlador e a lógica da apresentação, de modo a controlar as interações entre os
clientes da aplicação e os dados. Ela funciona como um mediador entre os dados na
camada de informações e os clientes da aplicação. A lógica do controlador realiza o
processamento das solicitações do cliente e recupera dados do banco de dados. Enquanto
que a lógica de apresentação processa dados da camada de informações e apresenta o seu
conteúdo ao cliente.
A camada de dados tem como objetivo manter os dados que pertencem a
aplicação. Ela armazena os dados em um sistema de gerenciamento de banco de dados
(SGBD) (DEITEL P. et al, p.898).

2.2. Ferramentas Usadas no Desenvolvimento

Para execução deste projeto, foi necessário o uso de algumas ferramentas de
apoio como, NetBeans IDE, WampServer e Workbench para além da metodologia de
desenvolvimento ágil escolhida. Cada uma dessas ferramentas teve a sua devida
importância e serão descritas a seguir.

Figura 2.2: Ambiente de desenvolvimento dos experimentos.

2.2.1. NetBeans IDE

Por ser uma IDE (Integrated Development Environment ou Ambiente de
Desenvolvimento Integrado) de fácil usabilidade e manuseio, e um dos mais populares do
mercado no capítulo de desenvolvimento de sistemas, por isso opção pelo mesmo para o
desenvolvimento desse projeto.

O NetBeans IDE é uma ferramenta para desenvolvimento de aplicações
desktop, móveis e Web, usando as linguagens Java, JavaScript, HTML5, PHP, C/C++,
Python entre outras. Ele é gratuito, open source, tem uma grande comunidade mundial de
usuários e desenvolvedores e pode ser obtido no site (http://netbeans.org).
É de fácil interação e possui uma interface bastante agradável. O IDE pode ser
executado em multiplataformas, como Windows, Linux, MacOS e Solaris. Oferece aos
usuários e desenvolvedores ferramentas necessárias para a criação de aplicações de
desktop, Web, empresariais e móveis multiplataformas. Teve seu inicio nos anos de 1996
por dois estudantes tchecos na Universidade de Charles em Praga (República Tcheca),
numa altura em que a linguagem de programação Java ainda não era tão popular como
nos dias de hoje.
Foi adquirido pela Sun Microsystems em 1999 e encontra-se atualmente na
versão 8.2. Durante alguns meses a Sun Microsystems mudou o seu nome para Forte for
Java e o manteve por um bom período de tempo como software proprietário. Contudo em
junho de 2000 a Sun disponibilizou o seu código fonte tornando-o assim numa plataforma
OpenSource (Código Aberto). A partir daí a comunidade de desenvolvedores que usam e
contribuem com o NetBeans está em constante crescimento (http://netbeans.org).

2.2.2. WampServer

O WampServer (que significa Windows, Apache, MySQL e PHP) é um software
publicado sob a GNU – General Public License, desenvolvido pela PHP Team. É usado
para instalar no computador os softwares PHP5, MySQL, Apache e banco de dados,
disponibilizando suporte ao uso de scripts PHP (Personal Home Page) no Windows
localmente.
http://netbeans.org/
http://netbeans.org/

Paralelamente, o PHPMyAdmin que é um dos componentes que fazem parte do
WampServer permite que os usuários e desenvolvedores gerenciem facilmente os seus
bancos de dados. A instalação é praticamente automática sem a necessidade do usuário
ou desenvolvedor fazer grandes alterações.
Está disponível gratuitamente em duas versões distintas: 32 e 64 bits
respectivamente e funciona junto com o Joomla. Ele é mantido pelo SourceForge e que
contém a sua versão mais recente. Uma das funcionalidades mais importantes do
WampServer é a de servidor local para páginas web.

2.2.3. MySQL WorkBench

O MySQL Workbench é uma ferramenta para gerenciamento de banco de
dados. Ele fornece modelagem de dados, desenvolvimento de scripts SQL(Structured
Query Language) e ferramentas de administração abrangentes para configuração de
servidores, administração de usuários, backup entre outros, e está disponível para as
plataformas Windows, Linux e MacOS.
Permite que um DBA (Administrador de Banco de Dados), desenvolvedor ou
arquiteto de dados crie, modele, gere e gerencie bancos de dados. Inclui ferramentas
necessárias para criar modelos de ER (Entidade Relacionamento), engenharia reversa
4
e
também fornece recursos-chave para executar tarefas difíceis de gerenciamento. Também
oferece ferramentas visuais para criar, executar e otimizar consultas SQL.

4
É o processo de descobrir os princípios tecnológicos e funcionamento de um dispositivo ou sistema
através da análise da sua estrutura, função e operação.

O SQL Editor fornece realce de sintaxe de cor, auto-completar, reutilização de
trechos de SQL e histórico de execução do SQL. O Painel de Conexões de Banco de
Dados permite aos desenvolvedores gerenciar facilmente conexões de banco de dados
padrão. O MySQL Workbench fornece ainda uma console visual para administrar
facilmente ambientes MySQL e obter melhor visibilidade em bancos de dados. (Fonte:
http://www.mysql.com).

2.3. Linguagem JavaScript

JavaScript é uma linguagem de programação interpretada voltada para web,
originalmente implementada como parte dos navegadores web para execução de scripts
do lado do cliente e interagir com os usuários sem a necessidade do script passar pelo
servidor, controlando o navegador, realizando assim a comunicação assíncrona e alterar
os conteúdos do documento exibido.
É usada hoje como uma das principais linguagens de programação para web, e
a tendência é que seja mais utilizada no lado do servidor através de ambientes como o
node.js
5
. Idealizada para ser uma linguagem script com orientação a objetos, baseada em
protótipos, fraca dinâmica e funções de primeira classe, ela possui programação funcional
e exibe recursos como fechamentose funções de alta ordem que normalmente estão
disponíveis em Java e C++ (FLANAGAN et al, JavaScript The Definitive Guide).

5
É um interpretador de código JavaScript que funciona do lado do servidor.
http://www.mysql.com/

2.3.1. JSF – JavaServer Faces

Uma das especificações Java para a construção de interfaces de usuário com
base em componentes para aplicações web é o JavaServer Faces (JSF). É uma tecnologia
de desenvolvimento web que usa um modelo de interfaces gráficas baseadas em eventos,
criando abstrações de detalhes de manipulação desses eventos e organizando os
componentes de modo a permitir que o programador se concentre na lógica da aplicação.
Ele foi formalizado como um padrão através do JCP (Java Community Process)
e faz parte da Java Platform Enterprise Edition o que a torna um padrão de
desenvolvimento e facilita o trabalho dos fornecedores de ferramentas, ao criarem
produtos que tornam a produtividade no desenvolvimento de interfaces visuais mais
atraentes e valorizadas.
O JSF é baseado no padrão de projeto MVC (Model View Controller), o que
facilita o desenvolvimento de sistemas. O padrão MVC separa o sistema em três
responsabilidades como (modelo, visualização e controle), onde o modelo é responsável
por representar os objetos de negocio, manter o estado da aplicação e prover ao
controlador o acesso aos dados.
A interface de usuário é definida pela visualização e ela define a maneira como
os dados serão apresentados e encaminha as ações do usuário para o controlador,
interpretando as solicitações feitas pelos usuários e traduzindo para uma operação no
modelo e retornando a visualização adequada à solicitação.

As Servlets
6
é quem controlam uma JSF através de chamadas a Faces Servlet,
por arquivos XML de configuração e por manipuladores de ações e observadores de
eventos. Faces Servlet recebem as requisições dos usuários na web, redireciona para o
modelo e envia uma resposta (T. Faria. “Java EE 7 com JSF, PrimeFaces e CDI. Edição
2013”).

Figura 2.3: Interface de comunicação JSF.

2.3.2. PrimeFaces
O PrimeFaces é um conjunto de componentes JSF (JavaServer Faces)
OpenSource com várias extensões. É uma biblioteca que possui um rico conjunto de
componentes como HtmlEditor, Diálogo, AutoCompletar, Gráficos entre outros e
permite criar aplicações web com interfaces bastante agradáveis.

6
Classe Java usada para estender as funcionalidades de um servidor.
https://pt.wikipedia.org/wiki/Classe_(programa%C3%A7%C3%A3o)
https://pt.wikipedia.org/wiki/Java_(linguagem_de_programa%C3%A7%C3%A3o)
https://pt.wikipedia.org/wiki/Servidor

O PrimeFaces é usado em projetos dos clientes como o framework de front-end,
o que permite obter uma visualização de projeto do ponto de vista de desenvolvedor de
aplicações de maneira que se possa perceber facilmente os recursos faltantes e corrigir
rapidamente os bugs. Possui uma vasta gama de funcionalidades o que lhe difere
significativamente de outras bibliotecas.
O framework PrimeFaces possui versões melhoradas dos componentes de
input e botões do JSF, os seus recursos são diferenciados e permitem a geração de
gráficos estatísticos. A comunidade PrimeFaces ajuda de forma contínua no
desenvolvimento do PrimeFaces fornecendo feedback, novas idéias, relatórios de bugs e
remendos. É a estrutura favorita dos desenvolvedores para criar interfaces ricas com Java
(CAGATAI CIVICI, “PrimeFaces User Guide 5.1. First Edition”). Existem outros
frameworks da mesma família do PrimeFaces que são RichFaces e ICEfaces, mas que
não serão estudados aqui.

2.3.3. AngularJS

O AngularJS é um framework do JavaScript OpenSourse criado em 2009 por
Misko Hevery e Adam Abrons, mantido pela Google, que auxilia na execução de paginas
simples de aplicações e promove uma alta produtividade e experiência no
desenvolvimento web. É considerada a melhor escolha para construção de interface do
usuário.

A sua construção baseou-se na crença de programação declarativa
7
, enquanto
que a programação imperativa
8
por outro lado é muito melhor e preferida para
implementar a lógica de negócios de uma aplicação.
Para isso, o AngularJS habilita o HTML (HyperText Markup Language),
estendendo o seu vocabulário, de modo a facilitar a vida dos desenvolvedores. Esse
processo resulta em desenvolvimento de aplicações expressivas e componentes
reutilizáveis, deixando de lado grandes quantidades de linhas de códigos desnecessários
mantendo a equipe focada apenas em coisas mais importantes e valiosas.

3. Metodologia de Desenvolvimento e
Modelagem

Para modelar os projetos “Experimento I e Experimento II” em questão foi
escolhida a metodologia de desenvolvimento ágil Extreme programming – XP, com base
no critério de agilidade e praticidade que o método oferece para construção de sistemas
web simples. Apesar o Extreme Programming possuir vários cenários que permitem a
construção de um sistema web, foi considerada com maior relevância a simplicidade,
pois este cenário permite simplificar ao máximo e no imediato o desenvolvimento de
sistemas.

7
Consiste em informar o computador “O que precisa ser feito!”.
8
Informa o computador “Como as instruções devem ser executadas!”.

Por outro lado o framework escolhido foi o PrimeFaces que é uma biblioteca de
componente de interface gráfica para aplicações web baseados em JSF que será usado
apenas no Experimento II, isto porque, para além de ser o framework mais popular,
permite o desenvolvimento de aplicações web bastante sofisticadas. E com ele é possível
obter um aumento de produtividade por parte do desenvolvedor.

3.1. Arquitetura do Modelo MVC

Figura 3.1: Estrutura do modelo de desenvolvimento das ferramentas.

3.2. Conceitos de Arquitetura

O MVC (Model View Controller – Modelo, Visão e Controlador) tem ganhado
popularidade há algum tempo na indústria de desenvolvimento de software e tornou-se
numa das arquiteturas empresariais mais utilizadas.

O Modelo representa o conhecimento, a Visão representa a responsabilidade e o
Controlador medeia a relação entre o Modelo e a Visão. Contudo, esses conceitos são
um pouco abstratos e o padrão pode ter implementações diferentes dependendo da
plataforma e da finalidade da aplicação.
A Visão também chamada de modelo é toda ela escrita em HTML o que confere
aos designers web e desenvolvedores de JavaScript a oportunidade de trabalharem juntos.
Por trás da Visão há o Controlador. No começo, o Controlador contém implementação
de lógica de negócios usada pela Visão. No entanto, à medida que a aplicação cresce
torna-se importante executar algumas atividades de refatoração, como mover o código do
Controlador para outros componentes, de modo a manter a coesão elevada.
A conexão entre a Visão e o Controlador é feita por um objeto compartilhado
denominado escopo e é usado para trocar informações relacionadas ao modelo. O Bean é
a classe que encapsula os dados provenientes do formulário, para que não se percam
durante a execução do programa, e se comunica com a classe Entidades. A classe
Entidades realiza o armazenamento das informações vindas do formulário e estabelece
comunicação com a classe Bean.
A Lista é uma página gerada pelo SERVLETS com o modo reportar, com todos
os registros de uma tabela, opção que depende do botão “Listar” do formulário. A classe
DAO é onde se realiza a declaração SQL para fazer o CRUD. E por fim a Classe
Conexão é uma classe Java que tem como função estabelecer a conexão com o banco de
dados. A conexão é obtida sempre que se faça uma consulta ao banco de dados e deve serfechada toda vez que a consulta terminar.

3.2.1. Conexão com Banco de Dados via JDBC

Sempre que criamos um sistema, precisamos de um banco de dados para
persistir informações e também nos comunicarmos com ele para que o mesmo possa
realizar operações desejadas. Um jeito fácil de fazer isso em Java é através de um driver
JDBC - Java Database Connectivity.
O JDBC é a especificação da linguagem Java para se comunicar com o banco
de dados MySQL
9
, onde os desenvolvedores de SGBD - Sistema de Gerenciamento de
Banco de Dados, como o Microsoft, o Oracle, ou o SQL Server, desenvolvem seus
drivers JDBC, que nada mais são do que arquivos com extensão JAR (Java Application
Resource). No entanto, para sabermos qual seria o driver a ser chamado é preciso uma
classe que seja responsável pelo gerenciamento do respectivo trabalho.

A figura 3 mostra como é constituída uma arquitetura JDBC (Luckow, Melo,
Programação Java para Web, 2010, p.107).

9
É um Sistema de Gerenciamento de Banco de Dados que usa linguagem de consulta estruturada.

Figura 3.2: Arquitetura do JDBC (Fonte: Programação Java para Web, 2010,
p.108).

Essa arquitetura é composta por algumas classes e conjunto de drivers. Sendo
que a classe DriverManager é a classe responsável pelo processo de chamada de driver
com base no uso do método getConnection. Para fazer tal operação é passado um
parâmetro para esse método, uma string contendo um tipo de URL (Uniform Resource
Locator ou em português Localizador Padrão de Recursos), que por sua vez, contém as
informações para a conexão com o banco de dados.
Como o banco de dados escolhido para ser usado neste projeto é o banco de
dados MySQL, a URL padrão para a conexão com o banco de dados ficaria da seguinte
maneira:
URL: jdbc:mysql//servidor:porta/banco
Ou usando uma URL completa contendo informações opcionais da seguinte forma:

URL: jdbc:mysql//servidor:porta/banco[?user=valor&password=valor]

Portanto uma classe Java para uma conexão com o banco de dados ficaria
conforme o Apêndice I. Vale ressaltar que as URLs de conexão JDBC são diferentes
para os mais diversos bancos de dados, apesar de todos seguirem o mesmo princípio.

4. Descrição dos Experimentos
4.1. Desenvolvimento do Experimento I usando
JavaScript e JSF

Nesta etapa será descrita o passo a passo do primeiro sistema web
(Experimento I) desenvolvido usando JavaScript com o framework JSF (JavaServer
Faces) e Banco de Dados MySQL gerando uma aplicação CRUD.
Esse primeiro experimento foi desenvolvido importando apenas os objetos das
classes de entidades de banco de dados. Foi escolhido para a criação da aplicação web a
ferramenta de desenvolvimento NetBeans IDE, que funcionará em conjunto com o
WampServer para gerenciamento do servidor e o Workbench para gerenciamento de
banco de dados.
A aplicação oferece a possibilidade de listar e modificar dados contidos no
banco de dados. Ela contará com as tecnologias JavaServer Faces para páginas Web e
Java Persistence API (JPA) para gerar as classes de entidade a partir do banco de dados e
gerenciar as transações. O servidor escolhido é o WampServer, que funcionará como
servidor local.

O NetBeans IDE oferece dois assistentes que geram todos os códigos da
aplicação em questão. O primeiro é o assistente para Classes de Entidade do Banco de
Dados que permite gerar as classes de entidade a partir do banco de dados fornecido. O
segundo é o Assistente de Páginas Web para gerar as páginas web da aplicação.
Após a criação das classes de entidade, utilizamos o assistente de Páginas JSF
de Classes de Entidade para criar EJBs
10
(Enterprise JavaBeans) e Beans gerenciados
pelo JSF para as classes de entidade, bem como um conjunto de páginas de Facelets para
manipular as views dos dados da classe de entidade.
Antes de começar as etapas de desenvolvimento propriamente dito, começamos
primeiro por criar o banco de dados ‘financeiro’ usando a interface phpMyAdmin do
WampServer, onde podemos criar o banco e interagir diretamente com o WorkBench
SQL e o NetBeans IDE. A seguir o print desta primeira etapa.

Figura 4. Print da tela do phpMyAdmin para criação de banco de dados.

10
EJB - é um componente da plataforma JEE que roda em um container de um servidor de aplicação.
https://pt.wikipedia.org/wiki/JEE
https://pt.wikipedia.org/wiki/Container_(programa%C3%A7%C3%A3o)
https://pt.wikipedia.org/wiki/Servidor_de_aplica%C3%A7%C3%A3o

Depois de criar o banco de dados criamos as tabelas que fazem parte do banco,
nesse caso as tabelas “cliente” e “municipio”. A tabela cliente contém 4 colunas
(Cd_Cliente, Nm_Cliente, In_Status e Cd_Municipio) onde a chave primária
11
é o
“Cd_Cliente” e a tabela município contém 2 colunas (Cd_Municipio e Nm_Municipio),
sendo “Cd_Municipio” a chave primária.
A seguir a execução de algumas etapas para a conexão do banco de dados a partir do
NetBeans IDE.
– Na figura a baixo apresento a modelagem ER (Entidade Relacionamento) do
Banco de Dados MySQL gerado através da engenharia reversa, usado para a criação da
aplicação.
Esta modelagem indica o relacionamento que existe entre as duas tabelas que
compõem o banco de dados ‘financeiro.sql’. Esse relacionamento é feito através da
chave estrangeira (fk – foreign key).
Figura 4.1: Modelagem ER (Entidade Relacionamento) do banco de dados usado.

11
Referem-se aos conjuntos de um ou mais campos, cujos valores nunca se repetem na mesma tabela.

A próxima etapa vamos para o NetBeans IDE 7.4 para criarmos o nosso projeto.
Depois de executar o NetBeans, criamos através da barra de ferramentas em Arquivo
depois o Novo Projeto e a seguir Java Web e por fim Aplicação Web e temos assim o
Projeto pronto conforme a imagem seguinte.

Figura 4.2: Print da tela do NetBeans para criação do novo projeto.

A seguir escolhemos um nome para o projeto e clicamos em próximo. Depois
escolhemos o Servidor GlassFish e a Versão do Java EE e seguimos adiante.

Figura 4.3: Tela para escolha de servidor para o projeto.
Posto isso, na etapa seguinte escolhemos o framework que será utilizado na
aplicação web que no nosso caso é o JavaServer Faces e clicamos em finalizar para
concluir essa etapa, conforme a figura seguinte.

Figura 4.4: Tela com a opção da escolha do framework.

4.1.1. Gerando as Classes de Entidade do Banco de Dados

Após conexão com o banco de dados do IDE, utilizamos o assistente de Classes
de Entidade do Banco de Dados para gerar de forma rápida as classes de entidade com
base nas tabelas do banco de dados. O IDE gera as classes de entidade para cada tabela
selecionada e também pode gerar classes de entidades necessárias para tabelas
relacionadas a elas.
Na janela projetos, clicamos com o botão direito do mouse no projeto
ProjetoFinal-Experimento I e selecionar Novo -> Classes de Entidade do Banco de
Dados. A seguir, em assistente de Arquivo, selecionar a categoria Persistência e
posteriormente, Classes de Entidade do Banco de Dados.
Digitar jdbc/financeiro como o nome da conexão e selecionar a url:
jdbc:mysql://localhost:3306/financeiro, clicar em ok. As tabelas do banco de dados
financeiro serão exibidas na lista de conteúdos de Tabelas Disponíveis. Clicar em
Adicionar Tudo para selecionar todas as tabelas contidas no banco de dados e clicar em
próximo.

Figura 4.5: Tela de Classes de Entidade do Banco de Dados.
Assim que clicarmos em finalizar, o IDE gera as classes de entidade no pacote
Entidades do projeto. As classes são geradas de acordo com a quantidade de tabelascontidas no banco de dados e cada uma das tabelas do banco terá sua classe de entidade.

Figura 4.6: Diagrama de Classes de Entidades de banco de dados.

4.1.2. Gerando Páginas JSF de Classes de Entidade

Depois de criar as classes de entidade, podemos criar interfaces Web usando o
assistente de Páginas JSF de Classes de Entidade para gerar as páginas JavaServer Faces.
Para cada classe de entidade o assistente gera um Bean de sessão, um Bean gerenciado
com escopo de sessão JSF, um diretório com quatro arquivos de Facelets, os recursos
CRUD (Create.xhtml, Edit.xhtml, List.xhtml e View.xhtml). São gerados também os
seguintes arquivos:

 A classe AbstrateFacade.java que contém a lógica do negócio para a criação,
modificação, recuperação e remoção das instancias de entidade.
 A classe de utilitário usado pelos Beans gerenciados pelo JSF.
 Um conjunto de propriedades para mensagens localizadas e uma entrada
correspondente no arquivo de configuração Faces do projeto.
 Arquivos web auxiliares, incluindo uma folha de estilo (CSS) padrão para
componentes renderizados e um arquivo de modelo de Facelets.

4.1.3. Criação das Páginas JSF

Para isso, vamos à janela Projetos, clicamos com o botão direito do mouse no nó
do projeto e selecionamos Novo -> Paginas JSF de Classes de Entidade para abrir o
assistente. A caixa Classes de Entidade Disponíveis lista todas as classes que estão
contidas no projeto.

Figura 4.7: Criação das Páginas JSF através das classes de entidade.
Na etapa seguinte o assistente gera as Classes e as páginas JSF conforme a
imagem a seguir.

Figura 4.8: Gerando páginas e classes JSF.
Ao clicarmos em finalizar, vemos que o IDE gera os Beans de sessão, o escopo
de sessão e Beans gerenciados com JSF no pacote JSF.Classes. Cada Bean de sessão
manipula as operações da classe de Entidade a que pertence incluindo Criação, Edição, e
Destruição de instancias da classe de Entidade através da API de Persistência Java. Os
Beans gerenciados pelo JSF implementa a interface javax.faces.convert.
Se expandirmos o nó Páginas Web podemos observar que o NetBeans IDE gerou
uma pasta para cada uma das Classes de entidade, cliente e município. Cada uma destas
pastas contém os arquivos “Create.xhtml, Edit.xhtml, List.xhtml e View.xhtml”, tendo
modificado também o arquivo índex.xhtml, inserindo um link em casa uma das páginas
List.xhtml.

Ao expandir o nó Pacotes de Código-fonte vemos que os Beans de Sessão, os
Beans gerenciados pelo JSF, as classes de Utilitários (JSF.Classes.util) e o conjunto de
propriedades criadas pelo assistente.

Figura 4.9: Projeto completo com todas as classes que fazem parte do mesmo.

4.2. Explorando o Experimento I

Depois de concluirmos todas as etapas de criação do projeto podemos executa-
lo para observarmos as suas funcionalidades descritas em cada etapa. Vemos que o
projeto contém as classes de Entidades, Beans de Sessão para controlar essas classes e
um Front-end
12
desenvolvido para JSF para exibir e modificar Bancos de Dados.

Figura 5: Tela inicial do sistema.

Figura 5.1: Tela listar clientes cadastrados no banco de dados.

12
Termo generalizado que refere à etapa inicial de um processo.

Figura 5.2: Tela de edição de clientes e municípios.

Figura 5.3: Tela para ver cliente e município.

Figura 5.4: Tela criar novo cliente e município.

Para esse primeiro projeto, foi necessário um período de tempo médio de 2
horas para execução do mesmo recorrendo apenas aos Assistentes de Persistência para
geração das classes de Entidades de Banco de Dados que estão disponíveis no próprio
NetBeans IDE sem a necessidade de escrever grandes quantidades de linhas de código
Java. Etapa que contou apenas com a importação das tabelas (cliente e município) de
banco de dados MySQL (financeiro) para geração das classes e das páginas web, usando
JSF (JavaServer Faces) para criação desse projeto.

4.2.1. Vantagens

Uma das grandes vantagens em criar um projeto Java Web usando JSF e Banco
de dados é a produtividade na construção do sistema e economia de tempo.

Outra vantagem é que o desenvolvedor não necessariamente precisa ter um
conhecimento sólido em desenvolvimento web com Java para a execução do projeto
usando estas ferramentas, basta ter um bom conhecimento da ferramenta de
desenvolvimento NetBeans IDE para poder usufruir dos seus múltiplos recursos
disponíveis.

4.2.2. Desvantagens

A desvantagem encontrada é que apesar da economia de tempo e agilidade na
construção do sistema, os desenvolvedores não poderão fazer muitas alterações no
projeto pronto, visto que o mesmo conserva algumas propriedades que não podem ser
alteradas sem, no entanto mexer em todo o projeto.

4.3. Desenvolvimento do Experimento II usando
JavaScript, JSF e PrimeFaces

Neste capitulo descrevo as etapas de construção do segundo sistema web
denominado Experimento II, desenvolvido usando a linguagem JavaScript com os
frameworks JSF (JavaServer Faces) e PrimeFaces para páginas Web e também o Java
Persistence API (JPA) para gerar as classes de entidade a partir do banco de dados
MySQL.

Foi escolhido também para a criação desta aplicação web a ferramenta de
desenvolvimento NetBeans IDE, que funcionará em conjunto com o WampServer para
gerenciamento do servidor e o Workbench para gerenciamento de banco de dados. O
servidor escolhido para este sistema é o mesmo do anterior o GlassFish Server 4.0 e a
biblioteca PrimeFaces 5.1. Ao contrário daquilo que foi a construção do primeiro sistema
web, este terá a sua construção baseada também em linguagem de programação
JavaScript mas com a diferença de ter sido programada todas as páginas manualmente.
A aplicação oferece a possibilidade de inserir, listar e modificar dados contidos
no banco de dados. O desenvolvimento deste sistema segue o mesmo principio do
primeiro nas suas etapas iniciais usando o NetBeans IDE. Primeiramente abrimos o
NetBeans IDE e na janela Arquivo clicamos em Novo Projeto -> Java Web -> Aplicação
Web e clicamos em próximo, escolhemos um nome “ProjetoFinal – Experimento II”
para o projeto e clicamos em próximo. A seguir escolhemos um servidor (GlassFish
Server 4.0) para o projeto, clicamos em próximo e escolhemos um framework (JSF –
JavaServer Faces) que será usado no projeto e clicar em finalizar.
Depois disso fazemos o download do arquivo da biblioteca PrimeFaces 5.1 no
próprio site da PrimeFaces (http://www.primefaces.org) e o importamos na raiz do
projeto. Posto isso, vamos à pasta Páginas Web no nó do projeto em questão e criamos
quatro arquivos (índex, template, gerenciador de carros e gerenciador de usuários)
xhtml
13
(eXtensible Hypertext Markup Language – ou em português Linguagem de
marcação de hipertexto extensível), para gerenciar a interface de usuário do sistema
como na figura seguinte.

13
É uma reformulação da linguagem de marcação HTML, baseada em XML.
http://www.primefaces.org/
https://pt.wikipedia.org/wiki/Linguagem_de_marca%C3%A7%C3%A3o
https://pt.wikipedia.org/wiki/HTML
https://pt.wikipedia.org/wiki/XML

Figura 5.5: Tela principal do projeto no Netbeans.

A seguir criamos os Pacotes de Código-fonte que compõem o sistema e suas
classes correspondentes um por vez. Desse conjunto de pacotes de Código-fonte do
sistema fazem parte os pacotes, bean, conexão, dao, entidade e util.exception, e em cada
pacote estão as suas classes correspondentes, conforme a figura abaixo.

Figura 5.6: Pacotes de Código-fonte do sistema.

Depois de termos todas as classesprontas, criamos o banco de dados “sistema”
e estabelecemos a conexão com o banco através da classe “Conexao.java” do pacote
conexão. Essa conexão é feita usando o driver JDBC
14
(Java Database Connectivity).
Estabelecida a conexão podemos executar o projeto e explorar as suas funcionalidades
para verificar o desempenho e facilidade de comunicação com banco de dados MySQL e
fazer uma comparação com o sistema anterior mediante o uso de PrimeFaces.

14
Conjunto de classes e interfaces escritas em Java que enviam instruções SQL para qualquer banco
de dados relacional.

4.3.1. Explorando o Experimento II

Nesta etapa vamos conferir as funcionalidades da aplicação, e testar todas as
componentes desenvolvidas. A imagem a seguir refere-se a tela da página inicial do
sistema. É uma pagina simples que contém apenas três campos “Home, Gerenciar Carros
e Gerenciar Usuários”, para além do nome do sistema e uma mensagem de boas vindas.
A moldura da interface e a criação do estilo e tipo de letras, foram gerados
automaticamente pelo PrimeFaces sem a necessidade de recorrer a folhas de estilos CSS
(Cascading Style Sheets).

Figura 6: Tela principal do sistema.

A figura seguinte nos mostra a tela “Gerenciar Carros”. Neste campo temos as
opções de criar um novo objeto carro, buscar objetos cadastrados em banco de dados,
assim como editar e deletar objetos que são operações básicas do banco de dados.

Figura 6.1: Gerenciador de carros.

O mesmo se sucede com a imagem a seguir onde temos o campo “Gerenciador de
Usuários”.

Figura 6.2: Gerenciador de usuários.

A construção desse sistema foi um pouco mais demorada, foram cerca de dois
dias, mais ou menos, para inicio e conclusão do sistema, isto porque era preciso um
pouco mais de trabalho e experiência em desenvolvimento JavaScript. Foi necessário
recorrer a algumas bibliografias de apoio e principalmente o tutorial do PrimeFaces 5.1.

4.3.2. Vantagens

Para o desenvolvimento de um sistema Java Web usando JSF e PrimeFaces temos
vantagens de aumento da produtividade na construção dos sistemas por parte do
desenvolvedor. Os sistemas desenvolvidos usando a ferramenta PrimeFaces são mais
sofisticados, flexíveis e personalizáveis e possui grande opção de componentes para
diversas finalidades. Também possui melhor performance com relação ao desempenho
dos navegadores utilizados.

4.3.3. Desvantagens

Criação de uma aplicação web com Java usando o framework PrimeFaces requer
um conhecimento mais sólido em desenvolvimento. O PrimeFaces apesar de gerar um
aumento de produtividade, ele requer um tempo maior na construção de sistemas. A
documentação do PrimeFaces não é muito elucidativa.

5. Conclusão e Trabalhos Futuros
Este projeto teve como objetivo o desenvolvimento dois sistemas Web que
comunicasse com Banco de Dados, usando a linguagem de programação JavaScript com
os frameworks JavaServer Faces (JSF) e PrimeFaces no sentido de destacar as vantagens
e desvantagens da utilização do PrimeFaces na construção de sistemas, fazendo assim
uma analise de alguns pontos importantes e verificação de comparações com os
frameworks utilizados na construção desses sistemas.
Foram utilizadas como motivação para elaboração deste projeto as dificuldades
encontradas na construção de aplicações web por parte de desenvolvedores com pouca
experiência e produtividade na construção de sistemas usando frameworks disponíveis.
Mesmo que o sistema não tenha sido disponibilizado online de modo a ser obter dados
mais sucintos, ainda assim, foi possível fazer uma analise dos seus pontos mais críticos.
As funcionalidades dos sistemas foram testadas e comparadas entre si, mediante o uso
dos frameworks em questão.
Foram analisados tempos de duração para a construção de cada sistema,
complexidades de criação de cada sistema, produtividade na construção e agilidade na
construção dos sistemas através dos frameworks JavaServer Faces e PrimeFaces. O
tempo gasto para a construção do primeiro sistema “ProjetoFinal-Experimento I” foi
bem menor que o tempo para criar o segundo “ProjetoFinal-Experimento II”, isto devido
a metodologia e framework empregado no desenvolvimento dos mesmos. Os
frameworks tornaram fácil o desenvolvimento desses sistemas, mostrando serem ótimas
opções para a redução de tempos, custos e aumentar a produtividade por parte das
equipes de desenvolvimento.

Os sistemas foram desenvolvidos para rodar tanto num servidor local (localhost)
como na web e registrou um ótimo desempenho, possibilitando rápido acesso ao banco
de dados e a realização das operações CRUD. A plataforma para desenvolvimento desses
experimentos foi toda ela configurada num notebook com sistema operacional Windows
10 de 64 Bits com 4 GB de Memória RAM e um Processador Intel Core i3 e também
num Computador Desktop com Windows 10, 64 Bits, 8 GB de Memória RAM e
Processador Intel Core i3 e teve um ótimo desempenho respondendo a todas operações
solicitadas de forma rápida e concisa.
Como trabalhos futuros, proponho a construção dos mesmos sistemas usando o
framework AngularJS e a Metodologia Ágil SCRUM, a utilização do processo de
engenharia de software RUP (Rational Unified Process), e buscar outras linguagens que
permitem fazer CRUD usando técnicas similares. Fazer uma pesquisa de levantamento
da utilização dos frameworks por parte dos desenvolvedores.

6. Referências Bibliográficas
[1] IAN SOMMERVILLE. Desenvolvimento Ágil. Engenharia de Software 8ª Edição, 2010.
[2] ROGER. PRESSMAN, B. MAXIM. Extreme Programming – XP: Engenharia de Software 8ª
Edição (2016). Página 72.
[3] Extreme Programming (XP): Disponível em: http://www.devmedia.com.br/introducao-ao-
extreme-programming-xp/2924.9: Acesso em 07 de Janeiro de 2017.
[4] Desenvolvimento Ágil. Disponível em: http://www.desenvolvimentoagil.com.br/xp/: Acesso
em 08 de Janeiro de 2017
[5] D. PEDRO, D. VIEIRA. Metodologia Scrum. Disponível em:
http://www.mindmaster.com.br/scrum/: Acesso em 08 de Janeiro de 2017.
[6] N. IONEL, 2008.: Critical Analysys of the SCRUM Project Management Methodology
[7] E.S. F. Cardozo, J. B. F. A. Neto, A. Barza, A. C. França, F. Q. B. da Silva.: SCRUM and
Productivity in Software Projects: A Systematic Literature Review.

[8] ELMASRI, NAVATHE, 2005: Sistema de Banco de Dados, 4ª Edição.

[9] DÉCIO. H. LUCKOW, ALEXANDRE. A. MELO: Programação JAVA Para a Web (2010).
[10] PAUL DEITEL, HARVEY DEITEL. Java Como Programar, 8ª Edição, 2010.

[11] NetBeans IDE, Sun Systems. Disponível em: https://netbeans.org/. Acesso em 15 de Janeiro
de 2017.

[12] WampServer, SourceForge. Disponível em: http://www.wampserver.com/en/, e
https://sourceforge.net/projects/wampserver/?source=directory. Acesso em 15 de Janeiro de 2017.

[13] MySQL WorkBench. Disponivel em: http://www.mysql.com/products/workbench/. Acesso
em 15 de Janeiro de 2017.
[14] FLANAGAN, David; FERGUSON, Paula. JavaScript: The Definitive Guide. 6th ed.
O'Reilly & Associates.

[15] PrimeFaces. Disponivel em: http://www.primefaces.org/. Acesso em 15 de Janeiro de 2017.

[16] BRAD GREEN, SHYAM SESHADRI. AngularJS.

[17] BRANAS, Rodrigo. AngularJS Essentials, Agosto 2014.

[18] AngularJS. Disponível em: http://angularjs.org. Acesso em 17 de Janeiro de 2017.

http://www.devmedia.com.br/introducao-ao-extreme-programming-xp/2924.9
http://www.devmedia.com.br/introducao-ao-extreme-programming-xp/2924.9
http://www.desenvolvimentoagil.com.br/xp/
http://www.mindmaster.com.br/scrum/
https://netbeans.org/
http://www.wampserver.com/en/
https://sourceforge.net/projects/wampserver/?source=directory
http://www.mysql.com/products/workbench/
http://www.primefaces.org/
http://angularjs.org/47

Apêndice I
1 – Classe Java para conexão com um banco de dados.

#ConexaoMySQL.java
package Conexao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class ConexaoMySQL {
public static void main(String[] args){
Connection conexao = null;
try{
//Registrar a classe JDBC no sistema em tempo de execução.
String url = “jdbc:mysql://localhost/banco”;
String usuario = “root”;
String senha = “root”;
Conexao = DriverManager.getConnection(url, usuario, senha);
System.out.println(“Conectou ao banco!”);
}catch(SQLException e) { // Captura exceções sempre que ocorrer.
System.out.println(“Ocorreeu um erro de SQL. Erro: ” +
e.getMessage());
}finally{
try{
conexao.close();
}catch (SQLException e){
System.out.println(“Erro ao fechar a conexão. Erro ” +
e.getMessage());
}
}
}
}
Resultado: Conectou ao banco!