V.

2 No 1, agosto, 2013

64

FORMBUILDER: FRAMEWORK PARA GERAO

AUTOMTICA DE TELAS PRIMEFACES COM BASE EM
ANOTAES
Silvano Lohn1, Adilson Vahldick1, 2
1

Universidade Regional de Blumenau (FURB) Blumenau/SC - Brasil

Departamento de Sistemas de Informao UDESC Ibirama/SC Brasil

silvano.lohn@gmail.com, adilson.vahldick@udesc.br

Resumo
Este artigo apresenta o framework FormBuilder, desenvolvido para automatizar a gerao de
telas PrimeFaces e agilizar o desenvolvimento de aplicaes Web. O framework gera trs tipos
de componentes: boto, caixa de edio e caixa de marcao, que sero gerados com base em
anotaes declaradas nas classes de controle desenvolvidas pelo usurio, a ligao entre a classe
de controle e a pgina web ser realizada atravs de uma tag JSF customizada. No final do artigo
apresentada uma aplicao exemplo que utiliza o framework desenvolvido.
Palavras-chave: Framework. Gerador de Tela. Java. JSF. PrimeFaces.
Abstract
This article presents the framework FormBuilder, developed to automate the generation of
screens PrimeFaces and expedite the development of Web applications. The framework
generates three types of components: button, edit box and check box, that will be generated
based on annotations declared in control classes developed by the user, the connection between
the control class and the web page will be accomplished through a custom tag JSF. In the end of
the article is displayed a example application that uses the framework developed.
Keywords: Framework. Screen Generator. Java. JSF. PrimeFaces.
1. Introduo
Em constante crescimento, a Internet est cada vez mais presente na vida das pessoas ao redor do
mundo, diversificando seu uso e afetando diversos aspectos da vida cotidiana dos usurios
domsticos, indstria, comrcio e educao. Hoje diversos setores que realizam seus negcios e
operaes na Internet esto migrando e criando novos sistemas para o ambiente web, suas
funcionalidades e contedo passam por mudanas constantes exigindo um grande esforo das
equipes de desenvolvimento.
Segundo Gimenes et al. (2005), um dos principais objetivos da Engenharia de Software o
reuso de cdigo. Atravs da reutilizao de software obtm-se o aumento da qualidade da
aplicao e a reduo do esforo de desenvolvimento, para isso, utilizam-se componentes de
software, que so unidades reutilizveis que oferecem servios atravs de interfaces bem
definidas.
Horstmann (2007) define um framework sendo um conjunto de classes cooperativas que
implementam os mecanismos que so essenciais para um domnio de problemas especficos,
provendo funcionalidades comuns e adicionais para o desenvolvimento dos mdulos da
aplicao.
Os principais benefcios da utilizao de frameworks, segundo Sommerville (2007), advm da
modularidade, reusabilidade e extensibilidade que os frameworks proporcionam. Frameworks
encapsulam detalhes de implementao volteis atravs de seus pontos de extenso, interfaces
estveis e bem definidas, aumentando a modularidade da aplicao. Os locais de mudanas de

V. 2 No 1, agosto, 2013

65

projeto e implementao da aplicao construda usando o framework so localizados,

