Uma introdução básica à gwt EXT

Por dgirard na segunda-feira, 1 de Outubro de 2007,

20:16 - Permalink

Este é um tutorial básico para compreender o

funcionamento do GWTEXT. Ela dá um exemplo
básico Olá mundo usando gwt, GwtExt, e eclipse.
Elaborado em nome do GROUPE Sfeir, sob a
orientação do DIDIER GIRARD (CTO) GROUPE Sfeir.
(www.sfeir.com).
Por Sivaguru Sreekanth. Software Engineer GRUPO
Sfeir. Muitas Graças à Sanjiv Jivan pela sua
inestimável contribuição na integração gwt e EXT.

GWT

O Google Web Toolkit é um toolkit de código aberto que

permite aos desenvolvedores criar aplicações AJAX na
linguagem de programação Java. Gwt apoia rápido cliente
/ servidor de desenvolvimento e debugging em qualquer
IDE Java. Em uma etapa posterior implantação, o gwt
compilador traduz uma aplicação Java trabalho
equivalente em JavaScript que manipula
programaticamente um web browser HTML do DOM
DHTML utilizando técnicas. Gwt enfatiza reutilizáveis,
soluções eficazes para os desafios recorrentes Ajax, ou
seja, chamadas de procedimento remoto assíncrona, a
história da gestão, livro marcação, e cruz-browser
portabilidade.

EXT

Ext (pronuncia-se "extent") é uma biblioteca JavaScript

com código-fonte aberto, para a construção de aplicações
web interativas ricamente utilizando técnicas tais como
AJAX, DHTML e DOM scripting. Originalmente construído
como uma extensão da YUI, Ext agora pode também
estender jQuery e Script.aculo.us. A partir da versão 1.1,
pode executar Ext stand-alone sem depender de qualquer
dessas bibliotecas externas, embora continue a ser uma
opção para integration. Ext JS é um excelente quadro
para a construção de aplicações web que possuem
desktop como funcionalidade em um navegador da web.
Ext é uma das melhores bibliotecas Ajax Javascript volta
e isso é evidente pelo incrível IU do que pode construir
com ela. Ext tem um grande número de widgets polida,
mas exige que o dono da obra a ser proficiente em
Javascript, a fim de construir mais bem concebidos web
apps.

GWT-EXT

Gwt-EXT é uma biblioteca que integra gwt e EXT. Um dos

principais objetivos é fazer com que o gwt-ext widgets e
API's funcionem perfeitamente com o núcleo gwt infra-
estrutura e sua API's

CONFIGURANDO

Vamos trabalhar com gwt-EXT no eclipse 3.3 usando o

plug-in gwt Designer

GwtDesigner é uma ferramenta utilizada para trabalhar

com GWT.a 14 dias para testar pode ser baixado a partir
do site http://www.instantiations.com/
gwtdesigner/.

Criando um novo projeto no Eclipse gwt (gwt

Designer deve está instalado)

• File>New>Project>Designer>GWT>GWT Java
Project>Next.
 • Agora entra em Project Name>DemoGwtExt>Next.
Click on > create Gwt module.
• Digite o nome do módulo(ExGwtExt) e nome do
pacote (com.sfeir).
• Agora, um projeto chamado ExGwtExt é criada no
eclipse.
• Em seguida, veremos as bibliotecas necessárias
para ser transferido.
• Primeiro fazer download de Ext:
http://extjs.com/download
• Download gwtext-0.9.1.Zip
http://code.google.com/p/gwt-ext/
• Guarde as duas bibliotecas na sua pasta do projeto,
descompacte o arquivo gwtext-0.9.1.Zip e você
pode encontrar o arquivo Jar gwtext.jar nessa
pasta.

Agora precisamos adicionar gwtext.jar à classe caminho

