| The code generation template set / Interpreting settings.agconf | |
Custom property editors are defined by the customer. The WEB custom editor is an HTML property editor.
<DynamicProperty name="expression" type="WEB" label="expression" initialValue="" editorInfo="htmlEditor:expression.html;isDynamic:true;isDebug:false;title:Expression editor"/>
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).
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>