DNA jQuery UI Framework
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); } }