The Java RIA Framework

This article follows Jspresso in 10 minutes where you have set-up a yet simple but complete Jspresso powered application project. Due to formatting restrictions, lines of code may be cut in pieces. In that case, the end of line is escaped by the "\" character.

The goal is rather simple : develop a CRUD module on a City entity. A city entity has a name (max length 64, mandatory) and a zip code (max length 10).

Setting up the development environment

Jspresso applications are best devellopped using Eclipse and a set of free Eclipse plugins including Jspresso Developer Studio (formerly known as SJSPlug). Install the following tools :

• Eclipse IDE for Java EE Developers (Indigo 3.7 SR1 as of this writing).
• M2Eclipse (1.1 M1). Jspresso integrates seamlessly with M2Eclipse 1.1 M1. The first time you build a Jspresso project in Eclipse, you will be prompted to install build-helper M2E connector. Install it.
  You can use the following update site :
  

  http://download.eclipse.org/technology/m2e/milestones/1.1

• M2Eclipse WTP extension (0.14). When installing WTP extension, please untick "Group items by categories" checkbox to display the extension in the install dialog. You can install the extension from the Eclipse market place or use the following update site :
  

  http://download.jboss.org/jbosstools/updates/m2eclipse-wtp

• Spring IDE (2.7+) from the "Eclipse Marketplace" or from the following update site :
  

  http://dist.springsource.com/release/TOOLS/update/e3.7

• Groovy Eclipse plugin (2.5.2+) from the following update site :
  

  http://dist.springsource.org/release/GRECLIPSE/e3.7

• Jspresso Developper Studio (1.7) from the following update site :
  

  http://www.jspresso.org/external/updates/e37/sjsplug

Creating a new Jspresso project in Eclipse ...

Using the M2Eclipse plugin, you don't have to use the Maven command line interface to create a new Jspresso project. You can directly create it in Eclipse using the Jspresso archetype.

• Declare the Jspresso Maven repository as a remote source for archetypes :

Go to Preferences -> Maven -> Archetypes
Click "Add Remote Catalog"
Catalog File : http://repository.jspresso.org/maven2
Description : Jspresso Maven Repository
Click "Verify..."
Click "OK"

• Create a new Maven project using M2Eclipse :

Click "File" -> "New" -> "Project"
Select "Maven" -> "Maven Project"
Click "Next >"
Click "Next >"
Catalog : select "Jspresso Maven Repository"
Select the latest archetype version
Click "Next >"
Configure Helloworld project generation 
Click "Finish"

You should end up with the same workspace as if you had imported the helloworld project.

... or importing an existing one...

Using the M2Eclipse plugin, importing the helloworld project is a straightforward operation. Note that you will have 1 Eclipse project per Maven module.

• Import the generated project :
  

  "File" -> "Import..." -> "Maven" -> "Existing Maven Projects"
  Click "Next >"
  "Root Directory": [hello project root folder]
  Click "Finish"

... and running it immediately

Notice : Whenever you use M2Eclipse 1.0, you will notice that the model generation and compilation is not completely handled by M2Eclipse. This problem has been reported to the M2Eclipse team. Meanwhile, whenever you change the application model structure, you have to manually issue "mvn compile" on the core module. To achieve that, either do it in a terminal or create a dedicated Maven build launch configuration in Eclipse.

You should end-up with the following workspace :

You can immediately launch the standalone Swing version of the application :

Configuring a Tomcat server in Eclipse and deploy the webapp

The next step is to define an application server in Eclipse WTP. In this tutorial, we use Tomcat 6 but any Servlet 2.5+ compatible application server will do it.

• Install Apache Tomcat (6.0+)
• Open the Eclipse server view
• Create a new Tomcat 6 server instance :
  

  Right click
  Select "New" -> "Server"
  Select "Tomcat v6.0 Server"
  Click "Next>"
  Fill in "Tomcat installation directory"
  Click "Finish"

• Drag the helloworld-webapp project onto the just created server

You should end up with the following server view :

Now right-click the server and start it. You should be able to access the aplication in Flex and qooxdoo as described at the end of Jspresso in 10 minutes.

Now some code : the domain model

We are only going to work in the helloworld-core project. This is the one that contains all the application model, view and logic.

Download the following PNG icon image and save it under :

src/main/resources/com/example/helloworld/images/city-48x48.png

Double-click the SJS (Sugar for Jspresso) source file for the model located here:

src/main/dsl/model.groovy

Copy and paste the following entity definition :

Entity('City', icon:'city-48x48.png') {
  string_64 'name', mandatory:true
  string_10 'zip'
}

Save the file. That's all you need to do to describe your entity; Jspresso will do the rest.

Here is what your workspace should look like :

The front-end

We are still working in the helloworld-core project.

Download the following PNG icon image and save it under :

src/main/resources/com/example/helloworld/images/masterdata-48x48.png

Edit the SJS source file for the front-end located here:

src/main/dsl/frontend.groovy

Before the controller definition, insert the following workspace definition :

workspace('masterdata.workspace',  icon:'masterdata-48x48.png') {
  filterModule('masterdata.cities.module', component:'City')
}

Look for the comment "/*Reference your workspaces here.*/" and replace it by the workspace identifier :

'masterdata.workspace'

This final line installs the new workspace in the application. Just save the file.

The last thing we need to achieve now is to internationalize the application (at least give an english translation). We have used several translation keys even without knowing it... So open the resource bundle property file for english located here :

src/main/resources/com/example/helloworld/i18n/Messages_en.properties

Copy and paste the following key/value pairs (you can easily locate them from the spring configuration files above) :

masterdata.workspace=Master Data
masterdata.workspace.description=Master data management workspace
masterdata.cities.module=Cities
masterdata.cities.module.description=Cities management module
zip=Zip Code
com.example.helloworld.model.City=City

You can of course translate also in french in the Messages_fr.properties

masterdata.workspace=R\u00E9f\u00E9rentiel
masterdata.workspace.description=Espace de gestion du r\u00E9f\u00E9rentiel
masterdata.cities.module=Villes
masterdata.cities.module.description=Module de gestion des villes
zip=C.P.
com.example.helloworld.model.City=Ville

Perform a refresh on the project to make sure that everything is up-to-date (select helloworld-core and press F5).

Now (re)start the Tomcat server from the Servers view and reload your browser page. You should have the application updated this way :

Using Flex :

Using qooxdoo :

This is a fairly basic application but don't hesitate to play with it to see how easy it is to change things; for instance, add a property to the city entity, save and reload the application.

Jspresso philosophy is to use sensible defaults everywhere it is possible. That's the reason why in such a few lines of code you can get things up and running. But Jspresso allows you to overload everything at every place when needed along time. This makes the development cycles really short yet robusts.

The last thing to note is that Jspresso is far from being only a CRUD framework. It's open, extensible and provides a massive amount of built-in features to virtually cover any corporate business needs.