Thursday, March 19, 2009

Build J2EE application with Extjs + Grails

Running open source calendar app: www.cubedrive.com/myCalendar

For J2EE based web application, it is pretty popular to use light weight J2EE loose coupling concepts in business logic tier, and use Structs/Spring MVC/JSF as web framework in presentation tie. However, more and more customers require simple, quick, easy and affordable solution for their business - for example, how to quick build web-based J2EE application similar with Microsoft Outlook. We, J2EE application architecture/developer, need quick move forward to build Ajax-based rich interface J2EE application. Extjs + Grails are the right frameworks for build web application at the right time (2009 is the cut cost year everywhere).

Ext JS, a cross-browser JavaScript library for building Rich Internet Applications, owns an extensive library of super-high-quality widgets, an intuitive, extensible component model, and an easy-to-use API to create a full, rock-solid platform for JavaScript-based web apps.

Grails is an open source web application framework which leverages the Groovy programming language (which is in turn based on the Java platform). It is intended to be a high-productivity framework by following the "coding by convention" paradigm, providing a stand-alone development environment and hiding much of the configuration detail from the developer.

High Level Architecture Diagram

Figure 1 shows the basic high level architecture for Extjs/Grails-based RIA J2EE application. [1]

Choice widely adopted 3rd-party software

Open source solutions become widely adopted only if they're reliable and deliver value. Using those valuable open sources will buy us more time and better performance for the project. This is the reason we choice the following the 3rd-party software in this application. See table 1 for detail information [2]

3rd-party Software
Reason to choose
Extjs (www.extjs.com)Extjs Ajax framework acts as a glue between browser and server, it enables us to create a rich and intuitive user interfaces for our application. Extjs provides Layout, Grid, Form, Tree, Menu etc which are widely used in our UI level. Furthermore, extjs provides great document/API.
Grails (www.grails.org)Open source web application framework help us to quick build server side logic, which based on spring framework.
Tomcat (tomcat.apache.org)Free application server.
Apache (www.apache.org)Load balance
MySql (www.mysql.org)Free database server.


Rich UI interface - extjs

By using extjs javascript framework, we can easy achieve nearly all of online ajax-based UI stuff. Compare with DOJO (orthodoxy and stability), extjs has more UI widgets, pretty detail API document which will save lots of developer time. Except that you are fine for extjs commercial license.

Extjs provides following widgets:

  • Grid
  • Layout
  • Window
  • Tree
  • Form
  • Menu
  • and lots of active memeber with really useful plugin

Data Exchange

In tradition way, data exchange from backend to frontend are as following

  • Object in database is transfered to DAO POJO object
  • DAO POJO object transfer data to MVC form object
  • Form object display results in page

In Ajax-based application, data exchange can be something like this:

  • Object in database is transfered to DAO POJO object
  • Render POJO object as JSON data to the UI level.

Grails provides great API to make data exchange between extjs and controller seamless.


Grails Acegi plugin for Authentication and Autherization

Grails based acegi security plugin allows developer to use the powerful of spring-based security, but it also gives us the power to make config changes without having to deal with the complexity of using Spring Security directly.

  • Spring Security filters and Spring beans are registered in web.xml and the application context for you; customization is done in SecurityConfig.groovy
  • Domain classes, Controllers, and CRUD GSPs for User and Role management and persistence
  • Ajax-based login and Logout Controllers






3 comments:

ffzhuang said...

To see running example:

www.feyasoft.com

Anonymous said...
This comment has been removed by a blog administrator.
Cohnhead in the Clouds said...

Can you provide a ZIP of the CRUD source for Ext 2.0? This sample is exactly what I've been looking for. It appears the download option in the Feyasoft app isn't working...