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

转载自:http://blog.csdn.net/testdll/archive/2006/12/31/1470589.aspx

怎样将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 ，哈哈。

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

 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1470589