Infoglue Extensions

Infoglue 3 comes with a new plugin system. It allows for users to add new features to the platform in a more modular way than before. We have made it so it seems like part of the core but can be distributed as independent jar-files.

There are two kinds of plugins:

  1. Tools - these plugins adds a new tab in the Infoglue main GUI.
  2. Tool additions - these plugins adds buttons to existing views in the core tools.

Steps to create a tool-plugin 

Create a new java project in your favourite IDE (or clone our git-repo). Let's call it "SampleInfogluePlugin" and make it relate to the core infoglue project or include infoglue in it's claspath.

Create the plugin class

Create a class called "com.acme.infoglue.SampleInfoglueExtension" as this:​​

package com.acme.infoglue;

import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

import javax.servlet.http.HttpServletRequest;

import org.apache.log4j.Logger;
import org.infoglue.cms.applications.common.ToolbarButton;
import org.infoglue.cms.applications.databeans.InfoglueTool;
import org.infoglue.cms.extensions.InfoglueExtension;
import org.infoglue.cms.providers.ToolbarProvider;
import org.infoglue.cms.providers.ToolsProvider;
import org.infoglue.cms.security.InfoGluePrincipal;
import org.infoglue.cms.services.AdminToolbarService;
import org.infoglue.cms.services.AdminToolsService;

public class SampleInfoglueExtension extends InfoglueExtension implements ToolsProvider, ToolbarProvider
{
	private final static Logger logger = Logger.getLogger(SampleInfoglueExtension.class.getName());
	
	@Override
	public void init() 
	{
		logger.warn("Initializing SampleInfoglueExtension...");
		
		try 
		{
			AdminToolsService.getService().registerToolsProvider(this);
			AdminToolbarService.getService().registerToolbarProvider(this);
			
		} 
		catch (Exception e) 
		{
			logger.error("Error registering " + this.getClass().getName() + " as extensions: " + e.getMessage(), e);
		}		
	}

	@Override
	public List getTools(InfoGluePrincipal principal, Locale locale) 
	{
		List extraTools = new ArrayList();
		extraTools.add(new InfoglueTool("sampleExtension", "ViewSampleInfoglueExtensionTool.action", "", "SampleExtension", "Cool new plugin", "sampleExtension", ""));
		
		return extraTools;
	}

	@Override
	public List getRightToolbarButtons(String toolbarKey, InfoGluePrincipal principal, Locale locale, HttpServletRequest request, boolean disableCloseButton) 
	{
		List buttons = new ArrayList();
		//No buttons for now
		return buttons;
	}

	@Override
	public List getToolbarButtons(String toolbarKey, InfoGluePrincipal principal, Locale locale, HttpServletRequest request, boolean disableCloseButton) 
	{
		List buttons = new ArrayList();
		//No buttons for now
		return buttons;
	}

	@Override
	public List getFooterToolbarButtons(String toolbarKey, InfoGluePrincipal principal, Locale locale, HttpServletRequest request, boolean disableCloseButton) 
	{
		List buttons = new ArrayList();
		//No buttons for now
		return buttons;
	}
	
}

This class is both a tool provider and a toolbar provider as you can see by the fact that the class implements both ToolsProvider and ToolbarProvider. For now we will not implement any toolbar buttons. What happens is basically that we register the class as a ToolsProvider and a ToolbarProvider in the init()-method. The init-method is called on all extensions on Infoglue startup. When rendering the GUI Infoglue will ask all registered providers for items to render and it does so by using the interface methods of respective provider. 

In this case we want to add a new tool (tab in the top). This is done by returning a new Tab-object in the getTools-method. The Tab-object will be shown as a iframe so it must point to something that renders html. In this case we want to point to a Webwork-action called "ViewSampleInfoglueExtension.action" as you can see in the code. So for the plugin to work we must create that MVC-handling.

Create an "actions.xml"-file

Place it in the root classpath of the project

<actions>
<action name="com.acme.infoglue.sampletools.actions.ViewSampleInfoglueExtensionToolAction" alias="ViewSampleInfoglueExtensionTool">
       <view name="success">$extensionPath/templates/viewSimpleExtension.vm</view>
       <view name="error">/cms/managementtool/error.vm</view>
</action>
</actions>

Create the action-class​

Create a simple webwork-class like this:

package com.acme.infoglue.sampletools.actions;

import org.infoglue.cms.applications.common.actions.InfoGlueAbstractAction;
import webwork.action.Action;

public class ViewSampleInfoglueExtensionToolAction extends InfoGlueAbstractAction
{
    private static final long serialVersionUID = -2904286525405758091L;    

    public String doExecute() throws Exception
    {
      return Action.SUCCESS;
}
}

Finally the "view"

Create the view-template (put it in templates/viewSimpleExtension.vm to correspond to the actions.xml)

<html>
<body>
<h1>This is my cool sample-plugin</h1>
<p>
The plugin is built using MVC and velocity templates just like all other screens in Infoglue but without cluttering the core.
</p>
</body>
</html>

Deployment

So now you are done. Now let's package the extension. Just jar the project. In eclipse we just right-click in the src-folder and choose Export.. and then JAR-file (be sure to use "Add directory entries"). Then move the JAR-file to "tomcat/webapps/infoglueCMS/WEB-INF/libextensions/" where it will be picked up by Infoglue on restart.

 

Special: adding buttons to the "Inline edit"-view (or Edit On Sight)

A new feature since 3.0 is the toolbar in the bottom of infoglue inline edit. This toolbar is also based on the toolbar system and can be extended. If you want to plug in your own buttons here just add some logic in the getFooterToolbarButtons-method.

@Override
public List<ToolbarButton> getFooterToolbarButtons(String toolbarKey, InfoGluePrincipal principal, Locale locale, HttpServletRequest request, boolean disableCloseButton)
{
List<ToolbarButton> buttons = new ArrayList<ToolbarButton>();

if(toolbarKey.equalsIgnoreCase("tool.deliver.editOnSight.toolbarRight"))
{
buttons.add(new ToolbarButton("exampleToolbarButtonEOS",
  "ExampleButton",
  "Click button to invoke action",
  "alert('An example plugin...');",
  "deathStar"));
}

return buttons;
}

To style your new button you can just add the css needed in your site-css as that is available on the edit-on-site-environment. Example for the button I just made (deathStar is the css-class I defined for the button):

.deathStar {
    background-image: url(http://files.softicons.com/download/tv-movie-icons/star-wars-vehicles-icons-by-jonathan-rey/png/16x16/Death%20Star%20-%202nd.png) !important;
​}


comments powered by Disqus