Wednesday, March 10, 2010

Setting Up SmartGWT 2.1 and GWT 2.0 with Eclipse 3.5

Requirements:
Setting Up Eclipse Environment:
  1. First, install Java and Eclipse like you normally would, setting up all the necessary environments (e.g. CLASSPATH, JAVA_HOME, etc).
  2. Install the GWT Eclipse plugin by going to Help > Install New Software...
  3. Press the Add... button and enter the following URL: http://dl.google.com/eclipse/plugin/3.5
  4. Check Google Plugin for Eclipse 3.5 and Google Web Toolkit SDK 2.0.3 and press the Finish button.
  5. Restart Eclipse after installing the GWT Eclipse plugin.
Create a GWT Web Application Project:
  1. Go to File > New > Web Application Project
  2. Enter the Project name: HelloSmartGWT
  3. Enter the Package: com.puguasoft.examples.smartgwt
  4. Be sure Use Goolge Web Toolkit is checked.
  5. Be sure Use Google App Engine is unchecked.
  6. Press the Finish button.
Setup SmartGWT:
  1. In your HelloSmartGWT project, create a new folder lib.
  2. Unzip smartgwt-2.1.zip and place both the smartgwt.jar and smartgwt-skins.jar in the lib folder you just created.
  3. Right-click on the HelloSmartGWT project and go to Properties > Java Build Path > Libraries tab and add both the smartgwt.jar and smartgwt-skins.jar to the build path.
  4. Open the com.puguasoft.examples.smartgwt.client.HelloSmartGWT.java class and replace the entire onModuleLoad() with the following:


public void onModuleLoad() {
IButton button = new IButton("Click Me");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
SC.say("Hello SmartGWT!");
}
});
button.draw();
}
  1. Open the com.puguasoft.examples.smartgwt.HelloSmartGWT.gwt.xml file and delete or comment-out the following:
        <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  1. In the same XML file, add the following inherits elements:
        <inherits name='com.smartgwt.SmartGwt' />
<inherits name='com.smartclient.theme.silverwave.SilverWave' />
  1. Open the war/HelloSmartGWT.html file and add the following between the <head> section and before the hellosmartgwt.nocache.js script:
        <script> var isomorphicDir = "hellosmartgwt/sc/"; </script> 



Compile and Deploy:
  1. Right-click on the HelloSmartGWT project and select Google > GWT Compile.
  2. Press Compile in the dialog.
  3. Pay attention to the console to make sure there are no compile errors.
  4. Now deploy the app by right-clicking on the HelloSmartGWT project and select Debug As > Web Application
  5. After the embedded web server starts, point your browser to the the URL: http://127.0.0.1:8888/HelloSmartGWT.html?gwt.codesvr=127.0.0.1:9997
  6. You should see the following page:

14 comments:

o3h said...

Hi, good guide I think, but havnt gotten it to work yet. I get the following error. Suggestions?

Loading inherited module 'com.smartclient.theme.silverwave.SilverWave'
[ERROR] Unable to find 'com/smartclient/theme/silverwave/SilverWave.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?
[ERROR] Line 11: Unexpected exception while processing element 'inherits'
com.google.gwt.core.ext.UnableToCompleteException: (see previous log entries)

Chris Diaz said...

Hi customrobotics,

Please add the smartgwt-skins.jar to your lib folder and then add the jar to your classpath:

1. Right-click on your project > Propertied
2. Java Build Path > Libraries > Add JARs...
3. Locate the smartgwt-skins.jar and add it to your classpath.
4. Save everything.
5. Perform a GWT Compile

ACE ANANG FK said...

Hi, i try this and its work but i have a problem that all image on my project (use smartgwt) can't show on page. any suggestion..
thank's

o3h said...

Hi Chris, thank you for your answer, it worked out and looks good. But when I try to use images from the skin I get another problem that might be related to the configuration in your article?

Im getting:
[WARN] 404 - GET /images/edges/rounded/frame/A3B2CC/10_R.png (127.0.0.1) 1411 bytes
[WARN] 404 - GET /images/edges/rounded/frame/A3B2CC/10_BR.png (127.0.0.1) 1412 bytes
....

When trying the following code:
label1.setEdgeImage("edges/rounded/frame/A3B2CC/10.png");

My: SkiBoo.gwt.xml:



















My SkiBoo.html:
Just as you described in the article.

Have also tried the same with Enterprise and different imageurl but get the same.

o3h said...

Apprently the skiboo.gwt.xml file didnt appear in the post.
Here is a link:
http://tricky.o3h.se/o3h/SkiBoo.gwt.xml

Unknown said...

I'm trying SmartGWT 2.2 and GWT 2.0.3 with Eclipse 3.5 but:

When implementing IButton, Which classes need to be imported:

??
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;

done that but getting following error:

The method addClickHandler(ClickHandler) in the type Canvas is not applicable for the arguments (new ClickHandler(){}) HelloSmartGWT.java /HelloSmartGWT/src/com/puguasoft/examples/smartgwt/client line 32 Java Problem





public void onModuleLoad() {
IButton button = new IButton("Click Me");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
SC.say("Hello SmartGWT!");
}
});
button.draw();
}

thanks for any reply!

Unknown said...

You can remove the last comment.
I've found the appropriate imports in the Smart GWT Showcase page and the clickhandler collided with other imports. (newbie luck)

thanks for helping me out with your example!!!

(maybe leave this line as a comment).

ragards

Unknown said...

GWT compilation failed
Geting this error while compiling the project
I am using
Windows 7
Eclips 3.5
Smartgwt 2.1
Any solution?

Unknown said...

The following classpath entry 'C:\HelloSmartGWT\HelloSmartGWT\lib\smartgwt.jar' will not be available on the server's classpath

Unknown said...

I am facing this Problem while doing the assignment

The following classpath entry 'C:\HelloSmartGWT\HelloSmartGWT\lib\smartgwt.jar' will not be available on the server's classpath

Unknown said...

I am facing this problem while creating a tutorial
The following classpath entry 'C:\HelloSmartGWT\HelloSmartGWT\lib\smartgwt.jar' will not be available on the server's classpath

Urcloud said...

Hi I am getting the same error that 100IT said..., unfortunatly he did not explain how he fixed it...
thanks

Anonymous said...

I think that I have a solution for your problem, you may add the smartgwt*.jar files in the war/WEB-INF/lib instead of create a new folder in the upper hierarchy. After doing this you should configure building settings adding these .jar to the compiler this will remove all compilation warnings.
Hope it will helpful, ciao!

Gugan Nainar said...

Perfect Tutorial chris. you saved my day.