Class Description: The class that renders the sub workspaces configured for the current active workspace. It is instantiated by the Layout manager and is supposed to render the sub workspaces in the container Object passed by Layout manager.
Called By: cbx canvas.core.LayoutManager
Meta data Metadata to be considered: ct canvas.metadata.getLayoutsForWS(workspaceId) → This API returns a list of layouts configured for the current workspace. The component developers are expected to create that many child elements as the length of this list.
ctcanvas.metadata.getWorkSpaceById(workspaceId).WORKSPACE_LAYOUT → This API returns the Layout Type of the current workspace, i.e. the way in which the sub workspaces have to rendered. The current supported sub workspace layouts are as follows:
- STACK → Sequential manner of rendering sub workspaces.
- TAB → Tabbed manner of rendering sub workspaces.
- L - MENU → Sub workspaces rendered with a menu to the Left
- R – MENU → Sub workspaces rendered with a menu to the Right
ctcanvas.preferences.isLangDirectionRTL() → Indicates if the direction of the application is RTL.
What developers are expected to do: The component developers are expected to take care of rendering the sub work spaces as per the meta data. If there are n layouts configured for a workspace, the developers must render these considering the Layout types discussed above and activate the sub workspace at the first position by default.
Additionally, for RTL mode, the developers are expected to reverse the direction of rendering, for Layout types like Tab, L-MENU, and R-MENU.
APIs to be supported: NA
Registry Signature:
| Code Block | ||
|---|---|---|
| ||
CLCR.registerCmp({'COMP_TYPE':'PARENT_LAYOUT_CONTAINER'}, <<Layout container Class>>); |
Scope: The Layout Manager passes an object containing the following information:
| Code Block | ||
|---|---|---|
| ||
{ |
...
"layoutManager" : "The layout manager Object", |
...
"workspaceID" : "The ID of the Workspace currently active", |
...
"layoutType" : "The Layout Type of the Workspace", |
...
"elem" : "The parent element" |
...
} |
Sample Code Snippet:
| Code Block |
|---|
...
canvas.lib.layoutContainer = Class( |
...
canvas.core.Component, { |
...
layoutManager:null, |
...
workspaceID:'', |
...
constructor: function(config) { |
...
this.layoutManager = config.layoutManager; |
...
this.workspaceID = config.workspaceID; |
...
this.layoutId = config.layoutId; |
...
this.layoutType = |
...
canvas.metadata.getWorkSpaceById(this.workspaceID).WORKSPACE_LAYOUT |
...
canvas.lib.layoutContainer.$super.call(this); |
...
var layoutContainerObj = config.elem; |
...
this.addItem(layoutContainerObj); |
...
var that = this; |
...
var layoutArr = |
...
canvas.core.ws.metadata.getLayoutsForWS(this.workspaceID); |
...
var layoutContainer; |
...
switch(this.layoutType) |
...
{ case "STACK": |
...
//Renders layoutContainer as stack for ( var index = 0; index < layoutArr.length; index++) |
...
{ var rb = CRB.getBundle(layoutArr[index].LD_BUNDLE_KEY); |
...
var title = rb[layoutArr[index].LAYOUT_DISPLAY_NM]; |
...
} break; case "TAB" |
...
: //Render layoutContainer as tab for ( var index = 0; index < layoutArr.length; index++) |
...
{ var rb = CRB.getBundle(layoutArr[index].LD_BUNDLE_KEY); |
...
var title = rb[layoutArr[index].LAYOUT_DISPLAY_NM]; |
...
} break; case "L-MENU" |
...
: //Render layoutContainer as L-MENU for ( var index = 0; index < layoutArr.length; index++) |
...
{ var rb = CRB.getBundle(layoutArr[index].LD_BUNDLE_KEY); |
...
var title = rb[layoutArr[index].LAYOUT_DISPLAY_NM]; |
...
} break; case "R-MENU" |
...
: //Render layoutContainer as R-MENU for ( var index = 0; index < layoutArr.length; index++) |
...
{ var rb = CRB.getBundle(layoutArr[index].LD_BUNDLE_KEY); |
...
var title = rb[layoutArr[index].LAYOUT_DISPLAY_NM]; |
...
} break; } this.getItem(0).appendChild(layoutContainer); |
...
}, |
...
getLayoutContainer: function() |
...
{ return this.getItem(0); |
...
} |
...
}); |
...
CLCR.registerCmp({'COMP_TYPE':'PARENT_LAYOUT_CONTAINER'}, |
...
canvas.lib.layoutContainer); |
There are a lot of ways of rendering this, and the library developers can internally user CLCR again to render their components according to the layout types. On Activating a layout (if applicable), the library developers must do something like the following:
| Code Block | ||
|---|---|---|
| ||
var that = this; |
...
layout.on('activate',function() { |
...
var config = { |
...
/** |
...
* You can pass on your scope to widget container here |
...
*/ |
...
}; |
...
that.layoutManager.getWidgetContainer(config); |
...
}) |