O Google Web Toolkit (GWT) é um kit de ferramentas de desenvolvimento para construir e otimizar aplicativos complexos baseados em navegador. O GWT é usado por muitos produtos do Google, incluindo Google AdWords e Orkut.

A seguir estão os recursos do GWT -

• O Google Web Toolkit (GWT) é um kit de ferramentas de desenvolvimento para criar RICH Internet Application (RIA).

• O GWT oferece aos desenvolvedores a opção de escrever aplicativos do lado do cliente em JAVA.

• GWT compila o código escrito em JAVA para código JavaScript.

• O aplicativo escrito em GWT é compatível com vários navegadores. O GWT gera automaticamente o código javascript adequado para cada navegador.

• O GWT é um software livre, totalmente gratuito e usado por milhares de desenvolvedores em todo o mundo. Ele é licenciado sob a Licença Apache versão 2.0.

A seguir estão as razões para preferir GWT para projetos de desenvolvimento -

• Sendo baseado em Java, você pode usar JAVA IDEs como Eclipse para desenvolver aplicativos GWT. Os desenvolvedores podem usar autocompletar / refatorar / navegação / gerenciamento de projeto de código e todos os recursos de IDEs.

• O GWT fornece capacidade de depuração total. Os desenvolvedores podem depurar o aplicativo do lado do cliente apenas como um aplicativo Java.

• O GWT fornece integração fácil com Junit e Maven.

• Novamente sendo baseado em Java, o GWT tem uma curva de aprendizado baixa para desenvolvedores Java.

• GWT gera código javascript otimizado, produz código javascript específico do navegador por conta própria.

• GWT fornece biblioteca de Widgets que fornece a maioria das tarefas exigidas em um aplicativo.

• O GWT é extensível e um widget customizado pode ser criado para atender às necessidades do aplicativo.

• Acima de tudo, os aplicativos GWT podem ser executados em todos os principais navegadores e smartphones, incluindo telefones / tablets baseados em Android e iOS.

A seguir estão as desvantagens do GWT -

• Not indexable − As páginas da Web geradas pelo GWT não seriam indexadas pelos mecanismos de pesquisa porque esses aplicativos são gerados dinamicamente.

• Not degradable − Se o usuário do seu aplicativo desabilitar o Javascript, o usuário verá apenas a página básica e nada mais.

• Not designer's friendly − O GWT não é adequado para web designers que preferem usar HTML simples com espaços reservados para inserir conteúdo dinâmico posteriormente.

A seguir estão os principais componentes do GWT -

• GWT Java to JavaScript compiler −Esta é a parte mais importante do GWT, o que o torna uma ferramenta poderosa para a construção de RIAs. O compilador GWT é usado para traduzir todo o código do aplicativo escrito em Java para JavaScript.

• JRE Emulation library −O Google Web Toolkit inclui uma biblioteca que emula um subconjunto da biblioteca Java runtime. A lista inclui java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util e java.util.logging.

• GWT UI building library − Esta parte do GWT consiste em muitas subpartes que incluem os componentes de UI reais, suporte RPC, gerenciamento de histórico e muito mais.

• GWT Hosted Web Browser − O GWT Hosted Web Browser permite que você execute e execute seus aplicativos GWT no modo hospedado, onde seu código é executado como Java na Java Virtual Machine sem compilar para JavaScript.

Uma aplicação GWT consiste em seguir quatro partes importantes, das quais a última parte é opcional, mas as primeiras três partes são obrigatórias -

• Descritores de Módulo

• Recursos públicos

• Código do lado do cliente

• Código do lado do servidor

Um descritor de módulo é o arquivo de configuração na forma de XML que é usado para configurar um aplicativo GWT. Uma extensão de arquivo descritor de módulo é * .gwt.xml, onde * é o nome do aplicativo e este arquivo deve residir na raiz do projeto.

Fornece o nome do aplicativo.

Isso adiciona outro módulo gwt no aplicativo, assim como a importação faz em aplicativos Java. Qualquer número de módulos pode ser herdado dessa maneira.

Isso especifica o nome da classe que começará a carregar o aplicativo GWT.

Sim! Qualquer número de classes de ponto de entrada pode ser adicionado.

A função onModuleLoad () é chamada e age de forma semelhante ao método principal de um aplicativo java.

Eles são chamados sequencialmente na ordem em que as classes de ponto de entrada aparecem no arquivo do módulo. Portanto, quando o onModuleLoad () de seu primeiro ponto de entrada termina, o próximo ponto de entrada é chamado imediatamente.

Isso especifica os nomes das pastas de origem que o compilador GWT pesquisará para a compilação de origem.

O caminho público é o local em seu projeto onde os recursos estáticos referenciados por seu módulo GWT, como CSS ou imagens, são armazenados.

O caminho público padrão é o subdiretório público abaixo de onde o Arquivo XML do Módulo está armazenado.

Injecta automaticamente o arquivo JavaScript externo localizado no local especificado por src.

Injecta automaticamente o arquivo CSS externo localizado no local especificado por src.

Um ponto de entrada do módulo é qualquer classe atribuível ao EntryPoint e que pode ser construída sem parâmetros. Quando um módulo é carregado, cada classe de ponto de entrada é instanciada e seu método EntryPoint.onModuleLoad () é chamado.

Ele contém o código javascript necessário para resolver as configurações de vinculação adiada (por exemplo, detecção de navegador) e para usar a tabela de pesquisa gerada pelo compilador GWT para localizar um dos .cache.html.

Ele contém o programa real de um aplicativo GWT.

A seguir estão as etapas do procedimento de bootstrap para o aplicativo GWT quando um navegador carrega o aplicativo GWT -

• O navegador carrega a página html do host e o arquivo .nocache.js.

• O navegador executa o código javascript do arquivo .nocache.js.

• O código .nocache.js resolve configuarations de ligação adiada (por exemplo, detecção de navegador) e usa a tabela de pesquisa gerada pelo compilador GWT para localizar um dos .cache.html.

• O código .nocache.js então cria um iframe html oculto, insere esse iframe no DOM da página host e carrega o arquivo .cache.html no mesmo iframe.

• .cache.html contém o programa real de um aplicativo GWT e, uma vez carregado no iframe, mostra o aplicativo GWT no navegador.

O compilador GWT gera um arquivo .nocache.js sempre com o mesmo nome sempre que um aplicativo GWT é compilado. Portanto, o navegador deve sempre baixar o arquivo .nocache.js para obter o aplicativo gwt mais recente. O código gwt.js na verdade anexa um carimbo de data / hora exclusivo no final do nome do arquivo para que o navegador sempre o trate como um novo arquivo e nunca deve armazená-lo em cache.

O recurso público mais importante é a página do host, que é usada para invocar o aplicativo GWT real. Uma página de host HTML típica para um aplicativo pode não incluir nenhum conteúdo de corpo HTML visível, mas sempre se espera que inclua o aplicativo GWT por meio de uma tag <script ... />.

Por padrão, o nome da classe para cada componente é gwt- <classname>. Por exemplo, o widget Button tem um estilo padrão de gwt-Button e de maneira semelhante a widgest TextBox tem um estilo padrão gwt-TextBox.

Não! Por padrão, nem o navegador nem o GWT criam atributos de id padrão para widgets.

Este método irá limpar todos os estilos existentes e definir o estilo do widget para a nova classe CSS fornecida usando style.

Este método adicionará um nome de estilo secundário ou dependente ao widget. Um nome de estilo secundário é um nome de estilo adicional, portanto, se houver qualquer nome de estilo anterior aplicado, eles serão mantidos.

Este método removerá determinado estilo do widget e deixará qualquer outro associado ao widget.

Este método obtém todos os nomes de estilo do objeto, como uma lista separada por espaços.

Este método define o nome do estilo principal do objeto e atualiza todos os nomes de estilo dependentes.

Por padrão, o nome do estilo principal de um widget será o nome do estilo padrão de sua classe de widget. Por exemplo, gwt-Button para widgets de Botão. Quando adicionamos e removemos nomes de estilo usando o método AddStyleName (), esses estilos são chamados de estilos secundários.

A aparência final de um widget é determinada pela soma de todos os estilos secundários adicionados a ele, mais seu estilo principal. Você define o estilo principal de um widget com o método setStylePrimaryName (String).

Existem várias abordagens para associar arquivos CSS ao seu módulo. Os aplicativos GWT modernos geralmente usam uma combinação de CssResource e UiBinder.

• Usando uma tag <link> na página HTML do host.

• Usando o elemento <stylesheet> no arquivo XML do módulo.

• Usando um CssResource contido em um ClientBundle.

