The Widget container
Class Description: This class is responsible for constructing the widget container, i.e the container of all the Apps in a sub workspace and also instantiates the widgets as per meta data.
Called By: canvas.core.LayoutManager
Meta data to be considered: canvas.metadata.getAppsByLayoutId(workspaceId,layoutId) → Gives the Portlet information of individual apps that have been configured against the sub workspace.
canvas.workspace.metadata.getUpdatedLayoutDef(layoutId).LAYOUT_LAYOUT → The Configured Layout type of the sub workspace. Sub workspaces today support the following layouts:
- STACK → Sequential manner of rendering widgets
- Two Column → Sub workspaces of this configuration render apps in two columns.
- Three Column→ Sub workspaces of this configuration render apps in three columns.
What developers are expected to do: Developers are expected to render the Container based on the meta data and should also instantiate the Widget class by passing this class. This is important as widgets involve asynchronous processing and hence the Canvas core finally looks to append the widget object to the widget container element.
APIs to be supported:
API | Purpose | Arguments |
---|---|---|
appendChild | To append the portlet to the widget container element. The core layer instantiates the portlet after fetching the meta data and calls this API for the component to append it in the appropriate container i.e. left/right/center. | Object with the following key value pairs |
Registry Signature:
CLCR.registerCmp({'COMP_TYPE':'WIDGET_CONTAINER'}, <<Widget container class>>);
Scope: Other than what the developers pass through layout container, the layout manager also passes its own reference.
Sample Code Snippet:
canvas.lib.widgetContainer = Class(canvas.core.Component, { /* Initializes the widget container.*/ layoutID: '', workspaceID: '', odProduct: '', odSubProduct: '', widgetsArray: null, appMVRegistry : null, commManager : null, totalApps : 0, constructor: function(config) { /*Adds the widget container as a child item for the sub-workspace/layout container.*/ canvas.lib.widgetContainer.$super.call(this); this.layoutID = config.layoutID; this.workspaceID = config.workspaceID; this.portal = config.portal; this.addRequestQueue = []; this.widgetsArray = new Array(); this.createContainer(); }, renderContainer : function() { var widgetContainerConf = { "eleType":"div", "class":this.layoutID, "id":this.layoutID+"WIDGET_CONTAINER" } var widgetContainer = new canvas.lib.layer(widgetContainerConf).getLayer(); this.addItem(widgetContainer); var layout = canvas.workspace.metadata.getUpdatedLayoutDef(this.layoutID).LAYOUT_LAYOUT; switch(layout) { case "STACK": /* * Initialize stack class and assign to this.portal * e.g this.portal = new canvas.lib.stack() */ break; case "TWO-COLUMN": /* * Initialize two column class and assign to this.portal * e.g this.portal = new canvas.lib.stack() */ break; case "THREE-COLUMN": /* * Initialize two column class and assign to this.portal * e.g this.portal = new canvas.lib.stack() */ break; } this.initializeApps(); } //Initializes the apps/widgets available for that sub workspace. initializeApps: function() { var apps = canvas.core.ws.metadata.getAppsByLayoutId(this.workspaceID, this.layoutID); this.totalApps = apps.length; for( var i = 0, len = apps.length; i < len; i++ ) { if(canvas.isEmpty(apps[i].BLOCK_POSITION)) { apps[i].BLOCK_POSITION='CENTER'; } var config; config = { "widgetConfig": apps[i], "workspaceID": this.workspaceID, "widgetContainer":this }; var widgetObj = new canvas.core.Apps(config); this.widgetsArray[i] = widgetObj; } }, /* * Appending the corresponding app to the left or right column * based on the metadata * * @param : childConfig * { * CHILD : The actual child element * POSITION : The numbered position e.g 1 or 2 * BLOCK_POSITION : "LEFT" or "RIGHT" * } */ appendChild : function(childConfig) { //TODO : Logic to append the portlet to the portal columns here } }); CLCR.registerCmp({'COMP_TYPE':'WIDGET_CONTAINER'}, canvas.lib.widgetContainer);