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:

  1. Create a new Dynamic Web Project
  2. Create a skeleton application using Sencha Cmd
  3. 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”:

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.