diminuindo o esforo para entender e manter a aplicao.
Pensando no reuso de cdigo e o aumento da produtividade do desenvolvimento proposto
neste trabalho o desenvolvimento de um framework chamado FormBuilder. O framework
proposto dividido em trs partes principais: uma tag JSF customizada, que realiza a ligao da
pgina web do usurio com a classe de controle, as anotaes que sero declaradas pelo usurio
em suas classes de controle e um motor que far a leitura das anotaes definidas, gerando os
componentes na pgina web. O framework realiza a gerao de trs tipos de componentes de
interface: boto, caixa de edio e caixa de marcao, estes foram os escolhidos por estarem
presentes na maioria dos formulrios. Abaixo ser demonstrado detalhadamente cada
componente do framework e uma aplicao exemplo demonstrando a utilizao da tag
customizada, as anotaes e a pgina gerada.
A seguir ser apresentada a arquitetura do framework FormBuilder, os componentes
desenvolvidos e uma aplicao exemplo, que demonstra a utilizao do framework desenvolvido.
2. JSF e PrimeFaces
Segundo Geary (2010), JavaServer Faces (JSF) uma especificao e uma implementao de
referncia de um framework para o desenvolvimento de aplicaes web. O JSF foi criado para
facilitar de maneira significativa, a escrita e manuteno de aplicaes que rodam em um Java
Application Server e apresentam suas interfaces de usurio de volta para um cliente especifico.
Caliskan (2013) menciona que o PrimeFaces um framework de componentes utilizado para
auxiliar no desenvolvimento e elaborao de interfaces de sistemas web que utilizam tecnologia
JSF. O framework PrimeFaces oferece cerca de 100 componentes de interface, sendo todos
personalizados e de cdigo fonte aberto. A utilizao deste framework permite uma infinita gama
de possibilidades na utilizao de layouts e mais de 30 temas para personalizao da interface,
estes de fcil incluso e alterao durante o desenvolvimento e o uso da aplicao.
3. Arquitetura do Framework
No desenvolvimento deste trabalho foram utilizados os frameworks, citados no item 2, a unio
na utilizao destes frameworks trouxe uma maior velocidade no desenvolvimento do framework
FormBuilder. Abaixo apresentado os componentes desenvolvidos.
3.1. Anotaes
Chisty (2009) informa que anotaes so meta-tags que podem ser adicionadas ao cdigo-fonte
Java, no alterando de nenhuma forma a execuo do programa, mas possibilitando que em
tempo de execuo suas propriedades sejam acessadas pela aplicao. Anotaes podem ser
utilizadas em diversas situaes: registro de logs, testes unitrios, documentao, gerao de
cdigo e suporte para os componentes de uma classe.
No framework foram desenvolvidas as anotaes Component, Model e Button, que sero
declaradas pelo usurio em suas classes de controle, definindo assim os componentes que sero
gerados na tela. Abaixo apresentada cada uma das anotaes.
3.1.1. Anotao Button
A anotao Button deve ser definida nos mtodos das classes de controle do usurio. Na tela
gerada ser apresentado ao usurio um boto. Se o mesmo for pressionado o mtodo que foi o
alvo da anotao ser executado. Essa anotao exige que o usurio defina no parmetro caption

V. 2 No 1, agosto, 2013

66

o texto que ser apresentado no boto gerado. A Figura 1 apresenta a utilizao da anotao
Button.

Figura 1 Utilizao da anotao Button

3.1.2. Anotao Component

A anotao Component deve ser definida nos atributos da classe de controle. Dois parmetros
devem ser configurados pelo usurio na utilizao desta anotao: o parmetro label ir definir o
texto que ser apresentado junto ao componente gerado, e o parmetro type define qual o tipo do
componente ser gerado: INPUT (caixa de edio) ou CHECKBOX (caixa de marcao). A
Figura 2 apresenta a utilizao da anotao Component.

Figura 2 Utilizao da anotao Component

3.1.3. Anotao Model

A anotao Model deve ser utilizada quando o usurio deseja gerar componentes para uma classe
de modelo, para isso a classe de modelo deve estar declarada na classe de controle do usurio.
Essa anotao possui um nico parmetro chamado value, esse parmetro um array de
anotaes do tipo Component, dessa forma o usurio poder declarar na anotao Model vrios
atributos da classe de modelo. Quando a anotao Component utilizada em conjunto com a
anotao Model o parmetro attribute deve ser declarado na anotao Component, neste
parmetro deve ser informado o nome do atributo da classe de modelo que ser utilizado para a
gerao do componente. A Figura 3 apresenta a utilizao da anotao Model.

Figura 3 Utilizao da anotao Model

3.2. Tag formBuilder

Foi criada uma tag customizada chamada formBuilder que ser utilizada para apresentar os
componentes gerados na pgina web do usurio. A tag desenvolvida utilizando Facelets que,
segundo Oracle (2012), uma linguagem leve e poderosa de declarao utilizada para construir
templates de pginas e componentes customizados, e dessa forma sendo possvel reduzir o tempo
e o esforo dispensado para realizao do desenvolvimento de interfaces web. A linguagem
Facelets est inclusa no framework JSF a partir da verso 2.0.
A declarao de uma tag customizada Facelets realizada atravs de um arquivo XML. A
Figura 4 apresenta a declarao da tag formBuilder.

V. 2 No 1, agosto, 2013

67

Figura 4 Declarao da tag formBuilder

Na linha 6 da Figura 4 declarado o namespace da tag customizada. atravs do namespace

que uma tag diferenciada de outras tags, e dessa forma no acontece conflitos entre bibliotecas
de componentes diferentes que podem ser utilizadas no desenvolvimento de um mesmo projeto
JSF. Na linha 8 definido o nome da tag, e neste caso formBuilder. Na linha 9 definida a classe
que far a manipulao deste componente. Na linha 11, declarado o atributo managedBean que
ser utilizado pelo usurio para informar qual a classe de controle foi utilizada para a declarao
das anotaes.
3.3. Motor Gerador de Telas
A classe FormBuilder que realiza a manipulao da tag desenvolvida tambm foi utilizada para
servir como motor gerador de telas: ela que far a leitura da classe de controle do usurio,
procurando as anotaes declaradas e gerando os respectivos componentes de interface.
Durante a execuo da aplicao, para a tag formBuilder declarada em uma pgina web, ser
criada uma instncia da classe FormBuilder. A Figura 5 apresenta o construtor da classe
FormBuilder.

Figura 5 Construtor da classe FormBuilder

Na linha 36 realizada a leitura da propriedade managedBean que foi declarada na tag. Na

linha 39 criado um painel onde sero inseridos todos os componentes de interface gerados pelo
motor. Toda vez que a pgina web onde a tag est declarada sofre alguma atualizao, o mtodo
apply da classe FormBuilder, apresentado na Figura 6, executado.

V. 2 No 1, agosto, 2013

68

Figura 6 Mtodo apply da classe FormBuilder

O mtodo getManagedBean, executado na linha 50, retorna um objeto referente classe de

controle que foi declarada na tag formBuilder. A funo parserFields, executada na linha 53,
realiza o parser dos campos da classe de controle, procurando as anotaes Component e Model.
Na linha 55 executado o mtodo parserMethods que realiza o parser dos mtodos da classe de
controle procurando por anotaes Button. Todos os componentes gerados sero inseridos em um
painel, inicialmente acontece a gerao dos componentes de caixa de edio e caixa de
marcao, o componente ser gerado seguindo a ordem em que as anotaes foram definidas na
classe de controle, em seguida acontece a gerao dos botes, que sero inseridos no final do
painel. A Figura 7 apresenta o mtodo parserFields.

Figura 7 Mtodo parserFields

O mtodo parserFields busca todos os campos declarados na classe de controle. Em seguida,

cada campo da classe verificado se o mesmo foi alvo das anotaes Component ou Model. Para
cada anotao Componet encontrada o mtodo parserComponent ser executado. A Figura 8
apresenta o mtodo parserComponent.

Figura 8 Mtodo parserComponent

V. 2 No 1, agosto, 2013

69

Na linha 79 do mtodo parserComponent criado um label referente ao componente que ser

gerado, na linha 80 verificado qual o tipo de componente o motor dever gerar. A Figura 9
apresenta o mtodo parserMethods, esse mtodo realiza a busca das anotaes Button nos
mtodos da classe de controle. Um boto ser gerado se o mtodo foi alvo da anotao Button.

Figura 9 Mtodo parserMethods

A Figura 10 apresenta o mtodo que realiza a gerao da caixa de edio. Na linha 130
criada a expresso que faz a ligao do componente com o atributo que foi o alvo da anotao na
classe de controle. Dessa forma, toda vez que a pgina sofrer uma atualizao, o valor do
atributo ser apresentado no componente gerado. Todo componente gerado deve possuir um
identificador nico. Na linha 132 atribudo o identificador ao componente, que gerado
realizando a concatenao do nome informado no managedBean e o nome do atributo da classe
referente ao componente gerado.

Figura 10 Gerao da caixa de edio

A Figura 11 apresenta o mtodo que realiza a gerao da caixa de marcao. Da mesma forma
que o campo de edio, criada a expresso que realiza a ligao do componente com o atributo
da classe que foi o alvo da anotao e a gerao do seu identificador.

Figura 11 Gerao da caixa de marcao

