Start page / Plug-In Development / WebClient Extensions / Interactive Features / InlineEdit Buttons / Code Example
InlineEdit Buttons: Code Example
This example implements a button that will be shown in InlineEdit button bars associated with sections; a mouse click will trigger an associated action.
An InlineEdit plug-in consists of a two-tier class structure:
The first tier defines the button plug-in and determines which second-tier objects (see below) should be offered to the WebClient depending on the current operational context.
- InlineEdit Items Plug-In
serves as a container for and provider of one or more individual plug-in items that represent individual InlineEdit buttons
The second tier defines individual plug-in items; each item will be represented by its own button, may define its own visibility context (based on store elements or other criteria) and provides its own, specific action.
- Executable InlineEdit Item
provides a button definition including title and icon, and defines an executable action that will be executed on the server side and handle interaction with users - Script InlineEdit Item
provides a button definition including title and icon, and defines a scripted action using JavaScript that will be executed on the client side
 |
An InlineEdit items plug-in may contain one or more of the second-tier item classes. Each item will be represented by an individual button, provide its own actions and define its own availability based on criteria such as context store element, etc. However, each of the second-tier button items returned by getItems()
WebClient will draw only one button for each class: the first object instance of each second-tier class returned by WebeditInlineEditItemsPlugin.getItems() will be represented in the interface, while any duplicate object based on the same class will be ignored. |
The InlineEdit Items Plug-In
The InlineEdit items plug-in implements the interface WebeditInlineEditItemsPlugin and is responsible for collecting and returning a list of action items that will be shown as individual buttons. This class on its own has no representation in the WebClient user interface.
public class ExampleWebeditInlineEditItemsPlugin implements WebeditInlineEditItemsPlugin {
// Field definitions for objects that are required during the lifetime of a class instance.
private BaseContext _context;
@Override
public void setUp(@NotNull final BaseContext context) {
_context = context;
}
@Override
public void tearDown() {
}
@NotNull
@Override
public Collection<? extends InlineEditItem> getItems() {
// Create and return an array list that includes individual button item objects.
return Arrays.asList(
new ExampleExecutableInlineEditItem(),
new ExampleClientScriptProvidingInlineEditItem()
);
}
/* Include one or several private static classes that implement action item interfaces,
either ExecutableInlineEditItem or ClientScriptProvidingInlineEditItem. */
}void setUp()
This method is called by the WebClient to set up the plug-in prior to polling it for available InlineEdit items.
void tearDown()
This method is called by the WebClient as the InlineEdit items plug-in is about to be destroyed.
Collection<? extends InlineEditItem> getItems()
After instantiating and setting up the InlineEdit items plug-in object, WebClient will call getItems() to poll for a list of available InlineEdit items. This method should return all available items defined as nested classes within the plug-in class; WebClient will autonomously call the appropriate, item-specific methods of each item returned by getItems() to determine in which context(s) each item should be shown and marked as active.
Executable InlineEdit Item
The following code implements an executable InlineEdit button item based on the interface ExecutableInlineEditItem and action that is able to use the full FirstSpirit APIs to produce functionality.
In this example, it is a private class nested within its parent, InlineEdit items plug-in class.
private static class ExampleExecutableInlineEditItem implements ExecutableInlineEditItem {
ExampleExecutableInlineEditItem() {
}
public String getLabel(@NotNull final InlineEditContext context) {
return "Example Executable InlineEdit Item";
}
public String getIconPath(@NotNull final InlineEditContext context) {
return null;
}
public boolean isVisible(@NotNull final InlineEditContext context) {
final IDProvider element = context.getElement();
return !(element instanceof Content2Section || element instanceof SectionReference) && element instanceof Section;
}
public boolean isEnabled(@NotNull final InlineEditContext context) {
final IDProvider element = context.getElement();
return element != null && (!element.isPermissionSupported() || element.getPermission().canChange());
}
public void execute(@NotNull final InlineEditContext context) {
final OperationAgent operationAgent = context.requireSpecialist(OperationAgent.TYPE);
final RequestOperation requestOperation = operationAgent.getOperation(RequestOperation.TYPE);
requestOperation.setKind(RequestOperation.Kind.INFO);
requestOperation.perform("This message box is generated by the Example Executable InlineEdit Item.");
}
}String getLabel()
This method is responsible for providing the item's display name that will be shown in its button's tool tip.
String getIconPath()
The method getIconPath() returns the path and file name of an icon graphic related to this item. The icon will be displayed in the item's button representation in the InlineEdit button bar. The file path is relative to the root of the project-specific WebClient web application.
Icon graphics used in this context should be sized 19x19 pixels and provided in PNG format with an alpha channel. The icon features should generally use shades of white, as InlineEdit buttons are always drawn with a dark grey background.
boolean isVisible()
This method is responsible for determining in which context the item button is to be displayed. If the item is to be displayed, the boolean value true should be returned; the value false will suppress display of this item's button.
Standard use cases involve discriminating between sections (Page Store objects) and datasets (Content Store objects). If an item implements functionality that should only be available on Section objects, the method isVisible() should determine if the context object (always a store element) is an instance of Section. For this purpose, an InlineEditContext object is provided; the related store element can be obtained by calling context.getElement().
|
InlineEdit buttons may be shown attached to any HTML tag that is marked up with an Editor ID in a template's output channel definition. In order to prevent buttons from appearing associated with rendered instances of single input components inside a section, page or dataset rectangle, the following code will be helpful in determining if the Editor ID is attached to an input component within the <CMS_MODULE> block of a template form, and prevent visibility in this case: |
Example: Context check for form editor nodes
public boolean isVisible(@NotNull final InlineEditContext context) {
final String tag = context.getTag();
if (!"CMS_MODULE".equals(tag)) {
return false;
}
final EditorNode editorNode = context.getEditorNode();
return editorNode == null || editorNode.getItemNode() == null;
}boolean isEnabled()
The method isEnabled() indicates if the item's button should be active in a given context. If the button is to be active, this method should return the boolean value true. If this button is to be inactive, the boolean value false will cause the button icon to be displayed with increased transparency to produce a muted representation; while the button will be visible (given that isVisible() returns true in the same context), the item's action code will not be executed on-click.
As with the method isVisible(), the InlineEditContext object will provide access to store and element-related information that can help determine active states.
void execute()
This method will be called by the WebClient once a user clicks the item's button in the InlineEdit button bar. execute() is treated as a point of entry into executable code to carry out the item's action and is not expected to return any value.
Script InlineEdit Item
The following code implements a script-providing InlineEdit button based on the interface ClientScriptProvidingInlineEditItem; it may assemble JavaScript code that will be executed client-side in the WebClient user interface.
This example is a private class nested within its parent, InlineEdit items plug-in class.
private static class ExampleClientScriptProvidingInlineEditItem implements ClientScriptProvidingInlineEditItem {
ExampleClientScriptProvidingInlineEditItem() {
}
@NotNull
@Override
public String getLabel(@NotNull final InlineEditContext context) {
return "Example Client Script-Providing InlineEdit Item";
}
@Nullable
@Override
public String getIconPath(@NotNull final InlineEditContext context) {
return "webclient_examples/media/inlineedit/example_script_button_icon.png";
}
@Nullable
@Override
public String getScript(@NotNull final InlineEditContext context) {
return "top.fs.API.getInstance().getCommon().showMessage(" +
"\"This message box is generated by the Example Client Script-Providing InlineEdit Item.\"" +
");";
}
@Override
public boolean isVisible(@NotNull final InlineEditContext context) {
final IDProvider element = context.getElement();
return !(element instanceof Content2Section || element instanceof SectionReference) && element instanceof Section;
}
@Override
public boolean isEnabled(@NotNull final InlineEditContext context) {
final IDProvider element = context.getElement();
return element != null && (element instanceof Section);
}
}getLabel()
This method is responsible for providing the item's display name that will be shown in its button's tool tip.
getIconPath()
The method getIconPath() returns the path and file name of an icon graphic related to this item. The icon will be displayed in the item's button representation in the InlineEdit button bar. The file path is relative to the root of the project-specific WebClient web application.
Icon graphics used in this context should be sized 19x19 pixels and provided in PNG format with an alpha channel. The icon features should generally use shades of white, as InlineEdit buttons are always drawn with a dark grey background.
isVisible()
This method is responsible for determining in which context the item button is to be displayed. If the item is to be displayed, the boolean value true should be returned; the value false will suppress display of this item's button.
Standard use cases involve discriminating between sections (Page Store objects) and datasets (Content Store objects). If an item implements functionality that should only be available on Section objects, the method isVisible() should determine if the context object (always a store element) is an instance of Section. For this purpose, an InlineEditContext object is provided; the related store element can be obtained by calling context.getElement().
|
InlineEdit buttons may be shown attached to any HTML tag that is marked up with an Editor ID in a template's output channel definition. In order to prevent buttons from appearing associated with rendered instances of single input components inside a section, page or dataset rectangle, the following code will be helpful in determining if the Editor ID is attached to an input component within the <CMS_MODULE> block of a template form, and prevent visibility in this case: |
Example: Context check for form editor nodes
public boolean isVisible(@NotNull final InlineEditContext context) {
final String tag = context.getTag();
if (!"CMS_MODULE".equals(tag)) {
return false;
}
final EditorNode editorNode = context.getEditorNode();
return editorNode == null || editorNode.getItemNode() == null;
}isEnabled()
The method isEnabled() indicates if the item's button should be active in a given context. If the button is to be active, this method should return the boolean value true. If this button is to be inactive, the boolean value false will cause the button icon to be displayed with increased transparency to produce a muted representation; while the button will be visible (given that isVisible() returns true in the same context), the item's action code will not be executed on-click.
As with the method isVisible(), the InlineEditContext object will provide access to store and element-related information that can help determine active states.
getScript()
This method will be called by the WebClient once a user clicks the item's button in the InlineEdit button bar. getScript() is designed to return a String containing JavaScript code that will be executed within the WebClient user interface (as opposed to the executable InlineEdit item, which is executed server-side). A FirstSpirit-specific JavaScript API is available to implement commonly used functionality.