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.

PhotoGrid.zip

Comments (3)
  1. You’ve been kicked (a good thing) – Trackback from DotNetKicks.com

  2. A Potential Security Hole with "Remember Me Next Time" [Via: Scott Mitchell ] Conditionally Serve Files…

  3. Suvek says:

    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.

Comments are closed.

Skip to main content