Propertysheet |
Creates a property sheet which helps to display and manipulate the properties of an object.
Syntax
HTML |
<div cordysType='wcp.library.util.PropertySheetLibrary' id=propertysheetID > ... </div> |
To dynamically add and initialize this component, you can use theinitializeHTMLElementsoraddTypemethods of the Application object.
Schema
The properties of an object is defined by a schema that identifies the items that can be present in the object. For more information on how the schema can be defined, please refer to Schema.
Usage
Once a schema is defined, it is given as an input to the component by setting the properties property of the component. After setting this property, the methods refresh or open can be called from the component which will display the properties of the object in the form of a property sheet in a comprehensive way.
By default the component opens the property sheet in an application which is defined as follows:
XML |
<script type="cordys/xml id="propertiesApplication"> <Application> <caption>Properties</caption> <description>Activity</description> <url>/cordys/wcp/library/util/propertysheet.htm</url> <id>Properties_Editor</id> <frame docked="false" left="500" top="200" width="350" height="300">left</frame> </Application> </script> |
However, this can be changed by setting the inline property of the component to 'true'. The properties exposed for the propertysheet are as follows:
Table 1. List of Attributes
Attribute |
Property |
Description |
|---|---|---|
showAnnotation |
showAnnotation |
Boolean that defines whether the "annotation" can be shown for all the properties in the property sheet. If set to false, then the annotation will not appear for all the properties displayed in the property sheet. Possible values are:
|
applicationID |
N/A |
Sets theapplicationIDproperty, which is a string that denotes the unique identifier of the application in which the property sheet will be opened. |
caption |
N/A |
Sets thecaptionproperty, which is a string that denotes the caption of the application in which the property sheet is displayed. |
description |
N/A |
Sets thedescriptionproperty, which is a string that denotes the description of the application in which the property sheet is displayed. |
frame |
N/A |
Sets theframeproperty, which is a string that defines the name of the frame in which the property sheet can be opened. Theframeproperty should be the name of one of the eight docks available in the Process Platform Ajax Toolkit application Framework. |
String that specifies whether the property sheet is opened as a separate application or inside the same application. |
||
Object that denotes an alternate application that can be opened from the Property Sheet. |
||
Object that denotes the XML document that contains the Schema definition of the properties that belong to an object.This property should be set only when inline property is set to 'true'. |
||
Object that denotes the XML data of the actual object for which the Properties are displayed in the property sheet. |
||
region |
N/A |
Sets theregionproperty, which is a string that defines the name of the region in which the property sheet can be opened. |
Object that denotes the XML document that contains the Schema definition of the properties that belong to an object. |
||
Object that denotes the XML document that contains the Schema definition of the properties that belong to an object. Note: The |
Once the properties are defined in the propertysheet, the data can be displayed to the user for display or manipulated by calling the methods refresh or open . The method to be called depends on whether the inline property of the component is set to 'true' or 'false'. The following API are exposed for the component:
Table 2. List of Methods
Method |
Description |
|---|---|
close |
Closes the property sheet. This method can be called only when the inline property of the component is set to 'false'. |
Displays the property sheet. |
|
refresh |
Refreshes the property sheet with new data. This method opens the property sheet if it is not opened already.This method can be called when the inline property of the component is set to 'true'. |
getApplicationID |
Gets the value of the applicationID property. |
setApplicationID |
Sets the applicationID property, which is a string that denotes the unique identifier of the application in which the property sheet will be opened.This method can be used only when inline property is set to 'false'. |
getCaption |
Gets the value of the caption property. |
setCaption |
Sets the caption property, which is a string that denotes the caption of the application in which the property sheet is displayed.This method can be used only when inline property is set to 'false'. |
getDescription |
Gets the value of the description property. |
setDescription |
Sets the description property, which is a string that denotes the description of the application in which the property sheet is displayed.This method can be used only when inline property is set to 'false'. |
getFrame |
Gets the value of the frame property. |
setFrame |
Sets the frame property, which is a string that defines the name of the frame in which the property sheet can be opened. The frame property should be the name of one of the eight docks available in the Process Platform Ajax Toolkit application framework.This method can be used only when inline property is set to 'false'. |
Table 3. List of Events
Event |
Description |
|---|---|
Fires when the properties for any of the item displayed in the property sheet is changed. |
Example
The following example shows the usage of this library:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html onapplicationready ="initializeForm()"> <head> <title>propertySheet library Example</title> <script type="text/javascript" src="/cordys/wcp/application.js"></script> <script type="text/javascript"> var currentItem = null; var treeData = null; function initializeForm() { expressiontree.setTreeData(expressionData.XMLDocument); expressiontree.getRoot().expandAll(); } function showProperties(selectedNode) { var properties; currentItem = selectedNode; if (selectedNode.data.tagName == "formula") { properties =cordys.cloneXMLDocument(cordys.selectXMLNode(propertysheetSchema.XMLDocument,".//*[local-name()='formula']")); properties.removeChild(cordys.selectXMLNode(propertysheetSchema.XMLDocument,".//*[local-name()='expression']")); } else if (selectedNode.data.tagName == "expression") { properties = cordys.selectXMLNode(propertysheetSchema.XMLDocument,".//*[local-name()='expression']").cloneNode(true) properties.appendChild(propertyType.XMLDocument.documentElement.cloneNode(true)); } propSheet.cordysProperties = properties; propSheet.propertyValues = selectedNode.data; propSheet.refresh(); } function propertyChanged() { currentItem.data = propSheet.propertyValues; if (currentItem.data.tagName == "formula") { currentItem.getLabel().innerHTML = cordys.getNodeText(currentItem.data,".//*[local-name()='type']"); } else { var data = cordys.selectXMLNode(currentItem.data,".//*[local-name()='type'][@default='true']"); if (data) currentItem.getLabel().innerHTML = cordys.getTextContent( data ); else if (cordys.selectXMLNode(currentItem.data,".//*[local-name()='type']")) { currentItem.getLabel().innerHTML = cordys.getNodeText(currentItem.data,"type"); } } currentItem.getLabel().title = cordys.selectXMLNode(currentItem.data,".//*[local-name()='description']") ? currentItem.data.selectSingleNode("description").text : ""; treeData = updateContentData(); } function updateContentData() { var xml = contentData.XMLDocument.documentElement.cloneNode(true); var children = expressiontree.root.getChildContainer().childNodes; for (var I = 0; I < children.length; I++) { childItem = children[i].getChildContainer().childNodes; var newItem = children[i].getTreeItem().data.ownerDocument.createElement(children[i].data.tagName); var mainNodes = cordys.selectXMLNodes(children[i].data,"*"); for (var j = 0; j < mainNodes.length; j++) { if (mainNodes[j].childNodes.length == 1) newItem.appendChild(mainNodes[j].cloneNode(true)); } for (var j = 0; j < childItem.length; j++) { newItem.appendChild(childItem[j].data.cloneNode(true)); } xml.appendChild(newItem); } return xml; } function popup() { var doc= cordys.loadXMLDocument(cordys.getXML(expressiontree.treeData)); Xmlutil.xmlPopup(doc.documentElement, false, "Expressions Data"); } </script> <script type=cordys/xml id="propertySchema"></script> <script type=cordys/xml id="contentData"><definition/></script> <script type=cordys/xml id="propertysheetSchema"> <formula annotation="A collection of one or more expressions. Formula denotes the logical grouping of one or more expressions."> <description type="string" path="description" annotation="The description of the formula. This will appear just as a tooltip for each formula."/> <type required="true" msg="There should be a name for the formula" type="string" path="type" annotation="The actual name of the formula, for example, 'Arithmetic Operator'. This value should be unique."/> <expression annotation="The actual expression that will be used in the query. The expression can be an operator or combination of one or more operators that make an expression or the name of a function."> <description type="string" path="description" annotation="The description of the expression. This appears just as a tooltip."/> <types type="expandable" path="*" minOccurs="0" maxOccurs="unbounded" annotation="The actual value of the expression."> <value href="@Type"/> </types> <schema type="xml" path="schema" annotation="This denotes the definition of the expression. Useful in the case of functions where the parameters of the function needs to be defined. Reserved for future use."> </schema> </expression> </formula> </script> <script type=cordys/xml id="propertyType"> <PropertyTypes visible="false"> <Type annotation="There can be one or more representation (type)."> <type required="true" msg="Type cannot be empty !" path="*" type="string" annotation="There can be one or more 'type' for an expression, meaning there can be one or more representation for the same expression."/> <default prompt="@default" path="*/@default" type="check" onclick="getItem()" annotation="This is an attribute for each 'type'. Setting this to true will ensure that at least one type is used by default by the query builder. There can be more than 1 type, but only one type should be the default."/> </Type> </PropertyTypes> </script> <script type=cordys/xml id="expressionSchema"> <TreeSchema> <searchPath>//definition/</searchPath> <Root> <description>Expressions</description> </Root> <TreeItem id="formulaID"> <searchPath>formula</searchPath> <description>type</description> <onselect>showProperties</onselect> </TreeItem> <TreeItem id="expressionID"> <searchPath>expression</searchPath> <description>type</description> <onselect>showProperties</onselect> </TreeItem> </TreeSchema> </script> <script type=cordys/xml id="expressionData"> <definition> <formula> <type>DateTime Functions</type> <description>DateTime functions in SQL Server</description> <expression> <description>Current date</description> <type default="true">getdate</type> <schema type="operator"/> </expression> <expression> <description>Addition of two dates</description> <type default="true">DateAdd</type> <schema type="operator"/> </expression> <expression> <description>Difference of two dates</description> <type default="true">DateDiff</type> <schema type="operator"/> </expression> <expression> <description>Part of the date</description> <type default="true">datepart</type> <schema type="operator"/> </expression> </formula> <formula> <type>Aggregate Functions</type> <description>Aggregate functions in SQL server</description> <expression> <description>Statistical standard deviation</description> <type default="true">STDEV</type> <schema type="operator"/> </expression> </formula> <formula> <type>Comparison Operators</type> <description>List of comparison operators</description> <expression> <description>Not equal to</description> <type default="true">!=</type> <type> < > </type> <schema type="operator"/> </expression> </formula> </definition> </script> </head> <body bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" topmargin="0"> <div cordysType= "wcp.library.util.XMLUtil" id="Xmlutil"></div> <div cordysType= "wcp.library.ui.Toolbar" class="light" id="toolbar" onselectstart="return false" style="width:100%"> <span title="View content in XML Editor" id="popupButton" onclick="popup()"> View Content <img src="/cordys/wcp/images/editview.gif" width="18px" height="18px" align="absmiddle"> <img> </div> <div id="contentDiv" style="position:absolute;top:30px;overflow:auto;width:100%"> <table id="treeTable" cellspacing="0" cellpadding="0" border="0" style="height:100%;width:100%"> <tr height="100%"> <td valign="top" style="width:50%;height:100%"> <div id="treeView" style="overflow:auto;height:100%;width:100%"> <div cordysType= "wcp.library.ui.Tree" id="expressiontree" treeSchema="expressionSchema" treeData="expressionData"></div> </div> </td> <td style="height:100%;width:100%"> <div> <div cordysType="wcp.library.util.PropertySheetLibrary" id="propSheet" onpropertychanged="propertyChanged()" inline="true"></div> </div> </td> </tr> </table> </div> </body> </html>