Sunday, January 4, 2009

How to setup Ext js-GWT : GXT and Example on Eclipse Ganymede 3.4

Starting today studied Ext js-GWT : GXT (I also just to contact, everybody enhanced together, study) is also mygwt joins extjs camp later new edition (gxt1.2), about gxt (ext gwt) with the gwt-ext difference, please voluntarily consult the correlation data.

Explained once more: Studies gwt-ext, but is, Ext GWT (old name MyGWT) is one opens the source the Google Web Toolkit expansion, it helps the development personnel to found AJAX Web very easily the application. Ext GWT : GXT is 100% based on GWT, does not need any extra JavaScript or other third party jar. Ext GWT is also a Ext JS sub-project.

Ext GWT: GXT Rich Internet Application Framework for GWT: Official website:, inside has the rich example and the api documents.


First, Constructs Eclispe Ganymede 3.4 the development environment for Ext js-gwt

First, earlier period preparation

(1) development kit:Java SDK6, correct installment and disposition. Eclipse Ganymede:eclipse V3.4, the downloading address is:; Decompression direct use.

(2) is related jar the package:
gwt-windows-1.5.3: The downloading address is:; Decompresses treats the use, myself decompress directly to the D plate, the dull meeting needs to use.
gxt1.2: Downloading address:; Decompresses treats the use.

(3) GWT plug-in unit: Eclipse Plugins for, the downloading address is: After the decompression, installs under table of contents /plugins direct Copy to Eclipse then.

2nd, disposes GWT the Home table of contents

Opens Eclipse Window-Preferences-Cypal Studio to choose Gwt the table of contents (i.e. the gwt-windows-1.5.3 table of contents).
How to setup Ext js-GWT : GXT and Example on Eclipse

If has not presented Cypal Studio, explained that the plug-in unit has not installed successfully. Must place the correct position. At the same time, GWT Home, must certainly choose under the gwt-windows-1.5.3 decompression table of contents, when awaited construction set up module jar not to be able to find, simultaneously had the possibility to bring other questions. Ha-ha. I have had the mistake which is bewildered.


Second, compilation simple example

1st, the newly built dynamic web project, File-New-Other-Web-Dynamic Web Project, chooses Cypal Studio for GWT in Configurations, other defaults then. The attention, Target Runtime must certainly be, do not choose the server, if has chosen the server, next step movement time will appear exceptionally, but must manual delete it, therefore do not choose the server, next will introduce on tomcate6 moves the disposition. Here moves is moves under GWT own environment.
Ext js-GWT : GXT and Example on Eclipse Ganymede setup

2nd, founds the Module model

1.In the project clicks on right key New-Other-Cypal Studio-Module, input package of org.gxt, kind of Test
Ext js-GWT : GXT and module information

2.Specific Ext js-GWT class information.
Specific Ext js-GWT class information

After founding successfully, the correct project is:
Extjs-Gwt project Explorer structure and Example

3. joins Window.alert in the onModuleLoad() method (" success");
package org.gxt.client;
public class Test implements EntryPoint {
public void onModuleLoad() {


Third, disposition movement environment

Chooses Run-Run Configurations-Gwt Hosted Mode Application, chooses New, newly built movement example new_gxt, chooses Gxt in Project, model class which the Module automatic selection will probably move.
prepare Extjs-GWT example project

Clicks on Run, automatic start GWT movement environment:
Create Extjs-Gwt gxt Example project on Eclipse

ok, moves successfully.


Fourth, compiles ext gwt the window test model.

The above has not had usefully to the Extjs gxt1.2 folder's in thing, now should use it. Deletes the WebContent folder, a newly built lib folder, has duplicated gxt.jar to lib under.
Run Extjs-Gwt gxt Example on Eclipse

Increases lib/gxt.jar to Java Build Path inside
Add Extjs-Gwt: GXT1.2 Library to Eclipse Project

Joins in Test.gwt.xml (inherits GXT):
><inherits name='com.extjs.gxt.ui.GXT'/>
Joins (default cascading style sheet) in Test.html:
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

ok, the onModuleLoad() method annotation falls Window.alert now in (" success"); Meanwhile to avoid appearing repeatedly, deletes which already inducted. Window package; Increases gxt ient.widget. Window; The complete code is as follows:
package org.gxt.client;

import com.extjs.gxt.ui.client.widget.Window;

public class Test implements EntryPoint {
public void onModuleLoad() {
Window window=new Window();//Is equal in html div
window.setSize(500,300);//Establishment highly with width
window.setHeading("success");//Establishment title
window.setPlain(true);//Establishes transparently;

Moves once more (movement environment which New_Gxt already established), the wish result appeared, ha-ha.
Run Extjst-Gwt result for eclipse project

Finally Result of running Ext js - GWT exampl:
Show Extjs-Gwt Example on result success

Presents the window correctly, ha-ha, success. Next disposes under tomcate6, does not use the movement environment which gwt brings.