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
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)
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)
This comment has been removed by the author.
ReplyDeleteHow do you think, why maven can't add dependency to gwt-dev? in different cases it says:
ReplyDelete"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
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.
ReplyDelete[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
Sorry ...here is my gwt.xml file
ReplyDeletelt ?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
Never mind...i got it to work when I modified the gwt.xml to the one below.
ReplyDeletelt 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
For gxt 3.1.1 the external jar files I needed were..
ReplyDeletecom.springsource.org.aopalliance-1.0.0.jar
gin-2.1.2.jar
guice-3.0.jar
guice-assistedinject-3.0.jar
gxt-themebuilder.jar