Tuesday, July 15, 2008

Integrating Rolodex to Guvnor for Image Asset Types

In Guvnor, there are many different widgets that are used to display or edit different assets. One interesting widget is about to be added - a widget that could accept images and display them. For this purpose, rolodex, a widget that can display a stack of images, can be used. Rolodex uses deferred binding for the image generation and animation. Let's see how can we quickly add a new widget displaying some predefined images.

First, create a class, implementing RolodexCardBundle interface (from the rolodex library) and declare a few methods that will return the images (just like ImageBundle described in the book):
public abstract class Images implements RolodexCardBundle {

* @gwt.resource img_3861.jpg
public abstract RolodexCard imgA();

* @gwt.resource img_3863.jpg
public abstract RolodexCard imgB();

* @gwt.resource img_3865.jpg
public abstract RolodexCard imgC();


private final RolodexCard[] cards = new RolodexCard[]{ imgA(), imgB(), imgC() };

public RolodexCard[] getRolodexCards() {
return cards;
Next, to display those images, create ImageSetWidget (or you-name-it) class extending DirtyableComposite:
public class ImageSetEditor extends DirtyableComposite {
// asset and viewer are not used now...
public ImageSetEditor(RuleAsset asset, RuleViewer viewer) {
final Images images = (Images) GWT.create(Images.class);
final RolodexPanel rolodex
= new RolodexPanel(images, 3, images.imgA(), true);
For Guvnor to be able to launch the editor, we have to modify EditorLauncher class:
else if (asset.metaData.format.equals(AssetFormats.IMAGE_SET)) {
return new ImageSetEditor(asset, viewer);
AssetFormats should be supplied with the new constant for this new type, of course.

To allow user to create such widgets in UI, a new menu item needs to be added.

This means, ExplorerLayoutManger#rulesNewMenu() should be modified
m.addItem(new Item("New ImageSet",
new BaseItemListenerAdapter() {
public void onClick(BaseItem item, EventObject e) {
launchWizard(AssetFormats.IMAGE_SET, "New ImageSet", true);
}, "images/rule_asset.gif"));

And last, but not least we need to include the following line in Guvnor.gwt.xml
<inherits name='com.yesmail.gwt.rolodex.Rolodex'/>
Now, after the project has been rebuilt and redeployed we get the following widget on the screen:

Currenly, the widget is displaying a predefined set of images and animates them as we roll the mouse over. So we have now a rolodex-powered widget inside Guvnor. Sounds cool! :)

Now, there are a lot of TODOs to make use of this new cool widget.

  • Menus should be pluggable. So far I knew that the only class that we should generate in order to support adding new rule editor widgets. Without doubt, a user needs a button to create the widget in his workspace, and therefor we should inject the new menu item. I suppose we can generate this part also. Therefore we need to extract the ExplorerLayoutManger#rulesNewMenu() method into a separate class.
    Currently I have an ant task ready to generate a new EditorLauncher class source to plug a new asset type editor. But perhaps, if we have more of these classes to be generated, I'd better add a new ruby script to do this job.

  • Upload of new images. There's no use of this widget if it can redisplay only the predefined set of images.

  • RuleAsset support for images.The images should be supplied via the RuleAsset, i.e. the content should be a class that could represent a set of images.

  • A content handler is required as well.