Gxt-2.1.1 (EXT-GWT) + GWT 2.0 integration description

Less examples of gwt2 + gxt-2.11 (ext-GWT) integrated development can be found on the Internet, most of which are still at the stage of gwt1.x and gxt-2.11 integration. So let's take a look at it and write it down for your reference.

1. download jdk1.6 and install it first. Note that the version must be 1.6. Some Chinese and foreign users and their own experiments have proved that using jdk1.5 to integrate gwt2 + gxt2.11 will cause memory exceptions and crash (if you don't believe it, you can try it yourself as I do ).

2. Prepare eclipse3.5 (Galileo), that is, the Galileo version... This can be done in 3.4. Someone has successfully verified it (I have not personally verified it, and I am not liable for it ...), :

Http://www.eclipse.org/downloads/

3. Install gwt2.0. For installation instructions, see the official Google address illustrated in the figure below (this is an online installation. Of course, you can also download gwt2.03 to your local computer and add it to the Eclipse plug-in ):

Http://code.google.com/eclipse/docs/install-eclipse-3.5.html
4. Go to the extjs official website to download gxt2.11 to your local computer and decompress it ,:

Http://www.extjs.com/products/gwt/download.php? DL = extgwt210 & ref = extjsgreenbutton

Note: select the version for gwt2.0:

 

5. Create a GWT project and createCubeFor more information, see the illustrated Google documentation:

Http://code.google.com/eclipse/docs/creating_new_webapp.html

6. Deploy the EXT-GWT to the project with reference to the installation instructions of the EXT-GWT. Installation instructions are in the extracted gxt-2.1.1/setup.txt file. Step by step integration is complete:

Step 1-> Create a GWT 1.6.x project within eclipse.
Step 1: The official document here is defective. We should say create a GWT 1.6.x or gwt2.0x project within eclipse. Here we use GWT 2.0.3, and we have already completed it in step 5.
Copy the contents of the/resources folder in the download to a {Foldername} location with your war folder.
Substitute {Foldername} with the name of the folder you 've created for resources within your war folder.
Similarly, the official document is incorrect. This should be the second step. If you don't see it, you can directly Step 3. The person who writes this document should be knocked on his head. Step 2: Copy all the extracted content in the/resources folder to the war directory in the GWT project. Of course, it reminds us that it is best to create a directory under war to store these things.
Step 3-> Add the following stylesheet to your host page.
Step 3:CodeAdd the home page of the GWT Project (that is, the HTML page under the war. Note that you need to modify {Foldername }):
<LINK rel = "stylesheet" type = "text/CSS" href = "{Foldername}/CSS/gxt-all.css"/>

Step 3b-> if you are using charts, add the following script to your host page.
If you use charts, such as pie charts and column charts, you need to add this code to support their flash-based chart classes.
<Script language = 'javascript 'src = '{Foldername}/flash/swfobject. js'> </SCRIPT>

Step 4-> Add the following entry to you projects module XML file.
Step 4: Add the following content to the {projectname}. GWT. xml file:
<Inherits name = 'com. extjs. gxt. UI. gxt '/>

Step 5-> ext GWT requires the following doctype (quirksmode ).
Step 5: Add the following doctype to the home page.
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">

Step 6-> eclipse setup (shocould be similar for other development environments)
These instructions assume you have a existing project and launch configuration.
Step 6: Introduce the jar package:
1. Add gxt. jar to the project.
A. Right click on project name in 'package explorer '.
B. Select 'properties' from content menu.
C. Select 'java build path '.
D. Select 'libraries' tab.
E. Add the gxt. Jar either with 'add jars... 'or 'add external jars ...'.

2. Add gxt jar to launch configuration.
A. Choose run/Open Run dialog.
B. Select your appropriate launch configuration under 'java application '.
C. Select the 'classpath' tab.
D. Add the gxt. jar to the classpath.

 

7. After the deployment is completed, perform a small test:

Add the following code to the public void onmoduleload () method in the GWT execution class:

Window W = new window ();
W. setheading ("product information ");
W. setmodal (true );
W. setsize (600,400 );
W. setmaximizable (true );
W. settooltip ("The extgwt product page ...");
W. seturl ("http://www.extjs.com/products/gxt ");
W. Show ();

 

Save, and right-click the project and choose run as-> Web application ....

URL in copy Dev mode: http: // 127.0.0.1: 8888/testgxt.html? GWT. codesvr = 127.0.0.1: 9997 go to the browser and check the effect. extjs-style forms are displayed: