Introdução ao Google Web Toolkit Framework

O Google Web Toolkit (GWT) é um framework de desenvolvimento da Web de código-fonte aberto que permite que os desenvolvedores criem facilmente aplicações AJAX de alto desempenho usando Java. Com o GWT, é possível escrever seu frontend em Java e compilar seu código-fonte em JavaScript e HTML altamente otimizados compatíveis com browser. "Criar aplicações Web hoje é um processo tedioso e sujeito a erros. Você passa 90% de seu tempo driblando problemas do browser e a falta de modularidade do JavaScript torna o compartilhamento, o teste e a reutilização de componentes AJAX difícil e frágil. Não precisa ser assim", diz o site do Google Web Toolkit.

Neste tutorial, você aprenderá como os princípios acima se aplicam a aplicações reais. Ao mesmo tempo, você verá o suporte do NetBeans IDE para o GWT e criará uma aplicação simples que utiliza algumas destas funcionalidades.

Conteúdo

O conteúdo desta página aplica-se ao NetBeans IDE 6.x a 7.0

Para concluir este tutorial, você precisa dos seguintes recursos e softwares.

Software ou Recurso Versão Necessária
NetBeans IDE, Pacote Java versão 6.x
Java Development Kit (JDK) versão 5 ou mais recente
GlassFish Server
ou
Contêiner do servlet Tomcat
v3 ou Open Source Edition 3.0.1
 
versão 6.x
Google Web Toolkit (GWT) versão 1.5 ou mais recente
Plug-in do GWT para o NetBeans versão 2.x

Observações:


Configurando o Ambiente

Comece usando o IDE para gerar uma estrutura básica de código-fonte. Quando esta estiver concluída, você poderá estudá-la em detalhes para entender o funcionamento interno do GWT.

Criando a Estrutura de Código-Fonte de uma Aplicação GWT

