Tuesday, July 15, 2008

GSOC2008: Integrating Rolodex to Guvnor

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.

No comments: