怎样将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"   isc   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   ，哈哈。   
  我还发现，不仅仅可以自己定义属性事件，甚至可以自己扩展控件到元件选项板中，等下次我有空了，再告诉大家怎么自定义控件。   
   
  本开发工具的下载地址     点击这里