A estrutura do código-fonte da aplicação criado deve incluir os arquivos JAR do GWT, o arquivo de a configuração do projeto do módulo do GWT e alguns artefatos padrão, como o ponto de entrada Java. Como você está usando um IDE, não é necessário criar todos esses arquivos manualmente. Em vez disso, deixe um assistente fazer o trabalho para você. Especificamente, o painel final do assistente Nova Aplicação Web será muito útil no contexto de criação de uma aplicação GWT.

  1. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; &#8984-Shift-N no Mac). Em Categorias, selecione Web (ou Java Web). Em Projetos, selecione Aplicação Web. Clique em Próximo.
  2. Na etapa 2, Nome e Localização, digite HelloGWT no Nome do Projeto. Também é possível especificar a localização do projeto digitando um caminho no seu computador no campo Localização do Projeto. Clique em Próximo.
  3. Na etapa Servidor e Definições, selecione qualquer servidor registrado no IDE. Se você tiver incluído o Tomcat ou o GlassFish Server ao instalar o IDE, eles serão exibidos na lista drop-down.

    Para registrar um servidor no IDE, clique no botão Adicionar para abrir um assistente que o oriente durante processo de registro.
  4. Especifique a versão do Java que você está usando. Clique em Próximo.

    Observação: Este tutorial suporta o GWT versão 1.5 e posterior. O GWT 1.4 não suporta o Java EE 5, portanto, se você estiver utilizando esta versão, será necessário definir a Versão do Java EE como 1.4. Do contrário, por exemplo, as anotações do Java EE 5 causará erros de compilação.

  5. Na etapa Frameworks, selecione GWT.
    GWT listados no painel Frameworks do assistente de Novo Projeto
    Quando você selecionar o framework GWT, os seguintes campos ficarão disponíveis:
    • Pasta de Instalação do GWT: especifique o caminho para a pasta em que foi feito o download do Google Web Toolkit no início deste tutorial. Se um caminho incorreto for especificado, uma mensagem de erro em vermelho será exibida e você não poderá concluir o assistente.
    • Módulo GWT: especifica o nome e o local do módulo do projeto que o IDE gerará quando o assistente for concluído. O módulo do projeto é um arquivo XML que configura uma aplicação GWT Por exemplo, ele é usado para especificar a classe instanciada pelo GWT quando o módulo é carregado. Observe que esse campo no assistente também determina o pacote principal da aplicação. Por default, o pacote principal é org.yournamehere e o módulo do projeto é Main. Para a finalidade deste tutorial, deixaremos as entradas default inalteradas.
  6. Clique em Finalizar. O IDE cria o projeto HelloGWT. O projeto contém todos os metadados de códigos-fonte, bibliotecas e projeto, como o script de construção Ant do projeto. O projeto será aberto no IDE. Você poderá ver a estrutura de arquivos na janela Arquivos (Ctrl-2; &#8984-2 no Mac) e sua estrutura lógica na janela Projetos (Ctrl-1; &#8984-1 no Mac).
    Janela Projetos exibindo o projeto HelloGWT
  7. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar. A aplicação será construída e um arquivo compactado da Web (WAR) será criado. Ele será implantado no servidor. O servidor será iniciado, caso já não esteja em execução. O browser default do computador será aberto e a página de boas-vindas da aplicação será exibida.
    Mensagem do Hello GWT exibida no browser
    Clique no botão e o texto sob ele desaparecerá.
    O texto abaixo do botão desaparecerá

Na próxima seção, você explorará cada um dos arquivos gerados em detalhes e examinará como a aplicação simples acima foi criada.

Examinando a Estrutura de Código-fonte de uma Aplicação GWT

O assistente de Nova Aplicação Web do IDE criou vários arquivos de origem. Observe os arquivos e veja como eles se relacionam uns com os outros no contexto de uma aplicação GWT.

  • Main.gwt.xml: O arquivo do módulo XML do projeto, contido no pacote raiz do projeto, é um arquivo XML que detém as configurações completas da aplicação necessárias por um projeto GWT. O módulo default do projeto gerado pelo assistente tem a seguinte aparência:
    <?xml version="1.0" encoding="UTF-8"?>
    <module>
            <inherits name="com.google.gwt.user.User"/>
            <entry-point class="org.yournamehere.client.MainEntryPoint"/>
            <!-- Do not define servlets here, use web.xml -->
    </module>

    Os elementos no módulo default do projeto são os seguintes:

    • inherits: Especifica os módulos herdados por este módulo. Neste simples caso, nós só herdamos a funcionalidade fornecida pelo módulo User, que é integrada ao framework GWT. Quando sua aplicação se torna mais complexo, a herança de módulo permite que você reutilize partes de funcionalidade de uma maneira rápida e eficiente.
    • entry-point: Refere-se à classe que será instanciada pelo framework GWT quando o módulo for carregado.
    Observação: Para obter mais informações, consulte: Organizando Projetos: Arquivos de Módulo XML.
  • MainEntryPoint.java: A classe que designa o ponto de entrada principal da aplicação, conforme especificado em Main.gwt.xml. Ela estende a classe EntryPoint e, quando o módulo GWT é carregado pelo framework, essa classe é instanciada e seu método onModuleLoad() é chamado automaticamente. O ponto de entrada default gerado pelo assistente tem a seguinte aparência.
    package org.yournamehere.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.ClickListener;
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;
    
    public class MainEntryPoint implements EntryPoint {
    
        /** Creates a new instance of MainEntryPoint */
        public MainEntryPoint() {
        }
    
        /**
            The entry point method, called automatically by loading a module
            that declares an implementing class as an entry-point
        */
        public void onModuleLoad() {
            final Label label = new Label("Hello, GWT!!!");
            final Button button = new Button("Click me!");
    
            button.addClickListener(new ClickListener(){
                public void onClick(Widget w) {
                    label.setVisible(!label.isVisible());
                }
            });
    
            RootPanel.get().add(button);
            RootPanel.get().add(label);
        }
    
    }
    No snippet acima, o método onModuleLoad() default do EntryPoint adiciona os seguintes componentes à aplicação:
    • Label: Um novo Label GWT é criado, exibindo o texto, 'Hello, GWT!!!'. O label é adicionado ao RootPanel através da linha final do código, RootPanel.get().add(label).
    • Button: Um novo Button (Botão) GWT é criado, exibindo o texto “Click me!” com um listener do botão, implementado por ClickListener. O listener do botão especifica que quando o botão é clicado, o label fica oculto.
      public void onClick(Widget w) {
          label.setVisible(!label.isVisible());
      }
      O botão é adicionado ao RootPanel por meio da penúltima linha de código.
      RootPanel.get().add(button)
  • welcomeGWT.html: A página HTML do host gerada, que é o arquivo de boas-vindas designado para a aplicação. O arquivo web.xml usa o elemento welcome-file para especificar que a página do host será a página inicial exibida no browser quando a aplicação for implantada. A página do host referencia o caminho para o código-fonte JavaScript e pode referenciar a folha de estilo da aplicação. A página default do host gerada pelo assistente tem a seguinte aparência:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
            <title>Main</title>
        </head>
        <body>
            <script language="javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
        </body>
    </html>
    As tags meta e script no snippet acima detêm um significado especial para o GWT:
    • meta: Aponta para o diretório de projeto da aplicação. Essa tag fornece um link entre a página HTML e a aplicação.
    • script: Importa códigos do arquivo JavaScript do framework GWT. Esse arquivo contém o código necessário para o bootstrap do framework GWT. Ele usa a configuração no módulo do projeto e carrega dinamicamente o JavaScript criado ao compilar o ponto de entrada para entregar à aplicação. O arquivo JavaScript é gerado pelo framework GWT ao executar a aplicação no modo hospedado ou ao compilar a aplicação.

Criando um Gerador de Cota Aleatória do AJAX

Nesta seção, você exibirá uma cota aleatória na página Web. Esse exemplo de aplicação serve para você se familiarizar com os diversos componentes de uma aplicação GWT. A cota aleatória será selecionada em uma lista de cotas armazenada no servidor. A cada segundo, a aplicação recupera a cota aleatória fornecida pelo servidor e a exibe na página Web com estilo AJAX verdadeiro, ou seja, sem o usuário precisar atualizar a página.

No processo de criação dessa funcionalidade, certifique-se de usar um serviço GWT RPC (Remote Procedure Call).

Gerando os Stubs de Serviço

O plug-in GWT do NetBeans fornece um assistente para a criação de um serviço RPC. O assistente gera as classes básicas de serviço para você. Esta subseção introduz o assistente de Serviço GWT RPC.

  1. Clique no ícone Novo Arquivo ( Ícone Novo Arquivo ) na barra de ferramentas principal do IDE. No assistente de Novo Arquivo, a categoria Google Web Toolkit exibe um modelo de arquivo chamado Serviço GWT RPC.
    Primeiro painel do assistente de Serviço do GWT RPC
    Selecione o Serviço GWT RPC e clique em Próximo.
  2. Como opção, preencha um subpacote onde os arquivos, que serão gerados, serão armazenados. Para a finalidade deste tutorial, digite sampleservice como o campo Subpacote.
    Segundo painel do assistente de Serviço GWT RPC
    Observação: Ao deixar a opção Criar Classe de Exemplo de Utilização selecionada nesta etapa, você estará permitindo que o IDE gere a classe GWTServiceUsageExample, que poderá ser usada para chamar o serviço.
  3. Clique em Finalizar. Os arquivos listados no assistente de Novo Serviço GWT RPC (mostrado na imagem acima) são gerados e a janela Projetos é atualizada automaticamente para refletir as alterações.
    A janela Projetos é atualizada contendo arquivos recém-criados

Examinando as Classes Geradas

O assistente de Serviço GWT RPC cria vários arquivos de origem. Observe os arquivos aqui e veja como eles se relacionam uns com os outros no contexto de um serviço GWT.

Para obter uma descrição estendida das classes de serviço GWT, consulte Criando Serviços.

  • GWTService: A definição do cliente do serviço. Essa interface se estende à interface da tag RemoteService.
    package org.yournamehere.client.sampleservice;
    
    import com.google.gwt.user.client.rpc.RemoteService;
    import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
    
    @RemoteServiceRelativePath("sampleservice/gwtservice")
    public interface GWTService extends RemoteService {
        public String myMethod(String s);
    }
  • GWTServiceImpl: O servlet que implementa a interface GWTService e fornece a funcionalidade para recuperar cotas aleatórias por meio do RPC.
    package org.yournamehere.server.sampleservice;
    
    import com.google.gwt.user.server.rpc.RemoteServiceServlet;
    
    import org.yournamehere.client.sampleservice.GWTService;
    
    public class GWTServiceImpl extends RemoteServiceServlet implements GWTService {
    
        public String myMethod(String s) {
            // Do something interesting with 's' here on the server.
            return "Server says: " + s;
        }
    
    }
  • GWTServiceAsync: Uma interface assíncrona que tem base na interface original GWTService. Ela fornece um objeto de retorno de chamada que ativa a comunicação assíncrona entre o servidor e o cliente.
    package org.yournamehere.client.sampleservice;
    
    import com.google.gwt.user.client.rpc.AsyncCallback;
    
    public interface GWTServiceAsync {
        public void myMethod(String s, AsyncCallback<String> callback);
    }
  • GWTServiceUsageExample: A interface de usuário de exemplo gerada como um cliente de teste. Ela pode ser usada para chamar o serviço.
    package org.yournamehere.client.sampleservice;
    
    import com.google.gwt.core.client.GWT;
    
    import com.google.gwt.user.client.rpc.AsyncCallback;
    import com.google.gwt.user.client.rpc.ServiceDefTarget;
    
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.Widget;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.TextBox;
    import com.google.gwt.user.client.ui.VerticalPanel;
    
    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    
    public class GWTServiceUsageExample extends VerticalPanel {
        private Label lblServerReply = new Label();
        private TextBox txtUserInput = new TextBox();
        private Button btnSend = new Button("Send to server");
    
        public GWTServiceUsageExample() {
            add(new Label("Input your text: "));
            add(txtUserInput);
            add(btnSend);
            add(lblServerReply);
    
            // Create an asynchronous callback to handle the result.
            final AsyncCallback<String> callback = new AsyncCallback<String>() {
                public void onSuccess(String result) {
                    lblServerReply.setText(result);
                }
    
                public void onFailure(Throwable caught) {
                    lblServerReply.setText("Communication failed");
                }
            };
    
            // Listen for the button clicks
            btnSend.addClickHandler(new ClickHandler(){
                public void onClick(ClickEvent event) {
                    // Make remote call. Control flow will continue immediately and later
                    // 'callback' will be invoked when the RPC completes.
                    getService().myMethod(txtUserInput.getText(), callback);
                }
            });
        }
    
        public static GWTServiceAsync getService() {
            // Create the client proxy. Note that although you are creating the
            // service interface proper, you cast the result to the asynchronous
            // version of the interface. The cast is always safe because the
            // generated proxy implements the asynchronous interface automatically.
    
            return GWT.create(GWTService.class);
        }
    }

Agora, modifique a classe de ponto de entrada para chamar o serviço ao instanciar o objeto GWTServiceUsageExample. Lembre-se da subseção anterior, que a classe GWTServiceUsageExample foi gerada devido a você ter selecionado a opção Criar Classe de Exemplo de Utilização no assistente de GWT RPC.

  1. No método onModuleLoad() do ponto de entrada principal da aplicação (MainEntryPoint.java), remova Label e Button do GWT e adicione uma nova instância de GWTServiceUsageExample ao RootPanel.
    public void onModuleLoad() {
         RootPanel.get().add(new GWTServiceUsageExample());
    }
    Observação: Após modificar o método onModuleLoad(), será necessário uma instrução de importação para a classe sampleservice.GWTServiceUsageExample. Para fazer isso, clique na dica que é exibida na coluna esquerda onde o método GWTServiceUsageExample() aparece no editor, e selecione Adicionar Importação para org.yournamehere.client.sampleservice.GWTServiceUsageExample.
    Suporte para Corrigir Importação exibido no editor
  2. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar. O servidor será iniciado, caso já não esteja em execução. O projeto é compilado (recompilado neste caso) e implantado no servidor. O browser é aberto para exibir um campo de texto. Digite uma mensagem e clique no botão. Um label é exibido com a mensagem que você enviou.
    Saída do browser exibindo a mensagem do usuário

Você criou um serviço GWT RPC com êxito usando o assistente de GWT RPC do IDE. Você, então, adicionou uma instância GWTServiceUsageExample ao método onModuleLoad() do ponto de entrada principal da aplicação, o que faz com que a aplicação chame o serviço quando ele está em execução. Na próxima seção, você personalizará o serviço estendendo as classes geradas e anexando uma folha de estilo a uma página HTML do host.

Estendendo as Classes Geradas

Nesta seção, você adaptará e estenderá as classes que foram examinadas na subseção anterior. Ao final desta subseção, você terá criado uma versão funcional do gerador de cota aleatória do AJAX.

  1. Lembre-se de que GWTServiceImpl é o servlet que implementa o serviço que você está criando.

    Se você abrir o descritor de implantação do web.xml da aplicação, será possível ver que uma declaração do servlet e um mapeamento já foram adicionados.

    <servlet>
        <servlet-name>GWTService</servlet-name>
        <servlet-class>org.yournamehere.server.sampleservice.GWTServiceImpl</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>GWTService</servlet-name>
        <url-pattern>/org.yournamehere.Main/sampleservice/gwtservice</url-pattern>
    </servlet-mapping>
    Na classe GWTServiceImpl, você implementará a interface GWTService com a lógica especificada para o seu serviço. Para criar um gerador de cota aleatória, adicione o seguinte código a GWTServiceImpl:
    public class GWTServiceImpl extends RemoteServiceServlet implements GWTService {
    
        private Random randomizer = new Random();
        private static final long serialVersionUID = -15020842597334403L;
        private static List quotes = new ArrayList();
    
        static {
            quotes.add("No great thing is created suddenly - Epictetus");
            quotes.add("Well done is better than well said - Ben Franklin");
            quotes.add("No wind favors he who has no destined port - Montaigne");
            quotes.add("Sometimes even to live is an act of courage - Seneca");
            quotes.add("Know thyself - Socrates");
        }
    
        public String myMethod() {
            return (String) quotes.get(randomizer.nextInt(5));
        }
    
    }
    Observação: Clique com o botão direito do mouse em qualquer lugar do editor do IDE e selecione Corrigir importações para permitir que o IDE crie e corrija as instruções de importação. Quando for fazer isso, certifique-se de selecionar java.util.Random em vez de com.google.gwt.user.client.Random:
    Caixa de diálogo Corrigir Todas as Importações
  2. Em vez de ter uma classe de exemplo de utilização (GWTServiceUsageExample) gerada, chame o serviço, tenha-o chamado diretamente da classe de ponto de entrada (MainEntryPoint) da aplicação. Comece copiando o método getService() do GWTServiceUsageExample e cole-o em MainEntryPoint. (Alterações em negrito.)
    public class MainEntryPoint implements EntryPoint {
    
        /**
         * Creates a new instance of MainEntryPoint
         */
        public MainEntryPoint() {
        }
    
        public static GWTServiceAsync getService() {
            // Create the client proxy. Note that although you are creating the
            // service interface proper, you cast the result to the asynchronous
            // version of the interface. The cast is always safe because the
            // generated proxy implements the asynchronous interface automatically.
    
            return GWT.create(GWTService.class);
        }
    
        ...
  3. Clique com o botão direito do mouse e escolha Corrigir Importações. As três instruções de importação a seguir serão adicionadas a MainEntryPoint.
    import com.google.gwt.core.client.GWT;
    import org.yournamehere.client.sampleservice.GWTService;
    import org.yournamehere.client.sampleservice.GWTServiceAsync;
  4. Altere o método onModuleLoad() na classe de ponto de entrada para o seguinte:
    /**
     * The entry point method, called automatically by loading a module
     * that declares an implementing class as an entry-point
     */
    
    public void onModuleLoad() {
    
        final Label quoteText = new Label();
    
        Timer timer = new Timer() {
    
            public void run() {
                //create an async callback to handle the result:
                AsyncCallback callback = new AsyncCallback() {
    
                    public void onFailure(Throwable arg0) {
                        //display error text if we can't get the quote:
                        quoteText.setText("Failed to get a quote");
                    }
    
                    public void onSuccess(Object result) {
                        //display the retrieved quote in the label:
                        quoteText.setText((String) result);
                    }
                };
                getService().myMethod(callback);
            }
        };
    
        timer.scheduleRepeating(1000);
        RootPanel.get().add(quoteText);
    
    }
  5. Clique com o botão direito do mouse e escolha Corrigir Importações. Ao fazer isso, selecione com.google.gwt.user.client.Timer em vez de com.google.gwt.user.client.ui.Label.
    Caixa de diálogo Corrigir Todas as Importações
  6. Delete a classe GWTServiceUsageExample. Ela não será mais compilada. Como a aplicação é capaz de chamar o serviço a partir da sua classe de ponto de entrada principal, a classe de exemplo de utilização GWTServiceUsageExample não será mais necessária para chamar o serviço.
  7. Mesmo que os stubs gerados para GWTService e GWTServiceAsync tenham fornecido um parâmetro String para myMethod(), ele não será necessário para o gerador de cota aleatória.

    Na classe GWTService, remova o parâmetro String de myMethod() para que a interface seja da seguinte forma:
    public interface GWTService extends RemoteService {
        public String myMethod();
    }
  8. A assinatura de método para o serviço assíncrono (GWTServiceAsync) deve corresponder à assinatura de GWTService (porém, incluir um objeto AsyncCallback como o parâmetro final). Portanto, remova o parâmetro String de myMethod() para que a interface seja da seguinte forma:
    public interface GWTServiceAsync {
        public void myMethod(AsyncCallback callback);
    }
    Consulte Fazendo Chamadas Assíncronas e Familiarizando-se com Chamadas Assíncronas na documentação oficial do GWT para obter mais informações sobre a interface de serviço assíncrono.
  9. Execute o projeto. Quando a aplicação é implantada e o browser é aberto, é possível ver uma nova cota recebida do servidora após cada segundo:
    O gerador de cotas do AJAX é exibido no browser

Na próxima seção, você aplicará uma folha de estilo para alterar a aparência das cotas.

Personalizando a Aparência

Nesta seção, você anexará uma folha de estilo à página HTML do host. E também fará referência a ela na classe de ponto de entrada. Especificamente, você precisará definir o nome do estilo do label na classe de ponto de entrada como o nome do estilo na folha de estilo. No runtime, o GWT se conecta ao estilo para o label e exibe um label personalizado no browser.

  1. Crie uma folha de estilo chamada welcomeGWT.css. Para criar o arquivo, clique com o botão direito do mouse no nó Páginas Web na janela Projetos e selecione Novo > Outro. O Assistente para Novo Arquivo será exibido.
  2. Em Categorias, selecione Web e, em seguida, selecione Folha de Estilo em Cascata em Tipos de Arquivo. Depois de concluir o assistente, o novo arquivo vazio será aberto no editor.
  3. Crie o seletor quoteLabel a seguir para a nova folha de estilo.
    .quoteLabel {
        color: white;
        display: block;
        width: 450px;
        padding: 2px 4px;
        text-decoration: none;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        border: 1px solid;
        border-color: black;
        background-color: #704968;
        text-decoration: none;
    }
    O editor de folha estilos deverá mostrar o seguinte.
    Visualização do CSS exibida no CSS

    Para exibir a Visualização e o Construtor de Estilo CSS, selecione Janela > Outro, no menu principal.

  4. Link para a folha de estilo da página de boas-vindas da aplicação (welcomeGWT.html). Ao mesmo tempo, adicione algum texto para apresentar a aplicação ao usuário. As novas partes da página HTML estão destacadas a seguir em negrito.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
        <head>
            <meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
            <link rel="stylesheet" type="text/css" href="welcomeGWT.css">
    
            <title>Main</title>
        </head>
    
        <body>
            <script language="javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
    
            <p>This is an AJAX application that retrieves a random quote from
                the Random Quote service every second. The data is retrieved
                and the quote updated without refreshing the page!</p>
    
        </body>
    </html>
  5. No método onModuleLoad() da classe de ponto de entrada (MainEntryPoint.java), especifique que, ao ter êxito, o estilo definido na folha de estilo deve ser aplicado ao label. A nova linha está destacada em negrito a seguir.
    public void onSuccess(Object result) {
        //display the retrieved quote in the label:
        quoteText.setText((String) result);
        quoteText.setStyleName("quoteLabel");
    }
    Enquanto digita, pressione Ctrl-Espaço para ativar a funcionalidade autocompletar código integrada do IDE. A funcionalidade autocompletar código funciona acionando uma janela pop-up que sugere formas de preencher o código e exibindo o Javadoc relacionado.
    Suporte à funcionalidade autocompletar código fornecido no editor
    Também é possível abrir a janela Javadoc do IDE caso deseje um acesso contínuo à documentação do GWT enquanto trabalha no IDE. Para isso, selecione Janela > Outro > Javadoc, no menu principal. Perceba que ao digitar no editor, a documentação da janela Javadoc é atualizada de acordo com a posição do seu cursor.
    Janela Javadoc
  6. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar. Desta vez, o label é mostrado com um estilo personalizado, usando a folha de estilo criada nesta subseção.
    Efeitos da folha de estilo exibidos no browser

Compilando e Depurando

Abra a janela Arquivos (Ctrl-2; &#8984-2 no Mac) e expanda a pasta build. (Se a pasta build não estiver presente, será necessário criar o projeto novamente para que o IDE gere novamente a pasta build.) Você deverá ver algo parecido com o seguinte:
Criar Pasta é exibida na janela Arquivos
Essa pasta é gerada automaticamente pelo GWT quando a aplicação é compilada. A pasta consiste em uma versão pronta para implantação da aplicação do cliente. Para obter uma explicação do que esses arquivos representam, consulte Google Code FAQ - What's with all the cache/nocache stuff and weird filenames?.

Observe também que é possível tirar vantagem do depurador integrado do IDE ao trabalhar com aplicações GWT. Isso permite fazer a depuração de erros no modo hospedado do GWT. A janela principal do modo hospedado do GWT e o browser abrem automaticamente.

Observação para usuários de Mac OS X: O modo hospedado do GWT é compilado para arquiteturas de 32 bits do Mac OS X, existente somente para o Java 1.5. Se você estiver executando uma versão de 64 bits do Java 1.6, será necessário alternar para uma versão de 32 bits. Você pode fazer isso utilizando o painel Preferências Java do OS X. Após alternar as versões Java, é necessário reiniciar o IDE.

Defina os pontos de interrupção de campo, método e linha, nos seus arquivos de origem, clicando na margem esquerda do editor do IDE.
Editor exibindo um ponto de interrupção da linha
Selecione Depurar como em qualquer outro projeto da Web (por exemplo: clique com o botão direito do mouse no nó do projeto e selecione Depurar, ou clique no ícone Depurar Projeto ( Ícone Depurar Projeto ). A aplicação é congelada em qualquer ponto de interrupção definido, permitindo percorrer o código e examinar variáveis e valores de expressões (por exemplo, selecione Janela > Depuração > Variáveis Locais para exibir os valores na janela Variáveis Locais).
Depurador interrompido no ponto de interrupção
Também é possível passar o mouse sobre uma expressão ou valor no editor e o depurador utilizará um pop-up para informá-lo do valor atual (como mostrado na imagem anterior).
A janela principal do modo hospedado do GWT e o browser serão abertos. O browser exibe uma versão em execução da sua aplicação.
Browser no modo hospedado do GWT

Conclusão

Neste tutorial, você aprendeu:

  • Como uma estrutura de origem de uma aplicação típica se parece em uma aplicação do Google Web Toolkit.
  • Como os artefatos do Google Web Toolkit se relacionam uns com os outros.
  • Como configurar o IDE para usar o Google Web Toolkit.
  • Quais ferramentas estão disponíveis para você no IDE, especificamente para usar o Google Web Toolkit.

Como o framework GWT manipula a geração de código relacionada ao browser, bem como a criação do código da API de nível mais baixo de XmlHttpRequest, é possível tirar vantagem dessa estrutura para se concentrar na funcionalidade que você deseja que suas aplicações forneçam. Portanto, como declarado na introdução, o GWT permite que você evite problemas associados à compatibilidade de browsers ao mesmo tempo que permite que você ofereça aos usuário a mesma experiência dinâmica e compatível com os padrões que o mundo Web 2.0 tipicamente oferece. Conforme demonstrado neste tutorial, é possível aplicar o framework GWT para escrever o seu frontend completo em Java, pois você sabe que é possível deixar que o compilador do GWT converta as classes do Java para JavaScript e HTML compatíveis com browsers. E, conforme também demonstrado, o IDE fornece um conjunto completo de ferramentas para tornar tudo isso fácil e eficiente, sem ter que escrever os códigos da infraestrutura básica da aplicação GWT manualmente.


Consulte Também

Com isso, termina o tutorial Introdução ao Framework do Google Web Toolkit. Para obter materiais relacionados e mais avançados, consulte os seguintes recursos:

Recursos do GWT

Documentação do NetBeans para Frameworks Web Java

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2015, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo