Análise das Tecnologias JSF2/PrimeFaces e JavaFX para a Criação de Interfaces Ricas para Internet

Transcrição

1 ISSN T.I.S. São Carlos, v. 3, n. 2, p , mai-ago 2014 Tecnologias, Infraestrutura e Software Análise das Tecnologias JSF2/PrimeFaces e JavaFX para a Criação de Interfaces Ricas para Internet Resumo: Com o avanço contínuo das tecnologias para internet, bem como a proporcional demanda de aplicações que, além de bem desenhadas, também ofereçam características ricas de interação para o gerenciamento da informação, são necessárias ferramentas que permitem, com agilidade, o desenvolvimento de aplicações com tais funcionalidades. Este trabalho apresenta um estudo de caso evidenciando as diferenças de implementação utilizando a tecnologia JSF com a coleção de componentes PrimeFaces e a plataforma JavaFX para a criação de interfaces de internet ricas. Foi utilizada neste estudo de caso uma interface de cadastro simples integrada a uma aplicação de gerenciamento de páginas de eventos. Palavras-Chave: Java FX, Java Server Faces, RIA, aplicações para internet ricas Analysis ofjsf2/primefaces and JavaFX for creating rich internet interfaces Abstract: The continuous advances of internet technology, as well as the proportional demand for well-designed applications which provide rich interaction features for managing information are necessary tools that allow the development of applications with such functionalities. This work presents a study case aiming at demonstrating the differences in implementations using JSF technology while using a collection of components from PrimeFaces and JavaFX platforms to create rich internet interfaces. This study case used a simple register interface integrated with an application that manages sites ofevents. Keywords: JavaFX, JavaServer Faces, RIA, Rich Internet Applications I. INTRODUÇÃO Com a evolução das tecnologias de processamento e transferência de dados, bem como a utilização de equipamentos mais robustos, a exigência pela agilidade na disponibilização de informação cresceu em mesma escala. Os dados que antes eram disponibilizados unicamente em redes internas das instituições, hoje são exigidos a qualquer hora, em qualquer lugar e com agilidade. A informação passou a ser disponibilizada em qualquer dispositivo que possua uma conexão com a internet, em qualquer lugar do mundo. Como consequência, a exigência por mecanismos capazes de disponibilizar estes dados de maneira rápida, rica, direta e com equivalência de interação, fez com que surgisse uma gama de aplicações que visam aumentar a interação com o usuário e que podem ser executadas em qualquer tipo de dispositivo. Estas aplicações, conhecidas pela sigla RIA (Rich Internet Application), ou aplicações para internet ricas permitem ao usuário uma interação com o sistema com características semelhantes a sistemas desktop, porém sendo executadas em uma plataforma web e integradas a algum navegador. Para isto, foram disponibilizados frameworks e linguagens de programação que visam aumentar o rendimento do processo de desenvolvimento ao mesmo tempo em que oferecem ferramentas para a elaboração de interfaces com características próximas às aplicações desktop. A tecnologia JavaServer Faces (JSF) possibilita a criação de componentes de interface com usuário em formulários que são exibidos em páginas XHTML. Sua flexibilidade permite acoplar coleções de componentes que potencializam a sua utilização e oferecem novas possibilidades de interação. A plataforma JavaFX permite a criação de aplicações que são executadas utilizando a máquina virtual Java tanto em ambiente desktop como também na web e oferece como vantagem uma integração completa com a linguagem de programação Java. A demanda por métodos ágeis de desenvolvimento exige que se encontre uma maneira eficiente para a criação de aplicações, buscando a padronização, reuso e qualidade na entrega do produto final. Para tal, é necessário conhecer os meios disponíveis e suas características para que se possa determinar a melhor ferramenta a ser utilizada. Este trabalho apresenta a comparação de duas tecnologias com uma visão ampla de suas características, o que favorece a escolha em sua utilização. Departamento de Computação - Universidade Federal de São Carlos (UFSCar) Caixa Postal São Carlos SP Brasil Autor para correspondência: leilsonjau@hotmail.com, ivan@dc.ufscar.br

