Generate a skeleton project using Eclipse, Sencha Cmd and Sencha Touch

In a previous post we looked at how we can work with Sencha Touch and Ext JS when using Eclipse’s Integrated Development Environment (IDE). In his post, we’re going to generate a skeleton project using Eclipse, Sencha Cmd and Sencha Touch.

We’ll follow these steps:

Create a new Dynamic Web Project
Create a skeleton application using Sencha Cmd
Test the application

Prerequisites

You need to have installed the Sencha Plugin for Eclipse and to have imported the Sencha Touch type library.

1. Create a new Dynamic Web Project

In Eclipse, right-click in the Project Explorer and choose “New -> Dynamic Web Project”:

Enter a name for the new project and then click the Finish button. Eclipse will then create a new Dynamic Web Project in the current workspace:

2. Create a new Dynamic Web Project

Now that we have a new Dynamic Web Project we can use Sencha Cmd to create a skeleton Sencha Touch application. From the directory that contains the extracted archive for Sencha Touch execute the following command:

sencha generate app TouchMvc C:\tools\IDEs\indigo\workspace\MyTouchMvcSampleApp\WebContent

The new Dynamic Web Project’s “WebContent” folder should now contain a skeleton Sencha Touch application:

3. Test the application

We can test the application by setting up a Server Runtime Environment. In Eclipse, choose “Window -> Preferences” then “Server -> Runtime Environments”:

and add our new Dynamic Web Project to the “Configured:” list:

Now you will be able to publish the skeleton application and start the server so that you can see if the project has been successfully deployed:

Don’t forget to enable VJET capabilities (e.g. code completion and syntax highlighting) for your new Dynamic Web Project. Right-click on the project’s name in the Project Explorer and choose “VJET -> Enable VJET Project Capabilities”.
Then, choose “Project -> Properties” and “VJET Build Path”:

And, add the Sencha Touch type library as a project dependency.