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 select the "com" folder. Under filters, select all, and add in png,gif, as the optional filters. You need to make sure the "Create top-level folder" is checked, otherwise every imported folder will probably have errors from the wrong import path in the java files.


4. Includes

add these two in your projects xml file underneath  <inherits name='com.sencha.gxt.ui.GXT'/>;

  <inherits name="com.sencha.gxt.examples.resources.Resources" />
  <inherits name="com.sencha.gxt.explorer.Explorer" />

5. Comment out Entry Points


You will probably also need to comment out the entry point in the following files;
com.sencha.gxt.explorer.Explorer.gwt.xml.

com.sencha.gxt.desktopapp.DesktopApp.gwt.xml

com.sencha.gxt.examples.test.Test.gwt.xml




6. Point to an example with an entry point

Comment out the current entry point in your xml file and point to something like;

<entry-point class='com.sencha.gxt.explorer.client.layout.BorderLayoutExample'/>

And then you should be able to see BorderLayoutExample in your browser!



(This is to the best of my knowledge how I've got the examples working for me, and now its much easier learning the UI and building mock-ups by combining example widgets together)

Comments

  1. Unknown11 March 2013 at 02:01

    This comment has been removed by the author.

    ReplyDelete
  2. Unknown11 March 2013 at 03:54

    How do you think, why maven can't add dependency to gwt-dev? in different cases it says:
    "You should not declare gwt-dev as a project dependency. This may introduce complex dependency conflicts"and "Unable to find resource 'com.google.gwt:gwt-dev:zip:linux-libs:2.5.0' in repository central (http://repo1.maven.org/maven2)" or just "Unable to find resource 'com.google.gwt:gwt-dev:zip:linux-libs:2.5.0' in repository central (http://repo1.maven.org/maven2)" when I remove dependency from pom.xml

    ReplyDelete
  3. Anil Jacob3 November 2014 at 11:40

    Thank you for the instructions, I was bale to make the examples like BorderLayout work. Were you abel to get the DesktopApp working though using the same setup? I was getting inheritance exception when trying to use the following entry point.



    [ERROR] [gxtsamples] - Unable to find type 'com.sencha.gxt.desktopapp.client.DesktopApp'
    [ERROR] [gxtsamples] - Hint: Check the inheritance chain from your module; it may not be inheriting a required module or a module may not be adding its source path entries properly


    ReplyDelete
  4. Anil Jacob3 November 2014 at 11:44

    Sorry ...here is my gwt.xml file

    lt ?xml version="1.0" encoding="UTF-8"? gt

    lt !DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN"
    "http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd" gt
    lt module rename-to='gxtsamples' gt


    lt !-- Other module inherits -- gt
    lt inherits name='com.sencha.gxt.ui.GXT'/ gt




    lt inherits name='com.sencha.gxt.desktop.Desktop' / gt
    lt inherits name="com.google.gwt.logging.Logging" / gt
    lt inherits name='com.sencha.gxt.chart.Chart' / gt

    lt stylesheet src="reset.css"/ gt

    lt !-- Specify the app entry point class. -- gt
    lt !-- lt entry-point class='com.test.gwt.gxt.samples.client.GXTSamples'/ gt -- gt
    lt !-- lt entry-point class='com.sencha.gxt.explorer.client.layout.AccordionLayoutExample'/ gt -- gt
    lt entry-point class='com.sencha.gxt.desktopapp.client.DesktopApp' / gt

    lt !-- Specify the paths for translatable code -- gt
    lt source path='client'/ gt
    lt source path='shared'/ gt

    lt !-- allow Super Dev Mode -- gt
    lt add-linker name="xsiframe"/ gt
    lt /module gt


    ReplyDelete
  5. Anil Jacob3 November 2014 at 13:12

    Never mind...i got it to work when I modified the gwt.xml to the one below.

    lt module rename-to='gxtsamples' gt


    lt !-- Other module inherits -- gt
    lt inherits name='com.sencha.gxt.desktopapp.DesktopApp' / gt


    lt stylesheet src="reset.css"/ gt

    lt !-- Specify the app entry point class. -- gt
    lt !-- lt entry-point class='com.test.gwt.gxt.samples.client.GXTSamples'/ gt -- gt
    lt !-- lt entry-point class='com.sencha.gxt.explorer.client.layout.AccordionLayoutExample'/ gt -- gt
    lt entry-point class='com.sencha.gxt.desktopapp.client.DesktopApp' / gt

    lt !-- Specify the paths for translatable code -- gt
    lt source path='client'/ gt
    lt source path='shared'/ gt

    lt !-- allow Super Dev Mode -- gt
    lt add-linker name="xsiframe"/ gt
    lt /module gt

    ReplyDelete
  6. Anil Jacob3 November 2014 at 21:46

    For gxt 3.1.1 the external jar files I needed were..
    com.springsource.org.aopalliance-1.0.0.jar
    gin-2.1.2.jar
    guice-3.0.jar
    guice-assistedinject-3.0.jar
    gxt-themebuilder.jar

    ReplyDelete

Post a Comment

Popular posts from this blog

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

Image
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...
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