• Usando um elemento <ui: style> embutido em um modelo UiBinder.

A classe UIObject é a superclasse de todos os objetos da interface do usuário.

• A classe UIObject é a superclasse de todos os objetos da interface do usuário. Ele simplesmente envolve um elemento DOM e não pode receber eventos. Ele fornece classes filhas diretas como Widget, MenuItem, MenuItemSeparator, TreeItem.

• Todos os objetos UIObject podem ser estilizados usando CSS.

• Cada UIObject tem um nome de estilo principal que identifica a regra de estilo CSS principal que sempre deve ser aplicada a ele.

• Um comportamento de estilo mais complexo pode ser obtido manipulando os nomes de estilo secundário de um objeto.

A classe Widget é a classe base para a maioria dos objetos de interface do usuário. Widget adiciona suporte para receber eventos do navegador e ser adicionado diretamente aos painéis.

Este widget contém texto, não interpretado como HTML usando um elemento <div>, fazendo com que seja exibido com layout de bloco.

Este widget pode conter texto HTML e exibe o conteúdo html usando um elemento <div>, fazendo com que seja exibido com layout de bloco.

Este widget exibe uma imagem em um determinado URL.

Este widget representa um elemento <a> simples.

O widget de botão representa um botão padrão.

PushButton representa um botão de ação normal com estilo personalizado.

O widget ToggleButton representa um botão estiloso com estado que permite ao usuário alternar entre os estados para cima e para baixo.

O widget CheckBox representa um widget de caixa de seleção padrão. Essa classe também serve como uma classe base para RadioButton.

O widget RadioButton representa um widget de botão de rádio de seleção mutuamente exclusivo.

O widget ListBox representa uma lista de opções para o usuário, seja como uma caixa de listagem ou como uma lista suspensa.

O widget SuggestBox representa uma caixa de texto ou área de texto que exibe um conjunto pré-configurado de seleções que correspondem à entrada do usuário. Cada SuggestBox está associado a um único SuggestOracle. O SuggestOracle é usado para fornecer um conjunto de seleções a partir de uma string de consulta específica.

O widget TextBox representa uma caixa de texto de uma única linha.

O widget PasswordTextBox representa uma caixa de texto que mascara visualmente sua entrada para evitar espionagem.

O widget TextArea representa uma caixa de texto que permite que várias linhas de texto sejam inseridas.

O widget RichTextArea representa um editor de rich text que permite estilos e formatação complexos.

O widget FileUpload envolve o elemento HTML <input type = 'file'>.

O widget oculto representa um campo oculto em um formulário HTML.

O widget de árvore representa um widget de árvore hierárquica padrão. A árvore contém uma hierarquia de TreeItems que o usuário pode abrir, fechar e selecionar.

O widget MenuBar representa um widget da barra de menu padrão. Uma barra de menu pode conter qualquer número de itens de menu, cada um dos quais pode disparar um comando ou abrir uma barra de menu em cascata.

O widget DatePicker representa um selecionador de data GWT padrão.

O widget CellTree representa a visualização de uma árvore. Este widget só funcionará no modo padrão, o que requer que a página HTML na qual é executado tenha uma declaração <! DOCTYPE> explícita.

O widget CellList representa uma lista de células em uma única coluna.

O widget CellTable representa uma visualização tabular que suporta paginação e colunas.

O widget CellBrowser representa uma visualização navegável de uma árvore na qual apenas um único nó por nível pode ser aberto por vez. Este widget só funcionará no modo padrão, o que requer que a página HTML na qual é executado tenha uma declaração <! DOCTYPE> explícita.

Os painéis de layout podem conter outros widgets. Esses painéis controlam a forma como os widgets são exibidos na interface do usuário. Cada widget Panel herda propriedades da classe Panel que por sua vez herda propriedades da classe Widget e que, por sua vez, herda propriedades da classe UIObject.

Panel é a classe base abstrata para todos os painéis, que são widgets que podem conter outros widgets.

O widget FlowPanel representa um painel que formata seus widgets filhos usando o comportamento de layout HTML padrão.

O widget HorizontalPanel representa um painel que posiciona todos os seus widgets em uma única coluna horizontal.

O widget VerticalPanel representa um painel que posiciona todos os seus widgets em uma única coluna vertical.