2 Análise das Tecnologias JSF2/PrimeFaces e JavaFX para a Criação de Interfaces Ricas para Internet II. APLICAÇÕES RICAS PARA INTERNET As ideias a respeito da utilização de páginas na internet evoluíram muito no decorrer do tempo. O que antes era apenas a disponibilização de informações que poderiam ser acessadas em qualquer lugar do mundo, passou ao patamar de aplicação que interage dinamicamente com o usuário e se comunica com servidores de banco de dados, próximos ou não geograficamente. As páginas web convencionais encontraram grandes dificuldades para suprir esta necessidade, visto que todo o processamento das lógicas da aplicação acontecia no lado servidor e a cada atualização, a página inteira deveria ser redesenhada, causando uma perceptível perda de desempenho. Segundo Dea (2011), dependendo a quem se dirija o questionamento, provavelmente receberá diferentes definições de "experiência do usuário", mas um fato que permanece é que os usuários irão sempre exigir melhores conteúdos e aumento da usabilidade de aplicações GUI (acrônimo para Graphical User Interface). À luz deste fato, os desenvolvedores e designers geralmente trabalham juntos para criar aplicativos para atender a esta demanda. Para suprir esses problemas de desempenho e as necessidades de interação e agilidade, foi proposta uma abordagem de aplicações com mais funcionalidades e complexidades, chamada de Aplicações Ricas para Internet (RIA Rich Internet Application), termo introduzido pela Macromedia, fazendo menção à unificação de aplicações desktops com aplicações Web, conforme Bozzon1 (2006) apud Rocha (2010). Uma aplicação RIA deve ser capaz de apresentar uma interface bem desenhada e que permita que o usuário realize tantas quanto forem as interações possíveis que ele teria em uma aplicação desktop, utilizando formulários com componentes dinâmicos como listas ordenadas, listas de seleção e estruturas em árvore, por exemplo, e além disso, também consiga utilizar artifícios de mídia como áudios e vídeos, e com desempenho satisfatório. Segundo Rocha (2010), uma aplicação RIA pode ser entendida como união das melhores características de um sistema desktop, de uma aplicação web e de tecnologias de comunicações. De um software desktop, se utiliza a grande interatividade por meio de componentes de formulário que se atualizam conforme as ações tomadas pelo usuário, realizam validações e recarregam dados sem a necessidade de recarga do formulário todo, além da possibilidade de tratar eventos de teclado e mouse como cliques e eventos de arrastar e soltar. Das aplicações web utiliza-se a possibilidade de acesso em qualquer lugar a qualquer tempo, visto que podem ser executadas em clientes (browsers) disponíveis como padrão em qualquer computador. As tecnologias de comunicações participam com a utilização de áudios, vídeos e demais recursos multimídia simultaneamente. Conforme Duhl2 (2003) apud Rocha (2010), seguindo estes conceitos encontramos o cenário perfeito para uma aplicação: unir 1 BOZZON, A., et al.; Conceptual Modeling and Code Generation for Rich Internet Applications. ICWE. Palo Alto, EUA, Jul design, dinamismo, interatividade, multimídia e desempenho, tudo isso sendo executado em um cliente padrão. Conforme Bozzon (2006) apud Rocha (2010) são características de sistemas RIA a diminuição da comunicação com o servidor, a capacidade de comunicação com diversas camadas de negócio diferentes, a capacidade de execução que não comprometa o bom funcionamento tanto em conexões rápidas quanto em conexões lentas, a possibilidade de processamento tanto do lado servidor quanto do lado cliente, a possibilidade de utilização em modo off-line e a capacidade de utilizar multimídias diversas simultaneamente. III. TECNOLOGIAS PARA DESENVOLVIMENTO DE INTERFACES RICAS Nesta seção será apresentado a descrição de JavaServer Faces e PrimeFaces e Java FX. A) JavaServer Faces e PrimeFaces JavaServer Faces (JSF) é a especificação de um framework para facilitar o desenvolvimento de aplicações web que oferecem alta usabilidade e interação ao usuário. Foi criado em 2004, sob a Java Specification Request (JSR)127. JSRs são documentos com propostas de especificações para inclusão na plataforma Java. Depois de analisadas e aprovadas pela Java Community Process, se tornam uma referência para implementação de determinada API. A versão 1.2 do JSF, lançada em 2006, foi incorporada ao Java Enterprise Edition (Java EE). Em 2009 foi lançada a versão 2.0, segundo a JSR 314, que passou a ser disponibilizada no Java EE 6. Segundo Burns e Schalk (2010), tal como a maioria de outras tecnologias de programação importantes, a criação de JSF foi o resultado de um processo evolutivo de refinamento e adaptação em que novas e melhores técnicas foram substituindo as mais antigas. No caso de JavaServer Faces, a força que impulsionou essa evolução foi a necessidade de uma forma mais simples, mais eficaz e mais eficiente para a construção de interfaces de usuário web dinâmicas que são baseadas em uma arquitetura bem projetada e de fácil manutenção. O JSF foi criado para suprir a necessidade do desenvolvimento de aplicações para web de forma organizada visando o ganho de desempenho de programação, reúso e facilidade de manutenção. Desta forma, a tecnologia se baseou no padrão de projeto MVC (Model-View-Controller) e em um modelo de interfaces gráficas voltado a eventos. Segundo Nunes e Magalhães (2010), esta especificação busca maximizar a produtividade no desenvolvimento de aplicações web, minimizar a complexidade de manutenção, evoluir a experiência do usuário com uso de técnicas AJAX (acrônimo para Asynchronous Javascript And XML), proporcionar melhor integração com outras tecnologias web, dentre outros objetivos. 2 DUHL, Joshua; Rich Internet Applications. Nov IDC White Paper.

