My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
CustomToolbarTutorial  
Updated Jan 26, 2011 by jeff.johnston.mn@gmail.com

The following tutorial shows how to create a custom toolbar. The reason you might want to do such a thing is to either replace the default functionality or add your own toolbar items. This example assumes you are wanting to add your own toolbar item to do something custom. The objective will be to print out an alert that display 'Hello World'. Although typically not the most useful function in a production environment, it does show the steps needed to create your own toolbar item!

You can see the full example here.

Example

First start by extending the AbstractToolbar and override the render() method.

public class CustomToolbar extends AbstractToolbar {
    @Override
    public String render() {}    
}

However this doesn't give you much to start with, so how about if we just drag in the default toolbar items first. Note: you can, of course, just bring in what you want. Typically when I create a new toolbar item I know exactly what functionality I need and just include the items I need.

@Override
public String render() {
   if (hasToolbarItems()) { // already has items
        return super.render();
    }
    
    addToolbarItem(ToolbarItemType.FIRST_PAGE_ITEM);
    addToolbarItem(ToolbarItemType.PREV_PAGE_ITEM);

    ...

    return super.render();
}

Now we need to create our new toolbar item. For that we need to implement the ToolbarItem and ToolbarItemRenderer interfaces.

ToolbarItem

For a toolbar item that displays an image we can get some help from the special ToolbarItem called the ImageItem. The tooltip, image and alt are all used to define the element. The code is used to identify the toolbar item from the other items.

ImageItem item = new ImageItem();
item.setCode("custom-item");
item.setTooltip("Hello World");
item.setImage(getImage("custom.png", getWebContext(), getCoreContext()));
item.setAlt("custom");

ToolbarItemRenderer

The toolbar item renderer is built by extending the AbstractItemRenderer and overriding the render method. You can think of the renderer as containing the information to render different toolbar items.

public class CustomItemRenderer extends AbstractItemRenderer {
    public CustomItemRenderer(ToolbarItem item, CoreContext coreContext) {
        setToolbarItem(item);
        setCoreContext(coreContext);
    }

    @Override
    public String render() {
        ToolbarItem item = getToolbarItem();
        StringBuilder action = new StringBuilder("javascript:");
        action.append("alert('Hello World')");
        item.setAction(action.toString());
        return item.enabled();
    }
}

Now bring the toolbar item and renderer together.

ToolbarItemRenderer renderer = new CustomItemRenderer(item, getCoreContext());
renderer.setOnInvokeAction("onInvokeAction");
item.setToolbarItemRenderer(renderer);

Lastly, add the toolbar item to the toolbar defined in the abstract toolbar you extended.

addToolbarItem(item);

Plug into TableFacade

To use your custom toolbar you will need to plug it into your TableModel.

API
tableModel.setToolbar(new CustomToolbar());
JSP Tag
<jmesa:tableModel toolbar="com.mycompany.table.CustomToolbar">
Powered by Google Project Hosting