Using the Prototype Model with Microsoft AJAX

Microsoft Ajax allows you to extend your javaScript Programming framework so that you can emulate OOP practices with Javascript .

A SImple Example is Here

The following is a list of stuff you can Use in javascript with Microsoft Ajax Extensions to javascript

• Classes

• Namespaces

• Inheritance

• Interfaces

• Enumerations

• Reflection

Sounds Neat , doesnt it ?

Well, lets get started ...

We will build a Re-usable Photo Grid Component that you can use in your applications .

PhotoGrid  : It will show a grid of thumbnails with Animations associated with Click of each thumbNail.

On Click of the ThumbNail , the ThumbNail will move to a specific location and Resize itself .

The PhotoGird will have the Following Features.

1. Ability Bind Data in JSON Format
2. Paging Functionality in Numbers and "Next" and "Prev" Links
3. Jump to a  specific page
4. Support for Placing the Controls at Specified X and Y Locations
5. Support for Customising the Horizontal and Vertical Offset between thumbnails
6. Support for specifying the Number of images in each page.

It will be written as a Client Side Java Script Re-usable Component

Th JSON Data format will be like this

{
"ResultSet":{"totalResultsAvailable":"50014","totalResultsReturned":7,"firstResultPosition":1,
"Result" :
    [
     {
        "Title":"The-Incredibles-Poster-C10219976.jpeg",
        "Summary":"",
        "Url":"http://a1259.g.akamai.net/f/1259/5586/1d/images.art.com/images/-/The-Incredibles-Poster-C10219976.jpeg"

     }
     {
        "Title":"The-Incredibles-Poster-C10219976.jpeg",
        "Summary":"",
        "Url":"http://a1259.g.akamai.net/f/1259/5586/1d/images.art.com/images/-/The-Incredibles-Poster-C10219976.jpeg"

     }
    ]
}

The PhotoGrid Component will convert the Data into something that looks like this 

On Clicking of a thumbnail  , it will resize itself automatically , then it will look like this 

Now that I  have , hopefully, raised your curiosity . lets build this..

Creating the PhotoGrid Component using Microsoft AJAX Exntensions

1.Register the NameSpace

Type.registerNamespace("AtlasDemo");

2.Declare the Constructor for your class.

AtlasDemo.PhotoGrid = function ( leftPosition , topPosition ,parentControlId ,animatorGlobalIndex ,tableID, horizontalOffset,VerticalOffset ){ 
this._jsonString        = "";
this._gridData          ;
this._pageIndex         = 0;
this._firstImageIndex   = 0;
this._leftPosition      = leftPosition;
this._topPosition       = topPosition;
this._parentControlId   = parentControlId;
this._thumbNailTableId  = tableID;
this._horizontalOffset  = horizontalOffset;
this._loopIndex         = 0 ;
this._verticalOffset    = VerticalOffset;
this._pageSize          =7;
this._startIndex        =0;
this._initialStart      =0;

}

2. Define the functions of the PhotoGrid using the Prototype model .

Syntax:

AtlasDemo.PhotoGrid.prototype = {
  <functionName1>:function([arguments])
  {
    <FunctionBody>
  }
  ,
  <functionName2>:function([arguments])
  {
     <FunctionBody>
  }
}

The Code inside the JS function is specified in this  format , pretty neat  and organised 

Actual Function Definitions:

Function Name    : pagesAvailable

Function Purpose : To Return the Number of Pages Available For Paging 

Return Value     : JSON Object with the total Number of Pages, Pages available in the Forward Direction and Backward Direction

Input Parameters : None

Function Code:

pagesAvailable:function()
    {
        var totalPages    = parseInt(this._gridData.ResultSet.totalResultsReturned)/parseInt(this._pageSize);
        var pagesForward  = parseInt(totalPages) - ( parseInt(this._pageIndex) +1 ) ;
        var pagesBackWard = parseInt( totalPages - pagesForward ); 
        var jsonStringData = "{\"pagesData\":{\"totalPages\":\""+totalPages+"\",\"pagesForward\":\""+pagesForward+"\",\"pagesBackWard\":\""+pagesBackWard+"\"}}"
        return ( eval( '(' + jsonStringData + ')' ) );
    }

The following are functions inside the Prototype function Declaration, the code is omitted for the purpose of clarity.

    setPageSize:function(pageSize)
    {
        <Function Body>
    },
    setData:function(jsonString)
    {
        <Function Body>
    },
    resetPositions:function( leftPosition , topPosition , animatorGlobalIndex  )
    {
        <Function Body>
    },
    resetAll:function ( jsonString ,leftPosition , topPosition ,parentControlId ,animatorGlobalIndex ,tableID, horizontalOffset,VerticalOffset ){ 
        <Function Body>
    },
    clearResults : function( leftPosition , topPosition , horizontalOffset,VerticalOffset )
    {
        <Function Body>
        
    },
    
    ShowPager:function(shouldIShowThePager,pagerControlHolder,pagingFunctionName)
    {
        <Function Body>
    },
    PageForward:function()
    {
    
        <Function Body>
    },
    __pagingFunction:function()
    {
       <Function Body> 
    },
    CurrentPageIndex : function()
    {
        <Function Body>
    },
    PageBackward : function()
    {
        <Function Body>
    },
    AnimateElement:function( imgElement )
    {
        <Function Body>
                        
    },
    CreateNewPhotoCell:function( searchResultItem )
    {
        <Function Body>
    }, 
    BindGrid : function()
    {
         <Function Body>
    }

3. Once you have declared the functions supported by the PhotoGrid Class, lets Go ahead and register the class.

AtlasDemo.PhotoGrid.registerClass('AtlasDemo.PhotoGrid', null, Sys.IDisposable);

You can read all about the registerClass Here.

You are now done!

Lets go ahead and see how to use this component in our code.

ASPX Code:

1. Add the Mandatory Script Manager Control.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

2. Include a reference to your script File in the <BODY> of the ASPX Page

<script type="text/javascript" src="ClientScripts/PhotoGrid.js"></script>

3. The Parent Control that will hold the ThumbNails

 <div id="divActualSize" style="left: 10px; overflow: auto; width: 90%; position: absolute;
            top: 18%; height: 650px" class="grey">
            <table id="tblThumbnails">
                <tbody>
                </tbody>
            </table>
 </div>

4. The Client Functions to the PhotoGrid Component

function CreateGrid( JSONDataToBeBound )
{
  //Create an instance of the PhotoGrid Control
  var gridElement = new AtlasDemo.PhotoGrid( leftPosition , topPosition,"",0,"tblThumbnails",horizontalOffset,VerticalOffset) ;
  //Set the Data for the PhotoGrid Control
  gridElement.setData(JSONDataToBeBound); 
  //Set the Number of images to be shown in one Page
  gridElement.setPageSize( pageSize );
  //Bind the Grid
  gridElement.BindGrid( );
  
}

we are done !

I have made a sample application that uses this control and shows off all the features possible .

Please let me know if this control is of any use to you .

 If yes, then how ?

 If No , then which features / options would make it useful ?

You can download the Sample Application here.