3 O framework JSF possibilita o envolvimento de diferentes perfis de profissionais que se envolvem em parte ou no todo de um projeto web. Web Designers podem desenvolver um layout amigável utilizando ferramentas como CSS, que são integráveis aos componentes do JSF. Desenvolvedores de funcionalidades, que programam objetos, lógicas para persistência e validações e desenvolvedores de componentes, que utilizam seu conhecimento em JavaScript e AJAX para desenvolver classes de componentes interativos que se integram às aplicações podem tirar proveito ao utilizar o framework JSF. Além desses, os fornecedores de IDEs, que oferecem compatibilidade à tecnologia e permitem um ganho principalmente na configuração inicial do projeto fornecendo um template básico já com diversas configurações préprogramadas, tem facilidades para a oferta de suporte em tempo de programação, com marcações de palavras reservadas e acesso rápido às documentações. O desenvolvimento com JSF se baseia na criação de páginas de visualização, utilizando-se de componentes que respondem a eventos e que são declarados por tags que formam a interface da página. Estes componentes se ligam a um Managed Bean ou controlador, que por sua vez, por meio de anotações, possibilita a utilização de validadores e conversores, o gerenciamento de redirecionamentos de páginas, além de intermediar a comunicação com possíveis outras camadas, conforme a estruturação do projeto. Outra característica importante é a integração com a JSR 330, que provê a injeção de dependência. Com isso, diretamente da camada view, é possível ter acesso a um Enterprise Java Bean (EJB) sem a necessidade de realizar um lookup ou de iniciar um novo objeto, permitindo o desacoplamento dos componentes. Todo o controle deste EJB fica por conta do container servidor. Alguns exemplos de containers que oferecem suporte para EJB são o Glassfish e JBoss. Com o ganho de maturidade da tecnologia, diversos projetos de terceiros foram desenvolvidos com o emprego de JSF. Estes projetos paralelos visam a criação e disponibilização de famílias de componentes que estendem as funcionalidades dos componentes já oferecidos. Uma das mais populares bibliotecas de componentes é a PrimeFaces que oferece mais de 100 opções de componentes interativos tanto para aplicações web como também mobile. Utilizando Expression Language (EL) e AJAX, pode ser facilmente integrado ao projeto JSF e possibilita a configuração da interação com o usuário de maneira simples, sem que seja necessário utilizar nenhum código JavaScript. Apresenta um ganho estético e funcional, permitindo, por exemplo, eventos de arrastar e soltar, interação entre listas, visualizadores de galerias de imagens, envio e recuperação de arquivos, com apenas algumas tags declaradas e uma programação Java no controlador. Durante o desenvolvimento do sistema para gerenciamento de páginas de evento, exemplificado neste trabalho, foi utilizada a versão 3.1 do PrimeFaces. B) Java FX Criado inicialmente em 2005 pelo desenvolvedor Christopher Oliver sob o nome de F3 (Form Follows Function), o projeto recebeu o nome de JavaFX ao ser adquirido pela Sun Microsystems, segundo Noda (2009). Apresentado inicialmente durante o evento JavaOne em 2007, teve a sua primeira versão de produção disponibilizada em dezembro de Com versões para Windows e MacOSX, disponibilizava um pacote de recursos gráficos, suporte de decodificadores para exibição de vídeos e uma ferramenta de aceleração gráfica utilizando hardware para um desempenho melhor na renderização dos componentes em tela, desde que o hardware possuísse esta capacidade. A versão 1.2 lançada em 2009 permitiu a integração com sistemas operacionais Linux e apresentou melhorias na API da tecnologia, culminando na comunicação melhorada com o plug-in do Java, necessário para execução de aplicações FX (JavaFX). A principal característica das primeiras versões foi a utilização da linguagem FX Script, uma linguagem de scripting declarativa utilizada para a construção das interfaces. Toda a programação feita em forma de script era compilada em bytecode, podendo ser executada em qualquer sistema com Java Runtime instalado. A estrutura da linguagem permitia visualizar de forma declarativa e estruturada o posicionamento, as características e hierarquias dos componentes da interface. Em 2011, com o lançamento da versão 2.0 pela Oracle, o projeto teve uma mudança significativa, principalmente quanto a sua linguagem de desenvolvimento. A linguagem de script deixou de existir e deu lugar à linguagem FXML, que segundo a Oracle, é uma linguagem de marcação baseada em XML utilizada para a criação de interfaces de usuário. Outra novidade foi a possibilidade de criar aplicações FX utilizando apenas a linguagem Java nativa. A mesma interface criada com a linguagem FXML pode também ser desenvolvida em linguagem Java, utilizando declaração de objetos, extensão de classes e sobrescrita de métodos. Isso proporcionou que programadores experientes em Java tenham uma proximidade com a tecnologia, diminuindo o tempo de aprendizado e facilitando a visualização do código. A versão 2.0 apresenta também um conjunto vasto de componentes de interação com o usuário que englobam os tradicionais botões e caixas de texto, uma série de gráficos interativos e com formatos distintos, como também objetos 3D e características de movimento e rotação que podem ser incluídas nos componentes. Outra característica é a melhoria na utilização de mídias e o do uso das GPUs (graphics processing unit) para a renderização dos componentes de usuário, além de um novo plug-in para browsers que com-pleta este conjunto. IV. JSF E JAVAFX A comparação das tecnologias JSF e JavaFX, ambas relacionadas à linguagem Java, considera os aspectos do desenvolvimento de uma interface web, suas dificuldades e facilidades e a aceitação do produto pelo mercado. Vale ressaltar que, apesar da possibilidade de utilização de JavaFX em aplicações desktop, a ênfase será dada no desenvolvimento de uma aplicação web, de forma que algumas tecnologias presentes poderão não ser citadas. 191

4 Análise das Tecnologias JSF2/PrimeFaces e JavaFX para a Criação de Interfaces Ricas para Internet A. Comunidade de desenvolvedores A aceitação dentro da comunidade de desenvolvedores é um fator importante para determinar a maturidade da tecnologia estudada. Considerando um cenário altamente conectado e a crescente utilização de fóruns de discussão para troca de experiências, é notório que as tecnologias mais comentadas e por isso, mais experimentadas tendem a oferecer uma base mais sólida para desenvolvedores iniciantes e também aos que já possuem alguma experiência. A especificação JSF, criada em 2004, teve uma ascensão rápida e regular dentro das tecnologias Java. Por ser fruto da necessidade de um framework padronizado para o desenvolvimento web, muitos profissionais se envolveram no projeto, o que culminou na sua inclusão ao Java EE dois anos após a sua criação. Ao longo da fase de amadurecimento do framework, muitos projetos paralelos foram desenvolvidos para estender as capacidades do JSF e ao mesmo tempo oferecer novas ferramentas, como o já citado PrimeFaces, entre outras bibliotecas de componentes como o IceFaces, RichFaces e Woodstock. Segundo Nunes e Magalhães (2010), a versão 2.0 teve no grupo de especialistas da especificação desenvolvedores da Apache, Oracle, Redhat, IceSoft entre outras empresas bastante envolvidas com JSF, facilitando a introdução na especificação das soluções criadas por estas empresas. Passou a integrar a certificação Sun Certified Web Component Developer (SCWCD 6), sendo desacoplada posteriormente pela Oracle, que, durante a criação deste artigo, não oferece esta certificação em seu site oficial. Todas estas características permitiram ao JSF uma boa credibilidade e fez com que se tornasse uma tecnologia popular dentro da comunidade Java. O fórum no site oficial da Oracle apresenta, mais de tópicos relacionados a JSF, englobando mais de mensagens. O GUJ, um dos maiores fóruns brasileiros de discussão sobre Java, em sua pesquisa interna retorna resultados de links com referências ao JSF. Dentro do domínio da Oracle, existe uma página denominada RealWorldJsfLinks que lista vários links de projetos ao redor do mundo utilizando JSF. A tecnologia JavaFX foi apresentada inicialmente em 2007 e teve uma evolução irregular. As primeiras versões utilizavam uma linguagem declarativa de script e apresentavam uma versão para integração com dispositivos móveis. A versão 2.0, lançada em 2011, marcou uma grande mudança, substituindo a linguagem de scripts por Java nativo e pela linguagem de interfaces FXML. Estes dois momentos 3 Fórum do site oficial destinado ao Java Server Faces. Disponível em: < Acesso em: 25 Set Fórum brasileiro de discussão sobre Java. Disponível em: Acesso em: 25 Set RealWorldJsfLinks: Links de projetos com JSF. Disponível em: < ks> Acesso em: 09 Out foram determinantes para afetar a maturidade da tecnologia. Uma mudança muito grande acaba afetando a confiança da comunidade em relação à solidez do projeto. Mesmo assim, a boa impressão causada após a mudança, tem feito desenvolvedores se interessarem pelo JavaFX, tanto como alternativa ao Swing no desenvolvimento de aplicações desktop, como também para aplicações web. Existem dois fóruns oficiais para a API JavaFX, um relacionado a versões anteriores, e outro destinado às versões 2.x. A Figura 1 demonstra o crescimento do número de tópicos no fórum oficial das versões mais novas do JavaFX. Figura 1. Aumento dos tópicos no fórum oficial do JavaFX. (ORACLE(A), 2012) O gráfico apresentado na Figura 2 demonstra a evolução do número de postagens em blogs que fazem referência à tecnologia JavaFX. Figura 2. Crescimento de postagens em blog de temas relacionados ao JavaFX (ORACLE(A), 2012) O fórum oficial das versões mais recentes do JavaFX apresenta mais de tópicos, englobando cerca de mensagens. O fórum oficial das versões antigas apresenta mais de tópicos, sendo vários deles publicados recentemente. No fórum brasileiro GUJ, a pesquisa interna retorna links com referências ao JavaFX. B. Suporte de IDE 192

