Getting Started: Quick Setup for GXT 3 (includes reset.css link how to)


STEP 1 -> Create a Google Web Application Project project within Eclipse.

1a. Get Ext GWT

Download the latest Ext GWT release http://www.sencha.com/products/gxt/download/
(Note: GXT 3.X requires GWT 2.4+.)


1b. Get GWT Running

For detailed instructions for getting started with the GWT SDK:
https://developers.google.com/web-toolkit/gettingstarted

For a quick start guide for the Google Plugin for Eclipse:
https://developers.google.com/eclipse/docs/getting_started


1c. Create a User Defined Library

Select Windows > Preferences and select Java > Build Path > User Libraries in the preference tree.

Click New and type "GXT" into the User library name field. Make sure your new library is selected and click "Add JARs". Navigate to the root folder of the Ext GWT download and add the "gxt.jar" file. Click OK. (Optional; If you prefer seeing jars in the build path rather than a user library, you can just click "Add External JARs" instead.)


STEP 2 -> Make the following changes to your host HTML page

2a. GXT 3.X requires a strict dtd. Add either of these as the first line in the host page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE html>

2b. Add a stylesheet link to reset.css and ensure it is the first referenced stylesheet:
Update; now in GXT 3.x you can use the following to include the reset css;

 <!-- GXT Stylesheet -->
 <stylesheet src="reset.css" />


For older 3.x versions you made need to use the following;

<link rel="stylesheet" type="text/css" href="{module name}/reset.css" />

So in eclipse if you project is named "MyProject":

<link rel="stylesheet" type="text/css" href="MyProject/reset.css" />

Ext GWT Development Team Colin Alworth Says:
In your module file (ends in .gwt.xml) you might have a rename-to attribute - if so, that is the name of the module. This is the folder in which the modulename.cache.js file is created, along with other things like a hosted.html file, and eventually several <giant-hash-name>.cache.html files. If you don't specify a rename-to, it will default to the path to your module. So a module file at com/my/project/MyProject.gwt.xml will be com.my.project.MyProject, and the css file will be loaded like this:
<link rel="stylesheet" type="text/css" href="com.my.project.MyProject/reset.css" />





2c. Add gxt-3.X.X.jar to the project directly from the downloaded zip.
a. Right click on project name in 'Package Explorer'.
b. Select 'Properties' from the content menu.
c. Select 'Java Build Path'.
d. Select 'Libraries' tab.
e. Add the gxt-3.X.X.jar either with 'Add JARs...' or 'Add External JARs...'.
(Optional - if you have created a User Library earlier on you can add the User Library you created instead)

2d. 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-3.X.X.jar to the classpath under 'User Entries'.



3a. Add the following entry to your project's module xml file.

<inherits name='com.sencha.gxt.ui.GXT'/>

This inherits all GXT modules. As an alternative, individual GXT modules can be inherited rather than inheriting all modules, but this is the easiest way to get started, and covers most of the default cases.


3b. Comment out GWT Theme

Optional: If you used the GWT template code comment out the following to remove page margins;
<inherits name='com.google.gwt.user.theme.clean.Clean'/>


4. Optional If using Maven for project and dependency managemen


If using Maven for project and dependency management, Sencha GXT artifacts are available in several ways. To get the commercially licensed releases, you will need to add the following repository section to your pom.xml:

<repository>
 <id>sencha-commercial-release</id>
 <name>Sencha commercial releases</name>
 <url>https://maven.sencha.com/repo/commercial-release/</url>
</repository>

For GPLv3 licensed jars, you may use maven central.

There are several artifacts available:

  a. gxt-release - A zip of the release, similar to how GXT was released before 3.0
  b. gxt - The core component and data classes
  c. gxt-charts - The new drawing and charting API
  d. gxt-legacy - Classes to ease porting projects from earlier GXT versions
  c. uibinder-bridge - Optional support to allow complete construction of non Widget types

using <ui:with> in UiBinder XML. Will not be required when Google releases 2.5

******************************************************************

Please note;

I will be updating this post as and when I discover other handy Ext GWT 3 setup hints and information. So please leave a comment if you have a question or an amendment.


For a more detailed guide to getting started with the Eclipse and GXT 3 I recommend this one;
http://www.traviswebb.com/getting-started-with-gxt-3/


Comments

  1. Slendrew4 February 2013 at 01:21

    useful manual about getting started with maven and GXT 3.x: http://www.jworks.nl/2012/08/13/getting-started-with-maven-gxt-3-and-gwt-2-5/#respond

    ReplyDelete
  2. Neil Coder11 March 2013 at 01:17

    Thanks Slendrew. That's also a very handy resource. I've booked marked this :)

    ReplyDelete
  3. Unknown16 July 2014 at 02:06

    how to use the desktop application (exist in exemple gxt 3.1.0)

    ReplyDelete
    Replies
    1. Neil Coder17 October 2014 at 03:21

      I think I got the desktop work before, its similar to how you get the examples to work;

      http://neiliscoding.blogspot.ie/2012/05/how-to-setup-examples-for-use-in-gxt-3.html

      except you should inherit the desktop module instead of the example module in your project xml. Also I there may be extra jars you will need, hopefully eclipse will give you an error about which jars are missing and then you need to google them to find the right ones.

      That's all I can remember about it right now, though there might be more to it i hope this helps as a hint in the right direction

      Delete
  4. Unknown17 October 2014 at 02:51

    My project do not compile...
    Throws error like "[ERROR] The value ie6 was not previously defined.
    [ERROR] Line 96: Unexpected exception while processing element 'set-property'
    com.google.gwt.core.ext.UnableToCompleteException: (see previous log entries)" and more... yet i have setup staff properly well.

    ReplyDelete
  5. Neil Coder17 October 2014 at 03:25

    I am not familiar with the problem. Which version of GXT are you using?


    there's some stuff about it on stack overflow;

    http://stackoverflow.com/questions/22155432/ie6-wast-not-previously-defined-error-in-gwt-2-6-0-gxt2-5-1

    http://www.sencha.com/forum/showthread.php?282179-Gxt-3.1-beta-compatible-with-gwt-2.6-or-not


    ReplyDelete

Post a Comment

Popular posts from this blog

How to setup GXT 3 examples, samples and demos

Here's how I got the examples that come with GXT 3 working, in six simple steps! 1. Setup a GXT 3 app Setup your Gxt app as shown in the previous post on this blog; Quick Setup for GXT 3 . 2. Add additional jars In addition to the gxt jar there are several other jars that need to be added to the build path; gxt-3.0.0.jar gxt-chart-3.0.0.jar gxt-legacy-3.0.0.jar uibinder-bridge-2.4.0.jar gwt-dev.jar gin-1.5-post-gwt-2.2.jar guice-3.0.jar json-org.jar javax.persistence.jar javax.inject.jar That will fix all of the errors except for 2 in the file Folder.java, (I'm not sure how to fix that one yet, answers on a post card please. I tried using the  javax.persistence.jar from J2EE / Glassfish modules but this didn't fix it for me, so I just had the methods with errors return null ). 3. Import the examples Select the src folder in your project (eclipse), select "file import" navigate to the examples-src folder inside the gxt 3 download and se
Read more

ExtJs4 : Dynamically Add Columns

Cod Snippet for Dynamically Adding Columns to a grid panel in Extjs4 Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { i
Read more