JQuery Training – Part 1:

 

              This article series assumes that you’ve some/little knowledge about web programming model and JavaScript. This series targets on (or I can even say is intended for) ASP.net users, however I’ll try to give general JQuery article such that other technology web developers may also get benefit out of it. Bare with me if I give any thing most specific to ASP.net.

 

JQuery Introduction:

                 JQuery is a free, open source JavaScript library which reduces your coding effort on creating spectacular, contemporary, highly responsive websites that work across all the modern browsers.

JQuery focuses on common Scripting tasks like,

a. Retrieving and manipulating the page content.

b. Page effects.

c. Working with browser event model.

Why JQuery?

1. Statement chaining or method chaining that reduces coding effort.
2. Avoids browser oddities
3. Is extensible.
4. The selectors are like CSS selectors and much more,

JQuery versions,

1) Production ( Minified/Compressed version) ( ex, jquery-1.6.4.min.js)

Which is a compressed and minified down version. This is used at the time of deployment.

2) Development ( ex jquery-1.6.4.js)

Which is useful for debugging.

3) VS Documentation (ex jquery-1.6.4-vsdoc.js)

For Visual Studio users, to support intellisense

Typically you download all of the above and use them appropriately. Note that this is different from version numbering. At the time of writing this article 1.6.4 is the latest version.

To download JQuery : www.jquery.com

$ - JQuery object

The Symbol “$” is used to indicate the JQuery object itself. All the JQuery functions can be called through this object.

Let’s begin..

Here is the simple example, that shows how to show an alert message when the page loads, from JavaScript and from JQuery.

JavaScript:

function initialize() {

alert("Hi There!");

}

window.onload = initialize;

JQuery :

$("document").ready(function() {

alert("Hi There!");

});

Now lets begin to bring out the above simple program, for better understanding I’ve broken down the same program as below,

$("document").ready(

function() {

alert("Hi There!");

}

);

document.ready event in JQuery is similar but more powerful than window.onload DOM event. The document object (page – it must be familiar to the JavaScript users. If it’s unfamiliar to you, then you can search on the internet about DOM – Document Object Model) is accessed through JQuery object $ as $("document"). An anonymous function is called on the ready event of the document, which fires when the page is ready as the name implies. Finally, the anonymous function contains our alert message.

Will continue with few more examples in our next article…

Hope this helps you in getting started with JQuery…

Fluent Interface Programming in C#

 In software engineering, a fluent interface (as first coined by Eric Evans and Martin Fowler) is an implementation of an object oriented API that aims to provide for more readable code.

       If you’ve already worked with JQuery, then you may be familiar with method chaining as in the below JQuery code snippet, where subsequent method calls are done in the same line.

$("#helloLabel").text("Hello, world!").removeClass("red").addClass("bold").css("color", "yellow");

   Method chaining  is used to implement fluent interface to control the instruction context of a subsequent call. Nevertheless a fluent interface implies more than just method chaining. Generally, the context is

·         defined through the return value of a called method

·         self referential, where the new context is equivalent to the last context

·         terminated through the return of a void context.

        This style is marginally beneficial in readability due to its ability to provide a more fluid feel to the code. However, it can be detrimental to debugging, as a fluent chain constitutes a single statement for which debuggers may not allow setting up intermediate breakpoints, for instance.

        The really cool aspects of fluent interface is the fact that all the methods return the object that we are currently dealing with, which you can then use to call another method. This allows you to do command chaining, where you can perform multiple methods on the same set of elements, which is really neat because it saves you from having to find the same elements more than once.     

       Before beginning with C# implementation of Fluent API, the key points to implement fluent API are,

The methods of interest should

             ·         return the same object type.

             ·         return ‘this’.

        Let’s begin with a simple example to play with fluent interface in C#. Consider the following interface IDraw  which contains two methods conversely Draw()  and Color(). At a plain look it might seems to be an obvious interface unless you’ve noticed that those two methods return the same interface type IDraw  where they fit in. Now this interface is ready for method chaining.

     /// <summary>

    /// Objects that is to be drawn.

    /// </summary>

    public interface IDraw

    {

        IDraw Draw();

        IDraw Color();

    }

Let’s implement this interface in a class  Shape as below,

     /// <summary>

    /// A mere shape class that implements IDraw

    /// </summary>

    public class Shape : IDraw

    {

        public string Name { get; set; }

        /// <summary>

        /// Creates the shape of interest.

        /// </summary>

        /// <param name="name">Shape name</param>

        public Shape(string name)

        {

            this.Name = name;

            Console.WriteLine("{0} is Created", name);

        }

        /// <summary>

        /// Draws the shape. Note here that this method returns "this"

        /// Which is a key for method chaining and thus we can ask our shape

        /// to perform continuous actions.

        /// </summary>

        /// <returns>Current object.</returns>

        public IDraw Draw()

        {

            Console.WriteLine("{0} is Drawn", Name);

            return this;

        }

        /// <summary>

        /// Colors the shape. Note here that this method returns "this"

        /// Which is a key for method chaining and thus we can ask our shape

        /// to perform continuous actions.

        /// </summary>

        /// <returns>Current object.</returns>

        public IDraw Color()

        {

            Console.WriteLine("{0} is Colored", Name);

            return this;

        }

    }

Now we can do the fluent programming.

static void Main(string[] args)

        {

            new Shape("Rectangle")

                .Draw()

                .Color();

            new Shape("Triangle")

                .Draw()

                .Color();

            new Shape("Circle")

                .Draw()

                .Color();

            Console.ReadLine();

        }

           We’ve chained the method calls in the above example. This is achieved as we are returning an object of  type IDraw on each call.  

Now you can do Fluent interface programming !!! Hope this helps…!