5 Para que uma API consiga uma boa aceitação no mercado, além de oferecer qualidade e inovação, necessita também que o desenvolvedor consiga utilizar suas funcionalidades facilmente. Para isso é necessário que os ambientes de desenvolvimento (IDEs) acompanhem a evolução das tecnologias e auxiliem o usuário com tarefas automatizadas como por exemplo: durante a preparação do ambiente, tarefa essa que por muitas vezes é cansativa e cheia de passos; na criação de novos arquivos dentro do contexto do projeto e apresentando templates com configurações mínimas para que o desenvolvedor consiga iniciar o seu trabalho de um ponto específico. Para o desenvolvimento Java, os dois IDEs mais conhecidos e utilizados são o Eclipse e o NetBeans. O Eclipse oferece suporte para JavaServer Faces por meio de um projeto chamado Webtools Platform (WTP) que disponibiliza um plug-in para utilização junto à IDE. A página de download6 do site oficial do Eclipse disponibiliza uma versão denominada Eclipse IDE for Java EE Developers que já possui suporte ao pacote Enterprise do Java, que contém o JSF. Na versão clássica da IDE também é possível baixar o plugin pela opção de atualização. Para execução dos projetos web é necessária a inclusão de um servidor de aplicação, que deve ser baixado externamente e incluído à plataforma do Eclipse. O NetBeans, dentre as opções disponíveis em sua página oficial, também disponibiliza uma versão com suporte ao Java EE e que já inclui também os servidores de aplicação Glassfish e Tomcat. Segundo o site oficial NETBEANS (2012), a partir da versão 7.0 o novo suporte JSF 2.0 do IDE traz o suporte padrão para JavaServer Faces e inclui aprimoramentos de edição versátil para páginas Facelets, várias facilidades para trabalhar com classes de entidade e uma suíte de assistentes JSF para tarefas de desenvolvimento comuns, como criar beans gerenciados JSF, modelos Facelets e componentes de composição. Durante a criação de um novo projeto, a IDE apresenta em formato wizard7 a opção para selecionar o servidor e para seleção dos frameworks que serão utilizados no projeto e entre eles está o JavaServer Faces. É possível também selecionar um pacote de componentes a ser incluído no projeto, entre PrimeFaces, Icefaces e RichFaces. Oferece ainda, documentação para a API JSF, realce de sintaxe e detecção de erros em tempo de projeto, além das opções para completar automaticamente as sentenças e sugestões de conclusão para expressões. Um novo projeto criado pelo wizard do NetBeans, cria um template básico da estrutura de arquivos e pode ser executado, apresentando uma página simples de saudação. Para o desenvolvimento utilizando a API JavaFX, o Eclipse não possui uma versão para download que inclua suporte a esta tecnologia. O desenvolvedor que quiser utilizar 6 Página de downloads da plataforma Eclipse: < Acesso em: 15 Dez Método de interação que permite executar uma tarefa utilizando uma sequencia de passos que vão guiando o usuário até a sua conclusão. esta IDE tem duas opções. Uma delas é baixar ou atualizar o kit de desenvolvimento do Java (JDK) na versão 7 ou superior, pois esta já possui o JavaFX integrado, e incluir a biblioteca dentro do projeto no Eclipse. Outra alternativa é utilizar um plug-in chamado e(fx)clipse8, que é citado dentro da seção de down-loads da página oficial do JavaFX, como ferramenta de terceiros. Este plug-in deve ser instalado e posteriormente deve-se informar ao Eclipse a pasta do JavaFX-SDK. Na IDE NetBeans, o JavaFX já está incluso, na mesma versão que inclui o Java EE. Desta forma, basta a instalação normal da interface para que o desenvolvedor já possa iniciar o desenvolvimento de sua aplicação. A criação do projeto pelo wizard do NetBeans gera um projeto com uma estrutura básica que pode ser executada, fornecendo uma aplicação simples com uma mensagem de saudação. A IDE oferece ainda suporte para completar automaticamente as sentenças, realce de sintaxe dos arquivos FXML e sugestão de expressões. C) Documentação Um item essencial para que uma tecnologia seja aceita pelo mercado é a facilidade com que o desenvolvedor tem acesso às especificações de sua API. Parte integrante do desenvolvimento de um projeto é a documentação de suas funcionalidades. Uma boa documentação deve apresentar a estrutura de um projeto, características funcionais, métodos para implementação além de exemplos práticos. Os desenvolvedores, principalmente quando iniciam no aprendizado de uma nova tecnologia, tendem a visitar frequentemente a sua documentação, desta forma, as informações devem ser bem organizadas e de fácil acesso. Um projeto bem documentado contribui para a padronização e para a boa imagem perante a comunidade de desenvolvedores. Para ter acesso à documentação do JSF, o desenvolvedor tem a opção de consultar diretamente a sua especificação, contida na JSR314. Acessando a página da Java Community Process9, é possível encontrar as especificações técnicas descritas na JSR314, que determina as regras de padronização do JavaServer Faces 2.0 e permitem ao desenvolvedor uma visão geral da especificação. Dentro do domínio de documentos da página oficial da Oracle é possível acessar a documentação da plataforma Java Enterprise Edition10. Na seção de documentação da API, são apresentados quatro links que levam à documentação técnica da plataforma Java EE englobando os pacotes e classes presentes além de um manual geral de todas as tags Facelets, JSP e padrões HTML que são utilizadas na construção das interfaces. Todas estas opções são descritas em uma página padrão que apresenta os usos de cada 8 Página para consulta do projeto e(fx)clipse: < Acesso em: 26 Set Página para acesso da JSR 314. Disponível em: < Acesso em: 01 Out Documentação da Java EE 6. Disponível em: < Acesso em: 01 Out

