TOC

Introdução ao GWT

Introdução ao GWT

1. Introdução

GWT ouGoogle Web Toolkit is a framework for building high-performance web applications in Java.

Neste tutorial, vamos nos concentrar e cobrir alguns de seus principais recursos e funcionalidades.

2. SDK GWT

O SDK contém as bibliotecas da API Java, um compilador e um servidor de desenvolvimento.

2.1. API Java

A API do GWT possui classes para criar interfaces com o usuário, fazer chamadas de servidor, internacionalizar e executar testes de unidade. Para saber mais, verifique a documentação javahere.

2.2. Compilador

Simply put, GWT compiler is a source translator from Java code into the Javascript. O resultado da compilação é um aplicativo Javascript.

A lógica de seu trabalho inclui aparar classes, métodos, campos não utilizados do código e encurtar nomes Javascript.

Devido a essa vantagem, não precisamos mais incluir bibliotecas Ajax em nosso projeto Javascript. Claro, também é possível definir dicas durante a compilação do código.

Aqui estão alguns parâmetros úteisGWTCompiler:

  • -logLevel - para definir um dos níveis de registroERROR, WARN, INFO, TRACE, DEBUG, SPAM, ALL

  • -workdir - diretório de trabalho do compilador

  • -gen - o diretório para gravar os arquivos gerados

  • -out - o diretório de arquivos de saída

  • -optimize - Define o nível de otimização do compilador de 0 a 9

  • -style - o estilo de saída do scriptOBF, PRETTY ouDETAILED

  • -module[s] - o nome dos módulos a compilar

3. Configuração

O SDK mais recente está disponível na páginadownload. O resto da configuração está disponível na páginagetting started.

3.1. Maven

Para configurar o projeto com Maven, precisamos adicionar as seguintes dependências apom.xml: 


    com.google.gwt
    gwt-servlet
    runtime


    com.google.gwt
    gwt-user
    provided


    com.google.gwt
    gwt-dev
    provided

The gwt-servlet library supports the server-side components for invoking a GWT-RPC endpoint. gwt-user contains the Java API which we’ll use to build our web application. gwt-dev tem o código para compilador, implantação ou hospedagem do aplicativo.

Para garantir que todas as dependências usem a mesma versão, precisamos incluir a dependência do GWT pai: 


    com.google.gwt
    gwt
    2.8.2
    pom
    import

Todos os artefatos estão disponíveis para download emMaven Central.

4. Inscrição

Vamos construir um aplicativo da web simples. Enviará uma mensagem ao servidor e exibirá a resposta.

In general, a GWT application consists of the server and the client parts. O lado do cliente faz uma solicitação HTTP para conectar-se ao servidor. Para tornar isso possível, o GWT usa a Chamada de procedimento remoto ou simplesmente o mecanismo RPC.

5. GWT e RPC

Voltando ao nosso aplicativo, vamos ver como a comunicação RPC é feita. Para isso, criamos um serviço para receber uma mensagem do servidor.

Vamos primeiro criar uma interface: 

@RemoteServiceRelativePath("greet")
public interface MessageService extends RemoteService {
    String sendMessage(String message) throws IllegalArgumentException;
}

The @RemoteServiceRelativePath annotation maps the service to the module’s /message relative URL. MessageService should extend from RemoteService marker interface to perform RPC communication.

A implementação deMessageService está no lado do servidor: 

public class MessageServiceImpl extends RemoteServiceServlet
  implements MessageService {

    public String sendMessage(String message)
      throws IllegalArgumentException {
        if (message == null) {
            throw new IllegalArgumentException("message is null");
        }

        return "Hello, " + message + "!

 Time received: "
          + LocalDateTime.now();
    }
}

Nossa classe de servidor se estende da classe de servlet RemoteServiceServlet.It will automatically deserialize incoming requests from the client and serialize outgoing responses from the server.

Agora vamos ver como o usamos do lado do cliente. The MessageService is only a definitive version of our service.

Para executar no lado do cliente, precisamos criar a versão assíncrona do nosso serviço: 

public interface MessageServiceAsync {
    void sendMessage(String input, AsyncCallback callback)
      throws IllegalArgumentException;
}

Aqui podemos ver um argumento extra no métodogetMessage(). We need async to notify the UI when the asynchronous call is complete. Dessa forma, evitamos bloquear o thread da interface de trabalho.

6. Componentes e seu ciclo de vida

O SDK oferece alguns elementos da interface do usuário e layouts para o design das interfaces gráficas.

Em geral, todos os componentes de IU se estendem da classeWidget. Visualmente, temos os widgets de elementos que podemos ver, clicar ou mover na tela:

  • component widgets -TextBox,TextArea,Button,RadioButton,CheckBox, etc ...

e há widgets de layout ou painel que compõem e organizam a tela:

  • panel widgets -HorizontalPanel,VerticalPanel,PopupPanel,TabPanel, etc ...

Every time we add a widget or any other component to the code, GWT works hard to link the view element with the browser’s DOM.

O construtor sempre inicializa o elemento DOM raiz. When we attach a child widget to a parent component, it also causes binding at the DOM level. A classe do ponto de entrada contém a função de carregamento que será chamada primeiro. É aqui que definimos nossos widgets.

7. Ponto de entrada

Vamos dar uma olhada no principal ponto de entrada do aplicativo: 

public class Google_web_toolkit implements EntryPoint {

    private MessageServiceAsync messageServiceAsync = GWT.create(MessageService.class);

