怎样将DHTML更多属性和事件扩展到AJAX WebShop的属性编辑器中

怎样将DHTML更多属性和事件扩展到AJAX WebShop的属性编辑器中<o:p></o:p>

<o:p> </o:p>

作 者： 青 玉<o:p></o:p>

       用过AJAX WebShop的朋友都知道，这个AJAX工具是全可视化的，非常类似delphi的开发模式，提供了可视化拖拉控件，属性编辑，事件编辑，语法提示等功能，但是有时使用时很奇怪，部分标准的DHTML属性和事件在里面找不到，就不得不手工写代码完成属性设置和事件编程。

       最开始我也是这样做的，但经过摸索，我却发现，原来AJAX WebShop是完全支持自己扩展属性和事件的，扩展的方法很简单，大家看我的操作：

       首先找到JCL目录下的XML文件，这下面有好多XML文件，一一对应了元件选项板上的控件，随便打开几个看看，居然还有继承的机制，难怪好多XML文件里面几乎没什么内容，好了，现在找到UIControl.xml，里面的内容是这样的：

 

<?xml version="1.0" encoding="gb2312"?><o:p></o:p> <class classname="UIControl" visible="true" iscontainer="false" extends="JCLControl"><o:p></o:p>   <imports><o:p></o:p>     <import>jcl/Control.js</import><o:p></o:p>   </imports><o:p></o:p>   <private><o:p></o:p>   </private><o:p></o:p>   <protect><o:p></o:p>   </protect><o:p></o:p>   <public><o:p></o:p>   </public><o:p></o:p>   <published><o:p></o:p>     <properties><o:p></o:p>       <property name="align" type="String" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>              <option value="center"/>            <o:p></o:p>             <option value="left"/><o:p></o:p>             <option value="right"/><o:p></o:p>              <option value="justify"/>            <o:p></o:p>            </options>        <o:p></o:p>       </property><o:p></o:p>       <property name="disabled" type="boolean" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="true"/><o:p></o:p>              <option value="false"/>              <o:p></o:p>            </options>        <o:p></o:p>       </property><o:p></o:p>       <property name="innerHTML" type="String"><o:p></o:p>       </property><o:p></o:p>       <property name="className" type="String"><o:p></o:p>       </property><o:p></o:p>       <property name="PopupMenu" type="PopupMenu" editor="ObjectEditor"><o:p></o:p>       </property><o:p></o:p>       <property name="style" type="style" editor="TreeEditor"><o:p></o:p>        <properties><o:p></o:p>          <property name="backgroundColor" type="String" editor="ColorEditor"><o:p></o:p>          </property><o:p></o:p>          <property name="backgroundImage" type="String"><o:p></o:p>          </property><o:p></o:p>          <property name="borderColor" type="String" editor="ColorEditor"><o:p></o:p>          </property><o:p></o:p>          <property name="borderStyle" type="String" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="none"/><o:p></o:p>              <option value="dotted"/>            <o:p></o:p>              <option value="dashed"/>           <o:p></o:p>              <option value="solid"/>              <o:p></o:p>              <option value="double"/>            <o:p></o:p>              <option value="groove"/>           <o:p></o:p>              <option value="ridge"/>              <o:p></o:p>              <option value="inset"/>              <o:p></o:p>              <option value="window-inset"/>         <o:p></o:p>              <option value="outset"/>            <o:p></o:p>            </options>        <o:p></o:p>          </property>         <o:p></o:p>          <property name="borderWidth" type="String" ><o:p></o:p>          </property><o:p></o:p>          <property name="borderLeft" type="String" ><o:p></o:p>          </property><o:p></o:p>          <property name="borderTop" type="String" ><o:p></o:p>          </property><o:p></o:p>          <property name="borderRight" type="String" ><o:p></o:p>          </property><o:p></o:p>          <property name="borderBottom" type="String" ><o:p></o:p>          </property><o:p></o:p>         <property name="cursor" type="String" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="all-scroll"/><o:p></o:p>              <option value="auto"/>        <o:p></o:p>              <option value="col-resize"/>              <o:p></o:p>              <option value="crosshair"/>        <o:p></o:p>              <option value="default"/>           <o:p></o:p>              <option value="hand"/>              <o:p></o:p>              <option value="help"/>        <o:p></o:p>              <option value="move"/>             <o:p></o:p>              <option value="no-drop"/>          <o:p></o:p>              <option value="not-allowed"/>           <o:p></o:p>              <option value="pointer"/>           <o:p></o:p>              <option value="progress"/>         <o:p></o:p>              <option value="row-resize"/>             <o:p></o:p>              <option value="text"/>         <o:p></o:p>              <option value="url(uri)"/>           <o:p></o:p>              <option value="vertical-text"/>                        <o:p></o:p>              <option value="wait"/>        <o:p></o:p>              <option value="*-resize"/>                       <o:p></o:p>            </options>        <o:p></o:p>          </property>         <o:p></o:p>          <property name="display" type="String" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="block"/><o:p></o:p>              <option value="none"/>              <o:p></o:p>              <option value="inline"/>              <o:p></o:p>             <option value="inline-block"/><o:p></o:p>              <option value="table-header-group"/>        <o:p></o:p>              <option value="table-footer-group"/>         <o:p></o:p>            </options>        <o:p></o:p>          </property><o:p></o:p>          <property name="color" type="String" editor="ColorEditor" ><o:p></o:p>          </property><o:p></o:p>          <property name="fontFamily" type="String" ><o:p></o:p>          </property><o:p></o:p>          <property name="fontSize" type="String" ><o:p></o:p>          </property><o:p></o:p>          <property name="fontStyle" type="String" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="normal"/><o:p></o:p>              <option value="italic"/>              <o:p></o:p>              <option value="oblique"/>           <o:p></o:p>            </options>        <o:p></o:p>          </property><o:p></o:p>        <property name="paddingTop" type="String"><o:p></o:p>        </property><o:p></o:p>        <property name="paddingLeft" type="String"><o:p></o:p>        </property><o:p></o:p>        <property name="paddingRight" type="String"><o:p></o:p>        </property><o:p></o:p>        <property name="paddingBottom" type="String"><o:p></o:p>        </property><o:p></o:p>          <property name="position" type="String" default="absolute" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="static"/><o:p></o:p>              <option value="absolute"/>         <o:p></o:p>              <option value="relative"/>    <o:p></o:p>            </options>        <o:p></o:p>          </property><o:p></o:p>          <property name="textAlign" type="String" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="left"/><o:p></o:p>              <option value="right"/>              <o:p></o:p>              <option value="center"/>     <o:p></o:p>              <option value="justify"/>     <o:p></o:p>            </options>        <o:p></o:p>          </property><o:p></o:p>          <property name="visibility" type="String" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="inherit"/><o:p></o:p>              <option value="visible"/>            <o:p></o:p>              <option value="hidden"/>     <o:p></o:p>            </options>        <o:p></o:p>          </property><o:p></o:p>          <property name="wordWrap" type="String" editor="SelectEditor"><o:p></o:p>           <options><o:p></o:p>             <option value="normal"/><o:p></o:p>              <option value="break-word"/>           <o:p></o:p>            </options>        <o:p></o:p>          </property><o:p></o:p>          <property name="zIndex" type="Variant" ><o:p></o:p>          </property>  </properties><o:p></o:p>       </property><o:p></o:p>       <property name="tabIndex" type="Integer"><o:p></o:p>       </property><o:p></o:p>       <property name="title" type="String"><o:p></o:p>       </property><o:p></o:p>     </properties><o:p></o:p>     <methods><o:p></o:p>     </methods><o:p></o:p>     <events><o:p></o:p>       <event name="onblur"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onclick"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="ondblclick"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onfocus"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onkeydown"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onkeypress"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onkeyup"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onmousedown"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onmouseenter"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onmouseleave"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onmousemove"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onmouseout"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onmouseover"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onmouseup"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>       <event name="onmousewheel"><o:p></o:p>               <params><o:p></o:p>               </params><o:p></o:p>       </event><o:p></o:p>     </events><o:p></o:p>   </published><o:p></o:p> </class><o:p></o:p>

然后重启动WebShop，事件栏中是不是多一个onresize ，哈哈。

我还发现，不仅仅可以自己定义属性事件，甚至可以自己扩展控件到元件选项板中，等下次我有空了，再告诉大家怎么自定义控件。