Friday, January 24, 2014

Creating a Sencha client side app with IntelliJ IDEA and Maven

This assumes you already have a project open in IDEA. I use IDEA 13.

First create a new module. 

Type in a module name.

We will create a module from a Maven archetype (maven-archetype-webapp). In my case, the group id and artifact id aren't important.

IDEA creates the new module for us.

Second, this module will contain a Sencha GXT application, so we need to set up our dependencies. We edit our pom.xml to add in these dependencies. We are dependent on the Sencha jars, and the GWT jars (first 2 red arrows below). We also need the GWT Maven plugin, so we can compile the GWT app from IDEA (the 3rd arrow below).

Below is the text (for copy and paste purposes).

I think its a little irritating that the archetype does not create a java folder for me. So I have to do that. And to tell IDEA that the folder contains all the Java source files and that it should compile all the source files. Doesn't IDEA already know this? Its the standard source location after all... Oh well... We create the folder.

And indicate to IDEA that its a source folder.

(select the module, then select the new folder java, and click the "Sources" button.)

Third, we now add a GWT module (which is basically a Xxxx.gwt.xml file, plus one or more entry point classes). IDEA will create the XML file, and 1 entry point class. If necessary, more entry points can be added later. It also creates an HTML and a CSS file which will load the (GWT-compiled) Javascript which will display the GWT module.

Choose a name for the GWT module.

Fourth, we need to "change" the GWT module to a GXT module. Some Sencha inherits and stylesheets do not work with the standard GWT ones. So we open the Xxxx.gwt.xml file and modify it for GXT (below: red box). Also, I like to add a rename-to attribute. If in the future I add RPC calls to the Sencha app, this attribute will be the URL that the AJAX calls to.

Fifth, most people use GWT development mode to do quick development. To do this in IDEA, we need to create a new configuration. We create a new GWT configuration (and give it any name). Make sure the correct project module is selected (if you have more than 1 like I do). And we also tell development mode to load all our GWT modules. 

We test the configuration: running the configuration will basically start a Jetty server that serves the GWT module (in development mode).
It works.

Finally we add a Sencha widget to make sure this works with Sencha.