DNA JQuery Framework的解析原理和插件开发

DNA jQuery UI Framework

www.dotnetage.com 

DNA jQuery UI Framework确实是个很不错的轻量级的framework,能够集成很多的jQuery的插件。

设计理念:

作者没有使用传统的继承来扩展控件的功能,而是使用了Attribute。我觉得他的设计思想很棒。因为可能某个控件需要继承CompositeControl, DataBoundControl,Extender,ScriptControl这几个控件。所以在DNA jQuery UI　Framework平台下类JQueryAttribute实现上面所说的那个功能:

它主要做三件事情:

1.       定义jQuery插件的名字。

2.       确定何时注册插件的scirpt。(PageInite,PageLoad,DocReady)。

3.       确定有多少的jQuery插件脚本资源需要注册。

 

在这个framework中另外一个值得一提的是JQueryOptionAttribute类。它把每个jq插件中的Property部分都定义成了属性也就让每个控件都成为了vs里那种控件格式了。它确定了如下几件事情:

1.       属性的类型:比如Value, Function, Enum….

2.       属性的名字。

3.       属性的默认值。

4.       无需关注的值。

最终每个控件定义出来的类如下:

[JQuery(Name = "datepicker", Assembly = "jQuery", 

ScriptResources = new string[] { "ui.core.js", "ui.datepicker.js" }, 

StartEvent=ClientRegisterEvents.ApplicationLoad)]

public class DatePicker : WebControl

{

   [JQueryOption("appendText")]

   public string AppendText{get;set;}



   [JQueryOption("closeText")]

   public string CloseButtonText{get;set;}

     .

     .

     .

}

我们需要做得第二件事情就是必须告诉DNA JQuery UI Fraomework有时候我们需要使用一些转换来得到复杂的属性,可能这个插件的Property有些比较复杂,这就造成了JQuery插件的脚本注册后还需要附加一些信息。对于服务器端的脚本我们可以通过DNA.UI.ClientScriptManager.RegisterJQueryControl控件来实现转换到客户端。所以我们必须重载OnPreRender方法。

在ClientScriptManager.RegisterJQuery(Control contrl)方法中，能够的实时生成javascript。仔细看代码能够发现在CLientScriptManager里面重载了RegisterJQueryControl方法。也就是用到了IScriptBuilder。IScriptBuilder实现如下功能:

1.    void  Prepare() : 准备脚本

2.    void Build(): 生成脚本和添加脚本到页面。

3.    string GetApplicationLoadScript(): 如果存在,得到页面load时的脚本结果。

4.    string GetApplicationInitScript():同上差不多

5.    String GetDocumentReadyScript().
 
 

当某个控件使用好几个plugin但是没有ui时,你应该使用MultiScriptManager来实现

[JQuery(Name = "resizable", Assembly = "jQuery", 
ScriptResources = new string[] { "ui.core.js", "ui.resizable.js" }, 
StartEvent=ClientRegisterEvents.ApplicationLoad)]
[JQuery(Name = "draggable", Assembly = "jQuery", 
ScriptResources = new string[] { "ui.core.js", "ui.draggable.js" }, 
StartEvent=ClientRegisterEvents.ApplicationLoad)]
public class MyPanel: Panel
{
   //you need to specify this property is belongs to which plugin by Taget property
   [JQueryOption("distance",Target="draggable")]
   public string Distance{get;set;}
   
   [JQueryOption("delay",Target="resizable")]
   public string Delay{get;set;}

   protected override void OnPreRender(EventArgs e)
  {
    MultiJQueryScriptBuilder builder=new MultiJQueryScriptBuilder(this,Target);
    
    //you can get the JQueryScriptBuilder instance by plugin name
    builder["resizable"].AddOption ...
    
   //do some property to option convertion there
  
  ClientScriptManager.RegisterJQueryControl(this,builder);
  base.OnPreRender(e);
 }
}