para nosso projeto DemoGwtExt.In eclipse clique direito
sobre o projeto Build pather Configure Build Path na Aba
Bibliotecas clique em add external jars lá você pode
configurar o gwtext.jar, Agora gwtext.jar ficheiro tenha
sido definido para a classe caminho.
Poucas modificações têm de ser feito para o arquivo
ExGwtExt.gwt.xml. Após a modificação do arquivo
parecido com este:

<module>
<inherits name="com.google.gwt.user.User"/>
<inherits name="com.gwtext.GwtExt"/> //line to
be added//
<entry-point class="com.sfeir.client.ExGwtExt"/>
</module>

A biblioteca baixada Ext contém muitos compilados java

script e diretórios. No que precisamos ext-all.js e de todo
resources e adapter diretórios. e copiá-los para a pasta
pública em nosso /src/com/sfeir/public/js/ext/
resources
/src/com/sfeir/public/js/ext/ adapter
/src/com/sfeir/public/js/ext-all.js

Agora, abra o ExGwtExt.html encontrado na pasta

pública, e adicione as seguintes linhas que são exibidas
como letras em negrito para o ExGwtExt.html:

<html>
<head>
<title>Wrapper HTML for ExGwtExt</title>
<meta name='gwt:module'
content='com.sfeir.ExGwtExt'/>
<link type="text/css" rel='stylesheet'
href='ExGwtExt.css'/>
<link rel="stylesheet" type="text/css" href="js/
ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="js/
ext/resources/css/xtheme-aero.css" />
<script type="text/javascript" src="js/ext/
adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext/
adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext/ext-
all.js"></script>
</head>
<body>
<script language="javascript" src="gwt.js"></script>
<! -- OPTIONAL: include this if you want history support -
->
<iframe id="__gwt_historyFrame"
style="width:0;height:0;border:0"></iframe>
</body>
</html>

Isso é tudo o que temos feito todos os passos necessários

para configurar GwtExt no nosso projecto.

Examplo Hello World

Vamos ver um exemplo para mostrar Olá Mundo na tela

usando GwtExt.
Abrir ExGwtExt.java (src/com/sfeir/client/
ExGwtExt.java) o código do programa é como este:

package com.sfeir.client;
/**
*Import the necessary package to run the program
*/
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.core.EventObject;
import com.gwtext.client.widgets.Button;
import com.gwtext.client.widgets.ButtonConfig;
import com.gwtext.client.widgets.MessageBox;
import
com.gwtext.client.widgets.event.ButtonListenerAdapter;
/**
* Entry point classes define <code>onModuleLoad ()
</code>.
*/
public class gwtExt implements EntryPoint
{
public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get ();
Button but= new Button (new ButtonConfig () {
{
setText("Example of hello world");
setButtonListener (new ButtonListenerAdapter()
{
public void onClick(Button button, EventObject e)
{
MessageBox.alert("Gwt-Ext", "<< hello World
example >>");
}
});
}
});
rootPanel.add (but, 300,300);
}
}

Salve o projeto e agora execute-o como aplicação gwt em

hosts. Agora podemos ver um botão quando clicado em
que ele exibe exemplo "Olá Mundo". Podemos também
executar o programa em modo web clicando no botão
compilar hospedado no modo tela:

Este é o resultado observado neste tutorial.

Conclusão

Este é um tutorial básico para a integração GWTEXT gwt

em sua aplicação, assim podemos desfrutar a incrível
funcionalidade de Ext em gwt, nos próximos turoriais
poderemos ver a forma de integrar Forms, painel, grids
de GWTEXT em gwt.

Referência

Sanjiv Jivan Creator of GWTEXT http://code.google.com/

p/gwt-ext/
Eclipse http://www.eclipse.org/
Google Web Toolkit http://code.google.com/webtoolkit/
GWTDesigner http://www.instantiations.com/
gwtdesigner/
Official GWT Blogs http://groups.google.com/group/
Google-Web-Toolkit
Official GWT Forum
http://googlewebtoolkit.blogspot.com/