Metawidget and AeroGear

Recently I've been working with the JBoss AeroGear team. AeroGear is a new JBoss initiative focussed on providing examples, tutorials, and techniques to help developers get going with all kinds of mobile development.

We've been creating a 'proof of concept' integration between JBoss Forge and Metawidget for scaffolding mobile apps. Like the Forge/Metawidget/JSF scaffold, it uses static generation and doesn't require Metawidget at runtime. Unlike the JSF scaffold, however, the AeroGear scaffold generates a POH5/JQuery app. It's heavily based on Jay Balunas' excellent AeroGear Maven archetype - thanks Jay!

The Story So Far

An update on our progress. The plugin is hosted at https://github.com/forge/scaffold-aerogear. First download the latest version of JBoss Forge and run it. Then install the plugin:

$ forge git-plugin git://github.com/forge/scaffold-aerogear.git

Setup your project:

$ new-project --named test --topLevelPackage com.test --type war
$ persistence setup
? [provider=ARG (of type org.jboss.forge.spec.javaee.jpa.api.JPAProvider)]: HIBERNATE
? [container=ARG (of type org.jboss.forge.spec.javaee.jpa.api.JPAContainer)]: JBOSS_AS7
$ scaffold setup --scaffoldType aerogear
$ entity --named Company
$ field string --named name
$ field boolean --named publiclyListed
$ field custom --named color
? [type=The qualified Class to be used as this field's type (of type java.lang.String)]: java.awt.Color
$ entity --named Employee
$ field string --named firstName
$ field string --named lastName
$ field custom --named dateOfBirth
? [type=The qualified Class to be used as this field's type (of type java.lang.String)]: java.util.Date
$ field int --named salary
$ field manyToOne --named company --fieldType com.test.model.Company
$ scaffold from-entity com.test.model.* --scaffoldType aerogear

This will generate a complete app, ready to import into your favourite IDE and deploy. To save time, you can download the generated app here (click the link, then use File > Download to download the ZIP).

Kick The Tyres

Deploy the app (I tested on JBoss AS 7.0.2.Final, please try this exact version) and open it in an HTML5-compliant browser or mobile device (I tested on Chrome):


The opening screen displays a menu generated from the entities in your domain model. Here we're developing a little employee database. Click on Company:


This screen allows you to search for existing companies. But we need to create some first! Click on Create:


Fill out the fields as shown above. Things to note:

• All the form fields and labels have been generated by Metawidget
• This includes a custom PlaceholderWidgetProcessor for HTML5 placeholders such as 'Your Color'
• It also includes correct HTML5 controls, such as checkbox and the new color input. Unfortunately Chrome doesn't seem to recognize this yet

Click Save to return to the search screen:


Things to note:

• The company has been saved to the database and redisplayed in the search results, using JQuery, JSON and JPA
• Metawidget has generated the 'name' field as an HTML5 search control
• Metawidget has generated appropriate columns for the search results table
• Search fields work as expected. If you click 'publicly listed' and hit Search, you'll only see companies where 'publicly listed' has been set to true. This uses JQuery, JSON, JPA and the Criteria API

Click on a row in the table to view and edit it:


Things to note:

• Metawidget has generated a read-only view of the entity
• This includes using HTML5 output controls

Next, click back to the Home screen, click on Employee and click Create:


Things to note:

• Metawidget has generated HTML5 date and number controls where appropriate. Again, Chrome's support is limited
• There is a many-to-one relation between an employee and their company. This is presented as a dropdown. Possible values are populated using JQuery, JSON and JPA
• The values in the dropdown use the toString of the company object. This uses a custom ObjectMapperProvider

Click Save and create some more employees:


Searching on a many-to-one relation also works:


Things to note:

• The 'Company' column in the table uses the toString of the company object

The Road Ahead

That's it so far! We hope this gives a compelling proof of concept for generating mobile applications using AeroGear, JBoss Forge and Metawidget. But there's lots more to do, so please join the community and start contributing!