GWT - Google Web Toolkit

lucasqueiroz52

Google Web Toolkit é um framework para o desenvolvimento de interfaces em Java. O propósito do GWT, é escrever códigos para interface Web.

[ Hits: 7.199 ]

Por: Lucas Queiroz Braga em 24/09/2012

0 0

Denuncie Favoritos Indicar Impressora

GWT- Google Web Toolkit

GWT- Google Web Toolkit, é um framework para o desenvolvimento de interfaces em Java. O propósito do GWT, é escrever código para interfaces Web.

Os códigos são compilados de Java para JavaScript. Abaixo, apresento alguns códigos simples com algumas explicações, para que possa auxiliar no início do desenvolvimento de sistemas Web com Java.

Obs.: Para o desenvolvimento da aplicação, sugiro que utilize softwares como Eclipse ou NetBeans. Segue o link para auxílio na instalação do framework GWT:

https://developers.google.com/web-toolkit

Painéis no GWT

Painéis, uma maneira muito utilizada para organizar os componentes. O HorizontalPanel, onde será colocado os itens um ad lado do outro. Segue o código abaixo:

HorizontalPanelpainel1 = new HorizontalPanel();
// cria o painel1
painel1.setBorderWidth(5);
// cria uma borda
painel1.add(botao1);
// adiciona o botao1 no painel que já tenha sido criado
painel1.add(tbSobreNome);
// add o TextBox que já tenha sido criado
painel1.add(lbSobreNome);
//add o label que já tenha sido criado
painel1.add(ptSenha);
// add o PasswordTextBox que já tenha sido criado
painel1.add(lbSenha);
// add o label que já tenha sido criado
RootPanel.get().add(painel1);
// adiciona o painel criado

VerticalPanel, onde será colocado os itens um abaixo do outro. Segue o código abaixo:

VerticalPanel painel2 = new VerticalPanel ();
// cria o painel2
Painel2.setBorderWidth(5);
// cria uma borda
Painel2.add(botao1);
// adiciona o botao1 no painel que já tenha sido criado
Painel2.add(tbSobreNome);
// add o TextBox que já tenha sido criado
Painel2.add(lbSobreNome);
//add o Label que já tenha sido criado
Painel2.add(ptSenha); add o PasswordTextBox que já tenha sido criado
Painel2.add(lbSenha); add o Label que já tenha sido criado
RootPanel.get().add(painel2);
// adiciona o painel criado

Temos também, a opção de colocarmos onde quisermos, com o AbsolutPanel. Vejamos o código abaixo:

AbsolutePanel absolutePanel = new AbsolutePanel();
// criamos o absolutePanel.
absolutePanel.setSize("400px", "300px");
// seta o tamanho primeiro a largura e depois a altura em pixels.
// agora iremos definir aonde vai ficar os componentes. Abaixo dentro do add colocaremos o nome do componente que vai ser adicionado. Em seguida, primeiro a coluna depois a linha em pixels. (Obs.: Os números podem mudar para que se ajeite ao seu painel).
absolutePanel.add(botao1,20,20);
absolutePanel.add(tbSobreNome, 20,20);
absolutePanel.add(lbSobreNome, 80,20);
absolutePanel.add(tbSenha,20,50);
absolutePanel.add(lbSenha,80,50);
RootPanel.get().add(absolutePanel);

Abaixo, mostro como criar um TabPanel, que nada mais é do que uma aba adicionada a um painel. Nesta aba, você tem a opção de adicionar o que quiser dentro dela.

Abaixo foram criadas três abas, utilizaremos um FlowPanel onde poderemos adicionar diversos componentes dentro dele em diversos tamanhos:

TabPanel tabPanel = new TabPanel();
// criando TabPanel, painel de abas
tabPanel.setSize("800", "400");
// tamanho do tabPanel.
tabPanel.setStyleName("painel");
FlowPanel fpGwt = new FlowPanel();
fpGwt.add( new Button("Abrir"));
// conteudo add dentro da aba fpGwt
fpGwt.add( new Button("Cancelar"));
// conteudo add dentro da aba fpGwt
fpGwt.add( new Button("Editar"));
// conteudo add dentro da aba fpGwt
fpGwt.add( new Button("Sair"));
// conteudo add dentro da aba fpGwt
FlowPanel fpJava = new FlowPanel();
fpJava.add( new Button("Editar"));
// conteudo add dentro da aba fpJava
fpJava.add( new Button("Salvar Como"));
// conteudo add dentro da aba fpJava
FlowPanel fpPhp = new FlowPanel();
fpPhp.add( new Button("sair"));
// conteudo add dentro da aba fpPhp
tabPanel.add(fpGwt,"curso gwt");
// nome da aba 1
tabPanel.add(fpJava,"curso java");
// nome da aba 2
tabPanel.add(fpPhp,"curso php");
// nome da aba 3
RootPanel.get().add(tabPanel);
//adicionando o tabPainel no painel

