The WEB custom editor

Custom property editors are defined by the customer. The WEB custom editor is an HTML property editor.

Property info definition

The property info definition in settings.agconf:
  • type="WEB"
  • editorInfo:
    • htmlEditor : path to the html file relative to the template directory
    • isDebug:false : activates the webkit debug
    • title : title of the dialog (banner + window title)

Example

<DynamicProperty name="expression" type="WEB" label="expression" initialValue=""
 editorInfo="htmlEditor:expression.html;isDynamic:true;isDebug:false;title:Expression editor"/>

HTML and JavaScript

property.value implicitly contains the property value when the editor is opened. The value present in property.value is taken as a new property value when the user has validated the dialog (and onEditorAccept() is called).

The function onDocumentSource(source) is called once the html document is loaded in the webkit. The source contains the source of the GeneroStudio current document (the document which contains the property).

The function onEditorAccept() is called when the user presses the OK button to accept the value.

The function onEditorCancel() is called when the user refuses the value (by pressing cancel or the x window button).

expression.html file

This is an example of an expression HTML file, referenced by the earlier DynamicProperty editor definition example.

<?xml version="1.0" encoding="utf-8" ?>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <script language="JavaScript" type="text/javascript">
    // onDocumentSource event is called when the custom editor is loaded 
    //    source :  the complete document source in xml
    function onDocumentSource(source)
    {
        // find record fields list and populate the ui
	    var list = document.getElementById("fieldlist")
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString (source, "text/xml");
        var recordNodes = xmlDoc.getElementsByTagName ("RecordField");
        for (var i = 0 ; i < recordNodes.length ; i++)
        {
			var recordNode = recordNodes[i];
			var recordName = recordNode.getAttribute ("name");

            // create one item for the recordNode field
			var option=document.createElement("OPTION");
			option.text = recordName;
			option.value = recordName;
			list.add(option);
		}
		// populate the input with the expression
		var elem = document.getElementById("expression");
		elem.value = property.value;
    }
	
	function pressed(character) 
    {
        var elem = document.getElementById("expression");
        elem.value += character;
		property.value = elem.value;
    }

    function clearExpression() 
    {
        var elem = document.getElementById("expression");
        elem.value = "";
		property.value = elem.value;
    }

    function selectField(fieldname)
    {
        var elem = document.getElementById("expression");
        elem.value += fieldname;
		property.value = elem.value;
    }
	

    // onEditorAccept event is called before validating the custom editor
	function onEditorAccept()
	{
        alert("editor accepted !");
    }
	
    // onEditorCancel event is called before validating the custom editor
	function onEditorCancel()
	{
        alert("editor cancelled !");
    }
  </script> 
<body width="200" height="50">
<center>
<form name="calc" action="">
<table>
<b>
<table border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<tr>
<td rowspan="4"><select size="8" id="fieldlist" onDblClick="selectField(this.value)" /></td>
<td><input name="btnSeven" type="Button" value="  7  " onclick="pressed(7)"></td>
<td><input name="btnEight" type="Button" value="  8  " onclick="pressed(8)"></td>
<td><input name="btnNine" type="Button" value="  9  " onclick="pressed(9)"></td>
<td align="middle"><input name="btnPlus" type="Button" value="  +  " onclick="pressed('+')"/></td>
</tr>
<tr>
<td><input name="btnFour" type="Button" value="  4  " onclick="pressed(4)"></td>
<td><input name="btnFive" type="Button" value="  5  " onclick="pressed(5)"></td>
<td><input name="btnSix" type="Button" value="  6  " onclick="pressed(6)"></td>
<td align="middle"><input name="btnMinus" type="Button" value="  -  " onclick="pressed('-')"/></td>
</tr>
<tr>
<td><input name="btnOne" type="Button" value="  1  " onclick="pressed('1')"></td>
<td><input name="btnTwo" type="Button" value="  2  " onclick="pressed('2')"></td>
<td><input name="btnThree" type="Button" value="  3  " onclick="pressed('3')"></td>
<td align="middle"><input name="btnMultiply" type="Button" value="  *  " onclick="pressed('*')"/></td>
</tr>
<tr>
<td><input name="btnZero" type="Button" value="  0  " onclick="pressed(0)"></td>
<td><input name="btnDecimal" type="Button" value="   .  " onclick="pressed('.')"></td>
<td><input name="btnEquals" type="Button" value="  =  " onclick="pressed('=')"></td>
<td align="middle"><input name="btnDivide" type="Button" value="  /  " onclick="pressed('/')"></td>
</tr>
<tr><td colspan="4"><input name="expression" type="Text" size="45" id="expression" /></td>
<td><input name="btnClear" type="Button" value="  C  " onclick="clearExpression()"/></td>
</tr>
</table>
</table>
</b>
</form>
</center>
  </body>
</html>