© 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM...

55
© 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator

Transcript of © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM...

Page 1: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 1

Enterprise Content Management ECM Experience PlatformEnterprise Content Management ECM Experience Platform

© 2014 IBM Corporation

IBM Content Navigator

Page 2: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 2

Enterprise Content Management ECM Experience Platform

PLUG-INS

Page 3: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 3

Enterprise Content Management ECM Experience Platform

Overview A plug-in is a package of customizations that can be easily added to Content

Navigator to deliver a custom application Plug-ins can be used to extend, override, or add features to any and all

layers of Content Navigator A plug-in enables you to do any and all of the following

– Add a new action, menu, or toolbar– Create a new layout– Integrate a 3rdParty document viewer– Override existing features or add a new feature– Adding server side services

Page 4: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 4

Enterprise Content Management ECM Experience Platform

Plugin Extension Points (Not a complete list)

Extension Point Description

Actions A function on a toolbar or menu

Menus A menu or toolbar

Features A major functional area that is selectable as an icon on the left side of the desktop

Viewers A viewer or editor for a particular document type

Services A mid-tier function that can invoke API’s of other servers

Filters Used to modify the requests and responses to the built-in Content Navigator services (Example: EDS)

Layout A completely different layout, essentially an entire UI

Page 5: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 5

Enterprise Content Management ECM Experience Platform

Overview: API

Purpose API

Launch URL

Embed URL (if in a big iframe) JavaScript API

Customize Admin configuration (non-API) EDS Plug-in JavaScript API

Extend Plug-in JavaScript API

New Application JavaScript API

Page 6: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 6

Enterprise Content Management ECM Experience Platform

Overview: Relationships of APIs

Plug-ins require use of the Java APIs• The interfaces that define a plugin are part of the Java API

Plug-ins can use both Java and JavaScript APIs• JavaScript APIs are used when the plug-in provides new model or view

components. Java and JavaScript APIs can also be used independently from plug-ins.

• Except Java extension API, which is used to define plug-ins. EDS is independent of other Content Navigator APIs

• A REST API.• No other APIs can be used.

URL links are independent of other Content Navigator APIs

Page 7: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 7

Enterprise Content Management ECM Experience Platform

Architecture and Design

Dojo Widget LibrarySearch Form

Content List

Folder Tree

WorkflowContent Viewer

Teamspace Builder

JavaScript ModelRequest Desktop Teamspace

SearchWork listRepository

ICN Web Client

Mid-tier services

Content Manager

Content Manager

OnDemand

FileNet Content Manager

CMIS-compliant Repository

Other Web Clients

Clie

nt

Se

rve

r

Custom Plug-in

JavaScript

Custom Plug-in Widget

Custom Plug-in

Services

Provides UI for custom:- Widgets- Viewers- Features- Actions- Layouts

Provides business logic for:- Viewers- Repositories- Extensions to

existing services

Page 8: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 8

Enterprise Content Management ECM Experience Platform

8

Desktop Root object for all information displayed on the desktop.

Repository A single content repository defined in the desktop.

Action, Viewer, Feature

Describe menu actions, viewers and features as configured for the desktop.

Workspace, WorkspaceTemplate

Represents a teamspace and teamspace template.

SearchTemplate,SearchCriterion

Represents a (saved) search.

EntryTemplate Represents an entry template.

ContentClass,AttributeDefinition

Represents classes and item types.

WorklistFolder,Worklist

Represents worklists and their various collections

User,UserGroup

Represents users and groups of users

ResultSet A set of results from searching, folder contents, worklist contents

Item,ContentItem,WorkItem

Various content and process items, including documents, folders, and work items

This is not a comprehensive list of all model classes available in the IBM Content Navigator Toolkit.

Page 9: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 9

Enterprise Content Management ECM Experience Platform

Key Concepts/Functions used by ICNCallbacks• Callbacks are used extensively throughout ICN• A callback is a function used obtain the result of an asynchronous call• These are necessary when calling any method that makes a server API call or loads a widget

asynchronously– Methods that load plugin provided JavaScript classes will load those asynchronously and therefore need to be called with a callback.

Hitch• Hitch is a DOJO provided helper method that assists with controlling the scope of a function• This is a very neat and useful function, because the scoping rules in JavaScript can be very tricky

Aspect/On

• Aspect and On are Dojo helper methods that provide a mechanism for attaching additional functionality on an existing function

• ICN leverages this capability extensively and in particular as our mechanism for handling events

• ICN model APIs provide stub methods that are called on completion of a server-side call• The stub methods are provided for Aspect or On connections to trigger other JavaScript

classes to take action based on a model event

Page 10: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 10

Enterprise Content Management ECM Experience Platform

PLUG-IN DEVELOPMENT

Page 11: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 11

Enterprise Content Management ECM Experience Platform

Creating a Plug-in

An IBM Content Navigator Plug-in at a minimum consists of – A main Java class, which defines the extensions provided by the Plug-in to

Content Navigator– A manifest file, which provides the full package name of the main Java class

for the Plug-in. The main Java class for a Plug-in must extend

“com.ibm.ecm.extension.Plugin”, which is provided in the navigatorAPI.jar file included with IBM Content Navigator

The main Java class provides “getters” that return extension classes provided by the Plug-in

The main Plug-in Java class also defines:– The main JavaScript file to load for your plug-in– A primary cascading style sheet to apply custom styling for your front-end

customizations– Etc.

Page 12: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 12

Enterprise Content Management ECM Experience Platform

Main Plug-in class examplepublic class MyFirstPlugin extends com.ibm.ecm.extension.Plugin {

private PluginAction[] pluginActions = new PluginAction[0];

public String getId() {

return "MyFirstPlugin";

}

public String getName(Locale locale) {

return "My First Plugin";

}

public String getVersion() {

return "2.0.3";

}

public String getCopyright() {

return "";

}

public String getScript() {

return "MyFirstPlugin.js.jgz";

}

public String getDebugScript() {

return "MyFirstPlugin.js";

}

public String getDojoModule() {

return "MyFirstPluginDojo";

}

public String getCSSFileName() {

return "MyFirstPlugin.css.jgz";

}

public String getDebugCSSFileName() {

return "MyFirstPlugin.css";

}

public String getConfigurationDijitClass() {

return "MyFirstPluginDojo.ConfigurationPane";

}

public PluginAction[] getActions() {

return pluginActions;

}

}

Page 13: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 13

Enterprise Content Management ECM Experience Platform

Eclipse extensions

The IBM Content Navigator redbook provides extensions for eclipse that can assist with the creation of Plug-ins

There are two extensions for eclipse:– com.ibm.ecm.icn.plugin_2.0.3.jar: Adds a new project nature to eclipse,

allowing you to select “IBM Content Navigator” as a new project type Sets up the base structure for a plug-in Creates an ANT script, which can be used to build the Plug-in jar file Provides a new menu, which allows you to create Plug-in extensions using

simple wizards

– com.ibm.ecm.icn.facet.EDSPlugin_2.0.3: Adds a new web project type for an External Data Services (EDS) web application

Creates the two base servlets you can use to setup an EDS service

To install the eclipse extensions, you only need to copy the two JAR files into your eclipse “/dropins” directory.

Page 14: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 14

Enterprise Content Management ECM Experience Platform

CONFIGURATION

Page 15: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 15

Enterprise Content Management ECM Experience Platform

Configuration

Every Content Navigator Plug-in provides the ability to store configuration data associated with your plug-in

On the Plug-in administration panel in Content Navigator there is an area dedicated to a custom widget, allowing you to create custom prompts for configuration data

For example, the External Data Services Plug-in, shipped with Content Navigator, prompts the administration for several unique inputs:

Page 16: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 16

Enterprise Content Management ECM Experience Platform

Configuration The top portion of the plug-in administration panel is reserved for Content Navigator to list some of the extensions

provided by a given plug-in The portion below “Layouts” is reserved for a custom widget, provided by your plug-in You can create any custom prompts you choose and save the information in the Content Navigator configuration

database Content Navigator provides simple methods to load and save configuration in your custom configuration panel as

well as in server extensions provided by your plug-in Plug-in configuration widgets must extend the “ecm.widget.admin.PluginConfiguration” JavaScript widget. For

example:define([

"dojo/_base/declare",

"dijit/_TemplatedMixin",

"dijit/_WidgetsInTemplateMixin",

"ecm/widget/admin/PluginConfigurationPane",

"ecm/widget/HoverHelp",

"ecm/widget/ValidationTextBox",

"dojo/text!./templates/ConfigurationPane.html”

],

function(declare, _TemplatedMixin, _WidgetsInTemplateMixin, PluginConfigurationPane, HoverHelp, ValidationTextBox, template) {

return declare("MyFirstPluginDojo.ConfigurationPane", [ PluginConfigurationPane, _TemplatedMixin, _WidgetsInTemplateMixin], {

templateString: template,

widgetsInTemplate: true,

load: function(callback) {},

validate: function() {

return true;

},

save: function() {}

});

});

Page 17: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 17

Enterprise Content Management ECM Experience Platform

Configuration By default you have a single string for configuration data It is generally recommended you define a JSON structure for your configuration data

and convert it to/from a string during saving and loading You can optionally create additional configuration strings and save them in the

Content Navigator configuration database if your configuration information is too complex for a single string– This may be necessary if your plug-in is providing a multi-panel administrative interface, each with it’s own set of

configuration information

Page 18: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 18

Enterprise Content Management ECM Experience Platform

SERVICES

Page 19: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 19

Enterprise Content Management ECM Experience Platform

Services

Plug-in services are a mechanism for a plug-in to extend the Content Navigator server API

Plug-in services can be called from the user interface like any other service provided by Content Navigator out-of-the-box

You could use this capability to connect to an external source, provide custom logic on top of an underlying ECM repository or expose capabilities of a repository Content Navigator may not be exposing in it’s repository connector

Plug-in services must extend the “com.ibm.ecm.extension.PluginService” Java class Example of a Plug-in service:

public class MyFirstPluginService extends PluginService {

public String getId() {

return "MyFirstPluginService";

}

public void execute(PluginServiceCallbacks callbacks, HttpServletRequest request, HttpServletResponse response) throws Exception {

}

}

Page 20: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 20

Enterprise Content Management ECM Experience Platform

PluginServiceCallbacks

PluginServiceCallbacks is a helper class provided by the Content Navigator framework

The class provides a variety of APIs to assist you during the development of your server-side extension, including (but not limited to):– getLogger: This method provides an instance of com.ibm.ecm.extension.PluginLogger, which you can use to

log debug and error messages to the Content Navigator log file.– loadConfiguration/saveConfiguration: These methods allow you to load and save configuration data

associated with your plug-in.– getP8Subject: Returns javax.security.auth.Subject object used to authenticate the user with a Content

Platform Engine repository.– getResources: Provides the Content Navigator server-side resource bundle– retrieveDocumentContent: A helper method to retrieve the content of a given document in Content Manager,

Content Manager OnDemand, Content Platform Engine or a Content Management Interoperability Services (CMIS) source

– And many more!

Refer to the IBM Content Navigator API specification for a complete list of methods provided by the PluginServiceCallbacks class.

Page 21: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 21

Enterprise Content Management ECM Experience Platform

REQUEST & RESPONSE FILTERS

Page 22: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 22

Enterprise Content Management ECM Experience Platform

Request and Response filters

In addition to plug-in services, you can provide filters on services in the Content Navigator framework

Filters are exits that run either before a service executes or after it executes Request filters perform custom logic before a given service executes

– For example, you could alter the request parameters sent to a service before the service executes the request

Response filters perform custom logic after a given service executes– For example, you could alter the JSON payload typically returned by a given service before it is sent to the

user interface

Request and response filters must extend “com.ibm.ecm.extension.PluginRequestFilter” and “com.ibm.ecm.extension.PluginResponseFilter” respectively

Page 23: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 23

Enterprise Content Management ECM Experience Platform

Example of a Request filter

public class MySearchRequestFilter extends PluginRequestFilter {

public String[] getFilteredServices() {

return new String[] { "/p8/search", "/cm/search" };

}

public JSONObject filter(PluginServiceCallbacks callbacks, HttpServletRequest request, JSONArtifact jsonRequest) throws Exception {

JSONArray jsonArray = (JSONArray)jsonRequest;

for (int i=0; i < jsonArray.size(); i++) {

JSONObject jsonObj = (JSONObject)jsonArray.get(i);

// custom logic to alter request JSON

}

return null;

}

}

Page 24: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 24

Enterprise Content Management ECM Experience Platform

Example of a Response filter

public class MySearchResponseFilter extends PluginResponseFilter {

public String[] getFilteredServices() {

return new String[] { "/p8/search","/cm/search" };

}

public void filter(String serverType, PluginServiceCallbacks callbacks,

HttpServletRequest request, JSONObject jsonResponse) throws Exception {

JSONResultSetResponse jsonResultSetResponse = (JSONResultSetResponse) jsonResponse;

// custom logic to alter JSONResultSetResponse

}

}

Page 25: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 25

Enterprise Content Management ECM Experience Platform

Filters on plug-in services

It is possible to apply a filter to services provided by other plug-ins The filter must be defined as “/plugin/<plugin service id>” In order for a plug-in service to support a response filter, it must use the

PluginResponseUtil.writeJSONResponse helper method to stream it’s response to the user interface– PluginResponseUtil is not only useful to enable your plug-in service to support response filters, but it will also

automatically compress the response from your service if the requesting client supports receiving compressed responses

Page 26: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 26

Enterprise Content Management ECM Experience Platform

ACTIONS, MENUS & MENU TYPES

Page 27: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 27

Enterprise Content Management ECM Experience Platform

Actions

Plug-in actions provide the ability for your plug-in to define custom actions for toolbars and context menus in the user interface

A plug-in action must extend the “com.ibm.ecm.extension.PluginAction” class Actions must have a JavaScript function, which will be called when the user initiates

the action You can optionally extend the “ecm.model.Action” JavaScript model class to provide

custom behavior for an action in the user interface– For example, you might override the isEnabled method to enable/disable your action based on a custom

privilege or state in the user interface

Actions can also be restricted to specific repositories– Content Navigator’s framework will automatically include/exclude an action from a menu based on repository

type if the action specifies repository types in it’s definition

You can also create an action that is globally scoped or requires a selected item

Page 28: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 28

Enterprise Content Management ECM Experience Platform

Action Examplepublic class MyFirstAction extends PluginAction {

public String getId() { return "MyFirstAction”; }

public String getName(Locale locale) { return "My First Action”; }

public String getIcon() { return "”; }

public String getIconClass() { return "”; }

public String getPrivilege() { return "”; }

public boolean isMultiDoc() { return false; }

public boolean isGlobal() { return true; }

public String getActionFunction() { return "customListViewAction”; }

public String getServerTypes() { return "”; }

public String[] getMenuTypes() { return new String[0]; }

public String getActionModelClass() { return "”; }

}

Page 29: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 29

Enterprise Content Management ECM Experience Platform

Menus and Menu Types

Plug-in menus allow you to define a custom toolbar or context menu for the user interface

You can define custom menus based on existing menus in Content Navigator– You can do this programmatically or by using the menus administration user interface in Content Navigator

Menus are defined for a menu type, which is a base definition for a menu in Content Navigator

Plug-ins can define their own custom menu types Menus and Menu Types must extend “com.ibm.ecm.extension.PluginMenu” and

“com.ibm.ecm.extension.PluginMenuType” respectively In order to surface a menu in the user interface, it must be mapped to a desktop using

the desktops administration user interface in Content Navigator

Page 30: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 30

Enterprise Content Management ECM Experience Platform

Menus administration user interface

Page 31: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 31

Enterprise Content Management ECM Experience Platform

Menu Type Example

public class MyFirstMenuType extends PluginMenuType {

public String getId() {return "MyFirstMenuType";

}

public String getName(Locale locale) {return "My First Menu Type";

}

public String getTooltip(Locale locale) {return "Provides my first menu type";

}

public boolean isToolbar() {return true;

}}

Page 32: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 32

Enterprise Content Management ECM Experience Platform

Menu Examplepublic class MyFirstMenu extends PluginMenu {

public String getId() {return "DefaultMyFirstMenuType";

}

public String getName(Locale locale) {return "My First Menu";

}

public String getDescription(Locale locale) {return "Provides the first menu for My First Menu Type";

}

public String getMenuType() {return "MyFirstMenuType";

}

public PluginMenuItem[] getMenuItems() {return new PluginMenuItem[] { new PluginMenuItem("MyFirstAction") };

}}

Page 33: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 33

Enterprise Content Management ECM Experience Platform

FEATURES

Page 34: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 34

Enterprise Content Management ECM Experience Platform

Features

By default, Content Navigator uses a layout that is typically called the “Feature bar layout”

The feature bar layout provides a set of features, represented by icons that appear on the left or right side of the user interface

The icons are buttons associated with at least one panel that will display in the main portion of the Content Navigator user interface when the user clicks on the icon

Plug-ins can provide custom features or extend an existing Content Navigator feature to override and enhance the functionality it provides

Below is an example of the Content Navigator browse feature

Page 35: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 35

Enterprise Content Management ECM Experience Platform

Features

Plug-in features must extend the “com.ibm.ecm.extension.PluginFeature” class A feature must provide an icon, for the feature bar, and a widget class name, which

will be loaded in the main content area of the layout. Icons should be Scalable Vector Graphics (SVG) files adhering to the guidelines

described in the Content Navigator feature documentation– An SVG icon, providing the necessary variables described in the documentation, will allow the icon to be

themed by the Content Navigator theme capability

Widget classes should extend the “ecm.wiget.layout._LaunchBarPane” JavaScript class– This class provides callbacks used by the Content Navigator layout widget

Features must be added to a desktop definition to be rendered in the user interface Features can optionally provide feature configuration, which is unique configuration

data per desktop– This is a powerful feature that allows you to have per desktop settings for a custom feature, such as setting a

default view for the ContentList, defining a default repository, etc.

Important: The feature popup window capability has been deprecated and will be removed in a future release. Plug-ins should no longer define widgets for popup windows.

Page 36: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 36

Enterprise Content Management ECM Experience Platform

Feature example Java classpublic class MyFirstFeature extends PluginFeature {

public String getId() { return "DevCourseFeature"; }

public String getName(Locale locale) { return "Development Course Feature”; }

public String getDescription(Locale locale) {

return "Custom feature defined for the IBM development course";

}

public String getIconUrl() { return "MyFirstPluginLaunchIcon"; }

public String getSvgFilePath() { return "WebContent/images/featureIcon.svg"; }

public String getHelpContext() { return null; }

public String getFeatureIconTooltipText(Locale locale) { return ""; }

/** @deprecated */

public String getPopupWindowTooltipText(Locale locale) { return ""; }

public String getContentClass() { return "MyFirstPluginDojo.MyFirstFeature”; }

public boolean isSeparator() { return false; }

/** @deprecated */

public String getPopupWindowClass() { return ""; }

public boolean isPreLoad() { return false; }

public String getConfigurationDijitClass() { return "MyFirstPluginDojo.FeatureConfigurationPane”; }

}

Page 37: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 37

Enterprise Content Management ECM Experience Platform

Feature example JavaScript classdefine([

"dojo/_base/declare",

"ecm/widget/layout/_LaunchBarPane",

"dojo/text!./templates/MyFirstFeature.html"

],

function(declare, _LaunchBarPane, template) {

return declare("MyFirstPluginDojo.MyFirstFeature", [ _LaunchBarPane ], {

templateString: template,

widgetsInTemplate: true,

loadContent: function() {

this.logEntry("loadContent");

if (!this.isLoaded) {

this.isLoaded = true;

this.needReset = false;

}

this.logExit("loadContent");

},

reset: function() {

this.logEntry("reset");

this.needReset = false;

this.logExit("reset");

}

});

});

Page 38: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 38

Enterprise Content Management ECM Experience Platform

Feature configuration

Page 39: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 39

Enterprise Content Management ECM Experience Platform

LAYOUTS

Page 40: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 40

Enterprise Content Management ECM Experience Platform

Layouts

Although the feature bar layout and the feature extension are nice capabilities, it is possible it may not suit the needs of your custom user experience requirements

Plug-ins can also define entirely custom layouts A custom layout must provide a Java class, that extends

“com.ibm.ecm.extension.PluginLayout” Layout’s also require a JavaScript widget to render the user interface Layout JavaScript widgets should extend “ecm.widget.layout.BaseLayout” The Base layout widget provides some of the standard Content Navigator capabilities,

such as login/logout behavior and progress and error dialog handling The plug-in layout is free to create any layout or experience you choose

– For example, you could provide your own custom banner and main panel or exclude the banner altogether!

Page 41: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 41

Enterprise Content Management ECM Experience Platform

Layout Java Class

public class MyFirstLayout extends PluginLayout {

public String getId() {

return "MyFirstLayout";

}

public String getName(Locale locale) {

return "My First Layout";

}

public boolean areFeaturesConfigurable() {

return false;

}

public String getLayoutClass() {

return "MyFirstPluginDojo.MyFirstLayout";

}

}

Page 42: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 42

Enterprise Content Management ECM Experience Platform

Layout JavaScript Widget Class

define([

"dojo/_base/declare",

"dijit/_TemplatedMixin",

"dijit/_WidgetsInTemplateMixin",

"dijit/layout/StackContainer",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"ecm/widget/layout/BaseLayout",

"ecm/widget/Banner",

"ecm/widget/LoginPane",

"dojo/text!./templates/MyFirstLayout.html”

],

function(declare, _TemplatedMixin, _WidgetsInTemplateMixin, StackContainer, BorderContainer,

ContentPane, BaseLayout, Banner, LoginPane, template) {

/**

* @name MyFirstPluginDojo.MyFirstLayout

* @class

* @augments ecm.widget.layout.BaseLayout, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin

*/

return declare("MyFirstPluginDojo.MyFirstLayout", [ BaseLayout, _TemplatedMixin, _WidgetsInTemplateMixin ], {

templateString: template,

widgetsInTemplate: true

});

});

Page 43: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 43

Enterprise Content Management ECM Experience Platform

VIEWERS

Page 44: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 44

Enterprise Content Management ECM Experience Platform

Viewers Plug-in viewers provide a mechanism for extending the available document viewers in

Content Navigator Viewer extensions can be restricted to specific repositories and specific mime types The plug-in Java class must extend “com.ibm.ecm.extension.PluginViewer” Viewers are added to Viewer Maps, which provide a sequential list of viewers Content

Navigator will walk to find a suitable viewer for the given repository and mime type You can create multiple viewer maps and assign them to different desktops, allowing

you to enable different viewers for different business groups

Page 45: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 45

Enterprise Content Management ECM Experience Platform

Viewer Java classpublic class MyFirstViewer extends PluginViewerDef {

public String getId() {

return "MyFirstViewer";

}

public String getName(Locale locale) {

return "My First Viewer";

}

public String[] getSupportedContentTypes() {

return new String[] { "video/mp4" };

}

public String[] getSupportedServerTypes() {

return new String[] { "p8,cm" };

}

public boolean isLaunchInSeparateWindow() {

return false;

}

public String getLaunchUrlPattern() {

return "";

}

public String getViewerClass() {

return "MyFirstPluginDojo.MyFirstViewer";

}

public boolean isPreviewViewer() {

return false;

}

}

Page 46: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 46

Enterprise Content Management ECM Experience Platform

Viewer JavaScript widget Viewer JavaScript widget extensions should extend from a base widget class provided

by the Content Navigator toolkit, such as ecm.widget.viewer.DocViewer

define(["dojo/_base/declare","dojo/dom-construct","dojo/text!./templates/MyFirstViewer.html","ecm/LoggerMixin"

],function(declare, DocViewer, template, LoggerMixin) {

return declare("MyFirstPluginDojo.MyFirstPlugin", [DocViewer,LoggerMixin

], {templateString: template,

setItem: function(item, pageNumber) {},

showItem: function(callback) {}

});});

Page 47: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 47

Enterprise Content Management ECM Experience Platform

COMPRESSION BUILDS

Page 48: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 48

Enterprise Content Management ECM Experience Platform

Compression Builds Before deploying a plug-in to production it is very important you implement a

compression build scheme for your plug-ins web resources– JavaScript, HTML and CSS

Without a compress scheme, the browser will have to download each of your web resources individually during load time, which can significantly impact load performance

Typically a compression scheme will consist of both a “minification” and finally compression– “Minification” is a process that reduces multiple JavaScript files to a single JavaScript file and removes

comments to reduce the overall size of the JavaScript– For compression, it is typical to use GZIP compression, which is supported by all browsers Content Navigator

supports

To perform the compression, we typically use ShrinkSafe, which is provided by Dojo– Dojo’s build system also supports other compression tools, such as Closure

In order to setup the compression you must add all relevant JavaScript files to a single JavaScript file– Typically you would simply add the relevant JavaScript files to the “require” statement in your main Plugin

JavaScript file

For more information about compression builds, refer to Dojo’s help documentation: http://dojotoolkit.org/reference-guide/1.10/build/

Page 49: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 49

Enterprise Content Management ECM Experience Platform

BEST PRACTICES

Page 50: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 50

Enterprise Content Management ECM Experience Platform

Best practices for building customizations• Learn JavaScript/HTML/CSS

• Regardless of the JavaScript toolkit used for development, it’s important to understand the underlying programming language

• Avoid overriding Dojo and IBM Content Navigator JavaScript APIs unless absolutely necessary• Avoid using private methods; they are subject to change without notice

• Private methods are typically prefixed with an underscore (for example: _onClick) and/or with a JSDoc “@private”

• A method with an underscore in front of the name should only be considered public if it’s the JSDoc description contains “@public”.

• Do not attempt to use the administrative JavaScript APIs outside the administration feature or desktop

• APIs in ecm.model.admin, require administrative authority• Follow secure engineering practices when building extensions• Review samples provided with IBM Content Navigator

• The SamplePlugin, included in the IBM Content Navigator install, demonstrates most of the extension points provided by the framework

• There is a web project, called “samplePages”, included in the IBM Content Navigator install• Create a compression build for your JavaScript/HTML/CSS

• This ensures the customizations you add via a plug-in do not adversely effect the load time of the application

Page 51: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 51

Enterprise Content Management ECM Experience Platform

Best practices for building customizations• Follow a model-view design approach when creating your user interface extensions

This example leverages the “onSearchComplete” event in a “ecm.model.SearchTemplate” object to populate an instance of “ecm.widget.listView.ContentList”

aspect.after(searchTemplate, "onSearchComplete", lang.hitch(this, function(searchResults) {myListWidget.setResultSet(searchResults);

}));

* lang is the Dojo utility class “dojo/_base/lang”* aspect is the Dojo utility class “dojo/aspect”

Page 52: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 52

Enterprise Content Management ECM Experience Platform

Best practices for building customizations• Never submit synchronous requests to the server

Here is an example of a synchronous request:

var xmlHttpRequest = new XMLHttpRequest();xmlHttpRequest.open(“GET”, “http://localhost/myApp”, true);

Synchronous requests block code execution, which blocks the user’s browser until the request completes

Below is an example using IBM Content Navigator’s “ecm.model.Request” API to submit an asynchronous request to a plug-in provided service:

var requestParams = {};requestParams.repositoryId = this.repository.id;requestParams.repositoryType = this.repository.type;requestParams.query = “SELECT * FROM Document”;

Request.invokePluginService("SamplePlugin", "samplePluginSearchService",{

requestParams: requestParams,requestCompleteCallback: lang.hitch(this, function(response) {

// success// work with the response

})});

Page 53: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 53

Enterprise Content Management ECM Experience Platform

Best practices for building customizations• Be careful when creating dialogs inside your widget extensions – You may accidentally create a

DOM leak!When the following widget is created it also creates a Dialog widget:

define(["dojo/_base/declare”, "dijit/_Widget”, "dijit/Dialog"], function(declare, _Widget, Dialog) {

return declare("MyWidget", [ _Widget ], {postCreate: function() {

this.inherited(arguments);this.mydialog = new Dialog();

}});

});

This dialog, however, will not be destroyed when the widget is destroyed. To solve this we need to override the widget destroy method to ensure the dialog is properly cleaned up:

define(["dojo/_base/declare”, "dijit/_Widget”, "dijit/Dialog"], function(declare, _Widget, Dialog) {

return declare("MyWidget", [ _Widget ], {postCreate: function() {

this.inherited(arguments);this.mydialog = new Dialog();

},destroy: function() {

this.inherited(arguments);this.mydialog.destroy();

}});

});

Page 54: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 54

Enterprise Content Management ECM Experience Platform

Best practices for building customizations• And finally…You DO NOT have to create a new plug-in for every customization you want to

make to IBM Content Navigator• You can package all your customizations into a single plug-in

Page 55: © 2014 IBM Corporation 1 Enterprise Content Management ECM Experience Platform © 2014 IBM Corporation IBM Content Navigator.

© 2014 IBM Corporation 55

Enterprise Content Management ECM Experience Platform

Resources

• IBM Content Navigator redbook: http://www.redbooks.ibm.com/abstracts/sg248055.html?Open

• IBM Content Navigator API documentation: http://www-01.ibm.com/support/knowledgecenter/?lang=en#!/SSEUEX_2.0.3/com.ibm.developingeuc.doc/eucdi000.htm

• IBM Content Navigator forum: https://www.ibm.com/developerworks/community/forums/html/forum?id=11111111-0000-0000-0000-000000002869

• IBM Enterprise Content Management AppCenter: https://www.ibm.com/developerworks/community/groups/service/html/communityview?communityUuid=e8206aad-10e2-4c49-b00c-fee572815374