terça-feira, 15 de março de 2011

Criando seu primeiro aplicativo com GWT e Netbeans

Pessoal;

Dando continuidade ao artigo sobre introdução ao GWT, e conforme prometido, vou demonstrar como criar um aplicativo GWT usando o Netbeans (No proximo post vou mostrar como criar no Eclipse xD).

Para habilitar o suporte do GWT no netbeans, será necessário a instalação do plugin GWT4NB, que você pode fazer o download a partir do site do projeto: https://gwt4nb.dev.java.net/, a partir dai é só instalar o plugin que irá aparecer a opção de utilizar o Google Web Toolkit nos projetos web.

Com o plugin instalado, vamos começar a desenvolver o nosso primeiro aplicativo GWT, o primeiro passo é criar um novo projeto WEB, como mostra na imagem:

A partir dai, é só configurar o nome do projeto, selecionar qual o servidor será instalado, e na ultima etapa, selecionar o plugin do Google Web Toolkit, como mostra na imagem:

Nesse passo, nos precisamos informar o diretório de instalação do GWT, se não estiver instalado, você pode fazer o download em http://code.google.com/intl/pt-BR/webtoolkit/ ou clicar em "You can download the GWT SDK here"  na tela de configuração.

Também definimos o caminho para nosso primeiro modulo, no caso eu preenchi: com.javacomfarinha.gwt.login.Login (Login será o nome do nosso primeiro modulo GWT).

Pronto, o netbeans irá criar o nosso projeto com a seguinte estrutura:


Com isso, temos criado o nosso primeiro modulo GWT criado pelo Netbeans, agora vou explicar o que são esses arquivos:

Cada modulo GWT, possui essa estrutura, na raiz do pacote do projeto, possui um arquivo gwt.xml com o nome do modulo que e guardam as configurações do modulo, o mais importante para você sobre esse arquivo é que nele nós definimos, quando esse modulo for iniciado, qual tela (que é um EntryPoint no GWT) que será carregada e quais outros modulos criados no seu projeto serão utilizados nesse modulo. Também podemos definir várias outras configurações, mais veremos isto em outros posts.


 Todo modulo GWT também tem essa pacote "client", neste pacote temos todas as classes a respeito da criação das telas/componentes visuais e TODAS as classes que estiverem nesse pacote serão compilados para um código JavaScript.

A Classe LoginEntryPoint é a classe que foi gerada pelo plugin irá exibir nossos componentes na tela do browser, essa classe implementa a interface do GWT chamada EntryPoint. Uma classe EntryPoint será exibida para o usuário quando o modulo for carregado, pois o modulo irá chamar o metodo onModuleLoad que é definido nessa interface, no exemplo gerado pelo plugin, ficou assim:
Nesse exemplo, está sendo adicionado uma label e um botão direto a pagina WEB que irá chamar esse modulo GWT.

O Plugin também criou uma pagina HTML (welcomeGWT.xml) que será responsavel por chamar esse modulo GWT, o código HTML fica assim:
Através da Tag Meta (utilizado nas versões 1.3 e anteriores do GWT e da chamada ao script nocache.js com o nome do módulo, será invocado o modulo Login do GWT.

Agora é só compilar o projeto que o plugin Gwt4Nb irá realizar a compilação do modulo GWT criado, rodar o projeto e chamar a página welcomeGWT.html o resultado final fica assim:


Quando você clica no botão o Label se exibe ou se esconde.

Pronto, um simples e bem abstrato exemplo está funcionando, vou ficar por aqui para deixar vocês criarem os seus primeiros "Hello World" e no proximo post vou continuar com esse mesmo exemplo para criar um exemplo de Login e Senha usando GWT.

Valeu Pessoal

Nenhum comentário: