The Portlet

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.

Called By: canvas.core.widget

Meta data to be considered: All the configurations done against the App/Widget in WIDGET_DEFINITION and WIDGET_DEFINITON_TOOL_PREF have to be respected. The various meta data information involved in different sections of the app are as follows:

App Header → App title and all the tools meta data.
App Content → The space for the views to be rendered.
App Footer → App Bottom bar meta data.

canvas.systempreferences.getToolsAsLinearFlag() → Indicates if the tools in the widget header have to be displayed as a header or as a menu.

canvas.preferences.isLangDirectionRTL() → Indicates if the direction of rendering is right to left.

What developers are expected to do: Developers are expected to render the Header, footer, and content areas as per the meta data and should add these three elements to this class, i.e. using this.addItem. This is very important as the app manager accesses these elements and assumes the following:

getItem(0) → Header
getItem(1) → Content
getItem(2) → Footer

Registry Signature:

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

Events to be raised:

CWEC.DESTROY_APP → The event allows the developers to do certain business operations when the app/widget has been destroyed completely.
CWEC.EXPAND → The event allows the developers to do certain business operations when the app/widget has been expanded from a collapsed state.
CWEC.COLLAPSED → The event allows the developers to do certain business operations when the app/widget has been collapsed or minimized.

Scope: The developers get the widget meta data using which they can render the portlet and also the multi view object where they might have to raise a few events.

Sample Code Snippet:

canvas.lib.portlet = Class(canvas.core.Component,
{
	windowid: '',
	class_names: '',
	width: '',
	height: '',
	mvConf : null,
	workspaceID: '',
	isCollapsed: false,
	isParentIND: '',
	contentHeight: '',
	constructor: function(config) 
	{
		canvas.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(!canvas.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 canvas.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 = (!canvas.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'}, canvas.lib.portlet);