6 Análise das Tecnologias JSF2/PrimeFaces e JavaFX para a Criação de Interfaces Ricas para Internet funcionalidade, seus métodos e hierarquia de classes além de exemplos de utilização. Na mesma página é possível acessar as documentações das versões anteriores do Java EE. A documentação11 da plataforma JavaFX pode ser acessada diretamente da página oficial da Oracle, na seção destinada à tecnologia JavaFX. Entre as opções de navegação da página, a área de documentação é facilmente encontrada. Dentro dela é possível visualizar uma lista completa de opções para aqueles que desejam se familiarizar com a tecnologia. As opções incluem vídeos demonstrativos que apresentam algumas características importantes da plataforma, links para artigos que abordam assuntos relacionados ao JavaFX como boas práticas de programação, um roadmap apresentando uma linha do tempo da API e futuras funcionalidades, além do acesso ao conteúdo completo da documentação da API, demonstrando os pacotes, classes e métodos de todos os componentes do JavaFX. Além disso, o site do JavaFX apresenta, dentro da seção Samples, uma aplicação denominada JavaFX Ensemble, que é um showcase de todos os componentes e funcionalidades da plataforma em sua versão 2.x. É possível visualizar exemplos de animações, efeitos 3D, componentes de aplicações como caixas de texto e combos, além de uma extensa gama de gráficos animados. Todos os exemplos podem ser baixados como projetos da IDE NetBeans e podem ser usados como auxílio pelos desenvolvedores. D) Aparência e componentes gráficos O que torna uma aplicação RIA atrativa ao usuário é principalmente a aparência refinada e as variadas possibilidades de interagir com o ambiente apresentado. Com as tecnologias atuais é possível criar aplicações inteiras com conteúdo interativo e multimídia aliando a criatividade de web designers para a modelagem de páginas, com as poderosas ferramentas de renderização e reúso, apresentando ao usuário um produto que alia bom gosto, interatividade, agilidade e disponibilidade. O JavaServer Faces utiliza a tecnologia Facelets para a definição da interface, permitindo a criação de um template de página com áreas que podem ser sobrescritas, facilitando o reúso e a padronização da aparência da página. A este template, incluem-se os componentes de tela, organizados em forma de árvore. Alguns destes componentes fazem parte do pacote JSF, outros, porém, são distribuídos em forma de bibliotecas de componentes e estendem as funcionalidades dos componentes JSF, oferecendo riqueza de aparência e interatividade. Os componentes da biblioteca PrimeFaces oferecem várias opções de temas que podem ser selecionados pelo desenvolvedor ou mesmo pelo usuário, utilizando um componente próprio. Além disso, também oferecem total integração com CSS, permitindo uma configuração personalizada. A Figura 3 mostra algumas variações que podem ser obtidas 11 Documentação da Plataforma JavaFX. Disponível em: < n/index.html> Acesso em: 01 Out simplesmente alterando o tema dos componentes. Figura 3. Variações de temas para um combobox oferecido pelo PrimeFaces (PRIMEFACES, 2012) Os componentes da biblioteca PrimeFaces lançam mão de poderosas funções em JavaScript e AJAX para implementar funcionalidades que se aproximam e até superam os objetos de tela em aplicações desktop. Dentre as possibilidades, são oferecidos eventos de arrastar e soltar para reposicionar objetos em tela, galerias de imagens, tabelas interativas, renderização de partes da tela conforme a necessidade além de alguns gráficos com opção de zoom e animação. Se considerarmos que tudo isso acontece sobre um browser em tempo real, as possibilidades de criação de aplicações são imensas. A Figura 4 demonstra um gráfico em bolha e que responde a eventos do mouse. Figura 4. Gráfico em bolha retirado do showcase do PrimeFaces (PRIMEFACES, 2012) A plataforma JavaFX foi projetada para oferecer um diferencial na forma como a interface é projetada. Segundo Dea (2011), JavaFX 2.0 é baseado em um paradigma de grafos de cena (modo retido), em oposição à renderização estilo tradicional de modo imediato. Os grafos de cena do JavaFX são como uma estrutura de dados em árvore que mantém nós 194

7 básicos baseados em vetor. Esta estrutura permite que a cena seja renderizada conforme um nó raiz ao qual os outros nós estão submetidos. Este conceito segue o modelo de criação de cenas de jogos, onde a cena toda é baseada em grafos de cena. Utilizando este paradigma, os componentes JavaFX permitem, além da configuração CSS padrão, também a configuração de intensidades de luz e sombra, o que gera um efeito visual muito interessante. A Figura 5 ilustra um exemplo da aplicação de sombra em um componente. Figura 5. Variação de aplicação de sombra em componente JavaFX A abordagem baseada em grafos permite ao JavaFX a inclusão de animação em diversas partes da cena. As animações acontecem pela movimentação dos nós baseados em seu nó raiz. O plug-in do JavaFX utiliza as características da placa gráfica do computador para gerenciar as modificações da cena, permitindo um melhor desempenho. Todas estas animações podem ser configuradas diretamente durante a construção da interface ou em resposta a algum evento. A Figura 6 apresenta a aplicação de efeito sépia em uma imagem variando um parâmetro no tom da imagem. Figura 6. Aplicação de tonalidade em sépia utilizando componente JavaFX A lista de componentes do JavaFX apresenta, desde os básicos de interação via formulário, até os mais avançados, incluindo uma rica seleção de gráficos, todos permitindo interatividade, além de componentes 3D, players e controles de multimídia, além de várias opções de efeitos que permitem enriquecer muito visualmente a interface. E) Aceitação pelo mercado O quesito aceitação pelo mercado representa uma síntese de outros quesitos abordados neste artigo. Para que uma tecnologia tenha boa aceitação, é necessário que a sua proposta cause um impacto na comunidade de desenvolvedores e que este impacto gere um interesse. Além disso, esta proposta deve ser facilmente implementada e traga um ganho no tempo e na qualidade de desenvolvimento. Mais ainda, é preciso que toda essa novidade esteja bem documentada, com uma boa descrição de funcionalidades e exemplos práticos que facilitem os primeiros passos do desenvolvedor. Com tudo isso, cria-se uma nova comunidade em torno desta nova tecnologia, e esta comunidade aplica, cria, testa e reporta erros, e desta forma a tecnologia vai evoluindo e criando uma base sólida. O JavaServer Faces, desde a sua criação, passou por todos estes passos e soma-se ainda o fato da Sun, e agora a Oracle, oferecer todo o suporte para que a proposta do JSF criasse raízes dentro do mundo Java. O fato de ser uma especificação da JCP e de fazer parte da plataforma Enterprise já acarreta um bom embasamento para os iniciantes na tecnologia, pois demonstra a padronização para implementação e também que o projeto está ativo e sendo sempre melhorado. Outra característica importante é que suas versões evoluíram seguindo uma crescente de qualidade sempre constante, otimizando as funcionalidades e corrigindo erros. Com base nestas constatações, Nunes e Magalhães (2010) afirmaram que JSF é o framework Java mais usado para desenvolvimento de aplicações web com Java. Seu excelente conjunto de funcionalidades faz com que esta tecnologia seja favorita no cenário de desenvolvimento em que está inserida. A tecnologia JavaFX ainda caminha entre as características apresentadas no início deste tópico. A plataforma passa ainda por um processo de afirmação dentro da comunidade Java, muito pelo fato de ter uma mudança drástica em sua linguagem de definição de interfaces a partir de sua versão 2.0. Para uma aplicação que é focada em RIA, esta mudança acabou causando uma quebra em sua evolução. Como consequência, criaram-se duas comunidades, uma que utiliza a antiga linguagem de scripts e outra que é entusiasta das últimas versões. Por outro lado, a Oracle(C) (2012) aposta bastante na tecnologia e afirma em sua página oficial que JavaFX é o próximo passo na evolução do Java como uma plataforma cliente rica, pois pode ser utilizada tanto para aplicações desktop quanto para web. Na mesma página, apresenta alguns casos de sucesso na utilização da tecnologia por empresas no âmbito comercial. F) Tecnologias para desenvolvimento da interface Dentro do processo de desenvolvimento, faz-se necessário 195

8 Análise das Tecnologias JSF2/PrimeFaces e JavaFX para a Criação de Interfaces Ricas para Internet a utilização de variadas tecnologias que unidas, se transformam em uma poderosa ferramenta para a criação de aplicações, tanto no universo desktop quanto no âmbito da web. Com a evolução do projeto e a necessidade de novas funcionalidades, o desenvolvedor pode lançar mão de frameworks e bibliotecas de funções que oferecem novos métodos para melhorar a qualidade da aplicação que será oferecida. Dentro de uma interface desenvolvida com JSF, algumas tecnologias que podem ser envolvidas no projeto são: Facelets: Segundo Oliveira (2011), O Facelets utiliza-se de uma linguagem de descrição de páginas (PDL Page Description Language) criada especificamente para JSF. Ele estabelece uma linguagem de templates que suporta a criação da árvore de componentes das telas JSF, o que permite o reúso de padrões de telas e a composição de componentes JSF para formar novos componentes. A partir do JSF 2.0, o facelets tornou-se o padrão para descrição das interfaces, utilizando tags que substituem as tradicionais tags HTML para a descrição dos componentes, bastando que se inclua no arquivo a importação dos namespaces. Outra característica importante é a utilização de templates. Conforme Oliveira (2011), um template define um desenho padrão para as telas e áreas substituíveis para a troca de conteúdo durante a renderização da interface com o usuário. Isso significa que, em aplicações onde o padrão da interface não se altera, é possível utilizar um único modelo (template) da tela principal, onde somente uma parte dela é alterada e dessa forma, não é necessário que se repita por várias vezes a programação das outras áreas da interface, que seguirão o padrão do template. AJAX: É um método de desenvolvimento que utiliza linguagem JavaScript aliada ao XML para a manipulação de trechos de tela, disponibilizando informações de forma assíncrona, ou seja, mesmo aguardando a resposta de uma requisição, o processo continua. A partir da versão 2.0, AJAX passou a ser nativo do JSF, o que significa que é possível programar requisições apenas utilizando a tag <f:ajax> (onde f significa o identificador do namespace que provê esta funcionalidade) e complementar com os eventos e ações a serem tomadas. Muitos componentes já possuem várias características programadas que utilizam AJAX. Expression Language: a EL é utilizada para realizar a conexão entre os componentes da interface e o controlador (managed bean). Com EL, é possível definir valores iniciais de componentes, como por exemplo uma caixa texto, ao renderizar a tela e da mesma forma, é possível recuperar os dados deste mesmo componente. Utiliza a seguinte sintaxe: #{expressão}. A expressão pode significar uma propriedade do controlador ou mesmo um método a ser executado. A EL suporta também operadores e alguns literais. Bibliotecas de componentes: São bibliotecas externas normalmente desenvolvidas em projetos de terceiros, que utilizam a arquitetura do JSF para o desenvolvimento de novos componentes que agregam tanto no caráter visual como também com novas funcionalidades. Estas bibliotecas podem ser adicionadas conforme a necessidade do desenvolvedor, porém não são obrigatórias dentro de um projeto JSF. Um exemplo é o já citado PrimeFaces. Para o desenvolvimento de interfaces utilizando a plataforma JavaFX, algumas das tecnologias utilizadas são as seguintes: Linguagem FXML: Segundo a Oracle(B) (2012), FXML é uma linguagem de marcação baseada em XML para construção de grafos de objetos Java. Ele oferece uma alternativa conveniente para a construção de tais grafos em código processual, e é ideal para definir a interface de usuário de um aplicativo JavaFX, uma vez que a estrutura hierárquica de um documento XML possui uma estreita ligação com a estrutura do grafo de cena JavaFX. Dentro da estrutura FXML, os elementos podem representar a instância de uma classe, uma propriedade de uma classe ou até mesmo um bloco de código em script. As declarações seguem a estrutura de árvore de um arquivo XML comum. Java Nativo: Uma alternativa que a plataforma JavaFX oferece para a criação da interface é utilizar a própria linguagem Java. Este suporte permite que os objetos de tela sejam declarados e instanciados da mesma forma que se usa em uma aplicação Java comum. Todos os objetos possuem atributos que definem as suas configurações. Scene Builder12: É uma aplicação externa fornecida pela Oracle que permite que a interface seja desenhada arrastando e soltando componentes dentro de uma área determinada. Possibilita ao desenvolvedor a visualização da interface em tempo real de desenvolvimento, o que facilita muito principalmente em relação ao design da tela. É importante citar também que ambas as tecnologias apresentadas oferecem suporte a configuração por CSS. Incluindo um arquivo com as configurações determinadas, os componentes de tela assumem estas configurações conforme são determinadas dentro da programação das telas. G) Facilidade de desenvolvimento Dentro da área de desenvolvimento de software, busca-se sempre a perfeição na entrega do produto. Para isso, diariamente equipes trabalham na criação de ferramentas que facilitem e padronizem os processos de desenvolvimento, otimizando o tempo gasto com tarefas triviais e repetitivas e resultando em maior produtividade. Como já citado, o JSF foi desenvolvido com o intuito de padronizar e facilitar o desenvolvimento de interfaces web. Dentre as características oferecidas pelo framework, pode-se considerar: Possibilidade de utilizar o padrão MVC: esta característica permite ao desenvolvedor projetar a sua aplicação de forma que a programação da interface esteja separada da programação do controlador, possibilitando um código mais limpo e legível. O padrão MVC é bastante difundido e utilizado dentro da comunidade de desenvolvedores, o que facilita a comunicação e a troca de experiências. 12 Página para acessar o JavaFX Scene Builder. Disponível em:< ds/devpreview html> Acesso em: 09 Out