Abaixo, mais um exemplo de FlowPanel, onde foi inserido: Button, Label, TextBox e CheckBox:

FlowPanel flowPanel = new FlowPanel();
flowPanel.setSize("800", "400");
flowPanel.setStyleName("painel");
flowPanel.add(new Button ("salvar"));
// Button: por padrão ele coloca um ao lado do outro.
flowPanel.add(new Button("cancelar"));
flowPanel.add(new Button("sair"));
flowPanel.add(new Label(" label salvar"));
// Label por padrão ele coloca um abaixo do outro.
flowPanel.add(new Label(" Label cancelar"));
flowPanel.add(new Label(" Label sair"));
flowPanel.add(new TextBox());
// campo para inserir loguim por exemplo.
flowPanel.add(new PasswordTextBox());
// campo para inserir senha por exemplo.
flowPanel.add(new CheckBox("curso 01"));
flowPanel.add(new CheckBox("curso 02"));
flowPanel.add(new CheckBox("curso 03"));
RootPanel.get().add( flowPanel);
//adicionando o flowPainel no painel

Veremos abaixo, o CaptionPanel, que nada mais é do que um painel com algo escrito na parte esquerda do painel:

CaptionPanel caption = new CaptionPanel();
// criando o CaptionPanel
caption.setTitle("captionPanel para gwt");
//setamos um titulo para o nosso CaptionPanel
caption.setContentWidget( new Label("label de teste"));
// adicionando um widget no caso um label foi adicionado
RootPanel.get().add(caption);
//adicionamos ele no painel.

Estilos no GWT

Para mudar o layout da sua aplicação, você deve ir até o arquivo "MainGWT.html" e adicionar uma das linhas dentro do <module>, onde cada uma das linhas abaixo, apresenta um tema já pronto e diferente para sua aplicação:

Ou, se preferir, crie seu próprio layout no GWT, basta criar um arquivo com a opção: botão direito no mouse > novo > folha de estilos em cascata.

O código dentro do arquivo ficaria assim, para todos os botões criados:

.gwt-Button //onde todos os botões
}
font-size:8px; // assumiriam o tamanho de 8 pixels
background-color: #00fa9a; // e a cor #00fa9a
}

Dentro do arquivo "welcomeGWT.html", é preciso adicionar a linha dentro do <head>:

Ou se preferir, pode colocar assim:

<stylesheet src = "folhaDeEstilos.css"/>
//Onde "folhaDeEstilos.css" e o nome do meu arquivo.

Imagem no GWT

É possível adicionar uma imagem no seu painel. Usaremos o código abaixo para demonstrar.

Primeiro, vamos criar a imagem usando o Image e em seguida, vamos colocar o link da página onde está a nossa imagem. Depois vamos criar um FlowPanel e adicionar a imagem a ele:

Image imagem = new Image();
// cria o bojeto Image
imagem.setUrl("http://autossegredos.com.br/?p=24950");
// adiciona a url da minha imagem
imagem.setTitle("imagem para teste gwt");
// setamos um titulo para a imagem
FlowPanel flowpanel = new FlowPanel();
// criamos um FlowPanel
flowpanel.add(imagem);
//adicionamos a imagem no nosso flowpanel

RootPanel.get().add(imagem);
RootPanel.get().add(flowpanel);

Espero que tenham gostado.

Estes são apenas simples exemplos. Logo apresentarei mais.

Páginas do artigo

1. GWT- Google Web Toolkit

Outros artigos deste autor

Terminais leves com LTSP - Linux Terminal Server Project

Leitura recomendada

JSP - Parte 1

Configurando TomCat

Eclipse - Instalando o plugin do Jetty WTP

URLConnection :: SuperClass

URLs amigáveis com URL_Filter_Rewrite e Struts2

Comentários