A Figura 12 apresenta o mtodo que realiza a gerao do boto. Na linha 139 atribudo ao
boto o nome que foi definido na propriedade caption da anotao Button. Na linha 141
atribuda uma ao ao boto que realiza a execuo do mtodo que foi alvo da anotao toda vez
que o boto gerado for pressionado.

V. 2 No 1, agosto, 2013

70

Figura 12 Gerao do boto

A Figura 12 apresenta o mtodo que realiza a gerao do boto. Na linha 139 atribudo ao
boto o nome que foi definido na propriedade caption da anotao Button. Na linha 141
atribuda uma ao ao boto que realiza a execuo do mtodo que foi alvo da anotao toda vez
que o boto gerado for pressionado.
4. Trabalhos Correlatos
Um dos principais frameworks para gerao de interface com base nos objetos de controle ou
modelos da aplicao o framework Apache Isis. Segundo Apache (2013), ele um framework
Java utilizado para o desenvolvimento rpido de aplicaes orientadas a domnio, os
desenvolvedores definem objetos de domnio seguindo convenes e anotaes, o framework
interpreta estes dados e faz a gerao da apresentao e a persistncia dos dados da aplicao.
O Quadro 1 apresenta a comparao entre as principais funcionalidades dos frameworks
FormBuilder e Apache Isis.
Principais Funcionalidades
FormBuilder
Configurao de validaes e componentes via anotaes
Gerao de componentes de interface via anotaes
X
Framework desenvolvido em Java e de cdigo aberto
X
Possui camada de persistncia e segurana
Possui integrao com jUnit
Reutilizao de pginas para gerao automatizada de componentes
X
Quadro 1 Comparao de funcionalidades

Apache Isis
X
X
X
X
X

5. Aplicao Exemplo
Para demonstrar a utilizao do framework, foi desenvolvida uma aplicao exemplo dividida
em trs partes: a pgina XHTML, onde estar declarada a tag formBuilder; a classe de controle,
onde ser declarada as anotaes; e a classe de modelo. Nas prximas sees sero apresentados
cada um desses artefatos.
5.1. Pgina XHTML
A Figura 13 apresenta a pgina XHTML que far a exibio dos componentes gerados. Na linha
9 declarado o namespace referente a tag desenvolvida. Na linha 16 est declarada a tag
formBuilder.

V. 2 No 1, agosto, 2013

71

Figura 13 Declarao da pgina XHTML

A ligao entre a tag formbuilder e a classe de controle realizada atravs do parmetro

managedBean da tag. Na classe de controle deve-se declarar a anotao ManagedBean, o valor
informado no parmetro name da anotao dever ser o mesmo utilizado no parmetro
managedBean da tag formBuilder. A Figura 14 apresenta a declarao da anotao
ManagedBean da classe de controle.

Figura 14 Declarao da anotao ManagedBean na classe de controle

5.2. Classe de Controle

A figura 15 apresenta a classe de controle CarroController. Nesta classe foi realizada a
declarao da anotao ManagedBean conforme citado no item 5.1. As anotaes declaradas na
classe de controle sero utilizadas para gerao dos componentes. Na linha 15 declarada a
anotao Model, onde a mesma possui a declarao das anotaes Component que foram
utilizadas para referenciar os campos da classe de modelo CarroModelo. Na linha 23 realizada
a declarao da anotao Component referenciando o campo quantidade que faz parte da prpria
classe de controle. Como citado no item 3.1.2 este tipo de declarao no utilizada o parmetro
attribute da anotao Component.

V. 2 No 1, agosto, 2013

72

Figura 15 Classe de controle

A Figura 16 apresenta as declaraes da anotao Button que tiveram como alvo os mtodos
excluirCarro, editarCarro e cadastrarCarro declarados na classe de controle.

Figura 16 Declarao das anotaes Button

5.3. Classe de Modelo

A Figura 17 apresenta a classe CarroModelo, os atributos marca, modelo, ano e usado desta
classe foram referenciados pela anotao Model declarada na classe de controle, dessa forma,
cada atributo referenciado na anotao ter um componente prprio gerado na pgina XHTML.

Figura 17 Classe de modelo

V. 2 No 1, agosto, 2013

73

5.4. Pgina Gerada

A Figura 18 apresenta a pgina gerada com base nas anotaes declaradas na classe de controle
CarroController. Pode-se verificar que os valores dos atributos que foram inicializados no
construtor da classe foram apresentados em seus respectivos componentes na pgina gerada.

Figura 18 Pgina gerada

6. Consideraes Finais
Um bom framework deve fornecer interfaces bem definidas para que o seu cdigo seja
reutilizado por outras aplicaes. Sem a utilizao do framework PrimeFaces para a gerao dos
componentes de interface no seria possvel desenvolver o framework FormBuilder no tempo
disponvel.
O desenvolvimento deste trabalho mostrou que possvel criar um framework capaz de gerar
pginas web com tecnologias JSF e PrimeFaces. Mesmo realizando a gerao de apenas trs
tipos de componentes, a arquitetura do framework possibilita o desenvolvimento de novas
anotaes e a gerao de outros componentes PrimeFaces realizando poucas modificaes no
framework.
Os principais objetivos para adoo dos frameworks nas empresas o ganho da produtividade
e a qualidade final das aplicaes desenvolvidas. possvel notar no desenvolvimento da
aplicao exemplo como fcil e rpido construir uma pgina de apresentao, um
desenvolvedor sem grandes conhecimentos em JSF e PrimeFaces consegue declarar as anotaes
em suas classes de controle gerando uma pgina web sem dificuldades.
Optou-se em no gerar pginas XHTML completas e realizar somente o processamento da tag
formBuilder, dessa forma o desenvolvedor consegue definir outros componentes PrimeFaces n
pgina XHTML que no existem referncias nas classes de controle, o desenvolvedor tambm
poderia reutilizar pginas j existentes, inclundo somente a tag formBuilder para
processamento. A forma utilizada no traz problemas de performance, tendo em vista que todos
os componentes JSF so processados da mesma forma, a tag formBuilder tratada como um
simples painel onde adicionado os componentes gerados.
Abaixo segue alguns recursos no presentes no framework desenvolvido que podem ser
implementados:
Desenvolver novas anotaes e a gerao de outros componentes de interface como
tabelas, grades, listas, caixa de mensagens e dilogos;
Desenvolver anotaes que definem formatos de layout para gerao das telas;

V. 2 No 1, agosto, 2013

74

Criar novos parmetros para as anotaes definindo propriedades dos componentes

como tamanho e cor;
Desenvolver recursos para validao de campos e apresentao de mensagens;
Desenvolver mecanismos para gerao de componentes de interface de outros
frameworks como o RichFaces e IceFaces.
No desenvolvimento do framework foi utilizada a IDE Eclipse Indigo e o servidor de
aplicao GlassFish 3.1.2. Os cdigos fontes utilizados no desenvolvimento do framework e da
aplicao exemplo esto disponveis no endereo: https://github.com/silvano-lohn/FormBuilder.
Referncias
APACHE. Apache Isis. 2013. Disponvel em: <http://isis.apache.org>. Acesso em 25 julho
2013.
CALISKAN, Mert; VARAKSIN, Oleg. PrimeFaces Cookbook. Birmingham: Packt, 2013.
CHISTY, M. M. I. An Introduction to Java Annotations. 2009. Disponvel em:
<http://www.developer.com/java/other/article.php/3556176/An-Introduction-to-JavaAnnotations.htm>. Acesso em: 28 maio 2013.
GEARY, David; HORSTMANN, Cay S. Core JavaServer Faces. Saddle River: Prentice Hall,
2010.
GIMENES, I. M. S, HUZITA, E. H. M. Desenvolvimento baseado em componentes: conceitos
e tcnicas. So Paulo: Cincia Moderna, 2005.
HORSTMANN, Cay S. Padres e projeto orientados a objetos. 2. ed. So Paulo: Bookman,
2007.
JACOBI, Jonas; FALLOWS, John. Pro JSF e Ajax: construindo componentes ricos para a
internet. Rio de Janeiro: Cincia Moderna, 2007.
ORACLE. The Java EE 6 Tutorial. Redwood City, 2013. Disponvel
<http://docs.oracle.com/javaee/6/tutorial/doc/gijtu.html>. Acesso em 28 maio 2013.

em:

SOMMERVILLE, Ian. Engenharia de software. 8. ed. So Paulo: Pearson, Prentice Hall, 2007.