The View port

Class Description: The class that is expected to render the structure of the application. All Canvas libraries are advised to have header, footer, and content spaces.

Called By: canvas.initializer

Meta data to be considered: canvas.metadata.getApplicationLayout() → gives a string corresponding to the configured Application Layout. The header, footer, and content areas are to designed specific to this meta data. The following layout types are currently available in Canvas:

• CARD
• EX-CARD
• FISH-EYE
• MENU
• TABLE-TOP
• TAB

The following picture depicts the structure of two TABLE-TOP and the CARD layout viewports respectively.

What developers are expected to do: While the core layer does not involve itself in the rendition on header and footer, it expects the library developers to instantiate the workspace manager on the HTML element where the workspaces are to be rendered, ideally the content area. Refer the following code snippet to see how this has to be done.

The component developers might also have to render or activate the first workspace from this container, if the workspace rendering mechanism does not automatically take care of activating the workspace in the first position.
The developers should also be aware of the on demand loading strategies and should register all their base JavaScript files for their library in the following format in canvasondemandjs.xml.

                   on demand file set id = (framework Id)_(CT_VIEW_BASE),
For example, a jQuery UI component developer can do this as follows:
                   on demand file set id = jqui_CT_VIEW_BASE
Registry Signature:

CLCR.registerCmp({'VIEW_TYPE':'VIEWPORT'}, <<View port class>>);

Scope: The core layer does not pass anything significant here for the library developers to consider.

Sample Code Snippet:

canvas.lib.viewport = Class(canvas.core.Component, 
{ 
	initialize: function() 
	{
		// This is the config which will be passed to Workspace Manager
		var viewportConfig = 
		{
			"eleType": "div",
			"id":"JQM-CONTENT"
		}; 
		var viewportConfigObj = new canvas.lib.layer(viewportConfig).getLayer();
		this.addItem(viewportConfigObj); 
		var config = 
		{
			elem: viewportConfigObj
		}; 
		var applicationLayout = canvas.core.metadata.getApplicationLayout(); 
		var headerClass = CLCR.getCmp(
		{
			'COMP_TYPE':'APPLICATION_HEADER',
			'LAYOUT':applicationLayout
		}); 
		var header = new headerClass(); 
		$('#HEADER_DIV').append(header.getItem(0).html()); 
		var footerClass = CLCR.getCmp(
		{
			'COMP_TYPE':'APPLICATION_FOOTER',
			'LAYOUT':applicationLayout
		}); 
		if(footerClass)
		{
			var footer = new footerClass();
			$('#FOOTER_DIV').append(footer.getItem(0)); 
		}
		var that = this; 
		setTimeout(function()
		{
			/* 
			*  Calling the core workspace manager to assign it to this.wsManager 
			*  with the config object containing the viewport component.
			*/
			that.wsManager = new canvas.core.WSManager(config);
			/*
			*  Adds the app container as viewport's child. 
			*  This app container contains the workspace container.
				*/
			that.getItem(0).appendChild(that.wsManager.getContainer().getAppContainer());
			$("#CONTENT_DIV").prepend(that.getItem(0));
		},500); 
		$(document).ready(function()
		{
			setTimeout(function()
			{
				canvas.lib.utility.loadInitialWorkspace();
			},500);
		});
	}
}); 
CLCR.registerCmp({'VIEW_TYPE':'VIEWPORT'}, canvas.lib.viewport);