O widget HorizontalSplitPanel representa um painel que organiza dois widgets em uma única linha horizontal e permite ao usuário alterar interativamente a proporção da largura dedicada a cada um dos dois widgets. Os widgets contidos em um HorizontalSplitPanel serão automaticamente decorados com barras de rolagem quando necessário.

O widget VerticalSplitPanel representa um painel A que organiza dois widgets em uma única coluna vertical e permite ao usuário alterar interativamente a proporção da altura dedicada a cada um dos dois widgets. Os widgets contidos em um VertialSplitPanel serão automaticamente decorados com barras de rolagem quando necessário.

O widget FlexTable representa uma tabela flexível que cria células sob demanda. Ele pode ser denteado (ou seja, cada linha pode conter um número diferente de células) e células individuais podem ser definidas para abranger várias linhas ou colunas.

O widget de grade representa uma grade retangular que pode conter texto, html ou um widget filho em suas células. Deve ser redimensionado explicitamente para o número desejado de linhas e colunas.

DeckPanel é um painel que exibe todos os seus widgets filhos em um 'deck', onde apenas um pode estar visível por vez. Ele é usado pelo TabPanel.

Este widget representa um painel que posiciona seus widgets filhos "encaixados" em suas bordas externas e permite que seu último widget ocupe o espaço restante em seu centro.

Este widget representa um painel que contém HTML e que pode anexar widgets filhos a elementos identificados nesse HTML.

Este widget representa um painel que representa um conjunto de páginas tabuladas, cada uma contendo outro widget. Seus widgets filhos são mostrados conforme o usuário seleciona as várias guias associadas a eles. As guias podem conter HTML arbitrário.

Este widget representa um tipo de widget que pode encapsular outro widget, ocultando os métodos do widget encapsulado. Quando adicionado a um painel, um composto se comporta exatamente como se o widget que envolve tivesse sido adicionado.

SimplePanel é a classe base para painéis que contêm apenas um widget.

O widget ScrollPanel representa um painel simples que envolve seu conteúdo em uma área rolável.

O widget FocusPanel representa um painel simples que torna seu conteúdo focalizável e adiciona a capacidade de capturar eventos de mouse e teclado.

Este widget representa um painel que envolve seu conteúdo em um elemento HTML <FORM>.

Este widget representa um painel que pode aparecer sobre outros widgets. Ele se sobrepõe à área do cliente do navegador (e quaisquer pop-ups criados anteriormente).

Este widget representa uma forma de pop-up que possui uma área de legenda na parte superior e pode ser arrastada pelo usuário. Ao contrário de um PopupPanel, as chamadas para PopupPanel.setWidth (String) e PopupPanel.setHeight (String) definirão a largura e a altura da própria caixa de diálogo, mesmo se um widget ainda não tiver sido adicionado.

O GWT fornece um modelo de manipulador de eventos semelhante aos frameworks Java AWT ou SWING User Interface.

Uma interface de ouvinte define um ou mais métodos que o widget chama para anunciar um evento. O GWT fornece uma lista de interfaces correspondentes a vários eventos possíveis.

Uma classe que deseja receber eventos de um tipo específico implementa a interface do manipulador associada e, em seguida, passa uma referência a si mesma para o widget para se inscrever em um conjunto de eventos.

Por exemplo, a classe Button publica eventos de clique, então você terá que escrever uma classe para implementar ClickHandler para lidar com o evento de clique.

Todos os manipuladores de eventos GWT foram estendidos da interface EventHandler e cada manipulador tem apenas um único método com um único argumento. Este argumento é sempre um objeto do tipo de evento associado. Cada objeto de evento possui vários métodos para manipular o objeto de evento passado.

O GWT fornece três maneiras de criar elementos de interface de usuário personalizados. Existem três estratégias gerais a seguir -

• Create a widget by extending Composite Class −Esta é a maneira mais comum e fácil de criar widgets personalizados. Aqui você pode usar widgets existentes para criar uma visualização composta com propriedades personalizadas.

• Create a widget using GWT DOM API in JAVA −Os widgets básicos do GWT são criados dessa maneira. Ainda assim, é uma maneira muito complicada de criar widget customizado e deve ser usado com cautela.

• Use JavaScript and wrap it in a widget using JSNI −Geralmente, isso deve ser feito apenas como último recurso. Considerando as implicações entre navegadores dos métodos nativos, torna-se muito complicado e também mais difícil de depurar.

