DNJ----又一个jQuery和jQuery UI的.net framework

今天在codeproject山发现了几个10月份分数最高的几篇asp.net文章,和大家分享下。。

Introduction

This article is a quick guide to some features of DNJ framework.

DNJ is an open source framework that helps using JQuery with ASP.Net applications.

It provide helper functions, Ajax extender, transparent RPC, and an implementation of JQuery UI components as ASP.net webcontrols

Background

The idea of developping this framework comes to me when I started working with JQuery in my asp.net projects. I started using code snipets to create html code for tabs, accordion, sliders... then I wrote some helpers to load needed Jquery scripts automatically ...

I noticed that I repeated the same steps in each new project, and I don't think to be the only developper who did this.

An important point was the Visual Studio designer rendering. when you use jquery, you have to run you web application to see the effect applied, and this is a big issue when developping complex user interface... I thought that having design time wysiwyg Jquery contols will help a lot!

in the following article, I will present implemented features in the current DNJ release (v0.3.5-beta) and how to use them in your projects.

Please note the at this time, DNJ is in beta stage and need your help to test, identify bugs, and suggest enhancements so if you find the idea interesting, download the framework and report any bug or suggestion.

Prepare the environement

Before you begin you have to download DNJ framework here.

I recommand you to use the windows installer package, it contains : DNJ runtime dlls, a VS template project, a VS demo site, the toolbox installer and Jquery UI themes that can be used with DNJ!

if you don't want to use windows installer, you can download each component alone (runtime dlls / project template / demo site)

If you are creating a new project, use DNJ template to create it.

If you want to enable DNJ for a new project you hae to add references to DNJ runtime libraries (Org.Eurekaa.DNJ.dll and Org.Eurekaa.DNJ.UI.dll)

then edit your web.config and add the following to system.web section:






Collapse

Copy Code

<httpModules>
   <add name="DNJHttpModule" type="Org.Eurekaa.DNJ.Http.DNJHttpModule,Org.Eurekaa.DNJ" />
  </httpModules>
  <httpHandlers>
   <add path="DNJResources.axd" verb="*" type="Org.Eurekaa.DNJ.http.DNJHttpHandler, Org.Eurekaa.DNJ" />
  </httpHandlers>

please note that if you don't add the code above, DNJ will ask you to add it automatically when you first use a DNJ webcontrol.

DNJ Scripts loader

One important module in DNJ is the script loader, this module allows you to build a minified jquery+jquery package on the fly.

You can easily decide witch Jquery plugins and witch jquery UI components will be loaded

The script loader is an http handler that you can call in a <script> tag.

The following syntax will load ALL jquery + jquery scripts


Collapse

Copy Code

<script type="text/javascript" src="DNJResources.axd?load=jquery,ui[all],fx[all]"></script>

if you need to load only some parts of JQuery UI for example, you can use this syntax


Collapse

Copy Code

<script type="text/javascript" src="DNJResources.axd?load=jquery,ui[tabs,datepicker],fx[all]"></script>

and for more granularity you can use this syntax (all possible values are represented) :


Collapse

Copy Code

<script type="text/javascript" src="DNJResources.axd?load=jquery,ui[accordion,core,datepicker,dialog,draggable,droppable,position,progressbar,resizable,selectable,slider,sortable,stackfix,tabs],fx[blind,bounce,clip,core,drop,explode,fold,highlight,pulsate,scale,shake,slide,transfer]"></script>

The script loader is also used to generate javascript stubs for the DNJ RPC module (see next section). the syntax is :


Collapse

Copy Code

<script type="text/javascript" src="DNJResources.axd?conf=path/to/dnjrpc.conf.js"></script>

DNJ RPC modele

DNJ RPC allows you to call your server methods from javascript.

let's say you have the following C# class where you declare some functions


Collapse

Copy Code

namespace MyNameSpace
{
public class ServerProcesses
{
    public static string SayHello()
    {
        return "Hello World from : " + Assembly.GetExecutingAssembly().FullName;
    }
    public string Say(string something)
    {
        return something;
    }
    public int Add(int a, int b)
    {
        return a + b;
    }
    public double Add(double a, double b)
    {
        return a + b;
    }

}
}

DNJ RPC will let you call them from javascript using this javascript code


Collapse

Copy Code

<script>
     $(document).ready(function(){

       $('#Button1').bind('click', function(){
		    $.DNJRPC('#SomeTargetSelector').MyNameSpace.ServerProcesses.SayHello();
       });
       $('#Button2').bind('click', function(){
		    $.DNJRPC('#target').MyNameSpace.ServerProcesses.Say('Some string here');

       });
       $('#Button3').bind('click', function(){
            var a = GetSomeValueForA(); 
            var b = GetSomeValueForB();   
            $.DNJRPC('#result').MyNameSpace.ServerProcesses.Add(a , b);
       });    
                   
     });
</script>

Note that the NameSpace was preserved !

to achieve this, you have to declare the allowed methods in a json configuration file (lets say dnj/config/dnjrpc.conf.js)


Collapse

Copy Code

{
    "Functions": [
      {
        "Name": "SayHello", 
        "Assembly": "MyNameSpace",
        "Type":"MyNameSpace.ServerProcesses"
      },
      {
        "Name": "Say",
        "Assembly": "MyNameSpace", 
        "Type":"MyNameSpace.ServerProcesses"
      },
      {
        "Name": "Add",
        "Assembly": "MyNameSpace", 
        "Type":"MyNameSpace.ServerProcesses"
      }
      ]
}

