Overview
Design Goals
Architecture
Some consideration for design jQuery Server Cotnrol
When i use the IScriptBuilder?
- Convert Option to Property
- Register Event and UpdatePanel Compatibility

Overview

DNA JQuery UI Framework is a lightweight framework helps you to integate the jQuery plugins with ASP.NET 2.0 server-based development platform.I provides the simple way to write the Server Controls for the jQuery plugins.

Design Goals

The controls for jQuery plugin must be very easy to develop by using DNA JQuery UI Framework.(more less code)
DNA JQuery UI Framework must be managed the script reference for every controls registerd as JQuery control.And knows when they need to register and which scripts they should registered.
DNA JQuery UI Framewok can supports compositscript feature of MSAjax,this feature enabling hi-performance of register many script references in page.(see also:[CompositeScriptsInDJ|CompositeScripts In DJ])
DNA JQuery UI Framework can convert the option to control property by definition of control property.
The server controls base on DNA JQuery UI Framework can works fine in UpdatePanel.
DNA JQuery UI Framework controls can inhert from any control class.
We do not need to write more "script string" in server side by using DNA JQuery UI Framework.

Architecture

We are not using inhert to extend the functionally of the control but using Attribute.Because the control mybe need to inherit from CompositeControl,DataBoundControl,Extender,ScriptControl and as so on.So when using Attribute to define the control's ability is a good choice,i can inhert from any base control class.
DNA JQuery UI Framework provides two mainjor Attributes to complete this works
JQueryAttribute
it can:

Define the jQuery plugin name
When the jQuery plugin script registerd(PageInit,PageLoad,DocReady)
How many jQuery plugin's script reference resource need to register.

JQueryOptionAttribute
The JQueryOptionAttribute can define the Property as a Option of jQuery plugin.It tells DNA JQuery UI Framework how to convert the Property to option string of jQuery in javascript format.

The option's Data Type:Value,Function,Enum ...
What's the name of the Option.
The default value of Option.
Which value to IgnoreValue (many option in jQuery plugin has default value and they do not need to register in runtime).

Though the definitions of class we can ge a first look of the control class:


[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;}
     .
     .
     .
}

As you look using the Attribute to define the Property can convert the Option name to any name we want and the Option have Strong Typed now!When put the Control in VS.NET WebForm Designer,in Control Tag we just using Ctrl+J the Property(Option) will popup we do not need to remember the "Options" and more!

JQueryAttribute can define many times of different plugins in one control class

The second we must tells the DNA JQuery UI Framework which control defined the Attributes of and when gernate the jQuery script to registed.Sometimes we need to do some convertion on some complex jQuery option (multi-type option) or append some addition script after the jQuery script register.
This time before the control render we can use DNA.UI.ClientScriptManager.RegisterJQueryControl to Register the contorl as JQuery Server Control.ClientScriptManager will gernate the javascript for jQuery.We just override the OnPreRender method of the Control and put the code below:



protected override void OnPreRender(EventArgs e)
{
  ClientScriptManager.RegisterJQueryControl(this);
  base.OnPreRender(e);
}

and the first control is done.
But now maybe you should ask:"How to custom the special options?". Why? just take a look:in some case the jQuery plugin option be defined like this:


$("#id").someMethod(grid:[50,60]);

the "grid" option also can be set "false",in .Net we may be declare a Property
int[] Grid{get;set;} but how to set "false" value to Grid in .Net? in javascript a option value can cast as any type but not in .Net.So we must do some convertion then we need to custom the option value before the jQuery script gernate.
ClientScriptManager.RegisterJQueryControl(Control contrl) method gernate the javascript for jQuery in time.In the case above we must control the javascript gernate progress.So we need another class to do this.If you look carefully in the code of ClientScriptManager there is another overload version of RegisterJQueryControl(Control control,IScriptBuilder builder) method.
IScriptBuilder is a interface that tells the ClientScriptManager how to build the javascript for the control.In DNA JQuery UI Framework has two script builder which implemented the IScriptBuilder:JQueryScriptBuilder,MultiJQueryScriptBuilder.

JQueryScriptBuilder only can build on jQuery script for the control in other word the JQueryScriptBuilder can accept only on JQueryAttribute of the class.
MultiJQueryScriptBuilder can build more and one jQuery Script for the control it can accpet more than one JQueryAttribute in the Control class.

By default the RegisterJQueryControl method using the MultiJQueryScriptBuilder for the JQuery Server Control class.

We can use the methods of IScriptBuilder below to control how the script builds.

void Prepare(); Prepare the script before build.
void Build(); build the script and add the script to result.
string GetApplicationLoadScript(); Get the script result for page load (If it exists)
string GetApplicaitonInitScript(); Get the script result for page init ( if it exists)
string GetDocumentReadyScript(); Get the script result for document ready (if it exists)

[image||{UP}Images/art.jpg]

DNA JQuery UI Framework using .net Reflection technique and Builder pattern to implement the JQuery Control mechanism.

Some consideration for design jQuery Server Cotnrol

When i use the IScriptBuilder?

Normally there are four case for using JQueryScriptBuilder and MultiJQueryScriptBuiloder.

Case 1:(Default) You does not need any convertion for the properies of the class use RegisterJQueryControl(Control control) method ,ClientScriptManager will create a MultiJQueryScriptBuilder for the class to gernate the javascript for jQuery.

Case 2: You control that have ui and just register one jQuery plugin and you need do some convertion for the properties you can using JQueryScriptBuilder
e.g:



public int X{get;set;}

public int Y{get;set;}

protected override void OnPreRender(EventArgs e)
{
  JQueryScriptBuilder builder=new JQueryScriptBuilder(this);
  
  if ((x>0) && (y>0))  
     builder.addOption("grid",new int[]{x,y});
  else
     builder.addOption("grid",false);
 
  // do some property to option convertion there
 
   .....
  
  ClientScriptManager.RegisterJQueryControl(this,builder);
  base.OnPreRender(e);
}

Case 3: You control that haven't ui and just register one jQuery plugin which apply to another controls/elements and you need do some convertion for the properties you can using JQueryScriptBuilder



//The target which the jQuery plugin apply to 
public JQuerySelector Target{get;set;}

public int X{get;set;}

public int Y{get;set;}

protected override void OnPreRender(EventArgs e)
{
  JQueryScriptBuilder builder=new JQueryScriptBuilder(this,Target);
  
  if ((x>0) && (y>0))  
     builder.addOption("grid",new int[]{x,y});
  else
     builder.addOption("grid",false);
 
  // do some property to option convertion there
 
   .....
  //some times if you want to append some script after the jQuery script you can do this:
  builder.Prepare();  
  builder.Builder();

  builder.AppendCssStyle(this,"background:#fffff","color:#000000");
 
  ClientScriptManager.RegisterJQueryControl(this,builder);
  base.OnPreRender(e);
}

Case 4:When your control haven't any ui and it register more than one jQuery plugins which apply to another controls/elements and you need do some convertion for the properties you can using MultiJQueryScriptBuilder


[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);
 }
}

DNA jQuery UI Framework

Overview

Design Goals

Architecture

Some consideration for design jQuery Server Cotnrol

When i use the IScriptBuilder?

Convert Option to Property

Register Event and UpdatePanel Compatibility

What is new

Tag cloud