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

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

作 者：青 玉
用过AJAX WebShop的朋友都知道，这个AJAX工具是全可视化的，非常类似delphi的开发模式，提供了可视化拖拉控件，属性编辑，事件编辑，语法提示等功能，但是有时使用时很奇怪，部分标准的DHTML属性和事件在里面找不到，就不得不手工写代码完成属性设置和事件编程。
最开始我也是这样做的，但经过摸索，我却发现，原来AJAX WebShop是完全支持自己扩展属性和事件的，扩展的方法很简单，我做了个例子：
首先找到JCL目录下的XML文件，这下面有好多XML文件，一一对应了元件选项板上的控件，随便打开几个看看，居然还有继承的机制，难怪好多XML文件里面几乎没什么内容，好了，现在找到UIControl.xml，里面的内容是这样的：
<?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>
看到这个就很明白了，只需要按照MSDN中的标准属性和事件增加到XML节点中就搞定啦，我加了如下内容：
      <event name="onresize">
<params>
</params>
      </event>
然后重启动WebShop，事件栏中是不是多一个onresize ，哈哈。
我还发现，不仅仅可以自己定义属性事件，甚至可以自己扩展控件到元件选项板中，等下次我有空了，再告诉大家怎么自定义控件。

看了半天，没有搞清楚楼主说什么。。

编辑一下代码,用code标签
转载的文章放在自己的blog吧----这一个世界,有一个好用的东西叫搜索

这是用AJAX webshop 开发工具做的一个关于扩展属性和事件的例子，你没有用过AJAX webshop 当然不晓得，这是个可视化的开发工具，你看看吧

下载地址是http://219.153.35.21/wm/download.asp