9 Templates para definir interfaces: Como citado anteriormente, a possibilidade, oferecida pelo Facelets, de utilizar um template principal para a aplicação, torna bem mais enxuto o código e otimiza o desenho das interfaces da aplicação. Além de evitar a repetição de código, o template possibilita que os arquivos que definem a área dinâmica da interface contenham unicamente o código relacionado ás suas funcionalidades, evitando assim longos arquivos contendo toda a definição do desenho da aplicação. Tags intuitivas: A estrutura do arquivo de definição da interface utiliza tags que por sua vez oferecem uma série de propriedades para a definição dos componentes de tela. A forma de organização e o conteúdo das tags possibilitam que um desenvolvedor com médio conhecimento em HTML e CSS, consiga facilmente assimilar a linguagem. A Figura 7 ilustra a declaração de um botão da biblioteca PrimeFaces com a configuração CSS definida na propriedade styleclass, com texto de exibição definido como Finalizar e que executa a ação definida no método finalizar do gerenciador managedbean sendo que ao final atualiza o componente de tela definido pelo id mensagens. Figura 7. Declaração de um componente commandbutton utilizando JSF e PrimeFaces A plataforma JavaFX oferece uma forma de desenvolvimento para web muito similar à forma utilizada em aplicações desktop. Dentre as vantagens verificadas, podem ser citadas: Ferramenta para desenho de tela: A ferramenta Scene Builder possibilita a criação das telas da aplicação por meio de uma interface gráfica, muito parecida com a modelagem de aplicações desktop. O usuário pode arrastar componentes para dentro de uma região que representa a área visível da tela e os ordenar conforme a sua vontade, com a possibilidade de alteração de cores, fontes, tamanhos, entre outras propriedades. A Figura 8 ilustra a criação de uma interface utilizando o Scene Builder. Figura 8. Tela principal do aplicativo Scene Builder Java nativo: Além do Scene Builder, a plataforma JavaFX oferece, a partir da versão 2.0, a possibilidade de criação da interface utilizando código da linguagem Java. Ao invés de utilizar as tags da linguagem FXML, o desenvolvedor que já possui experiência com Java, pode modelar a sua interface declarando objetos da mesma forma que utiliza em suas aplicações comuns. Essa característica possibilita um ganho de tempo com a familiarização de uma nova linguagem, porém o código da interface acaba se misturando ao código do controlador. Utilizando FXML, é possível realizar esta separação, muito importante para a organização do projeto. Modelagem direta: Para a criação da interface, o desenvolvedor não necessita instalar e configurar um servidor de aplicações para testar o seu projeto. Tendo implementado o código da tela, o projeto pode ser executado e já será apresentada a interface principal da aplicação. Os projetos 197

10 Análise das Tecnologias JSF2/PrimeFaces e JavaFX para a Criação de Interfaces Ricas para Internet de cena para construção dos seus componentes. Por esta característica, as possibilidades e efeitos visuais como sombra e rotações são muito grandes. Apesar de ser criada em 2005, a tecnologia passou por uma mudança drástica de linguagem durante a evolução de suas versões, o que fez com que a sua aceitação não fosse tão regular, pois dividiu a comunidade de desenvolvedores entre as versões mais antigas que utilizavam scripts para a mais nova que utiliza FXML e Java nativo. A plataforma oferece uma página cheia de opções para quem deseja se familiarizar com a tecnologia, que vão desde vídeos demonstrativos, blogs abordando o assunto, além de uma documentação bem organizada descrevendo componentes e apresentando exemplos. Oferece também uma ferramenta gráfica para criação da interface além do suporte a linguagem Java que serve de atrativo para desenvolvedores mais experientes. É uma tecnologia que ainda está sendo experimentada, com uma comunidade crescente, mas ainda não muito expressiva. A Tabela 1 apresenta as principais características das tecnologias dentro das opções listadas anteriormente. JavaFX são executados como aplicações desktop, e desta forma podem ser executados sem a utilização de um servidor. JSF é uma tecnologia estruturada para o desenvolvimento web. As evoluções das versões geradas contribuíram para que esta tecnologia, que é uma especificação da JCP e também um framework presente no pacote Java EE, se firmasse como uma das plataformas mais utilizadas dentro da comunidade Java para web. JSF apresenta uma boa integração com as principais IDEs para desenvolvimento, que fornecem suporte para as configurações iniciais bem como durante o desenvolvimento. Além disso, possui uma documentação bem organizada, fornecendo informações e exemplos de classes e métodos além das tags que definem os componentes de interface. Ainda mais, possui uma comunidade ativa e presente em diversos fóruns de discussão que fornecem um bom suporte a dúvidas. JSF permite o desenvolvimento dentro do padrão MVC, separando o código da interface que utiliza os templates fornecidos pelo Facelets além de tags intuitivas que permitem uma boa familiarização com a linguagem. Por outro lado, JavaFX é uma tecnologia que utiliza grafos Tabela 1. Resumo das características das tecnologias JSF e JavaFX 198

