%ZEN.Component.activeVGroup
deprecated class %ZEN.Component.activeVGroup extends %ZEN.Component.activeGroup
%ZEN.Component.activeVGroup The active vertical group is a client-side (JavaScript-heavy) container widget designed for creating binary partitions of an area of the active display. An activeVGroup is always specified with exactly two children (any excess are ignored). These children may have an arbitrary number of children of their own but at the top level the strict limit is enforced.On the client-side, the component will be rendered as a split pane with top and bottom partitions, potentially separated by an adjustment handle. If no geometry restrictions are specified, the component will attempt to size itself to fill all available space remaining in the browser window (this behavior, can of course be overridden by CSS).
There are several properties governing the nature and handling of the partioning. The split may be speficied as an absolute reserve of pixels for the top or bottom pane (with excess pixels going to the other) or as a constant percentage to be reapportioned in actual pixels whenever the widget's container is resized. The split can be marked as either fixed or user-adjustable. It is possible specify child panes that slide open to a predefined taller height when the mouse rolls over them and auto-close when the mouse leaves the region. In the case of auto-expanding panes, it is possible to define sound effects to accompany the animation.
Property Inventory
Method Inventory
- %DrawHTML()
- getController()
- installResizeHandlers()
- onRefreshContents()
- onloadHandler()
- restoreSplit()
- setProperty()
- showBottomOnly()
- showTopOnly()
Parameters
parameter DEFAULTENCLOSINGCLASS = activeGroup;
To be compatible with the static layout manager the enclosing class
has to be the generic activeGroup rather than the specific activeVGroup
The activeVGroup is the one used for tuning attributes of the absolutely
positioned elements.
parameter INCLUDEFILES = zenCSLM.js,zenActiveVGroup.js;
Inherited description: 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.
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.
Properties
property autoExpand as %ZEN.Datatype.string;
If defined, this property indicates that one of the two panels
is an auto-open/auto-close sidebar panel and that the panel should
expand when the mouse enters its "split"-defined bounds and grow
until it reaches the height given in the autoExpand parameter. The
value is always interpreted in pixels. A positive value designates
the top pane for auto-expansion. A negative value designates the
bottom.
The default value (null) indicates that the auto-expansion feature is not used by this instance of the widget.
The default value (null) indicates that the auto-expansion feature is not used by this instance of the widget.
Property methods: autoExpandDisplayToLogical(), autoExpandGet(), autoExpandIsValid(), autoExpandLogicalToDisplay(), autoExpandLogicalToOdbc(), autoExpandNormalize(), autoExpandSet()
property handlePattern as %ZEN.Datatype.string;
This indicates a file name for an image to use for painting the
dragable partition handle. This image should be at least as tall
as the handle thickness and is repeated horzontally along the
length of the handle.
The default value is a PNG file of a top-highighted gray gradient, bounded by black on either side.
The default value is a PNG file of a top-highighted gray gradient, bounded by black on either side.
Property methods: handlePatternDisplayToLogical(), handlePatternGet(), handlePatternIsValid(), handlePatternLogicalToDisplay(), handlePatternLogicalToOdbc(), handlePatternNormalize(), handlePatternSet()
property handleThickness as %ZEN.Datatype.string;
This indicates the height of the pane partition handle in pixels.
Due to the dynamic functional nature of the element, the height of
this bar cannot be set via CSS and must be specified via this
property.
The default value is "7", resulting a drag handle a little under one eight of an inch (2 mm) thick on most screens.
The default value is "7", resulting a drag handle a little under one eight of an inch (2 mm) thick on most screens.
Property methods: handleThicknessDisplayToLogical(), handleThicknessGet(), handleThicknessIsValid(), handleThicknessLogicalToDisplay(), handleThicknessLogicalToOdbc(), handleThicknessNormalize(), handleThicknessSet()
property noResize as %ZEN.Datatype.string;
if true, this indicates that the user is not to be allowed to
resize the panes.
If false, user adjustment of the pane sizes is allowed via dragging the pane handle with the mouse. If user resizing is enabled, the mouse pointer will change to a north-south resize cursor when the mouse is in potential drag position.
The default value is "false"
If false, user adjustment of the pane sizes is allowed via dragging the pane handle with the mouse. If user resizing is enabled, the mouse pointer will change to a north-south resize cursor when the mouse is in potential drag position.
The default value is "false"
Property methods: noResizeDisplayToLogical(), noResizeGet(), noResizeIsValid(), noResizeLogicalToDisplay(), noResizeLogicalToOdbc(), noResizeNormalize(), noResizeSet()
property onresizeBottom as %ZEN.Datatype.eventHandler;
onresizeBottom event handler:
This event is fired when the bottom panel of this component is resized
Property methods: onresizeBottomDisplayToLogical(), onresizeBottomGet(), onresizeBottomIsValid(), onresizeBottomLogicalToDisplay(), onresizeBottomLogicalToOdbc(), onresizeBottomNormalize(), onresizeBottomSet()
property onresizeTop as %ZEN.Datatype.eventHandler;
onresizeTop event handler:
This event is fired when the top panel of this component is resized
Property methods: onresizeTopDisplayToLogical(), onresizeTopGet(), onresizeTopIsValid(), onresizeTopLogicalToDisplay(), onresizeTopLogicalToOdbc(), onresizeTopNormalize(), onresizeTopSet()
property soundFX as %ZEN.Datatype.string;
This indicates a sound file to be played when an auto-expansion
window grows or shrinks. If not defined or null, no sound
accompanies the animation.
The default is "null"
The default is "null"
Property methods: soundFXDisplayToLogical(), soundFXGet(), soundFXIsValid(), soundFXLogicalToDisplay(), soundFXLogicalToOdbc(), soundFXNormalize(), soundFXSet()
property split as %ZEN.Datatype.string;
Defines the division between the two panes.
A value with a % sign is interpreted as a proportional division between the top and bottom panes and is recalculated to maintain this ratio whenever the base division is resized by any means. Manual adjustment of the value continues to be interpreted as a percentage split.
A positive value not constaining a percent sign is interpreted as a fixed reserve height for the top child. Any adjustments to the total height of the base container are reflected in the geometry of the bottom pane only.
A negative value (which cannot contain a % sign) is interpreted as a fixed height for the bottom pane. Any adjustments to the total height of the base container are reflected in the geometry of the top child.
Manual adjustment of a top or bottom reserved height will change the size of the reserve and these fixed sizes will be respected even as the window is resized.
The default split is "50%"
A value with a % sign is interpreted as a proportional division between the top and bottom panes and is recalculated to maintain this ratio whenever the base division is resized by any means. Manual adjustment of the value continues to be interpreted as a percentage split.
A positive value not constaining a percent sign is interpreted as a fixed reserve height for the top child. Any adjustments to the total height of the base container are reflected in the geometry of the bottom pane only.
A negative value (which cannot contain a % sign) is interpreted as a fixed height for the bottom pane. Any adjustments to the total height of the base container are reflected in the geometry of the top child.
Manual adjustment of a top or bottom reserved height will change the size of the reserve and these fixed sizes will be respected even as the window is resized.
The default split is "50%"
Property methods: splitDisplayToLogical(), splitGet(), splitIsValid(), splitLogicalToDisplay(), splitLogicalToOdbc(), splitNormalize(), splitSet()
Methods
method %DrawHTML()
The HTML generated here is NOT the final DOM structure of this
component. At the client, the information embedded here will be
used to build a more complex DOM subtree under the control of
an active client-side layout manager. The exact structure of this
expansion is not important for most users of this particular
component, however, it _is_ useful to not that the handle dividing
the panes is of the HTML class zenHPaneHandle for the purposes of
CSS style references.
clientmethod getController() [ Language = javascript ]
clientmethod installResizeHandlers() [ Language = javascript ]
Install or update the resize callbacks associated with this instance
clientmethod onRefreshContents() [ Language = javascript ]
Inherited description: This client event, if present, is fired when the page is loaded.
clientmethod onloadHandler() [ Language = javascript ]
The code generated by the server is NOT the complete structure
for the activeHGroup. Like other client-side layout managers,
only the necessary meta-data is sent to the client. The main
processing logic is stored in a client-side, cache-able
JavaScript file (zenActiveHGroup.js) To complete the connection
between the meta-data description and the code library, the
manager class must be registered with the generic client-side
layout manager. The generic manager maintains a list of classes
that require special handling and the JavaScript code bodies that
perform such handling. A call to ZLM.initLayout() scans the DOM
to find any meta-data classes (such as this one) and "unpacks"
them into DOM structures for local geometry maintenance. This
is all done behind the scenes via the Zen classes onload handler.
clientmethod restoreSplit() [ Language = javascript ]
clientmethod setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
clientmethod showBottomOnly() [ Language = javascript ]
clientmethod showTopOnly() [ Language = javascript ]
Inherited Members
Inherited Properties
- %condition
- %import
- %includeFiles
- %page
- %resource
- align
- aux
- children
- composite
- containerStyle
- disabled
- dragEnabled
- dropEnabled
- enclosingClass
- enclosingStyle
- error
- height
- hidden
- hint
- hintClass
- hintStyle
- id
- index
- label
- labelClass
- labelDisabledClass
- labelStyle
- name
- onafterdrag
- onbeforedrag
- ondrag
- ondrop
- onhide
- onrefresh
- onshow
- onupdate
- parent
- showLabel
- slice
- title
- tuple
- valign
- visible
- width
- window
Inherited Methods
- %AddChild()
- %AddChildAfter()
- %AddChildBefore()
- %AddToSaveSet()
- %Attr()
- %BindExport()
- %ClassIsLatestVersion()
- %ClassName()
- %ConstructClone()
- %DispatchClassMethod()
- %DispatchGetModified()
- %DispatchGetProperty()
- %DispatchMethod()
- %DispatchSetModified()
- %DispatchSetMultidimProperty()
- %DispatchSetProperty()
- %DrawComponentHTML()
- %DrawJSStrings()
- %EnclosingDivId()
- %Eval()
- %EvalC()
- %Extends()
- %ForceClientRender()
- %GetChildIndex()
- %GetEventHandlers()
- %GetParameter()
- %GetXMLName()
- %IsA()
- %IsModified()
- %MakeId()
- %New()
- %NormalizeObject()
- %ObjectModified()
- %OnAddToPageAfter()
- %OnAddToPageBefore()
- %OnDrawEnclosingDiv()
- %OnDrawObjectProperties()
- %OnMutateChildren()
- %OnObjectSynch()
- %OnZENDeserialize()
- %OriginalNamespace()
- %PackageName()
- %QuoteValue()
- %QuoteValueL10N()
- %RemoveChild()
- %RemoveChildren()
- %RemoveFromSaveSet()
- %Self()
- %SerializeObject()
- %SetModified()
- %ValidateObject()
- XMLDTD()
- XMLExport()
- XMLExportToStream()
- XMLExportToString()
- XMLNew()
- XMLSchema()
- XMLSchemaNamespace()
- XMLSchemaType()
- addChild()
- addChildAfter()
- addChildBefore()
- childrenMutated()
- dragFinishHandler()
- dragHandler()
- dragNotifyHandler()
- dragStartHandler()
- dropHandler()
- dropStartHandler()
- exposeComponent()
- findElement()
- fireOnUpdateEvent()
- getChildIndex()
- getEnclosingDiv()
- getHidden()
- getHintElement()
- getLabelElement()
- getProperty()
- getSettings()
- getType()
- invokeSuper()
- isOfType()
- makeId()
- onCreate()
- onDelete()
- onDisplayHandler()
- onEndModalHandler()
- onPopupAction()
- onSerialize()
- onStartModalHandler()
- ondisabledHandler()
- onunloadHandler()
- onupdateHandler()
- refreshContents()
- removeChild()
- render()
- renderContents()
- renderSVG()
- setHidden()
- setOverlayMode()
- setPropertyAll()
- startProgressBar()
- stopProgressBar()