.NET jQuery (DNJ): new features in version 0.4.0

• Download setup - 1.77 MB

Introduction

In a previous article, I introduced DNJ (.NET jQuery), a .NET framework aimed to fully integrate jQuery to .NET and Visual Studio.

With DNJ, you don't need JavaScript or jQuery knowledge to create advanced Web 2.0 applications. This doesn't mean that DNJ is a framework for jQuery beginners. Advanced programmers can use DNJ features and enhance them with custom jQuery code. DNJ combines the power of Visual Studio Designer/Editor with jQuery capabilities and easy AJAX coding.

This article will cover the new features implemented in the new public beta release: client events support and third party plug-ins integration.

If you want to know more about the DNJ Framework, or need instructions about how to install it, please refer to my previous article (DNJ: the .NET Framework for jQuery and jQueryUI).

DNJ Namespaces

The previous version of DNJ has two assemblies: Org.Eurekaa.DNJ.dll and Org.Eurekaa.DNJ.UI.dll; the new version includes a third one: Org.Eurekaa.DNJ.Ext.dll. The DNJ namespace is the core DNJ module, it includes the base jquery.js library and allows the use of the generic AJAX feature. The DNJ.UI namespace implements jQueryUI components and widgets as ASP.NET web controls, and they are editable using the Visual Studio code editor or designer (WYSIWYG).

The DNJ.Ext namespace contains the implementations of all the jQuery third party plug-ins. This will separate the DNJ assemblies with a similar logic to the jQuery project: jQuery, jQueryUI, other jQuery plug-ins. This is also a way to keep DNJ and DNJ.UI up to date with the latest jQuery and jQueryUI stable releases.

jQuery script loading improvement

In the old DNJ release, you had to load the needed JavaScript files manually by adding a line like this to the head section of your HTML:

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

Now there is no need for such lines. Each DNJ web control will tell the resource loader what .js file it needs. The resource loader will wait for all web control registrations, then load the needed resource. If the same resource is registered twice (within two web controls) the resource will load only once. In what case will you still need DNJResources.axd? If you need to build jQuery minified JavaScript for your custom scripts without using DNJ web controls. If you use the DNJ RPC feature, in this case, you will use DNJResources.axd?conf=/path/to/dnjrpc_config.js (see my first article for details).

Note: this feature (automatic resource loading) is still experimental, and may be unstable, and breaking changes may occur in future versions. If something goes wrong, you can still force the loading .js resource using DNJResources.axd.

Client events support

In the previous version, you were able to edit DNJ.UI web control settings from the property box. Each ASP.NET setting corresponds to an equivalent jQueryUI one. But when it comes to jQuery events handling, there was no way to edit or overload them.

With the new version, you can customise client side events from the Visual Studio designer.

There are two ways to add an event:

1. By providing a callback name. In this case, this callback function needs to be implemented outside the web control in a classic <script> tag. If you provide an undefined callback, DNJ will warn you with a JavaScript popup when this callback is invoked.
2. By typing the callback script directly. In this case, there is an embedded JavaScript editor with syntax highlighting (very basic) that will help you type your code. Please note that this option is to be used when you have a small piece of code to handle events. For complex event handling, the best practice is to use an external callback, it makes the code more readable.

The following screenshot shows how to set a callback by name:

And this one shows how to add an inline script with the embedded script editor:

Note 1: if you specify both the callback name and the inline script, the inline script will be ignored and the callback will be used.

Note 2: the inline script represents the body of the corresponding jQueryUI event, so all jQuery event contexts are accessible. For example, ($this) will access the slider object in our example, ui will access the jQueryUI UI argument, and event will access the event argument (see jQueryUI documentation for more details).

And in the older DNJ version, the resulting markup code is always kept as clean as possible:

<dnj:DNJSlider ID="DNJSlider1" 
           runat="server" Width="440px">
    <ClientEvents>
        <!--this Event is a callback-->
        <Start Name="mySliderStartCB">
        </Start>
        
        <!--and this one is a inline script-->
        <Stop>

            <script>
                var _id = '';
                //get the client ID of the slider
                _id = ($this).attr('id');

                //Then display it in the console
                console.log(id);

                //And finaly show an alert
                alert('My client Id is : ' + id);
            </script>

        </Stop>
    </ClientEvents>
    <Settings Values-Min="0" 
       Values-Max="100"></Settings>
</dnj:DNJSlider>

For events called by the Name attribute, you need to write the callback method.

For our example, we can define our callback like this:

<script>
    function mySliderStartCB(event, ui) {
        console.log('started... event object = ', event);
    }
</script>

The event and ui parameters are used by jQueryUI.

Third party plug-ins integration (DNJ.Ext)

As said before, this version introduces a new namespace: DNJ.Ext.

Each DNJ.Ext plug-in implementation will provide a new ASP.NET web control with the same features as DNJ.UI web controls. The idea is to convert the most popular visual jQuery plug-ins to ASP.NET web controls using the DNJ and DNJ.UI capabilities.

At this time, DNJ.Exit contains two plug-ins implementation: the famous jQuery Cycle plug-in and a less known one: jPlayer.

• The Cycle plug-in allows you to create a simple and customizable image slideshow with a lot of original transitions. (Cycle plug-in home page).
• The jPlayer plug-in allows you to play an MP3 file or a playlist inside a webpage. The originality of this plug-in is that it uses an invisible Flash module to play MP3, and provides a fully customizable player interface with HTML/CSS (jPlayer demo page).

Those plug-ins are provided with this version of DNJ as a demonstration of what will DNJ.Ext provide in a near future. They are not stable, and breaking changes may occur.

In the next DNJ versions, more jQuery plug-ins will be included. By the way, if you want to see your plug-in included or a plug-in you frequently use, leave me a comment and I'll add it in the next releases.

Where is the source code?

If you are looking for the DNJ source code, you can grab it from the Codeplex project page.

The source code includes the DNJ source code and the Windows installer code/script.

The download section of the project page provides alternate binaries, if you don't want to use the Windows installer.

Conclusion

In the two public beta releases of DNJ, I focused my efforts to integrate most jQuery features to the Visual Studio designer / code editor. And, I think that the DNJ code structure is now almost stable (some changes may still occur ...).

The next versions from 0.4.0 to 0.9.0 will all be public beta releases. I'll now work on performance optimization, cross-browser JavaScript compatibility, and third party plug-in implementations.

The 1.0.0 will be the first stable release. This may take some time because I don't have a lot of spare time for personal projects, but 1.0.0 will be released :)

By the way, if you are interested in this project and want to join or contribute, you can contact me from the DNJ project page or leave a comment after this article.

History

The DNJ project has been moved to CodePlex. The project page is http://dnj.codeplex.com

Revision 1

A little installer bug was reported to me, I fixed it and uploaded the new installer. The bug affected DNJPanel web control in the demo site (maybe other web controls were affected too). The installer didn't copy the DNJ.Ext DLL, which caused the resource loader to fail.

In the next release, I'll make the resource loader to check if an assembly is present or not before trying to load it.

For now, you have to include the three DNJ assemblies in your project to guarantee all things work as expected.