Thursday, November 12, 2009

Ext-GWT: The Mail application

Tools:
  • eclipse 3.5 galileo
  • gwt plugin for eclipse, v1.7.1, see installation instruction here
  • download Ext GWT (including Mail application) source code from here, choose 'Ext GWT 2.0.1 SDK' to download all source code and documentation, unzip it, the folder named 'gxt-2.0.1'
Steps:
1.  from eclipse, File->New->Web Application Project
     Project name: Mail
     Package: com.extjs.gxt.samples.mail
     click 'Finish' button.

2. copy the downloaded Mail application source code into the project folder created from step 1, and remove default files created by gwt plugin.

3. copy the resource folder under gxt-2.0.1 to eclipse's Mail project, and rename it to gxt:
    Mail -> war -> gxt

4. created lib folder in Mail project, and copy gxt.jar from gxt-2.0.1 to Mail/lib

5. in eclipse, right click Mail project, select Properties -> Java Build Path -> Libraries tab -> click 'Add External JARs' button -> in 'Edit JAR' window, select Mail -> lib->gxt.jar, then click 'OK' button.

6.   from eclipse, File->New->Web Application Project
     Project name: Resources
     Package: com.extjs.gxt.samples.resources
     click 'Finish' button.

7.  copy the downloaded Resources application source code into the project Resources folder created from step 6, and remove other files created by gwt plugin.

8.  created lib folder in Resources project, and copy gxt.jar from gxt-2.0.1 to Resources/lib

9.  in eclipse, right click Resources project, select Properties -> Java Build Path -> Libraries tab -> click 'Add External JARs' button -> in 'Edit JAR' window, select Resources-> lib->gxt.jar, then click 'OK' button.

10. in eclipse,  right click Mail project, select Properties -> Java Build Path -> Projects tab -> click 'Add' button -> in 'Required Project Selection' window, select 'Resources' project, click 'OK' button.

11. remove the Mail/war/Mail.html file, go to extjs's Mail demo site, right click mouse -> view page source, from the popup window, copy the file and save it to eclipse's Mail project as Mail -> war -> Mail.html.

12. remove the Mail/war/Mail.css file, go to extjs's Mail demo site, right click mouse -> view page source, from the popup window, you see the mail.html file which we just save to our project,  read the first a few line:

<html>
<head>
<title>Ext GWT 2.0.1 Mail Demotitle>
<link rel="stylesheet" type="text/css" href="gxt/css/gxt-all.css" />
<link rel="stylesheet" type="text/css" href="samples/css/resources.css" />
<link rel="stylesheet" type="text/css" href="samples/css/mail.css" />
<style>
..
click the third hyperlink to mail.css file, it will open up in the same popup window, copy the file and save it to Mail/war/Mail.css

13, continue from step 12, click the second hyperlink to resources.css,it will open up in the same popup window, copy the file and save it to Mail/war/resources.css

14. open up Mail/war/Mail.html in eclipse, change the second and third hyperlinks  to the following:

<link rel="stylesheet" type="text/css" href="resources.css" />
<link rel="stylesheet" type="text/css" href="mail.css" />

15. save the project, click Mail, click the 'run' button, it will run the Mail demo application, however, still have problem with mailservice, but at least it show up in eclipse now....more to come later.

1 comment:

andrea said...

HI right now im making an application for my new job and i want to create a mail login just like the one http://www.sencha.com/mail/ but im trying to download EXT gwt 2.0.1 but it seems it is no longer available for downloading im wondering if you could please lend me your code or help me somehow please! my e mail is westyac@gmail.com