Home > Class Reference > ENSLIB namespace > %ZEN.Component.navigator
Private  Storage   

%ZEN.Component.navigator


class %ZEN.Component.navigator extends %ZEN.Component.group

The navigator component creates a combination navigation and simple settings interface similar to that found on mobile devices.
This is an HTML5 component; it will only work correctly on HTML5 compliant browsers.

Inventory


Parameters Properties Methods Queries Indices ForeignKeys Triggers
2 24 88


Summary


Properties
%condition %import %includeFiles %page
%resource align aux backgroundStyle
cellAlign cellSize cellStyle cellVAlign
children colorSetCaptions colorSetNames colorSets
columnWidth composite containerStyle currColorSet
currLevel deleteThisItemMsg disabled disclosureWidth
dragEnabled dropEnabled enclosingClass enclosingStyle
error expanded footerHeight groupClass
groupStyle headerHeight height hidden
hint hintClass hintStyle id
index label labelClass labelDisabledClass
labelPosition labelStyle language layout
name onafterdrag onarrange onbeforedrag
onbuttonclick onchange onclick onclosebuttonclick
ondrag ondrop onexpand ongetcontent
onhide onindent onpopupaction onrefresh
onselect onshow onupdate parent
showDisclosure showLabel showSliderValue slice
title tuple valign visible
width window

Methods
%AddChild %AddChildAfter %AddChildBefore %AddToSaveSet
%Attr %BindExport %ClassIsLatestVersion %ClassName
%ConstructClone %DispatchClassMethod %DispatchGetModified %DispatchGetProperty
%DispatchMethod %DispatchSetModified %DispatchSetMultidimProperty %DispatchSetProperty
%DrawComponentHTML %DrawHTML %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
GetUserFontList XMLDTD XMLExport XMLExportToStream
XMLExportToString XMLNew XMLSchema XMLSchemaNamespace
XMLSchemaType addChild addChildAfter addChildBefore
applyValue beginWait childrenMutated choiceClick
clearValue clickHandler closeButtonClickHandler collectValue
colorSetChange convertCSSToText customColorChange dragFinishHandler
dragHandler dragNotifyHandler dragStartHandler dropHandler
dropStartHandler editClick editControlApply editControlCancel
editKeyPressHandler editKeyUpHandler endWait expandHandler
exposeComponent findElement findItemByIndex fireOnUpdateEvent
getChildIndex getChooserListHTML getColorChooserHTML getColorSet
getColorTableHTML getCurrSpec getEnclosingDiv getFontChooserHTML
getHTMLForEditor getHTMLForItem getHidden getHintElement
getIconListHTML getItemContent getItemDiv getLabelElement
getLevelContent getMasterContent getMultiSelectIconListHTML getNavFooterHTML
getNavHeaderHTML getParentSpec getProperty getSettings
getType getWidth giveFocusToControl headerButtonClickHandler
hideMessage hideOverlay invokeSuper isOfType
makeId onCreate onDelete onDisplayHandler
onEndModalHandler onPopupAction onRefreshContents onSerialize
onStartModalHandler ondisabledHandler onloadHandler onunloadHandler
onupdateHandler parseStyle parseStyleSVG popSheet
popupButtonClickHandler pushSheet raiseChange refreshContents
refreshTopSheet removeChild render renderContents
renderSVG selectItem setExpanded setHeight
setHidden setOverlayMode setProperty setPropertyAll
setStyleIntoCSS setWidth showMessage showOverlay
slideInto slideOutOf sliderChanged sliderMouseDown
sliderMouseMove sliderMouseUp sliderToggleClick sliderTouchEnd
sliderTouchMove sliderTouchStart sliderValueChange startEdit
startProgressBar stepperAction stepperMouseDown stepperMouseUp
stopEdit stopProgressBar toggleExpanded toggleSwitch
transformColor tryValue update updateMasterPanel


Parameters


• parameter DEFAULTENCLOSINGCLASS = "navWrapper";
Subclasses can set this to change default enclosingClass used for this component.
• parameter DOMAIN = "%ZEN";
Localization domain

Properties


• property backgroundStyle as %ZEN.Datatype.style;
Style to apply to navigator background.
• property colorSetCaptions as list of %ZEN.Datatype.string(XMLPROJECTION="none",ZENSETTING=0);
Captions of color sets.
• property colorSetNames as list of %ZEN.Datatype.string(XMLPROJECTION="none",ZENSETTING=0);
Logical names of color sets.
• property colorSets as list of %ZEN.Datatype.string(XMLPROJECTION="none",ZENSETTING=0);
List of ;-delimited color set values for drop down.
• property columnWidth as %ZEN.Datatype.integer [ InitialExpression = 320 ];
Width of columns (in pixels). Keep at 320 for best results.
• property currColorSet as %ZEN.Datatype.string(XMLPROJECTION="none",ZENSETTING=0) [ InitialExpression = "deepsee" ];
Current color set.
• property currLevel as %ZEN.Datatype.integer(XMLPROJECTION="none",ZENSETTING=0) [ InitialExpression = 0 ];
Indicates how many levels deep the navigator is scrolled.
• property deleteThisItemMsg as %ZEN.Datatype.caption [ InitialExpression = $$$Text("Delete this item","%ZEN") ];
Warning tooltip message for delete options
• property disclosureWidth as %ZEN.Datatype.integer [ InitialExpression = 24 ];
Width of the disclosure bar on the left.
• property expanded as %ZEN.Datatype.boolean [ InitialExpression = 1 ];
If true, then show the navigator; otherwise it is contracted.
• property footerHeight as %ZEN.Datatype.integer [ InitialExpression = 0 ];
Height of footer (in pixels). Set to 0 for no footer. Set to 40 to show footer with best results.
• property headerHeight as %ZEN.Datatype.integer [ InitialExpression = 40 ];
Height of header (in pixels). Keep at 40 for best results.
• property language as %ZEN.Datatype.string(XMLPROJECTION="none");
Pass current language to client.
• property onarrange as %ZEN.Datatype.eventHandler;
onarrange event handler: Notification that the order of items in the current sheet has changed. This event is passed 3 arguments: key, swap, and final. final is true when a value is finished changing. swap is an object with the property index and newIndex, containg the index of the item to move and its new location.
• property onbuttonclick as %ZEN.Datatype.eventHandler;
onbuttonclick event handler: Notification that the user has clicked on a "header" or "footer" button.
• property onchange as %ZEN.Datatype.eventHandler;
onchange event handler: Notification that a control within the property sheet has changed value. This event is passed 3 arguments: key, value, and final. final is true when a value is finished changing (such as when the user stops pressing a stepper button).
• property onclosebuttonclick as %ZEN.Datatype.eventHandler;
onclosebuttonclick event handler: Notification that the user has clicked on an "close" button for an item.
• property onexpand as %ZEN.Datatype.eventHandler;
onexpand event handler: Notification that the user has expanded or contracted this component.
• property ongetcontent as %ZEN.Datatype.eventHandler;
ongetcontent event handler: This defines the client-side code that defines the content of a "sheet" within this component.
This is passed level, key, and value as arguments. This code should return an object with any of the following properties:
title-the title to display for the sheet.
url-if defined, the url to display as an iframe within the sheet (in the same domain).
html-custom html to display within the sheet.
childIndex-index number (0-based) of child of this component to display.
items-array of javascript objects used to define the contents.
• property onindent as %ZEN.Datatype.eventHandler;
onindent event handler: Notification that the indentation level of an item in the current sheet has changed. This event is passed 3 arguments: key, list, and final. final is true when a value is finished changing. list is a an array containing the new ordinal positions of the items.
• property onpopupaction as %ZEN.Datatype.eventHandler;
onpopupaction event handler: Notification that the user has invoked and applied a popup for an item.
• property onselect as %ZEN.Datatype.eventHandler;
onselect event handler: Notification that a new choice has been selected within the property sheet. This is also called when a "drill" item is selected. This event is passed 3 arguments: key, value, and which. which is "select" or "drill".
• property showDisclosure as %ZEN.Datatype.boolean [ InitialExpression = 0 ];
If true, show the disclosure bar on the left.
• property showSliderValue as %ZEN.Datatype.boolean [ InitialExpression = 0 ];
If true, show slider values next to the control

Methods


• 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.
• classmethod GetUserFontList() as %ZEN.Datatype.string [ ZenMethod ]
The default list of fonts available may be extended by editing the global ^zenNavigator.UserFontListCSV. This is a flat string holding the names of desired fonts, separated by commas (i.e. "Palatino Linotype,Tahoma") Names are case sentitive and subject to substitution if the named font is not found on the run time system. This function passes the value of the global to the client side renderer.
• method applyValue(value, display, pop) [ Language = javascript ]
Apply the value value and display value display to the current item. display is not passed to the callback. You can get it via the currDisplayValue property of this component.
If pop is true, pop the current frame on the navigator.
• method beginWait() [ Language = javascript ]
Start "wait" state.
• method choiceClick(evt, multi, index, choiceNo, newValue) [ Language = javascript ]
Mouse click handler for choice control. multi is true for choice-multi.
• method clearValue() [ Language = javascript ]
• method clickHandler(evt, index, forceDrill) [ Language = javascript ]
Click handler for item in sheet.
• method closeButtonClickHandler(evt, key) [ Language = javascript ]
Click handler for close button.
• method collectValue(value, final) [ Language = javascript ]
• method colorSetChange(value) [ Language = javascript ]
Change the displayed color set.
• method convertCSSToText(result) [ Language = javascript ]
Convert an object containing css values as name-values into a css string. This is used for SVG styles.
• method customColorChange(which) [ Language = javascript ]
• method editClick(evt, index) [ Language = javascript ]
Mouse click on edit control.
• method editControlApply(evt, index) [ Language = javascript ]
Apply button for edit control.
• method editControlCancel(evt, index) [ Language = javascript ]
Cancel button for edit control.
• method editKeyPressHandler(evt, index) [ Language = javascript ]
Key press handler for edit control.
• method editKeyUpHandler(evt, index) [ Language = javascript ]
Key up handler for edit control.
• method endWait() [ Language = javascript ]
End "wait" state .
• method expandHandler() [ Language = javascript ]
Fire the onexpand event handler.
• method findItemByIndex(index, level) [ Language = javascript ]
Return the item with the given index (and optional level).
• method getChooserListHTML(list, key, value, caption, help) [ Language = javascript ]
Utility method. Given a list of objects, of the form: [{caption:caption, value:value, style:style}]
key and value are the key and value for item within the navigator. Return HTML to display a chooser list based on the given values. If caption and help are defined, display them at the top.
• method getColorChooserHTML(key, value, mode) [ Language = javascript ]
Return the HTML for a color chooser panel. key and value are the key and value for item within the navigator. mode is "html" or "svg".
• method getColorSet(mode) [ Language = javascript ]
Return an array of (arrays of) the current color set.
• method getColorTableHTML(mode, value) [ Language = javascript ]
Return a HTML for the table of color choices for the current color set.
• method getCurrSpec() [ Language = javascript ]
Return the spec object for the current frame.
• method getFontChooserHTML(key, value) [ Language = javascript ]
Utility method. Return the HTML for a font chooser panel. key and value are the key and value for item within the navigator.
• method getHTMLForEditor(index, item, active, disabled) [ Language = javascript ]
Return HTML for a value editor. This draws an edit control within an item.
• method getHTMLForItem(index, item, active) [ Language = javascript ]
Return HTML for one item.
• method getIconListHTML(list, key, value) [ Language = javascript ]
Utility method. Display a set of choices as icons. Given a list of objects, of the form: [{image:url, caption:caption, value:value, style:style}]
key and value are the key and value for item within the navigator. Return HTML to display a chooser list based on the given values.
• method getItemContent(index, item, active) [ Language = javascript ]
Return HTML for the contents of an item. This draw the various cells and controls within a sheet.
• method getItemDiv(level, index) [ Language = javascript ]
Find the div element for the given item level and index.
• method getLevelContent(level, itemSpec) [ Language = javascript ]
Return the HTML content for the given level. itemSpec is the spec object for the parent of the current level. It is null for the top-most level.
• method getMasterContent(showExtra) [ Language = javascript ]
Get the HTML contents of the master panel tray.
• method getMultiSelectIconListHTML(list, key, value) [ Language = javascript ]
Utility method. Display a set of choices as icons. Given a list of objects, of the form: [{image:url, caption:caption, value:value, style:style}]
key and value are the key and value for item within the navigator. Return HTML to display a multi-select supporting chooser
• method getNavFooterHTML(level) [ Language = javascript ]
Get HTML for the footer bar.
• method getNavHeaderHTML(level) [ Language = javascript ]
Get HTML for the navigator bar (header for master panel).
• method getParentSpec() [ Language = javascript ]
Return the spec object for the parent of the current frame.
• method getWidth() [ Language = javascript ]
Get the expected width of this component in pixels.
• method giveFocusToControl() [ Language = javascript ]
Give focus to the current input control.
• method headerButtonClickHandler(key, level) [ Language = javascript ]
Click handler for header (or footer) button.
• method hideMessage() [ Language = javascript ]
Hide the message for this form.
• method hideOverlay() [ Language = javascript ]
Hide the overlay.
• method onPopupAction(popupName, action, value) [ Language = javascript ]
This client event, if present, is fired when a popup page has specified this component as its parent and fires an action.
• method onloadHandler() [ Language = javascript ]
This client event, if present, is fired when the page is loaded.
• method parseStyle(style) [ Language = javascript ]
Utility method. Split a css value into individual style values. Return an object containing these values. In addition to normal css attributes, the special attributes: "bold", "displayed","italic","underline", "smallCaps", and "shadow" are returned.
• method parseStyleSVG(style) [ Language = javascript ]
Utility method. Split an SVG css value into individual style values. Return an object containing these values.
• method popSheet() [ Language = javascript ]
Pop the top sheet (html div) off of the stack and render it. Return the current stack level.
• method popupButtonClickHandler(evt, key, url) [ Language = javascript ]
Click handler for popup button.
• method pushSheet(itemSpec) [ Language = javascript ]
Push a new item onto the stack.
• method raiseChange(key, value, final) [ Language = javascript ]
Raise the onchange event for this navigator. This is used by custom content.
• method refreshTopSheet() [ Language = javascript ]
Refresh the contents of the current top sheet.
• method renderContents() [ Language = javascript ]
Draw contents of the property sheet.
• method selectItem(index, forceDrill) [ Language = javascript ]
Select the item with the given index.
• method setExpanded(flag) [ Language = javascript ]
Expand or contract the display of this component.
• method setHeight(height) [ Language = javascript ]
Set the height (pixels) of this component.
• method setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
• method setStyleIntoCSS(cssText, style, value) [ Language = javascript ]
Utility method. Set a specific css value into the given style string.
• method setWidth(width) [ Language = javascript ]
Set the column width (pixels) of this component.
• method showMessage(msg) [ Language = javascript ]
Display a message for this form.
• method showOverlay(content) [ Language = javascript ]
Show the given content in the overlay.
• method slideInto(item) [ Language = javascript ]
Slide a new item onto the stack and render it (with animation). item is an object describing the new sheet to display.
• method slideOutOf() [ Language = javascript ]
Slide top item off of the stack and re-render (with animation).
• method sliderChanged(index, newValue, final) [ Language = javascript ]
Notification that a slider has moved. newValue is the new value.
• method sliderMouseDown(evt, index) [ Language = javascript ]
Mouse down handler for slider control.
• method sliderMouseMove(evt) [ Language = javascript ]
Mouse move handler for slider control (connected to window).
• method sliderMouseUp(evt) [ Language = javascript ]
Mouse up handler for slider control (connected to window).
• method sliderToggleClick(evt, index) [ Language = javascript ]
Click on slider toggle checkbox.
• method sliderTouchEnd(evt) [ Language = javascript ]
Touch end handler for slider control (connected to window).
• method sliderTouchMove(evt) [ Language = javascript ]
Touch move handler for slider control.
• method sliderTouchStart(evt, index) [ Language = javascript ]
TouchStart down handler for slider control.
• method sliderValueChange(event, index) [ Language = javascript ]
Notification that the user has entered an explicit value in the value text box.
• method startEdit(index) [ Language = javascript ]
Start editing within the item with the given index.
• method stepperAction(which, index, delay) [ Language = javascript ]
Apply stepper action
• method stepperMouseDown(which, index) [ Language = javascript ]
Mouse down on stepper control.
• method stepperMouseUp(which, index) [ Language = javascript ]
Mouse up on stepper control.
• method stopEdit(index, cancel) [ Language = javascript ]
Stop editing within the item with the given index.
• method toggleExpanded() [ Language = javascript ]
Expand or contract the display of this component.
• method toggleSwitch(index) [ Language = javascript ]
Toggle value of switch control.
• method transformColor(color) [ Language = javascript ]
Some charts may have use SVG colors. This is a crude translator.
• method tryValue(value, tryLevel) [ Language = javascript ]
Do a trial application of the value value to the current item. This is used by mouse-over on certain controls.
• method update(reset) [ Language = javascript ]
Refresh the contents of the property sheet. If reset is true, unhighlight and unscroll the contents.
• method updateMasterPanel(showExtra) [ Language = javascript ]
Refresh the contents of the master panel.