Class Description: An app consists of basically two distinguishable areas, one is the static portion of the app that is purely driven based on configuration in the data source by the business developers and the other one is the dynamic content that is the actual business data. The portlet takes care of the former i.e. the static meta data content like header, footer, bottom bar tools, etc and sets up the main content area where the business data ought to be rendered.
...
- getItem(0) → Header
- getItem(1) → Content
- getItem(2) → Footer
Registry Signature:
| Code Block | ||
|---|---|---|
| ||
CLCR.registerCmp({'COMP_TYPE':'PORTLET'}, <<portlet class>>); |
APIs to be supported:
API | Purpose | Arguments |
|---|---|---|
getViewObj | It is up to the view layer when to append itself to the portlet, i.e. every view might have its own asynchronous calls. Since the Canvas core layer needs access to the multi view object, the component needs to expose this API, where it is supposed to return the multi view object associated with the portlet. | NA |
setViewObject | The API that sets the view Object and stores the reference in this class, to perform business operations. | Obj → multi view object |
...
Sample Code Snippet:
| Code Block | ||
|---|---|---|
| ||
cbx.lib.portlet = Class(cbx.core.Component,
{
windowid: '',
class_names: '',
width: '',
height: '',
mvConf : null,
workspaceID: '',
isCollapsed:false,
isParentIND: '',
contentHeight: '',
constructor: function(config)
{
cbx.lib.portlet.$super.call(this);
this.widgetConfig = config.widgetConfig;
this.widgetMD = config.widgetMD;
this.widgetId = this.widgetConfig.WIDGET_ID;
this.widgetMetadata = config.widgetMD;
this.isParentInd = this.widgetConfig.CONTAINER_FLAG;
this.viewMD = this.isParentInd=="Y"?config.widgetMD.MULTI_WIDGET_MD:config.widgetMD;
this.renderContainer();
if(this.widgetConfig.WGT_HEADER_IND=="Y")
{
var header = this.createHeader();
this.portlet.appendChild(header);
this.addItem(header);
}
var content = this.createContent();
this.portlet.appendChild(content);
this.addItem(content)
if(!cbx.isEmpty(this.widgetMD.FLD_BBAR_BUTTONS))
{
var footer = this.createFooter();
this.portlet.appendChild(footer);
this.addItem(footer);
}
},
renderContainer : function()
{
/*
* TODO : Render the parent container using the following
* this.widgetConfig.WIDGET_PXL_HT -> The pixel height conf for the portlet
*/
var portletContainerConf =
{
"eleType":"div",
"class":this.widgetId,
"id":this.widgetId+"_PORTLET
}
this.portlet = new cbx.lib.layer(portletContainerConf).getLayer();
},
createHeader : function()
{
// TODO : Render Header using this.widgetMD and this.viewMD
var title = this.widgetConfig.WGT_DISPLAY_NM||this.widgetConfig.WGT_TITLE||"";
var bundleKey = this.isParentInd=="Y"?this.viewMD['WIDGET_BUNDLE_KEY']:this.viewMD['FLD_BUNDLE_KEY'];
/*
* TODO : Render the title using the key and the bundle
*/
var toolsConf = (!cbx.isEmpty(this.widgetMD.FLD_TOOLS_LIST)) ?
(this.widgetMD.FLD_TOOLS_LIST.match(/[,]/)) ? this.widgetMD.FLD_TOOLS_LIST.split(",") : this.widgetMD.FLD_TOOLS_LIST : [];
/*
* Render tools in the header using toolsConf above
*/
},
createContent : function()
{
/*
* TODO : Generate the space for content area
*/
},
createFooter : function()
{
var bBarConf=IMM.getViewDefinition(this.widgetConfig.WIDGET_ID).getBBarButtons();
var negativeButtons = bBarConf.NEGATIVE_BUTTONS;
var possitiveButtons = bBarConf.POSITIVE_BUTTONS;
/*
* TODO : Render positive and negative buttons using the following
*/
}
});
CLCR.registerCmp({'COMP_TYPE':'PORTLET'}, cbx.lib.portlet);
|
...