Bringing Together Java Ext.Direct and Ext JS Models with DTO2ExtJS

We are close to the beta release of the DTO2ExtJS code generator that automatically converts a Java DTO into Ext JS model. This will be of great help to fellow enterprise developers who use Ext.Direct to remote from Ext JS applications to Java classes in the servlet container. We use DirectJNgine. When Sencha releases an Ext JS implementation of AMF, models generated by our DTO2ExtJS will be used to remote to BlazeDS.

Let’s say you’ve created a Java DTO that looks like this:

package clear.dto;
import com.farata.dto2extjs.annotations.*;
@JSClass
public class UserDTO {
   public String id;
   @JSIgnore      
   public Double salary;
   private Date dob;
   public Date getDob() {
      return dob;
   }
   public void setDob(Date value) {
      dob = value;
   }
   @JSOneToMany(
      foreignKey="userId",
      storeConfig="{"+          
         "paramOrder:['0'],"+   
         "api: {"+
            "create  : Clear.action.TicketAction.getTickets_insertItems,"+
            "read    : Clear.action.TicketAction.getTickets,"+
            "update  : Clear.action.TicketAction.getTickets_updateItems,"+
            "destroy : Clear.action.TicketAction.getTickets_deleteItems"+
         "}"+
      "}")
   public List<TicketDTO> tickets;
}

DTO2ExtJS will generate the corresponding Ext JS code:


// Generated by DTO2EXTJS from AM.model.clear.dto.UserDTO.java on 2012-02-16T20:45:29-05:00
Ext.define('AM.model.clear.dto.generated._UserDTO', {
   extend: 'Ext.data.Model',
   requires: [
      'Ext.data.Types',
      'AM.model.clear.Ticket'
   ],
   fields: [
      { name: 'id', type: Ext.data.Types.STRING, useNull: true },
      { name: 'dob', type: Ext.data.Types.DATE, useNull: true }
   ],
   hasMany: [
      {
         model: 'AM.model.clear.Ticket',
         name: 'getTickets', 
         primaryKey:'id',
         foreignKey:'userId',
         autoLoad: 'true',
         storeType:'AM.store.clear.TicketStore',
         storeConfig:'{
            paramOrder:['0'],
            api: {
               create  : Clear.action.TicketAction.getTickets_insertItems,
               read    : Clear.action.TicketAction.getTickets,
               update  : Clear.action.TicketAction.getTickets_updateItems,
               destroy : Clear.action.TicketAction.getTickets_deleteItems
            }
         }'
     }
   ]
}

and one more class, extending the previous one:


Ext.define('AM.model.clear.dto.UserDTO, {
        extend: 'AM.model.clear.dto.generated._UserDTO'
}); 

As you can see, we keep using the generation gap pattern (the parent class gets regenerates, but the subclass doesn’t) to safely modify the extension and let us keep regenerating the bottom file of the pair, which we do every time the Java file is modified. If your Java class inherits from another one – make sure you annotate the parent as @JSClass and DTO2ExtJs generates models for both, or tell DTO2ExtJs to ignore the parent class entirely, and it’ll obey.

You will be able to fully control the output location and naming of the generated models via APT parameters.

DTO2ExtJS is an annotation processor for Java Annotation Processor Tool and you can use it from the command line and as Eclipse plugin. In the latter case you place com.farata.dto2extjs.asap_4.6.0.jar in
eclipse/plugins folder and com.farata.dto2extjs.annotations.jar in the WebContent/lib of your Eclipse Dynamic Web Project. You can find the current version of the jars at http://www.cleartoolkit.com/downloads/plugins/extjs/dto2extjs

The work-in-progress JavaDoc is available at
http://help.faratasystems.com/en_US/cleartoolkit/reference/java/extjs/

We’ll demo the automatic Ext JS code generation at the end of our 2 day Ext JS workshop in June in New York CIty. Enter Victor as a promo code to get $100 off the price.

Victor