• O UiBinder é uma estrutura projetada para separar Funcionalidade e Visualização da Interface do Usuário.

• A estrutura UiBinder permite que os desenvolvedores criem aplicativos gwt como páginas HTML com widgets GWT configurados neles.

• A estrutura UiBinder facilita a colaboração com designers de IU que se sentem mais confortáveis ​​com XML, HTML e CSS do que com o código-fonte Java.

• O UIBinder fornece uma maneira declarativa de definir a interface do usuário.

• O UIBinder separa a lógica programática da IU.

• O UIBinder é semelhante ao que JSP é para Servlets.

• RPC, Remote Procedure Call é o mecanismo usado pelo GWT no qual o código do cliente pode executar diretamente os métodos do lado do servidor.

• O GWT RPC é baseado em servlet.

• O GWT RPC é assíncrono e o cliente nunca é bloqueado durante a comunicação.

• Usando GWT RPC, os objetos Java podem ser enviados diretamente entre o cliente e o servidor (que são serializados automaticamente pela estrutura GWT).

• O servlet do lado do servidor é denominado como serviço.

• A chamada de procedimento remoto que chama métodos de servlets do lado do servidor a partir do código do lado do cliente é chamada de chamada de serviço.

A seguir estão os três componentes usados ​​no mecanismo de comunicação GWT RPC -

• Um serviço remoto (servlet do lado do servidor) que é executado no servidor.

• Código do cliente para invocar esse serviço.

• Objetos de dados Java que serão passados ​​entre cliente e servidor.

• O cliente e o servidor GWT serializam e desserializam dados automaticamente para que os desenvolvedores não sejam obrigados a serializar / desserializar objetos e os objetos de dados podem viajar por HTTP.

Um objeto de dados java deve implementar a interface isSerializable para que possa ser transferido pela rede no GWT RPC.

A internacionalização é uma forma de mostrar informações específicas do local em um site. Por exemplo, exiba o conteúdo de um site em inglês nos Estados Unidos e em dinamarquês na França.

O GWT fornece três maneiras de internacionalizar um aplicativo GWT -

• Internacionalização de strings estáticas.

• Internacionalização de strings dinâmicas.

• Interface localizável.

Essa técnica é mais prevalente e requer muito pouca sobrecarga em tempo de execução; é uma técnica muito eficiente para traduzir strings constantes e parametrizadas; mais simples de implementar. A internacionalização de string estática usa arquivos de propriedades Java padrão para armazenar strings traduzidas e mensagens parametrizadas, e interfaces Java fortemente tipadas são criadas para recuperar seus valores.

Essa técnica é muito flexível, mas mais lenta do que a internacionalização de strings estáticas. A página do host contém as strings localizadas, portanto, os aplicativos não precisam ser recompilados quando adicionamos um novo local. Se o aplicativo GWT tiver que ser integrado a um sistema existente de localização do lado do servidor, essa técnica deve ser usada.

Esta técnica é a mais poderosa entre as três técnicas. Implementar Localizable nos permite criar versões localizadas de tipos personalizados. É uma técnica de internacionalização avançada.

tag extend-property com o nome do atributo definido como localidade e valores como localidade específica do idioma, digamos de para localidade alemã.

Para usar o suporte do GWT History, devemos primeiro incorporar o iframe a seguir em nossa página HTML do host.

<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

A estrutura de log emula java.util.logging, portanto, usa a mesma sintaxe e tem o mesmo comportamento que o código de log do lado do servidor.

O registro GWT é configurado usando arquivos .gwt.xml.

Podemos configurar o log para ser ativado / desativado; podemos ativar / desativar manipuladores específicos e alterar o nível de registro padrão.

O SystemLogHandler registra no stdout e essas mensagens só podem ser vistas no modo de desenvolvimento na janela DevMode.

Log de DevelopmentModeLogHandler chamando o método GWT.log. Essas mensagens só podem ser vistas no modo de desenvolvimento na janela DevMode.

O ConsoleLogHandler registra no console javascript, que é usado pelo Firebug Lite (para IE), Safari e Chrome.

FirebugLogHandler registra no console do Firebug.

PopupLogHandler registra no pop-up que reside no canto superior esquerdo do aplicativo quando este manipulador está habilitado.

Este manipulador envia mensagens de log para o servidor, onde serão registradas usando o mecanismo de log do lado do servidor.