COMPUTAÇÃO EM NUVEM: Desenvolvimento de aplicações empresariais ricas na internet, na Arquitetura Java, Google Web Toolkit e Google Application Engine

Transcrição

1 UNIVERSIDADE FEDERAL DO PARANÁ PROGRAMA DE PÓS-GRADUAÇÃO EM TECNOLOGIA ESPECIALIZAÇÃO EM TECNOLOGIA JAVA DOMINGOS DE CARVALHO VILLELA JÚNIOR COMPUTAÇÃO EM NUVEM: Desenvolvimento de aplicações empresariais ricas na internet, na Arquitetura Java, Google Web Toolkit e Google Application Engine MONOGRAFIA DE ESPECIALIZAÇÃO CORNÉLIO PROCÓPIO 2011

2 1 DOMINGOS DE CARVALHO VILLELA JÚNIOR COMPUTAÇÃO EM NUVEM: Desenvolvimento de aplicações empresariais ricas na internet, na Arquitetura Java, Google Web Toolkit e Google Application Engine Monografia de Especialização apresentada ao Programa de Pós-Graduação em Tecnologia da Universidade Tecnológica Federal do Paraná como requisito parcial para obtenção do título de Especialista em Tecnologia JAVA - Área de Concentração: Computação Ubíqua. Orientador: Prof. Me. Rodrigo Henrique Cunha Palácios CORNÉLIO PROCÓPIO 2011

3 À Sueli, Priscila e Rebeca, e aos desenvolvedores de softwares que investem na computação ubíqua. 2

4 3 AGRADECIMENTOS Reverencio o Professor Me. Rodrigo Henrique Cunha Palácios pela sua dedicação e orientação deste trabalho. Agradeço à Google pelo fornecimento dos recursos de software e hardware para o desenvolvimento deste trabalho. Também gostaria de deixar registrado o meu agradecimento à minha família, pelas horas não dedicadas à minha esposa e filhas nos finais de semana.

5 4 People who love what they do, are usually those who are doing what they love. (Peter Serchuk, Executive Creative Director, McCann- Erickson, Los Angeles.) As pessoas que amam o que fazem, são geralmente aquelas que estão fazendo o que amam. (Peter Serchuk, Diretor Executivo de Criação, McCann-Erickson, Los Angeles.)

6 5 RESUMO VILLELA, Domingos de Carvalho Júnior. Computação em Nuvem: Desenvolvimento de aplicações empresariais ricas na internet RIA, na arquitetura Java, Google Web Toolkit GWT 2 e Google App Engine f. Monografia (Especialização em Tecnologia JAVA) Programa de Pós-Graduação em Tecnologia, Universidade Tecnológica Federal do Paraná, Cornélio Procópio, Esta pesquisa apresenta uma nova abordagem na forma de se desenvolver sistemas empresariais. Esta inovação é a computação em nuvem, no qual os sistemas serão projetados e desenvolvidos para serem implantados em data centers altamente confiáveis e seguros. Com isto as empresas deixarão de administrar o banco de dados, unidades centrais de processamento, redes de comunicação de dados, controle de acesso, cópias de segurança dos dados e sistemas, e recursos humanos de tecnologia da informação. A proposta deste projeto foi utilizar o software e o hardware da Google, o Google App Engine em conjunto com o Google Web Toolkit 2.1. Este trabalho de pesquisa abordou a evolução da computação, computação em nuvens, aplicações ricas para internet RIA, WEB 2.0, Crome OS, Google App Engine, Sandbox, Dynamic HTML, Cascading Style Sheets, Document Object Model, Ajax, WidGets, Java Data Objects e o Google Web ToolKit. Traz como resultado a implantação um estudo de caso no data center da Google, demonstrando uma proposta inicial de projeto nas nuvens. Palavras-chave: Computação em nuvens. Google Web ToolKit. Google App Engine.