Note that for both C# add methods, we only declared one entry ! parameters type will be detected automatically



then you use DNJ scripts loader to generate javascript stubs and namespaces.


Collapse

Copy Code

<script type="text/javascript" src="DNJResources.axd?conf=dnj/config/dnjrpc.conf.js"></script>

click here to see a live example. (see page source for details)

Ajaxify .Net webcontrols using DNJ Panel

This module is an ajax extender that works like asp.net ajax panel.

DNJ Panel doesn't need a script manager and have some callbacks witch can be overloaded to customize some behaviours of the panel.

The module require jquery to be loaded using DNJ scripts loader



To ajaxify a standard .net webcontrol, all you have to do is to put it into a DNJPanel. this will prevent the control from reloading the current page while doing a postback ... check a live demo here : DNJPanel with default settings

This will work exactly like Microsoft asp.net ajax Panel.

Now, let's see how we can add fun stuff to DNJPanel.

In the .aspx file we will add the following code.




Collapse

Copy Code

<style type="text/css">
    .dnj-indicator
    {
        border:0px;
        background: #a00;
        color:#fff;
        position:absolute;
        top:0px;
        right:0px;
        width:150px;
        font:700 11px verdana;
        padding:2px 5px;
    }
    </style>
	<script type="text/javascript">   
        $(document).ready(function() {    
        
        //Creating a custom ajax indicator (à la GMail "loading" indicator)
        var indicator = $('<div>Loading</div>').addClass('dnj-indicator').hide();
        $('body').append(indicator);
        $(window).scroll(function() {
            indicator.css('top', $(this).scrollTop() + "px");
        });                                         

	    // Custom DNJ ajaxifier initialisation
	    // Note that we can activate DNJ by simple $.DNJ() call
	    // The example bellow shows how we can add some visual effects for loading, waiting, errors ...etc
	    //       
        $.DNJ.settings.beforeCallBack = function(sender)
                {
                    indicator.show();
                    sender.fadeTo("fast", 0.50);
                };
        $.DNJ.settings.afterCallBack = function(sender)
                {
                    indicator.hide();
                };
        $.DNJ.settings.errorCallBack = function(msg) {
                    $.nyroModalManual({   //note that nyromodal plugin must be loaded first in a <script ...> section
                      bgColor: '#ffaaaa',
                      title: 'An error has occured',
                      content: msg
                    });            
                };
                
        
   });     
	</script>

We ask DNJPanel to overload its before/after/error callbacks.
The before and after callbacks will show/hide an indicator like the one used by Gmail.

The error callback will use a 3rd party JQuery plugin (nyromodal) to display the exception screen when an error occure.

All this is demonstrated in the following page : DNJPanel advanced demo

DNJ Web controls

If you use the windows installer to setup DNJ you will get the following toolbox added to visual studio. (you can get the windows installer here )



If the installation process fails, you can download DNJ runtime libraries and add them manually.

the controls are all wysiwyg, but there is still some incompatibilities with VS2005 that will be fixed in next release.

The web controls designers are built to keep both Jquery and Asp.net logic. in the following screenshot you can see the DNJTabs controls in VS designer.

All DNJ UI controls have a common propery called "Settings" witch encapsulate all settings that will be passed to JQueryUI control.

note that you can add/modify/remove tab pages using designer, you can modify the controls properties from properties box, and you'll see what will be passed to jquery plugin on the fly (the json string )



DNJ DatePicker design :





and here is an example of the aspx code of a DNJTab component.


Collapse

Copy Code

<dnj:DNJTabs ID="DNJTabs1" runat="server" Height="325px" Width="400px">
    <Settings cache="True"></Settings>
    <BoxList>
        <dnj:DNJBox runat="server" Title="Page_0" ID="Page_0">
            <Content>
                This is a DNJ Tabs demo<br />
                you can Add/Remove/Edit tabs' titles from the source code or from the designer
                <br />
                <br />
                <br />
            </Content>
        </dnj:DNJBox>
        <dnj:DNJBox ID="Page_1" runat="server" Title="Page_1">
            <Content>
                It works :)
            </Content>
        </dnj:DNJBox>
        <dnj:DNJBox ID="Page_3" runat="server" Ajax="True" ContentUrl="~/Demos/UIDemos/AjaxBackend.ashx" 
            Title="AjaxTab">
            <Content>
                This content will be replaced with the result of an ajax Call
            </Content>
        </dnj:DNJBox>
    </BoxList>
</dnj:DNJTabs>

and the source code of DNJ DatePicker


Collapse

Copy Code

<dnj:DNJDatePicker ID="DNJDatePicker1" runat="server">
        <Settings AppendText="" ButtonImage="" ChangeMonth="True" ChangeYear="True" InlineMode="True" />
    </dnj:DNJDatePicker>

as you can see, the code is clean ;)

Check the live demo here

Conclusion

In this article, I tried to give you an idea of what's DNJ and what you can do with. The project is still in developpement stage, and need a lot of enhancement so feedbacks are welcome.

I'm working hard to write a complete documentation for the current release that will be released in DNJ official website

If you are interested in the project, or have ideas you like to see in future DNJ releases don't hesitate to comment this article or use google code project issue tracker to post them.