Moooo what?
The name is MooTools, a very cool Javascript Library with object oriented and Ajax support. It simplifies the way you write your scripts because it has a very simple syntax and a lot of features integrated (like effects, Drag and drops, scrolls, Tooltips, etc, etc).
To test the framework, I started yesterday an Star Rating control in ASP.NET. I Clearly needed 2 things
- an css based rating system;
- a framework that allowed me to do Ajax Posts
The first was easy. I made a little search and found 2 very simple that i recommend: Komodomedia and pmob.
For this example I used the second. Both are well done, so i just picked one of them.
The second: do some code using mootools (Also very easy like is expected of any javascript framework)).
First Step: The creation of the control
The first thing to do is to to create a control that renders the star rating. The method GetRating is something abstract because, according to your implementation (and context of usage) this information will come from a specific place.
Let's just suppose that the we are in a context of an blog and the rating goes to a database and get's the average rating of the current post.
NOTE: for test proposes the method can return the value '3' (just to see some stars).
-
public class RatingControl : Control {
-
#region Fields
-
-
private static string[] styles = { "nostar", "onestar", "twostar", "threestar", "fourstar", "fivestar" };
-
-
#endregion
-
-
#region Private
-
-
private static int GetRating() {
-
//Get the rating from the item here
-
return 3;
-
}
-
-
/// <summary></summary>
-
/// Renders the CSS rating
-
///
-
private void RenderStars( HtmlTextWriter writer, int rating ) {
-
writer.Write("
-
<ul id="rating" class="rating {0}">", styles[rating]);
-
writer.Write("
-
<li class="one"><a href="#" title="1 Star" class="star">1</a></li>
-
");
-
writer.Write("
-
<li class="two"><a href="#" title="2 Stars" class="star">2</a></li>
-
");
-
writer.Write("
-
<li class="three"><a href="#" title="3 Stars" class="star">3</a></li>
-
");
-
writer.Write("
-
<li class="four"><a href="#" title="4 Stars" class="star">4</a></li>
-
");
-
writer.Write("
-
<li class="five"><a href="#" title="5 Stars" class="star">5</a></li>
-
</ul>
-
");
-
//Render a div to write a message
-
writer.Write("
-
-
");
-
}
-
#endregion
-
#region Overriden methods
-
protected override void Render(HtmlTextWriter writer) {
-
int rating = GetRating();
-
RenderStars(writer, rating);
-
}
-
#endregion BaseFieldControl Implementation
-
}
After create this control, create and aspx and insert insert the control into an ASPX test page. Don't forget to add the css of the star rating to the aspx. This css is available at http://www.pmob.co.uk/temp/star-rating.htm ( or simply download the zip at the end of the page 
).
-
<%-- register the control --%>
-
<%@ Register TagPrefix="tst" Namespace="Test" Assembly="Test" %>
-
-
<%-- call the control --%>
-
<tst:ratingcontrol runat="server"></tst:ratingcontrol>
then compile and run the project. You should see something like this:
Second Step: The javascript
Now that we have the control running, we need to add to each star and event onclick so we can handle the user rating. To do this, we will the following script:
-
var styles = ['nostar', 'onestar', 'twostar', 'threestar', 'fourstar', 'fivestar'];
-
-
var Site = {
-
rating: function(){
-
//Get all the elements below the element with id
-
//"rating" that have the class star
-
var stars = $$('#rating .star');
-
-
//for each one of those elements
-
stars.each( function(star, i) {
-
//Add an onclick event
-
star.addEvent('click', function(e) {
-
-
//Build the url of the ajax request
-
var idx = i+1;
-
var url = "Formatter.aspx?rating="+idx;
-
-
//Creates an Ajax Request for the page Formatter.aspx
-
//this page will receive the parameter rating by QueryString
-
//and do something with it
-
method: 'get',
-
update: $('ratingMessage')
-
}).request();
-
});
-
});
-
}
-
};
-
-
window.addEvent('load', Site.rating);
The Ajax type has an event named "update". This is very useful because you can simply put the html element you want there (In the example above I inserted the element "ratingMessage') and the response of the request will simply be inserted into the element.
After this step you will not be able to see anything moving (yet!) because the page that handles the ajax request, Formatter.aspx, isn't created.
Third Step: Process the Ajax request
Finally the page responsible for receiving the ajax request, the Formatter.aspx (to make the example simple, I used an aspx page but you can also any type of file).
The page only receives the value of rating (to simplify the example) and returns a text indicating which rating we choose.
-
public class Formatter : Page {
-
-
protected override void OnLoad(EventArgs e) {
-
string r = Request.QueryString["rating"];
-
HttpContext.Current.Response.Write( string.Format("Rating '{0}' received!", r));
-
}
-
-
}
You can download this example here
Random Posts
4 Responses to “Moooo what?”
Leave a Reply
Rss
May Interest You
Archives
- October 2009 (1)
- August 2009 (1)
- June 2009 (1)
- May 2009 (4)
- April 2009 (1)
- March 2009 (1)
- February 2009 (5)
- January 2009 (3)
- December 2008 (5)
- November 2008 (6)
- October 2008 (6)
- September 2008 (5)
- August 2008 (1)
- July 2008 (5)
- June 2008 (9)
- May 2008 (10)
- April 2008 (8)
- March 2008 (12)
- February 2008 (4)
- January 2008 (7)
- December 2007 (12)
- November 2007 (16)
Categories
Autentication
The Guy
My name is Nuno Silva and I am the author of this blog. I am a Computer Engineer and have a passion for game development.
So, in this blog you find especially things about the web, game development, software, my personal projects (Orion's belt for instance) and, sometimes, just crazy things that pass through my head.
To stay tuned, subscribe my rss feed
Just a FYI…
As of mootools version 1.1, mootools is not compatible with MS AJAX. There are conflicts in the native array extensions, specifically in the Array.each extension. Using both together will result in errors. Version 1.0 works fine.
It’s too bad really, ‘cuz mootools is by far the best js framework I’ve worked with, and I’ve used them all…
BTW…I realize your example isn’t using MS AJAX. I just wanted to let ppl know in case they get all excited to use mootools and they also use MS AJAX…
Yes the example only uses mootools. I’m actually a little septic about MS Ajax. It’s all cool and easy to use, but the network traffic it generates must be enormous (viewstates, etc).
This is just me talking. Although i already used MS Ajax (in the beta version), I didn’t made any network analysis to the ajax request/response traffic traffic (maybe that should be something I should do before say anything else about MS Ajax traffic
).
But the point here was showing that mootools Ajax framework is very easy to use and that we can control all the Ajax requests and responses in a very simple an elegant way.
[...] Moooo what? (via DotNetKicks) [...]