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.
- 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.