KIE Community

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);
   initWidget(rolodex);
 }
}

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.