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.
