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.

...


Registry Signature:

CLCR.registerCmp({'COMP_TYPE':'PORTLET'}, <<portlet class>>);

APIs to be supported:

...

Sample Code Snippet:

Code Block
languagejs

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);