class %ZEN.Component.snapGrid
extends activeGroup
%ZEN.Component.snapGrid is a dynamic layout control designed to organize
dragGroups in a tiled layout with an automatic snap to grid feature.
The underlying grid is defined by the number of rows and columns requested.
The resulting gird is a normalized space where, for example a four column layout
would result in each column being 25% of the total width wide.
The grid itself does not scroll, however the dragGroups themselves may.
The layout may be further refined into portrait and landscape modes such that
the number of columns and rows may change if the geometry of the widget itself
becomes taller than it is wide (or vise versa). This is particularly useful
for adapting layouts on tablet devices such as the iPad.
• parameter DEFAULTENCLOSINGCLASS = "activeGroup";
To be compatible with the static layout manager the enclosing class
has to be the generic activeGroup rather than the specific snapGridGroup
The snapGridGroup is the one used for tuning attributes of the absolutely
positioned elements.
• parameter INCLUDEFILES = "zenCSLM.js,zenSnapGrid.js";
CSV list of additional include files (either .js or .css) that
should be included when this component is used on a page.
By default, the file extension (.js or .css) is used to determine whether an
item in the list is a script include or a style include. You can override
this behavior by adding the terms "script:" or "style:" to the beginning of
the file name or names. This prefix is not used as part of the include filename.
• property cols
as %ZEN.Datatype.integer [ InitialExpression = 3 ];
If defined, this is used to define the number of columns used for both
portrait and landscape layouts
• property colsLandscape
as %ZEN.Datatype.integer;
If defined, this is used to define the number of columns when the rendered
width of the widget is greater than or equal to its height
• property colsPortrait
as %ZEN.Datatype.integer;
If defined, this is used to define the number of columns when the rendered
width of the widget is less than its height
• property rows
as %ZEN.Datatype.integer [ InitialExpression = 2 ];
If defined, this is used to define the number of rows used for both
portrait and landscape layouts
• property rowsLandscape
as %ZEN.Datatype.integer;
If defined, this is used to define the number of rows when the rendered
width of the widget is greater than or equal to its height
• property rowsPortrait
as %ZEN.Datatype.integer;
If defined, this is used to define the number of rows when the rendered
width of the widget is less than its height
• method %DrawHTML()
Static HTML display method: draw the BODY of this component
as HTML.
Subclasses implement this in order to render the static HTML
contents of a component.
• method broadcast(signal, value)
[ Language = javascript ]
Send one of several predefined signals to each of the active DragGroup windows associated
with this group. Valid signals to pass include:
"resize" - call the onresize handler (if any) for each window
"disableResize" - remove the resize pip from the lower right corners of the windows
"disableMaxToggle" - reset mouse clicks on the header to the default (drag) behavior
"enableMaxToggle" - redefine the window header to be a maximize button rather than a drag handle
"enableResize" - restore the resize pip to the lower right corners of the windows
"removeDragHeader" - completely hide the drag handle and resize the window to use the recovered space
"restoreDragHeader" - restore the drag handle and resize the window to account for the newly used space
"setHeaderStyle" - given a JSON representation of a style object in value, add the given rules to the existing style of the drag header
"setHeaderLayout" - set the headerLayout property of all children to the given value
• method forceRefresh()
[ Language = javascript ]
Force a refresh of the grid size based of the current geometries
• method getGroupManager()
[ Language = javascript ]
Find the clientside group manager for this projection
• method getWallpaperDiv()
[ Language = javascript ]
Return the HTML node used as the backdrop for the snapGrid.
• method onloadHandler()
[ Language = javascript ]
This client event, if present, is fired when the page is loaded.
• method setProperty(property, value, value2)
[ Language = javascript ]
Set the value of a named property.