    public void onModuleLoad() {
        Button sendButton = new Button("Submit");
        TextBox nameField = new TextBox();
        nameField.setText("Hi there");

        sendButton.addStyleName("sendButton");

        RootPanel.get("nameFieldContainer").add(nameField);
        RootPanel.get("sendButtonContainer").add(sendButton);
    }
}

Every UI class implements the com.google.gwt.core.client.EntryPoint interface to mark it as a main entry for the module. Ele se conecta ao documento HTML correspondente, onde o código java é executado.

Podemos definir componentes da interface do usuário do GWT e atribuir a tags HTML com o mesmo ID fornecido. Entry point class overrides the entry point onModuleLoad() method, which is called automatically when loading the module.

Aqui, criamos os componentes da interface do usuário, registramos manipuladores de eventos, modificamos o DOM do navegador.

Agora, vamos ver como criamos nossa instância de servidor remoto. Para isso, usamos o método estáticoGWT.create(MessageService.class).

Ele determina o tipo solicitado em tempo de compilação. Vendo este método,GWT compiler generates many versions of code at compile time, only one of which needs to be loaded by a particular client during bootstrapping at runtime. Esse recurso é amplamente usado em chamadas RPC.

Aqui também definimos os widgetsButton eTextBox. To add attach them into the DOM tree we use the RootPanel class. É o painel raiz e retorna um valor singleton para ligar os elementos do widget: 

RootPanel.get("sendButtonContainer").add(sendButton);

Primeiro, ele obtém o contêiner raiz marcado comsendButtonContainer id. Depois colocamos osendButton no container.

8. HTML

Dentro da pasta/webapp, temos o arquivoGoogle_web_toolkit.html.

We can mark the tag elements with the specific ids so the framework can bind them into Java objects: 


    
Sample GWT Application

    

        

            Please enter your message:

As tags<td> com idsnameFieldContaineresendButtonContainer serão mapeadas para os componentesButtoneTextBox.

9. Descritor do Módulo Principal

Vamos dar uma olhada na configuração típica do arquivo descritor do módulo principalGoogle_web_toolkit.gwt.xml:

We make core GWT stuff accessible by including the com.google.gwt.user.User interface. Além disso, podemos escolher uma folha de estilos padrão para o nosso aplicativo. Nesse caso, é*.clean.Clean.

As outras opções de estilo disponíveis são*.dark.Dark,*.standard.Standard,*.chrome.Chrome. Ocom.example.client.Google_web_toolkit  também é marcado aqui com a tag<entry-point />.

10. Adicionando manipuladores de eventos

Para gerenciar os eventos de digitação do mouse ou teclado, o GWT usará alguns manipuladores. They all extend from EventHandler interface and have a method with the event type argument.

Em nosso exemplo, registramos o manipulador de eventos de clique do mouse.

Isso irá disparar o métodoonClick() toda vez que o botão  for pressionado: 

closeButton.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        vPanel.hide();
        sendButton.setEnabled(true);
        sendButton.setFocus(true);
    }
});

Aqui podemos modificar o estado e o comportamento do widget. Em nosso exemplo, ocultamosvPanele ativamossendButton.

A outra maneira é definir uma classe interna e implementar as interfaces necessárias: 

class MyHandler implements ClickHandler, KeyUpHandler {

    public void onClick(ClickEvent event) {
        // send message to the server
    }

    public void onKeyUp(KeyUpEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
            // send message to the server
        }
    }
}

Além deClickHandler, também incluímos aqui a interfaceKeyUpHandler para capturar os eventos de pressionamento de tecla. Aqui,inside of onKeyUp() method we can use the KeyUpEvent to check if the user pressed the Enter key.

E aqui como usamos a classeMyHandler para registrar os dois manipuladores de eventos: 

MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);

11. Chamando o servidor

Agora, estamos prontos para enviar a mensagem ao servidor. Vamos realizar uma chamada de procedimento remoto com o método assíncronosendMessage().

The second parameter of the method is AsyncCallback<String> interface, where the String is the return type of the corresponding synchronous method: 

messageServiceAsync.sendMessage(textToServer, new AsyncCallback() {
    public void onFailure(Throwable caught) {
        serverResponseLabel.addStyleName("serverResponseLabelError");
        serverResponseLabel.setHTML("server error occurred");
        closeButton.setFocus(true);
    }

    public void onSuccess(String result) {
        serverResponseLabel.setHTML(result);
        vPanel.setVisible(true);
    }
});

Como podemos ver, oreceiver implementsonSuccess(String result)and onFailure(Throwable)method for each response type.

Dependendo do resultado da resposta, definimos uma mensagem de erro “ocorreu um erro no servidor” ou exibimos o valor do resultado no contêiner.

12. Estilo CSS

Ao criar o projeto com o plugin eclipse, ele irá gerar automaticamente o arquivoGoogle_web_toolkit.css no diretório/webapp e vinculá-lo ao arquivo HTML principal.

Obviamente, podemos definir estilos personalizados para os componentes específicos da interface do usuário programaticamente: 

sendButton.addStyleName("sendButton");

Aqui, atribuímos um estilo CSS com o nome de classesendButton ao nosso componentesendButton: 

.sendButton {
    display: block;
    font-size: 16pt;
}

13. Resultado

Como resultado, temos este aplicativo da web simples:

image

Aqui, enviamos uma mensagem "Olá!" Para o servidor e imprimimos "Olá, Olá!" resposta na tela.

14. Conclusão

In this quick article, we learned about the basics of GWT Framework. Posteriormente, discutimos a arquitetura, o ciclo de vida, os recursos e os diferentes componentes do seu SDK.

Como resultado, aprendemos como criar um aplicativo da web simples.

E, como sempre, o código-fonte completo do tutorial está disponívelover on GitHub.

Related