«

How to expand properties and events in AJAX WebShop
Hater

AJAX WebShop has the similar way to develop applications in B/S with
Delphi in C/S. And it's very interesting that AJAX WebShop supports
expanding properties and events by yourself and it's very easy to do
that.

First, find the XML files in the directory of JCL and each xml file is
corresponding to a component which you can find on the interface of
AJAX WebShop. Then find UIControl.xml, its content is below:
<?xml version="1.0" encoding="gb2312"?>
<class classname="UIControl" visible="true" iscontainer="false"
extends="JCLControl">
<imports>
<import>jcl/Control.js</import>
</imports>
<private>
</private>
<protect>
</protect>
<public>
</public>
<published>
<properties>
<property name="align" type="String" editor="SelectEditor">
<options>
<option value="center"/>
<option value="left"/>
<option value="right"/>
<option value="justify"/>
</options>
</property>
<property name="disabled" type="boolean" editor="SelectEditor">
<options>
<option value="true"/>
<option value="false"/>
</options>
</property>
<property name="innerHTML" type="String">
</property>
<property name="className" type="String">
</property>
<property name="PopupMenu" type="PopupMenu"
editor="ObjectEditor">
</property>
<property name="style" type="style" editor="TreeEditor">
<properties>
<property name="backgroundColor" type="String"
editor="ColorEditor">
</property>
<property name="backgroundImage" type="String">
</property>
<property name="borderColor" type="String"
editor="ColorEditor">
</property>
<property name="borderStyle" type="String"
editor="SelectEditor">
<options>
<option value="none"/>
<option value="dotted"/>
<option value="dashed"/>
<option value="solid"/>
<option value="double"/>
<option value="groove"/>
<option value="ridge"/>
<option value="inset"/>
<option value="window-inset"/>
<option value="outset"/>
</options>
</property>
<property name="borderWidth" type="String" >
</property>
<property name="borderLeft" type="String" >
</property>
<property name="borderTop" type="String" >
</property>
<property name="borderRight" type="String" >
</property>
<property name="borderBottom" type="String" >
</property>
<property name="cursor" type="String" editor="SelectEditor">
<options>
<option value="all-scroll"/>
<option value="auto"/>
<option value="col-resize"/>
<option value="crosshair"/>
<option value="default"/>
<option value="hand"/>
<option value="help"/>
<option value="move"/>
<option value="no-drop"/>
<option value="not-allowed"/>
<option value="pointer"/>
<option value="progress"/>
<option value="row-resize"/>
<option value="text"/>
<option value="url(uri)"/>
<option value="vertical-text"/>
<option value="wait"/>
<option value="*-resize"/>
</options>
</property>
<property name="display" type="String" editor="SelectEditor">
<options>
<option value="block"/>
<option value="none"/>
<option value="inline"/>
<option value="inline-block"/>
<option value="table-header-group"/>
<option value="table-footer-group"/>
</options>
</property>
<property name="color" type="String" editor="ColorEditor" >
</property>
<property name="fontFamily" type="String" >
</property>
<property name="fontSize" type="String" >
</property>
<property name="fontStyle" type="String"
editor="SelectEditor">
<options>
<option value="normal"/>
<option value="italic"/>
<option value="oblique"/>
</options>
</property>
<property name="paddingTop" type="String">
</property>
<property name="paddingLeft" type="String">
</property>
<property name="paddingRight" type="String">
</property>
<property name="paddingBottom" type="String">
</property>
<property name="position" type="String" default="absolute"
editor="SelectEditor">
<options>
<option value="static"/>
<option value="absolute"/>
<option value="relative"/>
</options>
</property>
<property name="textAlign" type="String"
editor="SelectEditor">
<options>
<option value="left"/>
<option value="right"/>
<option value="center"/>
<option value="justify"/>
</options>
</property>
<property name="visibility" type="String"
editor="SelectEditor">
<options>
<option value="inherit"/>
<option value="visible"/>
<option value="hidden"/>
</options>
</property>
<property name="wordWrap" type="String" editor="SelectEditor">
<options>
<option value="normal"/>
<option value="break-word"/>
</options>
</property>
<property name="zIndex" type="Variant" >
</property> </properties>
</property>
<property name="tabIndex" type="Integer">
</property>
<property name="title" type="String">
</property>
</properties>
<methods>
</methods>
<events>
<event name="onblur">
<params>
</params>
</event>
<event name="onclick">
<params>
</params>
</event>
<event name="ondblclick">
<params>
</params>
</event>
<event name="onfocus">
<params>
</params>
</event>
<event name="onkeydown">
<params>
</params>
</event>
<event name="onkeypress">
<params>
</params>
</event>
<event name="onkeyup">
<params>
</params>
</event>
<event name="onmousedown">
<params>
</params>
</event>
<event name="onmouseenter">
<params>
</params>
</event>
<event name="onmouseleave">
<params>
</params>
</event>
<event name="onmousemove">
<params>
</params>
</event>
<event name="onmouseout">
<params>
</params>
</event>
<event name="onmouseover">
<params>
</params>
</event>
<event name="onmouseup">
<params>
</params>
</event>
<event name="onmousewheel">
<params>
</params>
</event>
</events>
</published>
</class>
After the code, I believe that you have understand how to do it. Right,
just add the codes below and we will get a new event named
"onresize" after restart AJAX WebShop.
<event name="onresize">
<params>
</params>
</event>