Using the Prototype Model with Microsoft AJAX

2007-02-01

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.

Ability Bind Data in JSON Format
Paging Functionality in Numbers and "Next" and "Prev" Links
Jump to a specific page
Support for Placing the Controls at Specified X and Y Locations
Support for Customising the Horizontal and Vertical Offset between thumbnails
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":"https://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":"https://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.

PhotoGrid.zip

Comments

Anonymous
February 01, 2007
You've been kicked (a good thing) - Trackback from DotNetKicks.com
Anonymous
February 01, 2007
The comment has been removed
Anonymous
March 13, 2008
Thats great. I am wondering in my new project about the JSON format. This clears my doubts abt the script used in this project. Thank you Phani.

Share via

Using the Prototype Model with Microsoft AJAX

Comments

Additional resources