3.1.1.2. Mechanism

The UI Extension's working process is divided into 3 phases:

Setting up

At first, you must add dependencies to pom.xml. In this phase, you are going to install all elements of UI Extension framework in the configuration.xml file:

Implement UIExtensionManager by using UIExtensionManagerImpl.
Plug UIExtensionPlugin in UIExtensionManager by using the registerUIExtensionPlugin() method.
List all the UI Extension's definitions. You can also define your own external filter (optional).
Create the parent UI Component class.
Create the UI Extension class.
Create the internal filters.

Loading

UIExtensionPlugin is responsible for looking up all UI Extension definitions, thus you can use it to obtain all UI Extensions, then plug it into UIExtensionManager. At present, all UI Extensions in your project will be managed by UIExtensionManager. Now you can get UI Extensions everywhere by invoking the getUIExtensions(String objectType) method.

In the UI Component class, implement a function which:

Retrieve a collection of UI Extensions which belongs to it by UIExtensionManager:

List<UIExtension> extensions = manager.getUIExtensions("org.exoplatform.wiki.UIPageToolBar");

Transform them into UIComponent and add them to the parent UI Component:

// You are free to create a context
Map<String, Object> context = new HashMap<String, Object>();
context.put(key,Obj);
// UIExtensionManager will depend on this context and extension to add or does not add extension to UI Component(this)
UIComponent component = manager.addUIExtension(extension, context, this);

The addUIExtension() method is responsible for adding extensions to a UI Component. It depends on:

UIExtension, in particular, the UIExtension's filter. Either internal filter or external filter has the accept method, thus the adding process will be successful if accept returns 'true' and vice versa.
Context will be the parameter of the accept method.

Activating

The final step is to present UI Extension in a template.

As all UI Extensions are presently becoming children of UI Component, you can implement UI Component's action thanks to UI Extension's action. For example:

<%for(entry in uicomponent.getActions()) {
  String action = entry.Id();
  def uiComponent = entry;
  String link = uiComponent.event(action);
%>
  <a href="$link" class="$action" title="$action" %>"><%= action %></a>
<%}%>

Note

You are free to customize your action's Stylesheet.