11 V. EXEMPLO DE UTILIZAÇÃO Para ilustrar as principais características das duas tecnologias foi desenvolvida uma interface de uma tela de cadastros dentro do sistema de gerenciamento de eventos ezevent. O sistema em questão oferece a possibilidade da criação e edição de páginas para variados eventos. Dentre as funcionalidades oferecidas estão a possibilidade de participantes cadastrarem-se em determinado evento utilizando as páginas geradas, além de enviarem seus trabalhos para avaliação e possível apresentação no evento. Os trabalhos são avaliados por revisores cadastrados no sistema e que utilizam como parâmetro os critérios definidos pelo coordenador do evento e que são também alimentados no sistema. Para este exemplo, foi utilizada a tela de cadastro dos revisores e serão apresentadas apenas as interfaces desenvolvidas. O cadastro de revisores é uma interface simples que apresenta caixas de texto onde são informados os dados dos revisores e os botões que executam as ações solicitadas pelo usuário. Para o desenvolvimento com JSF, foi utilizado um template para definir a tela principal e um arquivo separado que define a área de formulário onde estão inseridos os componentes. Foram utilizados componentes PrimeFaces que são importados por meio de declarações de namespaces no início do arquivo, conforme ilustrado na Figura 9. Figura 9. Importação dos namespaces do JSF e PrimeFaces A estrutura do template da interface é definida utilizando tags HTML suportadas pelo JSF iniciadas por h e tags Facelets, iniciadas por ui. Dentro da estrutura do template foi determinado um espaço para a inserção do formulário. Este espaço é determinado pela tag Facelets <ui:insert name="formulario">. Em um arquivo XHTML separado, são definidos os componentes PrimeFaces que farão parte do formulário, dentro de uma tag ui:composition que determina que aquele trecho de código faz parte de uma composição. A definição dos componentes PrimeFaces ocorre pela declaração das tags iniciadas pela letra p (conforme importação dos namespaces) seguida pelo nome do componente e pelas propriedades definidas pelo desenvolvedor. Dentre as propriedades disponibilizadas, é possível determinar tamanhos máximos e mínimos para os campos do formulário, bem como definir mensagens para guiar o usuário (tooltips), determinar identificadores para os componentes e textos de exibição. Utilizando a propriedade update é possível determinar se outro componente será atualizado em resposta a algum evento. Esta atualização é determinada pela tag <p:ajax> do PrimeFaces, que oferece suporte a eventos AJAX. Utilizando a tag <f:validator> é possível fazer uma chamada a uma classe para realizar uma determinada validação nos dados informados. Os componentes que recebem dados têm o valor de sua propriedade value associado a um atributo da classe controladora por meio de EL. A Figura 11 ilustra as declarações dos componentes para os campos de login, senha e confirmação de senha, que incluem validadores e eventos AJAX. Na classe controladora são declarados os atributos que farão a interação com os componentes da tela, que devem ter o mesmo nome que foi utilizado na propriedade value dos componentes. Desta forma é possível carregar valores nos atributos para exibição na tela como também capturar os dados inseridos no formulário para inserção e validação. A Figura 10 apresenta a declaração da classe controladora com os atributos que fazem referência aos componentes de tela exibidos anteriormente. Figura 10. Declaração da classe controladora Para o desenvolvimento da interface de cadastro de revisores na plataforma JavaFX foi utilizada a ferramenta Scene Builder para o desenho da tela. Para a definição da interface, a tecnologia utiliza os conceitos de stage, scene e node. Este conceito é muito utilizando para desenvolvimento de jogos para browsers. Todos os componentes da tela são formados por um conjunto de nós (nodes) que são interligados a um nó raiz compondo um conjunto de grafos de cena. O nó raiz, por sua vez, é parte de um objeto de cena (scene), logo tudo o que se vê dentro da interface apresentada está contido na cena. A cena por sua vez, é inserida dentro de um palco (stage), representado pela janela ou browser onde a cena é apresentada. Para que se altere a tela sem que seja necessário abrir uma nova janela, são adicionadas cenas diferentes ao mesmo objeto stage. Utilizando a interface gráfica do Scene Builder, é possível modelar a interface arrastando os componentes para a cena e alterando as suas propriedades como estilo de fonte, tamanho e cor. É possível também utilizar uma estrutura CSS para configurar os componentes. Ao final, é gerado um arquivo com a extensão.fxml que contém toda a estrutura de nós inseridas a um nó raiz. Dentro desta estrutura já fica inserida a referência para a classe controladora da interface. Também são apontados os identificadores para cada componente, para que permita sua integração no controlador. A Figura 12 apresenta um trecho do código gerado, incluindo a referência da classe controladora e os identificadores dos componentes. 199

12 Análise das Tecnologias JSF2/PrimeFaces e JavaFX para a Criação de Interfaces Ricas para Internet Figura 11. Tags para a declaração de componentes da interface JSF / PrimeFaces Figura 12. Código FXML gerado pelo Scene Builder 200

13 A classe controladora deve possuir o mesmo nome referenciado no arquivo FXML. Dentro dela, os atributos devem ser declarados do mesmo tipo utilizado no componente da interface. No exemplo, foi declarado um componente do tipo TextField para receber os dados do login do revisor. Na classe controladora, o atributo deve ser do mesmo tipo e possuir o mesmo nome do identificador do componente. Para que seja identificada a referência, o atributo deve possuir a A partir disso, o valor do componente de tela pode ser manipulado na classe controladora. A Figura 13 apresenta os atributos sendo declarados na classe controladora. Dentro das classes controladoras é possível realizar as validações dos dados informados, conversões e as operações básicas de CRUD (Create, Read, Update e Delete) comunicando-se com outras camadas da aplicação, de acordo com o modelo adotado. É possível utilizar injeção de dependência das classes no servidor por intermédio de um container EJB, por exemplo, ou mesmo realizar a comunicação com o servidor utilizando webservices. Este tipo de implementação não será abordado por não ser o foco deste artigo. A interface desenvolvida utilizando JSF pode ser vista na figura 14 e a interface desenvolvida utilizando JavaFX pode ser vista na figura 15. Figura 13. Classe controladora do cadastro de revisores Figura 14. Interface desenvolvida utilizando JSF / PrimeFaces Figura 15. Interface desenvolvida utilizando JavaFX 201