7 6 ABSTRACT VILLELA JR., Domingos de Carvalho. Cloud computation: Development of business applications in the RIA, in the JAVA architecture, GWT 2 Google Web Toolkit, and Goggle App Engine pp. Term paper (Specialization in JAVA Technology Graduate Program in Technology, Universidade Tecnológica do Paraná, Cornélio Procópio, This research presents a new approach in the way how business systems are developed. Such an innovation is called cloud computing, in which systems are projected and developed in order to be implanted into highly reliable and safe data centers. By means of such a device companies will stop managing databanks, central processing units, data communications newtworks, access control, data and system security backups, and IT human resources. The proposal of this project was to use Google software and hardware, Google App Engine jointly with Google Web Toolkit 2.1. This research paper broached the development of computation, cloud computation, RIA, WEB 2, Crome OS, Google App Engine, Sandbox, Dynamic HTML, Cascading Style Sheets, Document Object Model, Ajax, WidGets, Java Data Objects and Google Web Toolkit. Such an implantation has as a result a case study in Google data center, giving a demonstration of the initial proposal of the cloud computing project. Keywords: Cloud computing. Google Web Toolkit. Google App Engine

8 7 LISTA DE CÓDIGOS Código 1 Exemplo de CSS 30 Código 2 Exemplo de Código HTML 31 Código 3 Exemplo de anotações POJO e JDO 34 Código 4 Folha de estilo do date picker 43 Código 5 Fonte do DatePicker Java/GWT 44 Código 6 Exemplo de um arquivo gwt.xml para definição de módulos 51 Código 7 Ativação do gerenciamento de histórico de navegação do GWT 54 Código 8 Código para exibir mensagem do status do navegador 54 Código 9 Implementação da classe SimpleCallback 58 Código 10 Classe Presenter<D> 59 Código 11 Classe LoginFormPresenter 60 Código 12 Interface LoginFormDisplay 61 Código 13 Interface Display 62 Código 14 Classe LoginFormView 62 Código 15 Classe View 63 Código 16 Exemplo de arquivo XML para definição de interface gráfica 64 Código 17 Classe LoginFormView usando UiBinder 65 Código 18 Web.xml 70 Código 19 Exemplo de classe serializável 71 Código 20 Inferface YourService.java 72 Código 21 Inferface WorldServiceAsync 73 Código 22 WorldServiceImpl 74 Código 23 Função JavaScript sayhello(name) 78 Código 24 Função JavaScript sayhello(name) 79 Código 25 Função formatascurrency 79 Código 26 Exemplo de função GWT acessada pelo HTML 79 Código 27 Exemplo de um arquivo no formato JSON 81 Código 28 Exemplo de requisição feita a um servidor JSONP 84 Código 29 Resultado do parseresponse 84 Código 30 Código JavaScript para acessar o serviço Google Maps 85 Código 31 Código JavaScript para acessar o serviço catacaoacoes 86

9 8 LISTA DE FIGURAS Figura 1 Pesquisa no Google Insights por cloud computing realizada em janeiro/ Figura 2 Supercomputador Lonestar 4 17 Figura 3 Eras e dimensões da computação 18 Figura 4 Data Center da Google 19 Figura 5 Papéis da computação em nuvem 20 Figura 6 Exemplo de aplicação RIA e gatgets 24 Figura 7 Tecnologias e tendências na Web 25 Figura 8 Tabela periódica de API s para os produtos Google 27 Figura 9 Console de administração do app engine da Google 28 Figura 10 Representação de uma árvore DOM 31 Figura 11 Alguns WidGets do GWT 2 33 Figura 12 Comparação das tecnologias de persistências 36 Figura 13 Nomes dos widgets GWT Figura 14 Date Picker 42 Figura 15 Biblioteca Smart-GWT 46 Figura 16 Eclipse Helios Figura 17 IDE Eclipse Helios 3.6 com os ícones do GWT e App Engine 47 Figura 18 Detalhes da instalação do GWT e App Engine no Eclipse Figura 19 Ray Ryan no Google I/O Figura 20 Criação de um projeto GTW 49 Figura 21 Estrutura de diretórios de um projeto GTW 50 Figura 22 Modo de desenvolvimento do GWT no Eclipse 52 Figura 23 Configuração dos parâmetros para implantação 53 Figura 24 Implantação da aplicação no Data Center da Google 53 Figura 25 Mensagem no brower 55 Figura 26 Modelos MVC e MVP 56 Figura 27 Diagrama de classes UML para o padrão MVP da tela de login 58 Figura 28 Criação de um arquivo UiBinder 64 Figura 29 Tecnologia Remote Method Invocation 68 Figura 30 Arquitetura do GWT 69 Figura 31 Serialização de um objeto, e persistência em disco rígido 71 Figura 32 Sintaxe do JSON 81 Figura 33 Arquivo JSON processado, com outros widgets acrescentados 82 Figura 34 UTFPR no Google Maps 85 Figura 35 Cotação de ações no <div id= stoklist > 86 Figura 36 Diagrama de classes do projeto simulação de cotação de ações 88 Figura 37 Estudo de caso implantado no app engine 88 Figura 38 Equipamentos com software Android e Chrome OS 90 Figura 39 Prós, contras e crescimento da computação em nuvens 91

10 9 LISTA DE QUADROS Quadro 1 Pacotes java.lang suportados pelo GWT 40 Quadro 2 Pacotes java.lang.annotation suportados pelo GWT 40 Quadro 3 Pacotes java.util suportados pelo GWT 40 Quadro 4 Pacotes java.io suportados pelo GWT 41 Quadro 5 Pacotes java.sql suportados pelo GWT 41 Quadro 6 Manchetes sobre computação em nuvens 89

11 10 LISTA DE SIGLAS E ACRÔNIMOS AJAX API BigTable Blogs CaaS CSS DaaS DeskTop DOM EJB ERP Gadgets GAE Googlipse GQL GUI GWT IaaS ID IDE JDBC JDO Jetty JPA JRE JSF JSNI JSP KHTML LAN MVC MVP OLAP OLTP PaaS PC POJO RIA RMI RPC Asynchronous JavaScript and XML Application Programming Interface Local de persistência de objetos do App Engine Site para publicação rápida e pessoal de artigos Comunicação como um Serviço Cascanding Style Sheets Desenvolvimento como um Serviço Computadores tradicionais de mesa e não portátil Document Object Model Enterprise Java Beans Enterprise Resource Planning Software ou serviço que pode ser agregado a um ambiente maior Google Application Engine Plugin GWT para desenvolvimento de aplicações no IDE Eclipse Google Query Language Grafical User Interface Google Web ToolKit Infraestrutura como um Serviço Indentificador de um objeto ou dado Ambiente de Desenvolvimento Integrado Java Database Connectivity Java Data Objects Servidor de aplicações Java Persistence API Java Runtime Environment Java Server Faces Java Script Native Interface Java Server Pages web browser engine, layout engine ou rendering engine do browser Local Area NetWork Model View Contoller Model View Presenter OnLine Analytical Processing OnLine Transaction Processing Plataforma como um Serviço Personal Computer Plain Old Java Objects Aplicações Ricas para Internet Remote Method Invocation Remote Method Call

12 11 RSS SaaS SQL TI URL W3C WAN Widgets Recurso para agregar conteúdo Web juntamente com os links Software como um Serviço Sequencial Query Language Tecnologia da Informação Uniform Resource Locator World Wide Web Consortium Wide Area NetWork Componentes de interface gráfica

13 12 SUMÁRIO 1 INTRODUÇÃO OBJETIVOS JUSTIFICATIVA MOTIVAÇÃO ESTRUTURA DO TRABALHO 15 2 FUNDAMENTAÇÃO TEÓRICA EVOLUÇÃO DA COMPUTAÇÃO Computação em Cluster Computação em Grade Computação Ubíqua Computação em Nuvens Infraestrutura como um serviço Plataforma como serviço Software como serviço ENTERPRISE RESOURCE PLANNING ERP APLICAÇÕES RICAS PARA INTERNET RIA WEB CROME OS GOOGLE APPLICATION ENGINE GAE SANDBOX DYNAMIC HTML CASCADING STYLE SHEETS DOCUMENTO OBJECT MODEL ASYNCHRONOUS JAVASCRIP AND XML WIDGETS JAVA DATA OBJECTS 33 3 GOOGLE WEB TOOLKIT COMPILADOR JRE EMULATION LIBRARY UI LIBRARY SETTING UP GWT PROJETO E DESENVOLVIMENTO TRABALHANDO COM BROWERS DESENVOLVIMENTO DE INTERFACE COM O USUÁRIO COMUNICAÇÃO COM O SERVIDOR DE APLICAÇÕES MISTURANDO JAVASCRIPT E GWT ADICIONANDO API 84 4 ESTUDO DE CASO 87 5 CONCLUSÃO 89 REFERÊNCIAS 92 APÊNDICES 95

14 13 1 INTRODUÇÃO Vender recursos computacionais como infraestrutura, plataforma (GWT/eclipse) ou software sob demanda, de acordo com a necessidade do cliente de TI, não é novidade, porém se tornava limitada às grandes instituições capazes de adquirir recursos computacionais de grandes fornecedores de poder computacional. 1.1 OBJETIVOS O objetivo deste trabalho é explorar a possibilidade de desenvolvimento de sistemas empresariais no paradigma de computação em nuvens, com a linguagem de programação Java e com a arquitetura de TI que a Google está disponibilizando ao mercado, o Google Application Engine e o Google Web Toolkit JUSTIFICATIVA A primeira transformação no mercado de TI em grande escala ocorreu na década de 80, com o uso dos computadores pessoais (PCs) pelas empresas. As empresas tiveram que fazer pesados investimentos, todos os colaboradores de uma empresa podiam ter um computador pessoal potente conectado via rede local em sua mesa. Desta forma 80% dos custos dos departamentos de TI são destinados para a manutenção do serviço e não em estratégia. Este grande custo, porém não traz um avanço estratégico para a empresa, justificando desta forma a importância de repassar o controle dos dados e o processamento dos serviços de TI para servidores localizados na nuvem (CARR, 2010).

15 MOTIVAÇÃO Acredita-se que essa migração dos sistemas empresariais para as nuvens que já começou, deva levar entre 15 e 20 anos, e será inevitável (CARR, 2010). Na Figura 1 mostra através da ferramenta Google Insights, que retorna um gráfico com a proporção de pesquisas de um termo em relação aos anos, um interesse crescente por cloud computing, e também por app engine e GWT, especialmente na Índia onde são desenvolvidos os grandes sistemas empresariais. Figura 1 Pesquisa no Google Insights por cloud computing realizada em janeiro/2011 Fonte: GOOGLE Trends (2011).

16 ESTRUTURA DO TRABALHO No capítulo 2 foi descrito a evolução da computação até chegar às nuvens, as bases tecnológicas que foram utilizadas como o conceito computação em cluster e grid, computação ubíqua, computação em nuvens, Enterprise Resourse Planning, aplicações ricas para internet, WEB 2.0, Chrome OS, Google Application Engine, Sandbox, Dynamic HTML, Cascading Style Sheets, Document Object Model, AJAX, WidGets, e o Java Data Objects. No capítulo 3 foi apresentado o Google Web Toolkit, e como configurar o ambiente de desenvolvimento integrado Eclipse para trabalhar no ambiente em nuvens com o Google App Engine. No capítulo 4 foi apresentado o resultado de uma aplicação implantada no App Engine e no capítulo 5 uma conclusão deste estudo com as perspectivas futuras da tecnologia em nuvens, especialmente as propostas da Google. No apêndice A e B estão os códigos fontes da classe CotacaoAcoes.java e da página CotacaoAcoes.html.

17 16 2 FUNDAMENTAÇÃO TEÓRICA Para a compreensão do atual estado da computação em nuvem, este capítulo faz uma revisão das bases tecnológicas que serão necessárias para o desenvolvimento de modernos sistemas aplicativos que serão hospedados no ambiente de cloud computing. 2.1 EVOLUÇÃO DA COMPUTAÇÃO Nos primórdios da computação por volta de 1943, o processamento era feito em um único computador (Eniac), depois surgiu o computador multitarefa com uma CPU e vários terminais (IBM 4341), por volta de 1974 vieram os computadores pessoais PC que hoje possuem processamento paralelo (Intel i3, i5, i7 e Xeon). Com a evolução da internet, linguagens de programação, virtualização, e computação distribuída, com as tecnologias de Cluster, Grade e Ubíqua, tornaram possível a computação em nuvem. Estas tecnologias levam à necessidade de aplicativos que possam ser acessados de forma eficiente de qualquer lugar. Este paradigma de computação ubíqua criou a necessidade de repensar o modo como as aplicações são desenvolvidas e disponibilizadas, ao mesmo tempo em que motivou o desenvolvimento de tecnologias capazes de dar suporte ao seu aperfeiçoamento Computação em Cluster Um cluster, é composto por um conjunto de computadores, pode ser construido a partir de computadores convencionais, que são ligados em rede locais, comunicando-se através do sistema operacional, funcionando como se fossem uma máquina única de grande porte. Os tipos mais conhecidos de cluster são: Cluster de Alto Desempennho: Ele funciona permitindo que haja uma grande carga de processamento com computadores comuns.

18 17 Cluster de Alta Disponibilidade: Os sistemas permanecem ativos por um longo período de tempo e em plena condição de uso. Estes clusters nunca param de funcionar, e conseguem detectar erros, se protegendo de possíveis falhas. Cluster para Balanceamento de Carga: Esse cluster tem como função equilibrar a distribuição do processamento entre as máquinas. Requer um monitoramento constante em seus mecanismos de redundância, pois se houver alguma falha, ocorrerá uma interrupção no seu funcionamento. Os clusters dos data centers mais modernos são construidos com vários blades (um servidor blade é um despojado computador servidor com um design modular otimizado para minimizar o uso de espaço físico e energia). Na Figura 2 é mostrada a foto do Lonestar 4 do centro de computação avançado da universidade do Texas em Austin, que entrou em operação em fevereiro de Este cluster é composto por blades PowerEdge M610 da Dell, cada blade contendo dois processadores Intel Xeon X5600 Westmere, de seis núcleos, o sistema atinge um pico de 302 teraflops (um teraflop equivale a um trilhão de operações por segundo), tem um total de 44,3 terabytes de memória RAM e 1,2 petabytes de armazenamento de disco (MILLER, 2011). Figura 2 Supercomputador Lonestar 4 Fonte: Miller (2011).

19 Computação em Grade Computação em grade, é um modelo computacional capaz de alcançar uma alta taxa de processamento dividindo suas tarefas entre diversos clusters, podendo ser em rede local (LAN) ou rede de longa distância (WAN), que formam uma única máquina virtual. Esses processos são balanceados entre os cluters do grid computing, evitando a ociosidade de processamento de máquinas pertencentes à grade Computação Ubíqua A computação ubíqua é a junção da computação móvel e da computação pervasiva. O conceito de computação pervasiva indica que o computador está embarcado no ambiente de forma invisível para o usuário (WLAN). O computador tem a capacidade de obter informações do ambiente no qual ele está inserido, e utilizar este ambiente para configurar, ajustando a aplicação para melhor atender as necessidades do dispositivo ou usuário. Na Figura 3 é mostrada as eras e as dimensões da computação. Figura 3 Eras e dimensões da computação Fonte: Adaptado de Weiser (2011). Na Figura 4 ilustra um dos Data Centers da Google, onde podemos ver o Cluster, o Grid computing no mapa mundi, o armazenamento de dados em raids (conjunto independente de discos redundantes), a infraestrutura de rede e um dos prédios com seus resfriadores a vista, para abrigar toda esta tecnologia (GOOGLE DATA CENTER..., 2009).

20 19 Figura 4 Data Center da Google. Fonte: Adaptado de GOOGLE Data Center... (2009) Computação em Nuvens Uma definição para o paradigma de computação em nuvens, podendo ser tomada como referência é: Computação em nuvem é um paradigma de computação em larga escala que possui foco em proporcionar economia de escala, em que um conjunto abstrato, virtualizado, dinamicamente escalável de poder de processamento, armazenamento, plataformas e serviços, são disponibilizados sob demanda para clientes externos através da internet. (FOSTER apud MÜLLER, 2010, p. 18). A idéia da computação em nuvem consiste em que tudo é serviço, uma espécie de self-service de tecnologias da informação, disponibilizados ao usuário, podendo ser ele um

21 20 desenvolvedor ou usuário final. Muitos serviços de computação em nuvem são oferecidos pelo modelo chamado Utility Computing, o qual é definido como um pacote de recursos computacionais medidos e cobrados de forma semelhante aos serviços de utilidade pública, como eletricidade, água, telefone, TV por satélite ou banda larga. Este modelo prevê uma otimização dos investimentos feitos pelos clientes nos recursos de hardware, diminuindo a necessidade de grandes investimentos iniciais, possibilitando o aluguel de mais recursos à medida que forem necessários, podendo ainda alguns provedores de serviços se ajustarem dinamicamente às necessidades de demanda, na medida em que o cliente contratar mais recursos apenas para momentos de pico, evitando que recursos fiquem ociosos a maior parte do tempo. Atualmente os serviços de computação em nuvem possuem três categorias bem definidas de acordo com os recursos e o modo que estes recursos são disponibilizados. Na Figura 5 é ilustrada que a computação em nuvem é impulsionada pelos conceitos de utility computing, on-demand computing, autonomic computing e Green IT, e as categorias de serviços: Infraestrutura como um Serviço (IaaS) Plataforma como um Serviço (PaaS) Software como um Serviço (SaaS) Figura 5 Papéis da computação em nuvem Fonte: Adaptado de WHAT... (2011).

22 Infraestrutura como um serviço A Infraestrutura como um serviço (IaaS), e que geralmente se apóia em tecnologias como virtualização, é a base dos serviços de computação em nuvem, sendo a parte que se refere à disponibilização dos recursos de hardware formados pelos servidores, armazenamento e processadores. O consumidor do serviço adquire uma máquina virtual operando sobre a estrutura de servidores do provedor, sendo a quantidade de processamento e armazenamento contratados disponibilizados através da configuração adequada de tais máquinas virtuais. A vantagem destes serviços se encontra na facilidade de contornar problemas de escalabilidade dos sistemas, na grande capacidade de suportar demandas crescentes por recursos de forma uniforme, bastando para isto apenas ajustar as configurações das máquinas virtuais contratadas Plataforma como serviço Plataforma como um Serviço (PaaS) que se destina aos desenvolvedores, é um tipo de serviço que procura prover toda a estrutura necessária para um ambiente de desenvolvimento. Neste serviço o ambiente de desenvolvimento disponibiliza uma plataforma computacional completa, incluindo sistema operacional, linguagens de programação, bibliotecas e sistemas gerenciadores de banco de dados, disponíveis através da nuvem. Deste modo os desenvolvedores podem construir suas aplicações sem a necessidade de instalar qualquer ferramenta no seu computador e distribuí-la de forma simples. Um serviço completo de PaaS todo o ciclo de vida do software deve ser suportado no mesmo ambiente computacional, reduzindo os custos de desenvolvimento, manutenção e distribuição das novas versões das aplicações.

23 Software como serviço Uma definição para o modelo Software como um Serviço (SaaS), poderia ser a de software distribuído como um serviço hospedado e acessado através da internet. Podemos citar uma variedade de exemplos de aplicações em que neles se enquadram, como é o caso das aplicações de webmail, aplicações que tornaram praticamente dispensáveis os aplicativos clientes de desktop convencionais, sites de compartilhamento de fotos e vídeos, e aplicações de escritório como as disponibilizadas pelo Google através do GoogleDocs. Computação em nuvem despertou a necessidade para o desenvolvimento de novas tecnologias e propostas no desenvolvimento e distribuição de aplicações, bem como tecnologias de suporte e infraestrutura, mostrando ser um campo com grande potencial de geração de novas necessidades, que terão que ser supridas pelos futuros profissionais de TI. Alguns autores também consideram DaaS e CaaS como modelo de serviço de computação em nuvem. O DaaS (Development as a Service) é uma aplicação Web que usa conteúdo de mais de uma fonte para criar um novo serviço completo, podem possuir códigos de terceiros que se comunicam através de uma interface publica ou de uma API como os RSS, Widgets e Blogs. O CaaS (Communication as a Service) é o conjunto de serviços que satisfaz a função de comunicação, como telefonia IP, mensagens instantâneas e videoconferência. 2.2 ENTERPRISE RESOURCE PLANNING ERP ERP ou Sistemas Integrado de Gestão Empresarial são sistemas de informação que integram em um único sistema todos os dados e processos de uma organização empresarial. A integração pode ser analisada sob a perspectiva funcional (sistemas de: finanças, contabilidade, recursos humanos, fabricação, marketing, vendas, compras, etc) e sob a perspectiva sistêmica com os sistemas transacionais (OLPT), e os sistemas analíticos (OLAP) para prover as informações para tomada de decisão pelos gestores da organização. Os ERPs são implantados em uma infraestrutura de software desenvolvida para integrar os diversos setores de uma empresa, possibilitando a automação dos processos empresariais, e armazenamento de todos os dados de negócios em um único banco de dados.

24 23 Processando os dados deste banco de dados, são geradas informações para os gestores, que por sua vez criam conhecimento que geram riquezas e lucro para as empresas. O maior benefício que um sistema de ERP proporciona a uma corporação, está na maior confiabilidade dos dados, processos on-line, e a diminuição do retrabalho. Algo que é atingido com o comprometimento dos funcionários, cada um com suas responsabilidades por fazer os lançamentos que alimentam toda a cadeia de módulos do sistema, e que fazem com que a empresa possa interagir em tempo real. Desta forma, as informações fluem pelos diversos módulos em tempo real. Um pedido de vendas dispara um processo de fabricação com o envio de dados para multiplos módulos, do estoque de insumos à logística do produto. Tudo realizado com dados integrados e não redundantes. 2.3 APLICAÇÕES RICAS PARA INTERNET - RIA Aplicações Ricas para Internet (RIA - Rich Internet Application) são Aplicações Web que tem funcionalidades de softwares tradicionais do tipo Desktop. RIA típicos injetam todo o processamento da interface para o navegador da internet, que assincronamente disparam pedidos de processamento para o servidor de aplicação, com tecnologia JavaScript e XML, o AJAX. RIAs na maioria dos casos não necessitam de instalação na máquina cliente e rodam localmente em um ambiente seguro chamado sandbox. Sandbox executa seus programas em um espaço separado (caixa de areia) que é apagado automaticamente, impedindo fazer alterações permanentes no computador cliente. Executando o browser sob a proteção do Sandbox assegura que todo o software mal intencionado baixado pelo navegador está preso na caixa de areia, e podem ser descartados trivialmente. O histórico de navegação, cache, cookies e arquivos temporários coletados durante a navegação na Web estariam na caixa de areia e não vaza para o Sistema Operacional, vírus e outros softwares mal intencionados que podem estar escondidos em não pode sair da caixa de areia e não pode infectar o sistema real. Na Figura 6 é ilustrada uma aplicação RIA (igoogle) implementada com o GWT pela Google. O igoogle usa o conceito de gadgets, um pequeno objeto tecnológico, que tem uma função específica. Estes gadgets têm o comportamento similar de janela no ambiente desktop, onde possuem a funcionalidade de maximizar, mover, remover, inserir novos gadgets e configurar a aparência dos mesmos. Os gadgets são construídos a partir dos widgets.

25 24 Figura 6 Exemplo de aplicação RIA e gatgets Fonte: igoogle (2011). 2.4 WEB 2.0 O termo Web 2.0 é utilizado para descrever a segunda geração de comunidades e serviços Web como AdSense, Ajax, Blogs, Mash-ups, RSS, Tagging [rotulação] e Wikis. Apesar da conotação de uma nova versão para a Web, não se refere à inovação de técnicas, mas a uma mudança na forma como ela é utilizada por usuários e desenvolvedores, tendência que reforça o conceito de troca de informações e colaboração dos internautas com sites e serviços virtuais. A idéia é que o ambiente on-line se torne mais dinâmico e que os usuários colaborem para a organização de conteúdo (MOREIRA, 2009). Como toda forma de classificação histórica, não pode se dizer exatamente quando termina ou começa a Web 2.0 cronologicamente. Na Figura 7 é ilustrado estes padrões e tendências de comportamento na rede, colaborando com a organização de idéias e conceitos em uma indústria nova e complexa, por sofrer muitas mutações justamente por estar ainda em sua fase embrionária.

26 25 Na web 2.0 como plataforma, os sites deixam de ter uma característica estática para se transformarem em verdadeiros aplicativos no servidor. As funcionalidades dos sites serão muito mais poderosas, lembrando a sofisticação de softwares que rodam no desktop de um PC. Estes aplicativos web tem também uma integração mais eficiente com a interface no cliente (browser), que passa a ser mais poderosa com tecnologias como XML e JavaScript, o AJAX, que podem gerar uma usabilidade mais intuitiva e que lembra as interfaces desenvolvidas em código de baixo nível (C++ e afins) (MOREIRA, 2009). Figura 7 Tecnologias e tendências na Web Fonte: Hodgson (2008). 2.5 CROME OS A computação em nuvem leva ao fim os sistemas desenvolvidos no modelo DeskTop com o surgimento do Chorme OS da Google. Com o surgimento dos netbooks com sistema operacional Chrome OS, smartphones com sistema operacional Android da Google, tablets com sistema operacional Android 3.0 e redes sem fio ligadas à internet em alta velocidade, não há mais a necessidades de termos grandes Hard Disk, memórias RAM de 8 GB,

27 26 processadores multiprocessados com até 4 nucleos, compra, instalação e manutenção de software, backups atualizados, preocupação com segurança dos dados e virus nas máquinas clientes. Para utilizar algum serviço nas nuvens basta termos uma rede banda larga, e um equipamento com um navegador internet ou com Chorme OS onde o próprio navegador é o sistema operacional. Alguns usuários ainda necessitarão de aplicações DeskTop, os desenvolvedores de software por exemplo continuarão com suas potentes máquinas, assim como os usuários de games de ponta em que é exigido grandes processadores. Os Chromebooks são uma versão radical do conceito de netbook com o sistema operacional Chrome OS, podem ser definidos como a experiência de netbook levada às ultimas consequências. Aqui a ideia é ter tudo armazenado na nuvem para que a máquina seja o mais rápida e leve possível. O Chromebook fará tudo baseado na web. Nesta arquitetura não é o computador pessoal que envia ou edita um documento, ele é apenas um meito para solicitar e receber os serviços da nuvem. 2.6 GOOGLE APPLICATION ENGINE - GAE O Google foi um dos primeiros a implantar uma plataforma em cloud aberta para desenvolvimento de aplicativos. O Google Application Engine, App Engine ou GAE é um serviço contido no modelo de IaaS, DaaS e PaaS, que diferentemente de seu conceito original, em que todo o ambiente responsável pelo ciclo de desenvolvimento e publicação do software se dá através de ferramentas disponibilizadas via web, disponibiliza um ambiente desktop completo através de plugins para o Eclipse IDE chamado de Googlipse para criar as aplicações. Com o Google App Engine, pode-se criar aplicativos web nos mesmos moldes de sistemas escaláveis dos aplicativos do Google. Os aplicativos implantados no Google App Engine são fáceis de criar, manter e escalar à medida que seu tráfego e armazenamento de dados precisam crescer. Uma vez o implantado o sistema no app engine, os clientes já poderão acessar e usar o aplicativo. O Google é conhecido por ser altamente confiável, e por sua infraestrutura de alto desempenho. Com o Google App Engine, pode-se beneficiar dos 10 anos de experiência e conhecimento que o Google possui em executar sistemas altamente escaláveis e orientados

28 27 para o desempenho. As mesmas políticas de segurança, privacidade, escalabilidade e proteção de dados para os seus aplicativos se aplicam a todos os aplicativos do Google App Engine. A Google oferece um leque de API s para acessos a seus serviços. A idéia da Google é fornecer estas API s para usar a nuvem da Google em sistemas, precisando disponibilizar vídeos em uma aplicação use a You-tube API. Estas API s podem ser vistas na Figura 8. Figura 8 Tabela periódica de API s para os produtos Google Fonte: GOOGLE S... (2011). O Google App Engine sempre será gratuito para iniciar, afirma a Google, até o limite de 500 MB de armazenamento e 5 milhões de acessos de página mensais, e quando este limite for atingido é só ativar o faturamento e pagar o que for usado com os seguintes preços em dólar americano. Tabela 1 - O custo dos recursos de computação do app engine da Google Recurso Unidade Custo unitário Largura de banda de saída gigabytes $0,12 Largura de banda de entrada gigabytes $0,10 Tempo de CPU Horas da CPU $0,10 Dados armazenados gigabytes por mês $0,15 Destinatários de destinatários $0,0001 Fonte: BILLING... (2011). Conclui-se pela Tabela 1, que com $0.94 mensais é possível manter um sistema com uso de 2 horas de CPU ($0.20), 2 GB de armazenamento ($0.30), 2 GB de saída de informações ($0.24) e 2 GB de entrada de dados ($0.20). Através do console de administração

29 28 do aplicativo é possível gerenciar o orçamento do aplicativo, bem como os recursos consumidos por ele. Na Figura 9 é mostrada a console da máquina virtual do GAE que será usada no estudo de caso deste trabalho, para acessar o serviço deve fazer login. Google Application Engine possui suporte a aplicativos criados com o uso das linguagens de programação Python e Java. O App Engine permite o uso das bibliotecas padrões da linguagem Java, que será usado neste trabalho, com exceção das que infrinjam as restrições impostas com o grande objetivo de garantir o bom funcionamento do sistema. Para diminuir o efeito negativo das restrições, o Google App Engine criou uma série de serviços que facilitam o desenvolvimento e execução de determinadas tarefas. Os aplicativos criados e disponibilizados a partir do Google App Engine podem ser acessados a partir do domínio livre no padrão appspot.com oferecido pelo serviço adicionado ao identificador da aplicação escolhido na hora da sua criação, ficando da forma: identificador.appspot.com. (ex: domínio criado para o estudo de caso). Figura 9 Console de administração do app engine da Google Fonte: RUN... (2011).

30 SANDBOX O Application Engine, implementa de forma inovadora o paradigma de computação em nuvem, em que o armazenamento e processamento do aplicativo são distribuídos entre os clusters da Google, e necessita de um ambiente virtual seguro para cada aplicativo. Este ambiente chamado de sandbox disponibiliza acesso limitado ao sistema operacional. Esta limitação possibilita que o Google App Engine distribua as solicitações de web da aplicação entre diversos clusters, podendo iniciar ou interromper os servidores para atender às demandas de tráfego. O GAE também permite que cada aplicação possua uma área isolada (caixa de areia) confiável e segura independente de hardware, sistema operacional e localização física do servidor, garantindo que uma aplicação não influencie no funcionamento de outras. Este método de virtualização além de possibilitar a distribuição na execução do aplicativo, evita em um ambiente compartilhado, o uso abusivo de recursos por uma aplicação afetando desempenho das demais. 2.8 DYNAMIC HTML Dynamic HTML, ou DHTML, é união das tecnologias javascript, HTML e uma linguagem de apresentação, como as folhas de estilo CSS, tudo funcionando em conjunto com o Modelo de Objeto de Documentos (DOM), para permitir que uma página Web seja modificada dinamicamente no próprio navegador da máquina do cliente, sem necessidade de novos acessos ao servidor web. A especificação oficial do DHTML foi feita pela W3C, mas a Netscape e a Microsoft incluíram vários recursos extras que ajudaram ainda mais o DHTML. Esses DHTMLs incluiram novas capacidades de alterar as propriedades das marcações tags HTML dinamicamente. O DHTML da Microsoft, permite que se adicionem efeitos como sombra e néon a imagens apresentadas dentro de um documento HTML. DHTML é um conjunto de recursos que fornecem um controle inovador sobre a apresentação do conteúdo de páginas da Web, além de possibilitar a inclusão de componentes (widgets) multimédia, como animações, diretamente no código HTML, sem a necessidade de plug-ins. O HTML Dinâmico é adotado, por estabelecer novos patamares de usabilidade e movimento na internet a um baixo custo medido em velocidade, abrangência e flexibilidade (HTML..., 2011)

31 CASCADING STYLE SHEETS Cascading Style Sheets (CSS) é uma linguagem de estilo utilizada para padronizar a apresentação de documentos codificados em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é estabelecer uma separação entre o formato e o conteúdo de um documento HTML. Ao invés de especificar a formatação dentro do documento, o desenvolvedor cria um link para uma página que contém os estilos, fazendo o mesmo para todas as páginas de um site. Quando quiser alterar a aparência do site basta portanto modificar apenas o arquivo CSS. body { font-family: Arial, Verdana, sans-serif; background-color: #FFFFFF; margin: 5px 10px; Código 1 - Exemplo de CSS Fonte: Autoria própria. O Código 1 é um exemplo de arquivo CSS em que define para o corpo da página HTML, um fonte padrão Arial, se não existir este fonte na máquina cliente o CSS substitui por Verdana, caso não exista define qualquer fonte sans-serif, este estilo define também a cor no formato hexadecimal que no caso é branco, e as margens. A documentação detalhada do CSS pode ser obtidas no site da W3C World Wide Web Consortium, um consórcio de diversas empresas que trabalham juntas para estabelecer padrões para a Internet. Hoje ainda nenhum browser suporta igualmente as todas as definições do CSS. Desta forma, o webdesigner deve verificar o comportamento de suas folhas de estilo em browsers de vários fabricantes, e especialmente em mais de uma versão, para se garantir que o que foi codificado seja apresentado da forma planejada.

32 DOCUMENTO OBJECT MODEL Document Object Model (DOM) fornece uma representação estruturada de um documento HTML (no contexto de navegadores web) a partir da qual seus elementos podem ser manipulados através de JavaScript, e fornece uma notação padronizada entre os navegadores. Mesmo não sendo totalmente, é razoavelmente padronizada, por isto a importância de se testar as páginas em diferentes navegadores e em diferentes versões. Qualquer alteração feita em um elemento da árvore é imediatamente refletida na página que está sendo exibida pelo navegador. <html> <head> <title>ajax - conceitos básicos</title> </head> <body> <h1>exemplo de árvore DOM</h1> </body> </html> Código 2 - Exemplo de Código HTML Fonte: Lima (2010). Na Figura 10 é mostrada a representação da árvore DOM feita pelo browser: Figura 10 Representação de uma árvore DOM Fonte: Lima (2010).

33 32 Todos os componentes da HTML são representados como um nó na árvore DOM, inclusive fragmentos de texto. Existem tipos diferentes de nó. Nó de elemento, para representar <Tags> da HTML, nó de atributo, para representar uma propriedade de um nó de elemento, e nó de texto, para representar cadeias de caracteres da página. Cada nó pode possuir ou não filhos e pertencer a um único pai, cada nó pode possuir um atributo identificador, que através de JavaScript pode-se recuperar, adicionar, modificar e remover nó na árvore DOM. Toda alteração é refletida na página sem a necessidade de carregar o documento HTML novamente ASYNCHRONOUS JAVASCRIPT AND XML Asynchronous JavaScript and XML (AJAX), é uma técnica de programação que faz uso conjunto de outras tecnologias como DHTML e XML. Grande parte da programação é realizada no navegador do cliente, totalmente baseado em Java Script, XML e utilização da árvore DOM que os navegadores implementam para promover a atualização de partes específicas da aplicação. Ajax permite solicitações assíncronas a um determinado serviço e atualiza somente os campos necessários para executar os requisitos da aplicação, ao invés de recarregar toda a página, desta forma permite maior interatividade da página e torna as aplicações web mais dinâmicas. (LIMA, 2010) WIDGETS O elemento básico de um programa com interface gráfica se chama widget, podem ser janelas, botões, menus, ícones, barras de rolagem, etc. Um programa deve definir uma hierarquia de árvore invertida de widgets, na qual alguns widgets estão subordinados a outros. Normalmente, todos os widgets são subordinados a um widget principal. Trabalhar com vários widgets é a principal diferença entre um programa GUI e um programa normal. No último caso, o desenvolvedor procura sempre saber qual ponto do software está sendo executado, no programa GUI é o sistema gerenciador de janelas que escolhe qual parte do software (ou seja, qual parte de qual widget) está sendo rodado. As mensagens entre os

34 33 diversos widgets usualmente é feita de forma indireta, eles disparam mensagens indicando as ações executadas sobre ele, e estas mensagens são recebidas pelos outros widgets para efetuar as ações desejadas. Na figura 11 é ilustrado alguns widgets do GWT 2. Figura 11 Alguns WidGets do GWT 2 Fonte: Adaptado de WIDGET... (2011) JAVA DATA OBJECTS Java Data Objects (JDO), trata-se de um padrão Java para persistência de dados independente do sistema de banco de dados utilizado, uma aplicação que utiliza este padrão para modelar suas entidades de dados para utilizar como sistema de armazenamento o BigTable do Google ou migrar para algum banco de dados relacional, como o MySQL, sem que isso afete seu modelo de dados. Deste modo perde-se um pouco em eficiência de modelagem, mas se ganha muito em portabilidade. Para que isto seja possível é necessário que haja uma implementação do padrão executando em nível de servidor JVM, responsável

35 34 por mapear os modelos fisicamente ao sistema escolhido. O responsável por esta tarefa no App Engine é o DataNucleus Access Platform implementando a versão 2.3 do JDO. A modelagem das entidades baseia-se nos chamados POJOs (Plain Old Java Objects), que nada mais são do que objetos simples dotados de atributos ou propriedades, e métodos de acesso (atribuição e obtenção) a estes atributos, adicionados de anotações JDO para torná-los passíveis de persistência, analogicamente como acontece com a tecnologia hibernate (JAVA..., 2011). A linguagem de persistência no DataStore do GAE é o GQL Google Query Language, muito parecido com o SQL. A hospedagem no GAE foi desenvolvida para utilizar aplicações 100% cloud, logo é disponibilizado para todas as contas registradas um banco NoSQL para toda aplicação criada. A plataforma GAE disponibiliza o padrão JDO e JPA. O DataStore da Google é o Bigtable projetado de forma confiável a escala de petabytes de dados e milhares de máquinas servidoras. Uma entidade persistente no sistema de armazenamento a ser modelada com JDO utiliza uma classe simples, contendo atributos, métodos de acesso aos atributos e anotações JDO correspondentes. O nome da entidade será definido pelo nome da classe, e os nomes das propriedades que serão armazenadas serão os mesmos definidos no modelo. A define que a classe é apta a ser persistida. package guestbook; import java.util.date; import javax.jdo.annotations.idgeneratorstrategy; import javax.jdo.annotations.identitytype; import javax.jdo.annotations.persistencecapable; import javax.jdo.annotations.persistent; import javax.jdo.annotations.primarykey; import = IdentityType.APPLICATION) public class = IdGeneratorStrategy.IDENTITY) private Long private User private String private Date date; public Greeting(User author, String content, Date date) {

36 35 this.author = author; this.content = content; this.date = date; public Long getid() { return id; public User getauthor() { return author; public String getcontent() { return content; public Date getdate() { return date; public void setauthor(user author) { this.author = author; public void setcontent(string content) { this.content = content; public void setdate(date date) { this.date = date; Código 3 - Exemplo de anotações POJO e JDO Fonte: JAVA... (2011). Esta classe simples define três propriedades para uma saudação: author, content e date. Esses três atributos privados da classe acima são anotados para informar que o DataNucleus deve persisti-los como propriedades de objetos no armazenamento de dados do Google App Engine. Essa classe define os métodos set e get das propriedades ou atributos. Elas são usadas apenas pelo aplicativo e não são necessárias para a JDO. A classe define também um atributo chamado id, um Long anotado O armazenamento de dados do Google App Engine usa o conceito de chaves de entidade e pode representar a chave de diversas maneiras no objeto. Nesse caso, o campo da chave que é o identificador de um objeto do tipo Greeting é um inteiro long, e é definido automaticamente como um ID numérico exclusivo quando o objeto é salvo. Na Figura 12 é ilustrada uma comparação entre as tecnologias de persistência JDBC, JPA, EJB2, ORM proprietários e o JDO.

37 36 Figura 12 Comparação das tecnologias de persistências Fonte: JAVA... (2011). Benefícios do uso de JDO para Programação de Aplicativos: Facilidade de uso: Os desenvolvedores de aplicativos podem se concentrar em seu modelo de objeto de domínio e deixar os detalhes de persistência (campo-a-campo de armazenamento de objetos) para a implementação JDO. Portabilidade: aplicações escritas com a API JDO podem ser executadas em várias implementações sem recompilar ou alterar o código fonte. Metadados que descreve o comportamento externo de persistência para o código-fonte do Java inclue a maioria dos recursos mais usados do mapeamento O/R, e é altamente portável. Independência Banco de Dados: Aplicações escritas com a API JDO são independentes do banco de dados. JDO dá suporte a muitos tipos diferentes de armazenamentos de dados transacionais, incluindo bancos de dados relacionais e objeto, XML, arquivos simples, e outros. Alto desempenho: Os desenvolvedores de aplicativos podem delegar os detalhes de persistência para a implementação JDO, que podem otimizar o acesso a padrões de dados para um ótimo desempenho. Integração com EJB: As aplicações podem tirar proveito dos recursos do EJB, tais como o processamento de mensagens a distância, coordenação de transações distribuídas automática e segurança, utilizando os modelos de objeto do mesmo domínio em toda a empresa.

38 37 3 GOOGLE WEB TOOLKIT O Google Web Toolkit é um kit de desenvolvimento de aplicações web da Google, que permite desenvolver interfaces ricas, escrevendo código fonte na linguagem de programação Java, gerando JavaScript compatíveis com a maioria dos navegadores Web. A formatação do GWT foi elaborada para a utilização da plataforma GAE, pois a padronização da estrutura do projeto facilita escalar a aplicação desenvolvida e é uma alternativa ao JSF para o desenvolvimento orientado a componentes (GOOGLE WEB..., 2011). A ferramenta trabalha com o código dividido em duas partes distintas, uma com código a ser executado pelo cliente e outra com código a ser executado pelo servidor através de chamadas assíncronas feitas pelo código no cliente. O código Java destinado a ser executado pelo cliente é automaticamente compilado pelo Google Web Toolkit para código JavaScript capaz de ser executado por navegadores, deixando a cargo do compilador questões de compatibilidade entre navegadores e de otimização. Aplicativos baseados neste conceito têm uma maior usabilidade por evitar o uso excessivo de solicitações e se aproximar da interação proporcionada por aplicativos para desktop, evitando freqüentes carregamentos das páginas do aplicativo, melhorando a experiência de uso, algo que é um dos principais problemas de aplicativos web. O próprio Google utiliza esta ferramenta em vários de seus aplicativos, o Gmail, a rede social Orkut e o conjunto de ferramentas como processadores de texto e planilhas do Google Docs. O GWT pode ser utilizado por qualquer aplicativo Java para web e possui integração com o Google Application Engine, sendo distribuído juntamente com seu plug-in para Eclipse o Googlipse. O modelo de desenvolvimento de aplicações GWT, tornou possível que uma aplicação Web seja escrita inteiramente em Java, desobrigando a usar tecnologias de páginas dinâmicas como o JSP por exemplo. Por meio do processo de compilação, o GWT gera código JavaScript cross-browser, garantindo que uma aplicação seja construída através de uma forma de programação, que utiliza tecnologias implementadas em qualquer navegador Web que suporte as especificações do W3C. Desde seu lançamento na conferencia JavaOne em maio de 2006, o GWT vem evoluindo passando da versão 1.0 para a 2.1 atualmente, que traz muitas novidades, entre elas novos widgets com suporte a data binding (recurso permite efetuar a ligação com dados de diversas fontes de dados sem ter que escrever código, permitindo gerenciar a execução e edição de dados complexos) e um framework Model-View-Presenter.

39 38 Uma desvantagem do GWT atualmente é que suas páginas não podem ser indexadas pelos mecanismos de busca, uma vez que elas são geradas dinamicamente. Para contornar o problema é usado cloaking, que é uma técnica utilizada por webmasters para entregarem conteúdos diferentes de uma mesma URL para visitantes específicos do site. Os visitantes podem ser classificados pelo tipo de Web Crawler (programa de computador que navega pela World Wide Web de uma forma metódica e automatizada) Human User ou por localidade. Existem 3 métodos de cloaking, o cloaking por User-Agent que detecta o user-agent e o classifica, o cloaking por IP Delivery que entrega um conteúdo diferente para um usuário de IP específico, e o cloaking por Geo-Targeting que fornece um conteúdo diferente para usuários dentro de uma faixa de IPs que delimitam uma região do mundo específica (MÜLLER, 2011) O GWT possue tres componentes básicos, o compilador Java-to-JavaScript, o emulador Java Runtime Environment (JRE) e a liblioteca de interface gráficas com o usuário (GUI). 3.1 COMPILADOR O compilador Java trabalha a partir das versões 1.5, e produz distintos códigos JavaScript para serem executados em todos os browser suportados. Hoje todas as versões do Safari e FireFox, Opera, versões 6,7 e 8 do Internet Explorer, e Google Chrome suportam JavaScript, e são baseados no mesmo layout do WebKit (motor de renderização para navegadores que foi desenvolvido baseado no KHTML). O JavaScript gerado fica muito maior se for usado a internacionalização, que são processos de desenvolvimento e/ou adaptação do softwares para uma língua e cultura de um país. O código gerado pode ser minimizado para otimizar o download e facilitar o code splitting, onde o JavaScript é quebrado em pedaços e feito o download sob demanda. O compilador tem diversos otimizadores de código, que produz códigos JavaScript de alta qualidade, as mais importantes são: Dead Code Elimination: Códigos que nunca são chamados não são incluidos no JavaScript gerado, por exemplo caso o software use uma classe com dez métodos e só é usado dois métodos dos dez, será gerado código somente para os médotos chamados. Similarmente se esta classe herda outros métodos de outra classes e não são chamados, estes métodos não serão gerados no JavaScript.

40 39 Constant Folding: Quando o valor de uma expressão é conhecido em tempo de compilação, ele é calculado neste momento e o resultado será usado no código JavaScript gerado. Por exemplo, a instrução no GWT Window.alert( Hello + World ); gerará o código $wnd.alert( Hello World ) no JavaScript. Copy Propagation: O valor de uma variável conhecida pode ser eliminada em tempo de compilação. Por exemplo o codigo int a=15; int b=a*a+5; a segunda instrução será compilada como int b=230. String Interning: Para evitar a criação de strings de mesmo mone em java, pois elas são imutáveis, ou seja para alterar seu valor é necessário a criação de outro objeto string, elas são criadas internamente uma única vez com o nome $intern_22 por exemplo e usada em todo o código java. Code Inlining: O GWT substitui a chamada dos métodos pelo seu corpo, caso ele seja pequeno e simples. O JavaScript não tem inteiro de 64 bits, então o GWT emula variáveis long com um par de inteiros de 32 bits. Isto funciona bem mas é lento, e quando se usa JSNI (Java Script Native Interface) não é possível passar esta variável. Para números ponto flutuante, JavaScript prove somente double 64 bits, que pode gerar overflow e resultados imprecisos, pois estas operações não funcionam exatamente como em Java. Exceptions são manipuladas diferentes que Java. Em JavaScript a maioria das exeções Java como NullPointerExeption ou MemoryOverFlowExeption são traduzidas por JavaScriptExeption. Isto causa um problema, um NullPointerExeption não pode ser diferenciado de um MemoryOverFlowExeption em JavaScript. 3.2 JRE EMULATION LIBRARY Google Web Toolkit inclui uma biblioteca que emula um subconjunto da biblioteca de runtime do Java. Nos Quadros 1, 2 e 3 são mostrados o conjunto de pacotes JRE, que o GWT pode traduzir automaticamente.

41 40 Pacotes java.lang ArithmeticException Error Override ArrayIndexOutOfBoundsException Exception Runnable ArrayStoreException Float RuntimeException AssertionError IllegalArgumentException Short Boolean IllegalStateException StackTraceElement Byte IndexOutOfBoundsException String CharSequence Integer StringBuffer Character Iterable StringBuilder Class Long StringIndexOutOfBoundsException ClassCastException Math SuppressWarnings Cloneable NegativeArraySizeException System Comparable NullPointerException Throwable Deprecated Number UnsupportedOperationException Double NumberFormatException Void Enum Object Quadro 1 Pacotes java.lang suportados pelo GWT Fonte: GOOGLE WEB (2011). Pacotes java.lang.annotation Annotation ElementType RetentionPolicy AnnotationFormatError IncompleteAnnotationException Target AnnotationTypeMismatchException Inherited Documented Retention Quadro 2 Pacotes java.lang.annotation suportados pelo GWT Fonte: GOOGLE WEB (2011). Pacotes Java.util AbstractCollection EnumSet MissingResourceException AbstractList Enumeration NoSuchElementException AbstractMap EventListener PriorityQueue AbstractQueue EventObject Queue AbstractSequentialList HashMap RandomAccess AbstractSet HashSet Set ArrayList IdentityHashMap SortedMap Arrays Iterator SortedSet Collection LinkedHashMap Stack Collections LinkedHashSet TooManyListenersException Comparator LinkedList TreeMap ConcurrentModificationException List TreeSet Date ListIterator Vector EmptyStackException EnumMap Map Map.Entry Quadro 3 Pacotes java.util suportados pelo GWT Fonte: GOOGLE WEB (2011).

42 41 FilterOutputStream OutputStream Pacotes java.io PrintStream Serializable Quadro 4 Pacotes java.io suportados pelo GWT Fonte: GOOGLE WEB (2011). Date Time Pacotes java.sql Timestamp Quadro 5 Pacotes java.sql suportados pelo GWT Fonte: GOOGLE WEB (2011). Pacotes extras para prover funcionalidades ao GWT: com.google.gwt.i18n.client.datetimeformat e com.google.gwt.i18n.client.numberformat prove funções para formatação. com.google.gwt.core.client.duration prove funções de timing. com.google.gwt.user.client.random função para substituir java.util.random. com.google.gwt.user.client.timer função para substituir java.util.timer. 3.3 UI LIBRARY GWT prove um grande conjunto de widgets e painéis. Usar widgets é similar a usar swing em aplicações desktop, mas não há gerenciador de layout, e painéis ou CSS são usados para posicionar os objetos. Widgets são mapeados dentro do browser como objetos, e compartilha o aspecto visual de cada navegador web. Estilos podem ser aplicados a cada objeto separadamente ou genericamente usando CSS que é a solução preferencial. Na Figura 13 é mostrado os nomes dos widgers do GWT 2.1.

43 42 Figura 13 Nomes dos widgets GWT 2.1 Fonte: Adaptado de WIDGET... (2011). picker. Exemplo: Criação de um Date Picker. Na Figura 14 é mostrado a imagem de um date Figura 14 Date Picker. Fonte: DATE (2011).

44 .gwt-datepicker { border: 1px solid #A2BBDD; cursor: default;.gwt-datepicker td,.datepickermonthselector td:focus { outline: none.datepickermonthselector td:focus { outline: none.datepickerdays { width: 100%; background: white;.datepickerday,.datepickerweekdaylabel,.datepickerweekendlabel { font-size: 75%; text-align: center; padding: 4px; outline: none;.datepickerweekdaylabel,.datepickerweekendlabel { background: #C3D9FF; padding: 0px 4px 2px; cursor: default;.datepickerday { padding: 4px; cursor: hand; cursor: pointer;.datepickerdayistoday { border: 1px solid black; padding: 3px;.datePickerDayIsWeekend { background: #EEEEEE;.datePickerDayIsFiller { color: #888888;.datePickerDayIsValue { background: #aaccee;.datepickerdayisdisabled { color: #AAAAAA; font-style: italic;.datepickerdayishighlighted { background: #F0E68C;.datePickerDayIsValueAndHighlighted { background: #bbddd9;.datepickermonthselector { background: #C3D9FF; width: 100%; 43

45 44.datePickerPreviousButton,.datePickerNextButton { font-size: 120%; line-height: 1em; color: blue; cursor: hand; cursor: pointer; padding: 0px 4px; td.datepickermonth { text-align: center; vertical-align: center; white-space: nowrap; font-size: 70%; font-weight: bold; color: blue;.gwt-datebox input { width: 8em;.dateBoxFormatError { background: #ffcccc;.dateboxpopup { Código 4 Folha de estilo do date picker Fonte: DATE (2011). /** * The constants used in this Content Widget. */ public static interface CwConstants extends Constants { String cwdatepickerboxlabel(); String cwdatepickerdescription(); String cwdatepickerlabel(); String cwdatepickername(); /** * An instance of the constants. */ private final CwConstants constants; /** * Initialize this public Widget oninitialize() { // Create a basic date picker DatePicker datepicker = new DatePicker(); final Label text = new Label(); // Set the value in the text box when the user selects a date datepicker.addvaluechangehandler(new ValueChangeHandler<Date>() { public void onvaluechange(valuechangeevent<date> event) {

46 45 Date date = event.getvalue(); String datestring = DateTimeFormat.getMediumDateFormat().format(date); text.settext(datestring); ); // Set the default value datepicker.setvalue(new Date(), true); // Create a DateBox DateTimeFormat dateformat = DateTimeFormat.getLongDateFormat(); DateBox datebox = new DateBox(); datebox.setformat(new DateBox.DefaultFormat(dateFormat)); // Combine the widgets into a panel and return them VerticalPanel vpanel = new VerticalPanel(); vpanel.add(new HTML(constants.cwDatePickerLabel())); vpanel.add(text); vpanel.add(datepicker); vpanel.add(new HTML(constants.cwDatePickerBoxLabel())); vpanel.add(datebox); return vpanel; Código 5 Fonte do DatePicker Java/GWT Fonte: DATE (2011). O código java acima mostra a criação de um date picker, onde os objetos são inseridos em um painel (vpanel) e ele é retornado pelo método publico widget. Caso esta função seja chamada por um JavaScript em uma página HTML o Date Picker será desenhado no local chamado. A coleção de Widgets GWT nativos ainda é limitada, espaço que acaba sendo preenchido por bibliotecas de terceiros como Ext-Sencha, Smart-GWT e GWT Mosaic. Na Figura 15 é ilustrada a biblioteca Smart-GWT com 300 exemplos de uso de widgets (SMART, 2011).

47 46 Figura 15 Biblioteca Smart-GWT Fonte: SMART... (2011). 3.4 SETTING UP GWT O Plug-in do Google para o Eclipse (Figura 16 e 17) é a maneira mais rápida de começar o desenvolvimento de aplicativos do Google Web Toolkit e do Google App Engine. Com a instalação do plug-in é possível a implementação de um Hello World Ajax em questão de minutos. Basta instalar o plug-in e começar. O estudo de caso deste trabalho usará o Eclipse 3.6 (Helios). Os detalhes para obtenção do Eclipse e dos plugins estão descritos em GOOGLE CODE. Na Figura 18 é mostrada a instalação dos plugins do GWT no eclipse, o Google Plugin para o Eclipse 3.6 está na versão 1.4.2, o Google App Engine Java SDK está na versão e o Google Web ToolKit DSK está na versão 2.1.1, as ultimas versões disponíveis até este momento.

48 47 Figura 16 Eclipse Helios 3.6 Fonte: Autoria própria. Figura 17 IDE Eclipse Helios 3.6 com os ícones do GWT e App Engine Fonte: Autoria própria. Uma preocupação no uso do GWT é conhecer as melhores práticas ao desenvolver aplicações, para escrever código desacoplado, testável e manutenível. Ray Ryan um dos arquitetos do GWT no Google I/O em 2009 e 2010 (Figura 19) discutiu a inexistência de uma API nativa implementando estas melhores práticas, ficava a cargo do desenvolvedor interpretá-las e programar a sua própria arquitetura caseira. Com o GWT 2.1 a Google começa a preencher estas lacunas, entre as novidades da nova versão está o Data Presentation Widgets, o Data Binding com editors e o Framework GWT-MVP, baseado em Atividades e Lugares (Activities e Places).

49 48 Figura 18 Detalhes da instalação do GWT e App Engine no Eclipse 3.6 Fonte: Autoria própria. Figura 19 Ray Ryan no Google I/O Fonte: GOOGLE I/O... (2009).

50 PROJETO E DESENVOLVIMENTO Depois de tudo instalado localmente, pois o eclipse ainda não trabalha nas nuvens, basta criar um novo projeto informando o local no HD (workspace) em que será gravado e seu nome. Na Figura 20 é ilustrada a janela de criação de um projeto GWT. Figura 20 - Criação de um projeto GTW. Fonte: Autoria própria.

51 50 A ferramenta GWT cria uma estrutura de diretórios como a ilustrada na Figura 21. Figura 21 Estrutura de diretórios de um projeto GTW Fonte: Autoria própria. Todo o código Java desenvolvido como classes Java e servlets fica residente no diretório src (source) que é dividido pelos sub-diretórios client (código que é executado no browser do usuário), shared (código que pode ser executado tanto do lado cliente como do lado servidor) e o diretório server (código que é executado exclusivamente no lado do servidor). As classes de teste ficam no diretório test. No pacote META INF ficam as configurações XML para persistência, no pacote App Engine SDK ficam o SDK para o desenvolvimento em cloud, no pacote JRE ficam o Java runtime no pacote WEB-INF contém a pasta lib para agregar drivers e frameworks do projeto. O código gerado pela ferramenta para distribuição da aplicação fica no diretório war (Web Archive). Os arquivos com extensão war são um compactado de todo o código para implantação no servidor de aplicação. No diretório war também ficam os arquivos estáticos como os de formatação CSS, HTML e imagens por exemplo. A unidade básica do GWT são os módulos. Estes módulos são usados pela aplicação cliente ou para criação de bibliotecas que serão usadas por outras aplicações. A definição dos módulos estão no arquivo gwt.xml, como exemplificado no Código 6.

52 51 <?xml version="1.0" encoding="iso "?> <module rename-to='cotacaoacoes'> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.user'/> <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <inherits name='com.google.gwt.user.theme.standard.standard'/> <!-- <inherits name='com.google.gwt.user.theme.chrome.chrome'/> --> <!-- <inherits name='com.google.gwt.user.theme.dark.dark'/> --> <!-- Other module inherits --> <!-- Specify the app entry point class. --> <entry-point class='com.dvillela.gwt.cotacaoacoes.client.cotacaoacoes'/> <!-- Specify the paths for translatable code --> <source path='client'/> <source path='shared'/> </module> Código 6 - Exemplo de um arquivo gwt.xml para definição de módulos Fonte: Autoria própria, utilizando o Eclipse. Nesta definição de módulo o código, encoding="iso " permite o uso de caracteres em português, <module rename-to='cotacaoacoes'> define o nome do módulo, <inherits name='com.google.gwt.user.user'/> indica herança das classes gwt.user, <entrypoint class='com.dvillela.gwt.cotacaoacoes.client.cotacaoacoes'/> especifica o módulo de entrada quando o aplicativo for executado e <inherits name= 'com.google.gwt.user.theme.standard.standard'/> especifica o uso do estilo default para os widgets. Depois de tudo desenvolvido, a fase de testes basta executar o projeto como uma aplicação Web. Na Figura 22 é ilustrada a forma de entrar em modo de desenvolvimento e teste da aplicação. Na janela Console é informado os erros de compilação ou as mensagens de compilação com sucesso. Na janela Development Mode é informada a URL para teste local, a ferramenta de desenvolvimento simula um servidor de aplicação (Jetty), que compõem o desenvolvimento para cloud computing utilizando o Google Application Engine.

53 52 Figura 22 Modo de desenvolvimento do GWT no Eclipse Fonte: Autoria própria. Depois de testada a aplicação, é necessário definir o Application ID e sua versão (controle de versões) para fazer a implantação no Data da Google. A versão do SDK do App Engine no servido da Google está na versão neste momento, e no ambiente de desenvolvimento está disponível a versão Na Figura 23 é ilustrada esta janela.

54 53 Figura 23 Configuração dos parâmetros para implantação Fonte: Autoria própria. Finalmente para terminar a implantação no Data Center é necessário o uso de uma conta no Google, pode ser a mesma do Gmail. Na Figura 24 é ilustrada esta janela. Todo este processo está descrito em detalhes no Google Code. Figura 24 Implantação da aplicação no Data Center da Google Fonte: Autoria própria.

55 TRABALHANDO COM BROWERS Um problema para as aplicações escritas com a ferramenta GWT é voltar à tela anterior no browser usando Alt+Backspace, combo ou botão do browser, porque as aplicações GWT são executadas em uma única janela criada dinamicamente e sendo modificada conforme a necessidade, e esta ação provavelmente farão uma desconexão da aplicação com o usuário, ou algo inesperado de difícil tratamento. O usuário não pode esperar que uma aplicação GWT se comporte de forma diferente das outra aplicações Web, o desenvolvedor não tem como desabilitar o Alt+Backspace, por este motivo o GWT possui métodos para tratar de históricos. Para usar as classes de gerenciamento de históricos do GWT é necessário inserir no corpo <body> da página HTML o seguinte código JavaScript. <!-- OPTIONAL: include this if you want history support --> <iframe src="javascript:''" id=" gwt_historyframe" tabindex='-1' style="position: absolute; width: 0; height: 0; border: 0"> </iframe> Código 7 Ativação do gerenciamento de histórico de navegação do GWT. Fonte: Autoria própria. Outro problema encontrado é a bloqueio de execução de JavaScript na configuração dos navegadores. O que o desenvolvedor pode fazer no máximo é gerar uma exceção no código HTML, informando o usuário para habilitar a execução de códigos JajaScript, ou a aplicação não será executada. Para fazer isto basta acrescentar ao código HTML o seguinte código. O Código 8 faz com que o navegador do cliente emita uma mensagem caso ele não esteja habilitado para executar JavaScript. <!-- RECOMMENDED if your web app will not function without JavaScript enabled --> <noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; border: 1px solid red; padding: 4px; font-family: sans-serif"> Your web browser must have JavaScript enabled in order for this application to display correctly. </div> </noscript> Código 8 Código para exibir mensagem do status do navegador Fonte: Autoria própria.

56 55 O resultado caso a execução de JavaScript não esteja habilitada, é a mensagem que aparece no navegador como a mostrada na figura 25, alertando que a execução de JavaScript não está habilitada. Figura 25 - Mensagem no browser Fonte: Autoria própria. 3.7 DESENVOLVIMENTO DE INTERFACE COM O USUÁRIO O padrão de desenvolvimento clássico de interface com o usuário é o MVC (Model- View-Controller), que surgiu com o Smalltalk na década de 80, tinha como principal objetivo implementar uma alta independência entre os módulos do modelo,a view, a apresentação e a lógica. Basicamente o padrão MVC é composto de: Model, aqui se encontram toda a lógica de negócios da aplicação, Para sistemas baseados em Web, isto significa servlets, web services ou qualquer outra forma de implementação de requisitos do sistema no lado do servidor de aplicação. View, aqui estão todos os widgets necessários para interação com o usuário. Para sistemas Web a camada de view reside no lado do cliente. Controller, sua função é traduzir as ações do usuário para a camada de modelo. Dependendo do framework usado ele pode se encontrar o lado cliente ou no lado servidor, mas isto não é relevante aqui. Com o surgimento de novas tecnologias como o GWT, e o aperfeiçoamento dos frameworks de interface, o modelo MVC ficou mais difícil de ser seguido pelas aplicações que utilizem estes componentes, os próprios componentes passaram a ter agora meios melhores de manipulação de eventos realizados pelos usuários, e o padrão MVC não permite que a camada view possa ser manipulada diretamente como acontece com JSP, por exemplo, ou seja, precisamos disparar um evento e deixar que a servlet trate esta mudança (recarregar a

57 56 págiana web). Desta forma a camada de Controller passou a cair em desuso, já que caso fosse utilizado os componentes estariam sendo subtilizados (CAMILO, 2010) Para solucionar este problema, surge o modelo MVP (Model View Presenter), uma variação do padrão MVC clássico, porém mais adequada para as novas tecnologias como o GWT. Neste modelo, as responsabilidades que eram do Controller são redistribuídas entre as camadas View e o Presenter, a View se encarrega de lidar com as entradas dos usuários, e o Presenter se encarrega de interagir com o Modelo, desta forma, o Presenter tem direito de interagir diretamente com a View. Basicamente o padrão MVP é composto de: Model, tem a mesma regra do modelo MVC, mas somente se comunica com a camada Presenter. View, tem regra similar ao modelo MVC, mas não de comunica com a camada Model. Sempre que o usuário dispara um evento, esta camada informa o Presenter sobre o evento, que pode pedir para a camada View se atualizar. Presenter, é a novidade deste padrão, por ser uma ponte entre a camada de Model e a camada View. Em resposta para eventos de usuários esta camada pode se comunicar com o Model e dependendo da resposta pode enviar comandos para a camada de View. Na Figura 26 é ilustrado o relacionamento das camadas nos modelos MVC e MVP. Figura 26 Modelos MVC e MVP Fonte: Camilo (2010).

58 57 No padrão MVP a camada View é muito simples e praticamente não tem código, terá somente código para criar widgets, pegar e setar seus valores e disparar eventos para a camada Presenter. Se o usuário entrar com um valor em um widget, a camada View não fará sua validação, disparando um evento para a camada Presenter validar. Antes de implementar o padrão MVP, é necessário conhecer o conceito de callback. Nas aplicações em uma arquitetura de objetos distribuídos como é o caso do GWT, nem sempre a comunicação no estilo cliente-servidor é suficiente para atender aos requisitos da aplicação. É usual que o servidor RMI (Remote Method Invocation) aja algumas vezes com o cliente, invertendo os papéis com o cliente RMI original. Por exemplo, um applet cliente RMI. Nesse applet, não há como saber se outro cliente do mesmo objeto remoto na rede realizou alguma atualização no valor de um atributo deste mesmo objeto usado pelo applet a não ser pressionando o botão Get, e verificando se houve mudança. Essa é uma situação típica em muitas aplicações, sendo clara a necessidade de realizar tais notificações de forma automática. A tecnologia para atingir esse objetivo é utilizar a estratégia de callback. Esta técnica é utilizada quando a aplicação cliente requer um retorno do servidor, mas não quer permanecer bloqueada aguardando a resposta enquanto o servidor a processa. Através dessa tecnologia, o servidor obtém uma referência para o cliente para poder invocar remotamente um método do objeto cliente. Assim, quando o processamento do serviço solicitado for concluído o servidor pode notificar o cliente através da invocação do método disponibilizado pelo cliente para uso remoto. Assim como para o objeto servidor RMI, o cliente deve oferecer uma interface remota para o servidor (que é o cliente agora) a fim de permitir que o servidor tenha acesso ao serviço de atualização do cliente. Com callback, ambos cliente e servidor devem implementar o serviço remoto especificado. Um exemplo bem simples de callback são os métodos contidos nos aparelhos de telefônica celular, em que a operadora deve ter acesso ao método de tocar do celular, ou seja, neste caso o celular é o servidor e a operadora o cliente. Outro conceito utilizado no GWT é Generics, ou programação genérica, que serve para determinar ao compilador qual tipo de classe deve ser interpretada. Na Figura 27 é ilustrado um modelo de classes escrito na linguagem de modelagem unificada (UML) utilizando a ferramenta JUDE professional, de um projeto de tela de login no padrão MVP. As classes SimpleCallback e Presenter são classes genéricas, e é a classe LoginFormPresenter que determina o tipo de objetos que elas vão manipular.

59 A Classe Model tem diversos métodos para acessar os serviços do lado do servidor. 58 Figura 27 Diagrama de classes UML para o padrão MVP da tela de login Fonte: Autoria própria. A classe de abstrata SimpleCallback listada códigos Java mais curtos, pois ela é genérica para qualquer outro projeto. no Código 9, possibilita escrever import com.google.gwt.user.client.rpc.asynccallback; public abstract class SimpleCallback<T> implements AsyncCallback<T> public final void onfailure(throwable caught) { // Nunca deverá ser usado

60 public final void onsuccess(t result) { goback(result); public abstract void goback(t result); Código 9 Implementação da classe SimpleCallback Fonte: Kereki (2010). A interface AsyncCallback requer a implementação de ambos os métodos onfailure e onsuccess. Contudo não há necessidade de lidar com falhas, somente com sucessos. Esta classe abstrata SimpleCallback define os métodos onfailure e onsuccess finais, portanto não necessidade de ser implementado, e o método goback como abstrato que necessita ser implementado futuramente. Na classe Presenter<D> descrita no Código 10, é injetado via construtor o apropriado Environment e View. A classe Presenter injeta os callbacks na classe View através do método definido na interface Display. abstract public class Presenter<D> { private String params; private D display; private Environment environment; private KeyValueMap kvm; public Presenter() { public Presenter(String someparams, D adisplay, Environment anenvironment) { super(); params = someparams; display = adisplay; environment = anenvironment; kvm = new KeyValueMap(params); public D getdisplay() { return display; public Environment getenvironment() { return environment; public KeyValueMap getkvm() { return kvm; Código 10 Classe Presenter<D> Fonte: Kereki (2010).

61 Na classe LoginFormPresenter listada no Código 11, a string PLACE serve para o bookmark e gerenciamento de histórico 60 import com.fkereki.mvpproject.client.environment; import com.fkereki.mvpproject.client.presenter; import com.fkereki.mvpproject.client.simplecallback; import com.fkereki.mvpproject.client.rpc.loginserviceasync; import com.google.gwt.user.client.rpc.asynccallback; public class LoginFormPresenter extends Presenter<LoginFormDisplay> { public static String PLACE = "login"; LoginServiceAsync loginservice; SimpleCallback<String> loginsuccesscallback; public LoginFormPresenter( final String params, final LoginFormDisplay logindisplay, final Environment environment, final SimpleCallback<String> callback) { super(params, logindisplay, environment); loginsuccesscallback = callback; loginservice = getenvironment().getmodel().getremoteloginservice(); logindisplay.setname("domingos"); logindisplay.setpassword(""); logindisplay.setlogincallback(new SimpleCallback<Object>() public void goback(final Object result) { final String name = LoginFormPresenter.this.getDisplay().getName(); final String pass = LoginFormPresenter.this.getDisplay().getPassword(); loginservice.getsomething(name, pass,new AsyncCallback<String>() { public void onfailure(final Throwable caught) { LoginFormPresenter.this.getEnvironment().showAlert("Failed login"); loginsuccesscallback.onfailure(new Throwable()); ); public void onsuccess(final String result) { loginsuccesscallback.goback(result); ); Código 11 Classe LoginFormPresenter Fonte: Kereki (2010).

62 O Código 12 mostra a listagem da interface LoginFormDisplay que herda os métodos de Display. 61 import com.fkereki.mvpproject.client.display; import com.fkereki.mvpproject.client.simplecallback; public interface LoginFormDisplay extends Display { /** * Access the Name field * Whatever the user entered in the Name field */ String getname(); /** * Initialize the Name field * s * Set the name field to s; most commonly just "" or possibly a saved * name from an earlier session. */ void setname(string s); /** * Access the Password field * Whatever the user entered in the Password field */ String getpassword(); /** * Initialize the Password field * s * Set the password field to s; usually just "" */ void setpassword(string s); /** * Initialize the login callback, which shall be executed when the user clicks * the "Login" button * acb * Set the login callback to acb. The Presenter will have to get the * Name and Password fields (by using the methods above) and perform * the needed checks. */ void setlogincallback(simplecallback<object> acb); Código 12 Interface LoginFormDisplay Fonte: Kereki (2010).

63 62 O Código 13 mostra a listagem da interface Display. import com.google.gwt.user.client.ui.widget; /** fkereki */ public interface Display { public Widget aswidget(); Código 13 Interface Display Fonte: Kereki (2010). O Código 14 mostra a listagem da classe LoginFormView que por sua vez herda View que herda Composite, e implementa LoginFormDisplay. import com.fkereki.mvpproject.client.simplecallback; import com.fkereki.mvpproject.client.view; import com.google.gwt.event.dom.client.clickevent; import com.google.gwt.event.dom.client.clickhandler; import com.google.gwt.user.client.rpc.asynccallback; import com.google.gwt.user.client.ui.button; import com.google.gwt.user.client.ui.dockpanel; import com.google.gwt.user.client.ui.flextable; import com.google.gwt.user.client.ui.label; import com.google.gwt.user.client.ui.passwordtextbox; import com.google.gwt.user.client.ui.textbox; /** * Defines a Login Form. */ public class LoginFormView extends View implements LoginFormDisplay { private AsyncCallback<Object> logincallback; private final TextBox nametextbox = new TextBox(); private final TextBox passwordtextbox = new PasswordTextBox(); private final Button loginbutton = new Button("Log in"); private final FlexTable flex = new FlexTable(); private final DockPanel dock = new DockPanel(); /** * Defines the view for the Login Form. Since this will be shown in the main * screen, we take care of centering the fields (by using a DockPanel) so it * will look nicer. */ public LoginFormView() { loginbutton.addclickhandler(new ClickHandler() { public void onclick(final ClickEvent event) { logincallback.onsuccess(null); ); flex.setwidget(0, 0, new Label("User name:")); flex.setwidget(0, 1, nametextbox);

64 63 flex.setwidget(1, 0, new Label("Password:")); flex.setwidget(1, 1, passwordtextbox); flex.setwidget(2, 1, loginbutton); dock.setwidth("100%"); dock.setheight("100%"); dock.sethorizontalalignment(dockpanel.align_center); dock.setverticalalignment(dockpanel.align_middle); dock.add(flex, DockPanel.CENTER); public final String getname() { return public final String getpassword() { return public final void setlogincallback(final SimpleCallback<Object> acb) { logincallback = public final void setname(final String s) { public final void setpassword(final String s) { passwordtextbox.setvalue(s); Código 14 Classe LoginFormView Fonte: Kereki (2010). O Código 15 mostra a listagem da classe View. import com.google.gwt.user.client.ui.composite; import com.google.gwt.user.client.ui.widget; /** fkereki */ public abstract class View extends Composite { public final Widget aswidget() { return this; Código 15 Classe View Fonte: Kereki (2010).

65 64 Há uma forma de evitar que o código de criação dos widgets não fique dentro da classe LoginFormView vinculado a interface de usuário a duas ou três linhas de código por widget, e que facilita o trabalho com um grande número de elementos de interface. Outro problema é entender o layout produzido pelo código Java, e a comunicação entre o projeto da interface do usuário feita em HTML, CSS e XML e o código GWT. O GWT 2 criou o UiBinder que atenua o problema, permitindo que a interface com o usuário seja feita declarativamente usando linguagem de marcação XML, que é transformada em código Java pelo compilador. UiBinder aceita estilos CSS e internacionalização. Na Figura 28 é ilustrada a criação de um UiBinder pelo plugin do GWT no eclipse. Figura 28 Criação de um arquivo UiBinder Fonte: Autoria própria. Uma versão do exemplo de login usando UiBinder é listado no Código 16. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE u:uibinder SYSTEM " <u:uibinder xmlns:u='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui' > <g:htmlpanel> <h1>loginformview3</h1> <table> <tr> <td><g:label text="user Name:"/></td> <td><g:textbox u:field='nametextbox'/></td>

66 65 </tr> <tr> <td><g:label text="password:"/></td> <td><g:passwordtextbox u:field='passwordtextbox'/></td> </tr> <tr> <td></td> <td><g:button text='login' u:field='loginbutton'/></td> </tr> </table> </g:htmlpanel> </u:uibinder> Código 16 Exemplo de arquivo XML para definição de interface gráfica. Fonte: Kereki (2010). O compilador faz uma referencia cruzada entre o arquivo UiBinder e a nova classe LoginFormView é mostrada o Código 17. import com.fkereki.mvpproject.client.simplecallback; import com.fkereki.mvpproject.client.view; import com.google.gwt.core.client.gwt; import com.google.gwt.event.dom.client.blurevent; import com.google.gwt.event.dom.client.clickevent; import com.google.gwt.uibinder.client.uibinder; import com.google.gwt.uibinder.client.uifield; import com.google.gwt.uibinder.client.uihandler; import com.google.gwt.uibinder.client.uitemplate; import com.google.gwt.user.client.rpc.asynccallback; import com.google.gwt.user.client.ui.button; import com.google.gwt.user.client.ui.htmlpanel; import com.google.gwt.user.client.ui.passwordtextbox; import com.google.gwt.user.client.ui.textbox; /** * Defines a Login Form. */ public class LoginFormView extends View implements LoginFormDisplay interface Binder extends UiBinder<HTMLPanel, UiLoginFormView> { AsyncCallback<Object> logincallback; AsyncCallback<Object> nameblurcallback; AsyncCallback<Object> TextBox PasswordTextBox Button loginbutton; private static final Binder binder = GWT.create(Binder.class); public LoginFormView() { HTMLPanel dlp = binder.createandbindui(this);

67 66 public void enableloginbutton(final boolean b) { public final String getname() { return public final String getpassword() { return public final void setlogincallback(final SimpleCallback<Object> acb) { logincallback = public final void setname(final String s) { public void setnameblurcallback(final SimpleCallback<Object> acb) { nameblurcallback = public final void setpassword(final String s) { public void setpasswordblurcallback(final SimpleCallback<Object> acb) { passwordblurcallback = void uionblurname(blurevent event) { void uionblurpassword(blurevent event) { void uionloginbutton(clickevent event) { logincallback.onsuccess(null); Código 17 Classe LoginFormView usando UiBinder Fonte: Kereki (2010).

68 COMUNICAÇÃO COM O SERVIDOR DE APLICAÇÕES Para a implementação de comunicação entre o lado cliente e o lado servidor, existe duas tecnologias a RPC e RMI. Marshalling é o processo de se empacotar uma coleção de objetos em um formato específico para sua transmissão em uma mensagem, e Unmarshalling é o processo inverso. RMI (Remote Method Invocation) é uma tecnologia para chamadas de métodos em objetos remotos. Para se comunicar com objetos remotos, são usados stubs e skeletons, o stub funciona semelhante a um proxy para o objeto remoto. Quando um objeto local invoca um método num objeto remoto, o stub fica responsável por enviar a chamada ao método do objeto remoto. Os passos do stub quando é invocado são: Iniciar conexão com a Virtual Machine que contém o objeto remoto. Escrever (Marshalling) e transmitir os parâmetros para a Virtual Machine remota. Esperar pelos resultados da invocação do método. Ler os resultados retornados. Retornar os valores ao objeto que executou a chamada. Na Virtual Machine remota, cada objeto deve ter um skeleton correspondente ao stub. O skeleton é responsável por enviar a chamada ao objeto remoto. Passos do skeleton quando recebe uma chamada: Ler os parâmetros (Unmarshalling) enviados pelo stub. Invocar o método no objeto remoto. Escrever (Marshalling) e transmitir o resultado ao objeto que executou a chamada. No paradigma orientado a objetos a distribuição física dos objetos é, natural. RMI é uma interface de programação que permite a execução de chamadas remotas em aplicações desenvolvidas em Java RMI, OMG CORBA (Common Object Request Broker Architecture) ou Microsoft DCOM (Distributed Common Object Model). É uma das abordagens da plataforma Java para prover as funcionalidades de objetos distribuídos. Esse sistema de objetos distribuídos faz parte do núcleo básico de Java desde a versão JDK 1.1, com sua API

69 sendo especificada através do pacote java.rmi. A Figura 29 ilustra o funcionamento desta tecnologia. 68 Figura 29 Tecnologia Remote Method Invocation Fonte: Adaptado RMI-IIPO (2011). O RPC, (Remote Procedure Call) é uma tecnologia de comunicação entre processos que torna possível a um programa de computador chamar um método em outro computador, conectado por uma rede. O desenvolvedor não precisa se preocupar com detalhes de implementação dessa interação remota. Do ponto de vista do código, a chamada se assemelha às chamadas de procedures locais. RPC é uma tecnologia para a implementação do modelo cliente-servidor de computação distribuída. Uma chamada de procedimento remoto é iniciada pelo cliente enviando uma mensagem para um servidor remoto para executar um método específico, uma resposta é retornada ao cliente. A implementação de chamadas a procedimento remoto é feita com os seguintes passos: O procedimento cliente chama localmente o stub cliente; Stub cliente constrói (Marshalling) a mensagem e chama o SO local; O SO local envia a mensagem ao SO remoto; O SO Remoto entrega a mensagem ao stub servidor; O stub servidor desempacota (Unmarshalling) os parâmetros e chama o procedimento servidor; O servidor realiza o trabalho retornando o resultado ao stub; O stub servidor empacota (Marshalling) o resultado em uma mensagem e chama o SO local;

70 69 O SO do servidor envia a mensagem ao SO do cliente; O SO do cliente entrega a mensagem ao stub cliente; O stub cliente desempacota (Unmarshalling) o resultado e o retorna ao cliente. RPC permite ao desenvolvedor GWT escrever código Java como se o lado cliente e o lado servidor estivesse residente na mesma máquina, permitindo que a conexão fique praticamente invisível. Na Figura 30 é ilustra no mecanismo de comunicação utilizado pelo GWT. Figura 30 Arquitetura do GWT. Fonte: DEVELOPER S... (2011). A mais importante diferença entre o RMI e o RPC é a forma de sincronismo, no RMI o processo de comunicação é síncrono ou seja ele bloqueia o processo chamador até que o processo servidor responda, e no RPC o processo de comunicação é assíncrono ou seja o processo chamador não fica bloqueado. No modelo RPC utilizado pelo GWT há algumas diferenças, por exemplo, o código do lado servidor pode usar qualquer pacote do Java, enquanto do lado cliente o código é limitado. Para implementação o RPC usa Ajax e o GWT prove as classes clientes HTTP. No lado servidor servlets são usadas estendendo a classe RemoteServiceServlet e não há limites, nesta arquiterua pode-se usar EJB (Enterprise Java Beans) ou serviços Restful (técnica de engenharia de software para sistemas hipermídia distribuídos como o www). O uso mais comum de RPC é acessar servles ou EJB no lado servidor, código particionado desta forma reduz o tempo de carga da aplicação.

71 70 Uma principal diferença entre as aplicações AJAX e aplicações web tradicionais em HTML é que nos aplicativos Ajax não é necessário buscar novas páginas HTML, enquanto eles executam. Como as páginas Ajax realmente funcionam mais como aplicações dentro do navegador, não há necessidade de solicitar novo HTML do servidor para fazer atualizações de interface com o usuário. No entanto, como todas as aplicações cliente/servidor, aplicações Ajax geralmente precisam buscar dados do servidor. Quando usado corretamente, RPCs pode mudar toda a lógica da interface do usuário para o cliente sem recarregar a página, resultando em um desempenho muito melhorado, diminuindo a largura de banda, e reduzindo a carga do servidor web. O código server-side que é chamado do cliente é muitas vezes referida como um serviço, portanto o ato de fazer uma chamada de procedimento remoto é por vezes referido como chamar um serviço. A palavra serviço neste contexto não é o mesmo que web service no conceito geral. Em particular, os serviços do GWT não estão relacionados com o Simple Object Access Protocol (SOAP). Na arquitetura do GWT a interface publica YourService fica do lado cliente, e é a interface YourServiceAsync que implementa o stub é quem intermediará com o servidor o qual passa o resultado para o chamador via AsyncCallback. É na classe publica YourServiceImp que ficará todo o código Java que implementa os serviços do lado servidor. O Código 18 mostra o arquivo war/web-inf/lib/web.xml que fornece dados sobre a servlet remota, usando <servlet> e <servlet-mapping>. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE web-app (View Source for full doctype...)> <web-app> <!-- Servlets --> <servlet> <servlet-name>loginservlet</servlet-name> <servlet-class>com.fkereki.mvpproject.server.loginserviceimpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>loginservlet</servlet-name> <url-pattern>/mvpproject/login</url-pattern> </servlet-mapping> <!-- Default page to serve --> <welcome-file-list> <welcome-file>mvpproject.html</welcome-file> </welcome-file-list> </web-app> Código 18 Web.xml Fonte: Kereki (2010).

72 71 Serialização é usada transparentemente pelo GWT, de forma genérica a serialização é uma técnica usada para persistir objetos (gravar objetos em disco ou banco de dados) ou fazer a transmissão remota de objetos via rede. Serializar é simplesmente colocar os valores dos atributos que o objeto está utilizando juntamente com suas propriedades de uma forma que fique em série (seqüencial). Objeto serializavel, tem privilégios para que o mesmo possa ser gravado em disco ou enviado por rede. Portanto a serialização é o processo de transformar um objeto, incluindo todos os atributos públicos e privados em um stream (fluxo de dados em um sistema computacional) para ser transportado. Na Figura 31 é ilustrada a gravação de um objeto em um arquivo no HD. Figura 31 Serialização de um objeto, e persistência em disco rígido Fonte: Pereira (2010). O GWT tem seus próprios métodos de serialização, a regra para definição dos tipos serializáveis são simples. Todos os tipos primitivos (char, byte, short, int, long), tipos enumerados (string,e data), e arrays são serializáveis. Uma classe será serializável se todos seus atributos são de tipos serializáveis, com exceção dos atributos transientes e finais. No Código 19 está a listagem de um exemplo de uma classe serializável pelo GWT. import com.google.gwt.user.client.rpc.isserializable; public class ClientCityData implements IsSerializable { public String countrycode; public String statecode; public String cityname; public String cityaccentedname; public int population; public float latitude; public float longitude; /** * An empty constructor method is required for serializable classes... see * <a> trying.html</a > * <a> */ public ClientCityData() {

73 72 public ClientCityData( final String pcountrycode, final String pstatecode, final String pcityname, final String pcityaccentedname, final int ppopulation, final float platitude, final float plongitude) { countrycode = pcountrycode; statecode = pstatecode; cityname = pcityname; cityaccentedname = pcityaccentedname; population = ppopulation; latitude = platitude; longitude = plongitude; /** * Perform client-side validations. The code here is limited to the GWT * client-side available packages. * "" if the client data is OK, or an error description otherwise */ public String validationproblems() { if (countrycode.isempty()) { return "No country specified"; else if (statecode.isempty()) { return "No region specified"; else if (cityname.isempty()) { return "No city name specified"; else if (cityaccentedname.isempty()) { return "No accented city name specified"; else if (population < 0) { return "Negative population"; else if (latitude < -90 latitude > 90) { return "Latitude outside "; else if (longitude < -180 longitude > 180) { return "Longitude outside "; else { return ""; Código 19 Exemplo de classe serializável Fonte: Kereki (2010). O Código 20 lista o código da interface YourService.java import java.util.linkedhashmap; import com.google.gwt.user.client.rpc.remoteservice; import public interface WorldService extends RemoteService { public String addcity(clientcitydata cd); public Boolean cityexists( String pcountry, String pregion,

74 73 String pcity); public LinkedHashMap<String, ClientCityData> getcities( String pcountry, String pregion, int pfrom, int pquantity); public LinkedHashMap<String, ClientCityData> getcitiesstartingwith( String pcountry, String pregion, String pstart); public LinkedHashMap<String, String> getcountries(); public LinkedHashMap<String, String> getstates(string pcountry); Código 20 Inferface YourService.java Fonte: Kereki (2010). Abaixo a listagem correspondente a Async interface derivado de WorldService. Pode ser criada automaticamente pelo plugin do GWT no Eclipse. import java.util.linkedhashmap; import com.google.gwt.user.client.rpc.asynccallback; public interface WorldServiceAsync { void addcity(clientcitydata cd, AsyncCallback<String> callback); void cityexists( String pcountry, String pregion, String pcity, AsyncCallback<Boolean> callback); void getcities( String pcountry, String pregion, int pfrom, int pquantity, AsyncCallback<LinkedHashMap<String, ClientCityData>> callback); void getcitiesstartingwith( String pcountry, String pregion, String pstart, AsyncCallback<LinkedHashMap<String, ClientCityData>> callback); void getcountries( AsyncCallback<LinkedHashMap<String, String>> callback); void getstates( String pcountry, AsyncCallback<LinkedHashMap<String, String>> callback); Código 21 Inferface WorldServiceAsync Fonte: Kereki (2010).

75 74 Finalmente abaixo está a listagem da implementação dos serviços no lado servidor, pode-se usar JPA ou Hibernate nesta implementação. No Google Application Engine deve-se usar o Java Data Objects. import java.sql.connection; import java.sql.drivermanager; import java.sql.preparedstatement; import java.sql.resultset; import java.sql.statement; import java.util.linkedhashmap; import com.fkereki.mvpproject.client.rpc.clientcitydata; import com.fkereki.mvpproject.client.rpc.worldservice; import com.google.gwt.user.server.rpc.remoteserviceservlet; public class WorldServiceImpl extends RemoteServiceServlet implements WorldService { private static final long serialversionuid = 1L; /* * MySQL and JDBC related constants and variables */ static String jdbc_url = "jdbc:mysql:// /gwtdb"; static String mysql_user = "gwtuser"; static String mysql_password = "gwtpass"; private Connection conn = null; /** * Tries to add a new city to the database. * "" if the city was added, or an error message otherwise */ public String addcity(final ClientCityData cd) { final ServerCityData scd = new ServerCityData(cd); final String svp = scd.validationproblems(); if (!svp.isempty()) { return svp; else { try { connecttodatabase(); final PreparedStatement ps = conn.preparestatement("insert INTO cities (countrycode, statecode, " + "cityname, cityaccentedname, population, latitude, longitude) " + "VALUES (?,?,?,?,?,?,?)"); ps.setstring(1, scd.countrycode); ps.setstring(2, scd.statecode); ps.setstring(3, scd.cityname); ps.setstring(4, scd.cityaccentedname); ps.setint(5, scd.population); ps.setfloat(6, scd.latitude); ps.setfloat(7, scd.longitude); ps.executeupdate(); ps.close(); disconnectfromdatabase(); catch (final Exception e) { return "Error adding city: " + e.getmessage();

76 75 return ""; public Boolean cityexists( final String pcountrycode, final String pstatecode, final String pcityname) { boolean result = false; try { connecttodatabase(); final Statement stmt = conn.createstatement(); final ResultSet rs = stmt.executequery("select COUNT(*) FROM cities WHERE countrycode='" + pcountrycode + "' AND statecode='" + pstatecode + "' AND cityname='" + pcityname + "'"); rs.first(); result = rs.getint(1) > 0; stmt.close(); disconnectfromdatabase(); catch (final Exception e) { e.printstacktrace(); return new Boolean(result); /** * Establish a connection to the local database and set up a statement */ private void connecttodatabase() throws Exception { DriverManager.registerDriver(new com.mysql.jdbc.driver()); Class.forName("com.mysql.jdbc.Driver").newInstance(); conn = DriverManager.getConnection(jdbc_url, mysql_user, mysql_password); /** * Disconnect from the database, closing everything */ private void disconnectfromdatabase() throws Exception { conn.close(); public LinkedHashMap<String, ClientCityData> getcities( final String pcountrycode, final String pstatecode, final int pfrom, final int pquantity) { final LinkedHashMap<String, ClientCityData> citieslist = new LinkedHashMap<String, ClientCityData>(); try {

77 76 connecttodatabase(); final Statement stmt = conn.createstatement(); final ResultSet rs = stmt.executequery("select * FROM cities WHERE countrycode='" + pcountrycode + "' AND statecode='" + pstatecode + "' ORDER BY cityname LIMIT " + pfrom + "," + pquantity); while (rs.next()) { citieslist.put(rs.getstring("cityname"), new ClientCityData(rs.getString("countryCode"), rs.getstring("statecode"), rs.getstring("cityname"), rs.getstring("cityaccentedname"), rs.getint("population"), rs.getfloat("latitude"), rs.getfloat("longitude"))); stmt.close(); disconnectfromdatabase(); catch (final Exception e) { e.printstacktrace(); return citieslist; public LinkedHashMap<String, ClientCityData> getcitiesstartingwith( String pcountrycode, String pstatecode, String pstart) { final LinkedHashMap<String, ClientCityData> citieslist = new LinkedHashMap<String, ClientCityData>(); try { connecttodatabase(); final Statement stmt = conn.createstatement(); final ResultSet rs = stmt.executequery("select * FROM cities WHERE countrycode='" + pcountrycode + "' AND statecode='" + pstatecode + "' AND cityname LIKE '" + pstart + "%' ORDER BY cityname"); while (rs.next()) { citieslist.put(rs.getstring("cityname"), new ClientCityData(rs.getString("countryCode"), rs.getstring("statecode"), rs.getstring("cityname"), rs.getstring("cityaccentedname"), rs.getint("population"), rs.getfloat("latitude"), rs.getfloat("longitude"))); stmt.close(); disconnectfromdatabase(); catch (final Exception e) { e.printstacktrace(); return citieslist; public LinkedHashMap<String, String> getcountries() { final LinkedHashMap<String, String> countrieslist = new LinkedHashMap<String, String>();

78 77 try { connecttodatabase(); final Statement stmt = conn.createstatement(); final ResultSet rs = stmt.executequery("select countrycode,countryname " + "FROM countries ORDER BY 2"); while (rs.next()) { countrieslist.put(rs.getstring(1), rs.getstring(2)); stmt.close(); disconnectfromdatabase(); catch (final Exception e) { e.printstacktrace(); return countrieslist; public LinkedHashMap<String, String> getstates( final String pcountrycode) { final LinkedHashMap<String, String> stateslist = new LinkedHashMap<String, String>(); try { connecttodatabase(); final Statement stmt = conn.createstatement(); final ResultSet rs = stmt.executequery("select statecode,statename FROM states " + "WHERE countrycode='" + pcountrycode + "' ORDER BY 2"); while (rs.next()) { stateslist.put(rs.getstring(1), rs.getstring(2)); stmt.close(); disconnectfromdatabase(); catch (final Exception e) { e.printstacktrace(); return stateslist; Código 22 WorldServiceImpl Fonte: Kereki (2010). 3.9 MISTURANDO JAVASCRIPT E GWT JavaScript é para o GWT o que assembler é para um compilador clássico como linguagem C++, e misturar código JavaScript com código Java pode ser útil. Muitas vezes, você vai precisar para integrar o GWT com JavaScript existentes desenvolvidos em biblioteca de terceiros. Ocasionalmente pode ser necessária para acesso de

79 78 baixo nível a funcionalidade do navegador, não expostos pela classe GWT API. O JavaScript Native Interface (JSNI) do GWT pode resolver ambos os problemas, permitindo-lhe integrar o JavaScript diretamente em seu aplicativo de código-fonte Java. O compilador GWT traduz-fonte Java em JavaScript. Às vezes é muito útil para misturar manualmente JavaScript em seu código-fonte Java. Por exemplo, a funcionalidade de nível mais baixo de certas classes core do GWT são escritas em JavaScript. GWT empresta do Java Native Interface (JNI) o conceito para implementar o JavaScript Native Interface (JSNI). Escrevendo métodos JSNI é uma técnica poderosa, mas deve ser usado com moderação, pois escrever código JavaScript é visivelmente complicado. Código JSNI é potencialmente menos portável entre os navegadores, diminui as chances de estouro de memória, e é mais difícil para o compilador otimizar. Pensamos JSNI como o equivalente web de código assembly inline, pode-se usá-lo de muitas maneiras: Implementar um método Java diretamente no JavaScript Chamada de código JavaScript em código Java e vice-versa Lançar exceções para além das fronteiras Java / JavaScript Ler e escrever campos de Java a partir de JavaScript Usar o modo de desenvolvimento para depurar a fonte Java (com um depurador Java) e JavaScript (com um depurador de script) O Código 23, por exemplo, ilustra a função sayhello(name) escrita em JavaScript declarada na página HTML que pode ser chamada de qualquer elemento dentro de um módulo do GWT. <html> <head> <script> function sayhello(name) { alert("hello from JavaScript, " + name); </script> <-- Include the GWT module called "Spiffy" --> <script src="org.example.yourcode.spiffy.nocache.js"> </script> </head>... Código 23 Função JavaScript sayhello(name) Fonte: Kereki (2010).

80 79 O Código 24 mostra no código fonte Java GWT, a chamada da função sayhello() JavaScript através de JSNI. // A Java method using JSNI native void sayhelloinjava(string name) { $wnd.sayhello(name); // $wnd is a JSNI synonym for 'window' ; Código 24 Função JavaScript sayhello(name) Fonte: Kereki (2010). Agora o contrário acessar uma função GWT no JavaScript. O Código 25 mostra a listagem da função fornatascurrency escrita em linguagem Java no GWT. package org.example.yourcode.format.client; public class DateFormatterLib implements EntryPoint { // Expose the following method into JavaScript. private static String formatascurrency(double x) { return NumberFormat.getCurrencyFormat().format(x); // Set up the JS-callable signature as a global JS function. private native void publish() { $wnd.formatascurrency ; // Auto-publish the method into JS when the GWT module loads. public void onmoduleload() { publish(); Código 25 Função formatascurrency Fonte: Kereki (2010). O Código 26 ilustra a página HTML acessando a função GWT criada. <html> <head> <-- Include the GWT module that publishes the JS API --> <script src="org.example.yourcode.formatlib.nocache.js"></script> <-- Write some JS that uses that GWT code --> <script> function dostuff() { alert(formatascurrency( )); </script> </head>... Código 26 Exemplo de função GWT acessada pelo HTML Fonte: Kereki (2010).

81 80 Usando JSNI, pode-se misturar JavaScript, bibliotecas externas JavaScript, e código Java livremente de qualquer maneira. JSON (JavaScript Object Notation) é uma forma de intercâmbio de dados leve, uma alternativa ao formato XML: É fácil para os desenvolvedores Java a ler e escrever. É fácil para as máquinas de analisar e gerar. É composto por um subconjunto da linguagem de programação JavaScript. JSON é um formato de texto, que é independente das linguagens de programação, mas usa convenções que são familiares para os desenvolvedores de C, incluindo C ++, C#, Java, JavaScript, Perl, Python, e outros. Estas propriedades tornam JSON uma linguagem de troca de dados ideal. GWT suporta este protocolo, GWT2 inclui várias classes e métodos para facilitar o processamento JSON. JSON é composto de uma coleção de pares nome / valor. Em várias linguagens, isto é implementado como um objeto, dicionário, hash, tabela com chave primária, ou uma lista ordenada de valores. Estas estruturas de dados são universais. Praticamente todas as linguagens de programação modernas as usam de alguma forma. Faz sentido que um formato de dados, que é intercambiável entre linguagens de programação também basear-se nestas mesmas estruturas. JSON é um conjunto desordenado de pares nome / valor. Um objeto que começa com {(chave esquerda) e termina com (chave direita). Cada nome é seguido por: (dois pontos) e os pares nome / valor são separados por, (vírgula). Na Figura 32 é ilustrada a sintaxe do JSON.

82 81 Figura 32 Sintaxe do JSON Fonte adaptado de INTRODUÇÃO... (2011). O Código 27 ilustra um arquivo JSON gerado pelo serviço disponível na URL < y=tablet&result=3 &language=en&output=json>, o Yahoo gera um arquivo no format JSON com as informações de notícias sobre tablets. {"ResultSet":{"totalResultsAvailable":"3253","totalResultsReturned":10,"firstResultPosition":"1","Result":[{"Ti tle":"4q Tablet Shipments Double From 3Q; Apple's Lead Declines - Researcher","Summary":"Worldwide tablet computer shipments more than doubled sequentially in the fourth quarter, with Apple Inc.'s (AAPL) ipad the declining market leader, researcher Strategy Analytics estimated Monday.","Url":" Business","NewsSourceUrl":" omitido parte da resposta... \/","Language":"en","PublishDate":" ","ModificationDate":" ",{"Title":"5 Ways Google's Honeycomb Tablet OS Could Beat Apple's Mighty ipad","summary":"we offer five ways Google can smoke the ipad on the feature front with its Honeycomb tablet-centric OS","Url":" ple_s_mighty_ipad.html?tk=rss_news","clickurl":" es_honeycomb_tablet_could_beat_apple_s_mighty_ipad.html?tk=rss_news","newssource":"pc World","NewsSourceUrl":" cationdate":" "] Código 27 Exemplo de um arquivo no formato JSON Fonte: Autoria própria. O servidor de notícias gerou um ResultSet com três atributos (totalresultsavailable, totalresultsreturned e firstresultposition) e um outro atributo (Result) que é um array de

83 82 objetos, cada elemento do array representando uma notícia incluinto o título, resumo, url, fonte da notícia e linguagem entre outros. Processando este arquivo JSON em uma página HTML adequadamente, é gerada uma página como a ilustrada na Figura 33. Figura 33 Arquivo JSON processado, com outros widgets acrescentados Fonte: Autoria própria. Os serviços para troca de dados entre aplicações via protocolo http já alcançaram bom nível de maturidade. Hoje, há várias formas de disponibilizar serviços via web, e existem diversas APIs disponíveis para atender as necessidades como mapas, agenda, autenticação de usuários, ou integração com redes sociais. Serviços pagos, públicos, serviços com mais de um plano de licenciamento para atender aos vários tipos de consumidor, hoje já estão prontos para uso. Em meio às tecnologias para intercambio de dados e comunicação entre aplicativos pela web como SOAP, REST, ou WSDL, se destacam as APIs que fornecem dados com simples requisições http diretamente via navegador internet como o JSONP. AJAX trata as requisições assíncronas remotas por meio dos protocolos XMLHttpRequest e XMLHttpResponse, que trafegam dados na forma de texto puro ou

84 83 arquivos XML. Esses dados são processados pelo programa javascript, que monta no browser cliente seus trechos de html sem o recarregamento da página, o JSONP requisita dados de forma assíncrona, assim como o AJAX, mas não utiliza os protocolo XMLHttp e só trabalha com objetos no formato JSON. JSON é um formato de dados que vem sendo utilizado para transporte de dados entre aplicações web. Ele está ganhando seu espaço por ser leve e de fácil implementação. O processamento dos dados em um objeto JSON requer um parse simples (usando o método eval do javascript) e não é necessário a navegação por DOM entre os nós e atributos de um XML, isto justifica a preferência pelo JSON ao invés de XML para ajax na web (INTRODUÇÃO, 2011). Há uma limitação no uso do protocolo XMLHttpRequest em se tratando de requisições entre diferentes sites (requisições crossdomain), este é modelo de segurança, implementado pelo javascript, chamdo Same Origin Policy, ou Política de Mesma Origem. Este modelo de segurança crossdomain impede que um documento leia ou envie dados para outra origem. Origens diferentes são objetos que estejam em diferentes domínios, diferentes portas ou que utilizem protocolos de comunicação diferentes entre si. Considerando a url: podemos ter requisições que irão ter sucesso ou falhar nas seguintes situações: funciona, porque é uma requisição para o mesmo host, usa o mesmo protocolo, e está dentro do mesmo site. não funciona, porque os protocolos são diferentes representam ( http, https ); não funciona, porque as portas são diferentes ( porta 81 e a padrão 80 ); também não funciona, porque se tratam de hosts diferentes; JSONP é um pseudo-protocolo que possibilita realizar requisições http e trafegar dados no formato JSON entre documentos de diversas origens. A implementação do JSONP é simples, porém é necessário que o serviço responsável pela entrega dos dados tenha a escolha de entregá-los na estrutura necessária para que eles possam ser processados no cliente. Não há restrições para o transporte de imagens e scripts de outras origens, por meio do atributo src das tags. A técnica implementada no JSONP se aproveita dessa possibilidade para carregar scripts externos conforme a necessidade, manipulando o DOM da página. O que o JSONP faz

85 84 para funcionar é a inclusão de uma TAG script no header <head> da página HTML. Essa tag script recebe um atributo src indicando o site externo, que responde pelos objetos no formato JSON, esse resultado é parseado e fica disponível para processamento via JavaScript. Padding ou prefix é o nome passado na requisição ao serviço, para que na resposta o método envolva as informações no formato JSON após a resposta (INTRODUÇÃO..., 2011). <head> <script type="text/javascript" src=" target="_blank"> </script> Código 28 Exemplo de requisição feita a um servidor JSONP Fonte: INTRODUÇÃO... (2011). A palavra parseresponse será a o nome da função que gerará o json, como um callback. O resultado será algo parecido com Código 28: parseresponse({ name : dvillela, idade :45, esportes:[ corrida, tenis, natacao ]) Código 29 Resultado do parseresponse Fonte: INTRODUÇÃO... (2011) ADICIONANDO API Há muitas bibliotecas JavaScript e serviços web que podem ser incluídos em aplicações, adicionando-as atravez de JSNI, assim como códigos GWT (que após compilados são JavaScrits). Na Figura 34, por exemplo, um dos requisitos da aplicação no estudo de caso será informar ao usuário onde fica a UTFPR campus Cornélio Procópio e como chegar ao local. A Google disponibiliza a API para este serviço, bastando fazer a devida chamada ao serviço.

86 85 Figura 34 UTFPR no Google Maps Fonte: Autoria própria. O Código 30 lista o JavaScript para acessar o serviço Google Maps passando os parâmetros de latitude e longitude da UTFPR campus Cornélio Procópio, neste caso o mapa ficará confinado em um frame com 300 X 279 pixel. <!-- Google Maps Element Code - UTFPR --> <iframe frameborder=0 marginwidth=0 marginheight=0 border=0 style="border: 0; margin: 0; width: 300px; height: 279px;"src=" mapselement/iframe.html? maptype=terrain &latlng= %2c &mlatlng= %2c &maddress1= Avenida%20Alberto%20Carazzai%2C%201640%20- %20Centro&maddress2=Corn%C3%A9lio%20Proc%C3%B3pio%20-%20PR%2C% %2C%20Brazil &zoom=15 &mtitle=utfpr-universidade%20tecnol%c3%b3gica%20federal%20do%20paran%c3%a1%20 Campus%20Corn%C3%A9lio%20Proc%C3%B3pio&element=true" scrolling="no" allowtransparency="true"> </iframe> Código 30 Código JavaScript para acessar o serviço Google Maps Fonte: Autoria própria.

87 Outro exemplo é mostrado na Figura 35, onde será desenvolvido uma aplicação GTW que simulará a cotação de ações. 86 Figura 35 Cotação de ações no <div id= stoklist > Fonte: Autoria própria. <html> <head> <title>domingos de Carvalho Villela Júnior - Tecnologia Java - UTFPR</title> <! Chamada da aplicação GWT cotacaoacoes --> <script type="text/javascript" language="javascript" src="cotacaoacoes/cotacaoacoes.nocache.js"></script> </head> <body> <div id="stocklist"></div> </body> Código 31 Código JavaScript para acessar o serviço catacaoacoes Fonte: Autoria própria. Com estes recursos e conceitos, o estudo de caso implantará no Google Application Engine, uma pequena aplicação demonstrando como se pode desenvolver um ERP RIA com o GWT 2.