October 2008 - Posts
When you are a new kid, you cannot wait to grow up. However, when you are older then older, every passing year makes you feel the loss and the tick of the clock.
That is how I also feel about the forward-and-fast moving versions of software and programming models, frameworks and technologies.
Here it comes: Visual Studio 2010.
http://visualstudiomagazine.com/columns/article.aspx?editorialsid=2848
Here it comes again: asp .net 4.0.
http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=14924
Shame to say, there are so many cool functionalities I have never coded nor used in my websites, such as programmatically generate screenshots, generate animated gif using a sequence of screenshot, create captcha, in-progress animated image.
Fortunately, there are many pieces of working code up for taking on the web.
ASP .NET Captcha server control :
Very popular (meaning it has been widely tested)
Screenshot of Webpage with ASP.NET
Make use of IECapt.exe to capture screenshot of a web page given by an URL
Create an animated GIF using .Net (C#)
This seems to be a hard one. Most animated GIFs are created by using offline imaging software, however, I sometimes I really want to streamline this process, especially when I want to demo a running web page.
This one seems to work, though it has only given only minimal explanations.
Animated "Wait" image and long-running progress
There are so many progress-bar type of applications, however, this one is breathtakingly simple and ingenious.
There are hundreds of AJAX frameworks and libraries. And the number is still growing (Face it, because the web, with the demand of rich data and fast, smooth user experience, is AJAXified overnight).
However, I only know three: JavaScript AJAX, JQuery, and ASP.net AJAX.
JavaScript AJAX uses the very raw XMLHttpRequest. It's quite wordy, and needs to be always careful with different browser traps. That is, you always have to detect if XMLHttpRequest is supported, as such:
var request;
if (window.XMLHttpRequest())
request = new XMLHttpRequest();
else if(window.ActiveXObject)
request = new ActiveXObject("Msxml2.XMLHTTP")
else
// throw an error here
ASP .net ajax is the Microsoft /asp .net team's approach to AJAX. It uses a ScriptManager and carries with it the quite bulk ASP .net ajax library. In the beginning, UpdatePanel, a partial postback web page refreshing model, plays a big role in ASP .net ajax, however, because of the heavy toll it exerts on bandwidth and performance, most people have abandoned its usage. ASP .net AJAX makes calling web service easy, and you get to use many of nice features in asp .net, such as membership, profile system.
JQuery has a number of functions that made AJAX easy. And as it is the case with JQuery, it is lightweighted and succinct. The list of functions are:
$.load (url, parameters, callback) : to load server response data to an element
$.get (url, parameters, callback): GET request with parameters
$.post (url, parameters, callback): POST request with paramenters
$.getJSON(url, parameters, callback): send a get request, response is interpreted as a JSON string
$.ajax (options) : send AJAX request with a number of options, including url, type, dataType, timeout, global, contentType, etc.
On with my JQuery learning series.
For every programming language, there is invariably string manipulation and array fiddling. No exception with JQuery. Being unobtrusive in principal and complimentary in nature, it does not try to replace the existing bulk of JavaScript functions with its own, rather, it simply adds some of the most sorely missed functions.
Trimming a string: $.trim(value)
In dealing with strings, JavaScript already has quite a comprehensive set of functions, such as
split, substr, charAt (see references at
http://www.w3schools.com/jsref/jsref_obj_string.asp), however, for some mysterious reasons, it does not have a trim function for ridding of leading and trailing white space. Smart and generous people have contributed to the web various versions of their trim functions. Such as:
var trimmed = str.replace(/^\s+|\s+$/g, '') ;
It works perfectly. However, how about simply call trim() function provided by JQuery? The syntax is $.trim(value)
var trimmed = $.trim(" this really needs to be trimmed ");
Clean and plain English, right?
Array functions:
$.each (container, callback)
In JQery, in addition to the conventional JavaScript array (array of strings, numerics, elements), there is also specifically object array in the form of key-value pairs.
The former array is coded as:
var arr = [ "one", "two", "three", "four", "five" ];
The later (each pair seperated by a colon :) :
var obj = { item1: "one", item2: "two" ,item3: "three", item4: "four"};
It has always been easy to loop through an JavaScript array. However, it can be easier with the JQuery $.each function. The syntax is
$.each (container, callback). The callback function receives two arguments with the passing of each element: with [] type (traditional JavaScript) array, index and value; with {} type (array of objects with properties), key and value.
So we can access JQuery array elements as such (forgive me for using so many alerts):
$.grep (array, callback, invert)
JQuery offers a $.grep() function to return an array of elements that matches a certain condition. The callback function is passed two parameters: the current value and its index. For example,
One convenient function to transform all of the elements in an array in one shot. Change a string array into a numeric array? Yes; Change the numeric array back to a string array? Yes; Add a 10 to every number in an array? Yes. Just call the $.map function.
For example:
Other extremely useful JQuery array functions are:
$.inArray(value, array), returns the position of the first occurance of the element by a specified value. As in:
$.unique(array), returns a deduplicated array. As in:
$.makeArray(object), create an array out of a selected elements. As in:
$.extend(target, source1, source2, ... sourceN), extends the target object with the properties of the sources. For example:
Found a great bunch of links about using JQuery with asp .net
Using jQuery to directly call ASP.NET AJAX page methods
encosia.com — An example of how to use jQuery to call an ASP.NET AJAX page method, without using a ScriptManager.
Using jQuery to consume ASP.NET JSON Web Services
encosia.com — An overview of consuming ASP.NET web services that are JSON serialized by the ASP.NET AJAX extensions, including a specific example of using jQuery to do so.
Using jQuery To Call ASP.NET Page Methods and Web Services
dexign.net — Seems like more and more ASP.NET devs are using jQuery. There are similar things on DNK but none that actually do provide code that uses jQuery to callback.
Integrating jQuery with ASP.NET
An alternative AJAX solution to use jQuery instead of ASP.NET AJAX
How to manage ASP.NET validation from Javascript with jQuery
codeclimber.net.nz — This article outlines how to enable and disable ASP.NET client side validation from Javascript using jQuery
Ajax and json for ASP.NET MVC with jQuery
chrisvandesteeg.nl — an example project that uses the jQuery library to create an ajax enabled ASP.NET MVC website. Generally what this project does: * Load views through ajax (with back-button support) * Do ajax-style form-posts and retrieve only the messages, errors and updated content * Do json form-posts and retrieve the errors an
3 mistakes to avoid when using jQuery with ASP.NET AJAX
encosia.com — Three common problems that I've seen when using jQuery with ASP.NET AJAX, their underlying causes, and simple solutions to them.
(Better) JQuery IntelliSense in VS2008
weblogs.asp.net — If you are like me and you've read the many articles about how to get other javascript libraries to work in VS2008, you'll know that all you really need to do is install the visual studio HOTFIX.
Client Side Templating with jQuery
west-wind.com — When building AJAX applications there's often the requirement to choose between client and server side rendering. Server side ASP.NET controls provide rich templating, but updating those controls on the client can be difficult. Or is it? Here's one approach using jQuery and HTML templates in markup script to dynamically create complex layout on the client without writing reams of script code.
On with our journey of learning JQuery. Thanks to all of you who has stayed and cheered me and made me go on, against my own lazy nature. So far, we have slowly walked through the bunch of commands by which we select, dress up, manipulate chains of elements and make them action bound.
Now, let's look at the tiny set of commands for special-effects: show / hide with a speed, slide up / slide down, fade in and out. After all, we are human, insatiable for animations and wow factors. (However, please do not overplay your hand. :))
Show / Hide, Slower and slower, then faster and faster
Now, with JQuery, we can just say, (yes, you guessed it), show() to show, hide() to hide, an element or a matched set of elements:
Of course, we can also tap the good sense of toggle() command, which can detect then reverse the state of a given element. Is it shown now? Yes -> then hide it; No -> show it.
Easy.
One cool thing about this show/hide/toggle business is that we can now add a speed element to really animate the magic of appearance, disappearance and reappearance.
Speed in other languages is a rare thing, however, it is a norm in JQuery. From now on, we will speed things up and down often and very much at ease, for example, slide, fade, animate, etc. There are three predefined speeds: slow, normal and fast. Of course you can always come up with a speed in measure of milliseconds that suits you.
The following one line of code slowly alternates a layer's showing and hiding.
$('div#toggle').toggle('slow'">);
Slide up and down, fade in and out
Sliding up and down a layer used to be a challenge. Not anymore. Now we can just use these tell-it-all commands:
slideUp(speed, callback), slideDown(speed, callback). Of course, do not forget toggle. With sliding, the toggle command is
slideToggle(speed, callback).
So is the case with fading in and out. The commands for fading are: fadeIn(speed, callback), fadeOut(speed, callback).
An example:
All right, see you next week (I wish I could give you a Sarah Palin wink :).
On again with the very basics of JQuery. Thanks again for all of the kicks, dzones, stumbled-upons. I am wearing a permanent thank-you smile now. :)
Now that we have done with the selection and manipulation of JQuery elements, time for some actions (event handling). Actions, reactions, interactions, through which we learn, connect and play, through which web becomes an inseperable part of our lives.
However, it is daunting to create a sophisticated uniform interaction model on the array of competing browsers. Besides, there are different DOM event models. Admit it, how many times have you had this Yes/No interchange between you and your user?
Yes, it works
No, it does not. It does not do anything.
What browser do you use?
...
Well, JQuery shields us with a unified front for cross-browser event handling model. It also allows an event to be tied with or released from multiple event listeners. For any events (blur, change, click, focus, keydown ...), we can access their properties such as keyCode, pageX, pageY, screenX, screenY, shiftKey, target.
Event binding and unbinding: bind() and unbind()
bind(eventType, data, listener)
So instead of attaching a click event to an image as the following:
<img id="img1" src="arrowup.jpg" onclick ="showMe()">
With JQuery, we bind event handler(s) using the bind() command.
It is easy to uniformly handle an event of a matched set of elements with JQuery selectors and the
bind() command.
For example, modified the above code a little,
Now we have just instructed every image on a page to respond the click event.
The bind() command can be used to bind indefinite event handlers to one event. Again, consider the above example, change it a bit:
Every coin has two sides. We bind then we unbind, in either of the following ways:
unbind(eventType, listener)
unbind(event)
Directly using event names and triggering event handlers: eventName() and trigger()
The most common-place events get first-class, convenience treatment. For these everyday, everywhere events: click, focus, select, submit, blur, we can omit the bind() command and directly set up handlers for them.
The syntax is: eventName(listener), such as click ( function () { } ) ;
or simply eventName(), such as click () ;
For example,
$('img').click(function(event) { alert('My id = ' + this.id);});
$('img#clickMe').click() // this fakes a click action from the image whose id = clickMe
trigger(eventType)
Sometimes it is necessary to trigger an action instead of merely responding. For example, sometimes we want programmatically trigger the action of submitting a form. How can we do it? Go trigger.
//...
trigger('submit');
We can trigger such action through the firing of another event.
Toggling event handlers: toggle(handler1, handler2, handler3, ...)
With JQuery, convenience is the key. If there is a behavior that occurs habitually, there is bound to be a command that helps you to do just that. Such is case of toggling. As you can see from the syntax of the toggle() command, you can toggle among a good number of handlers.
Toggling is good to adjust styles of a matched set of elements. First time, I turn blue; next time, I go green; then, I change to red ... until I change back to blue. Again. And again.
Hovering over: hover(mouseoverhandler, mouseouthanlder)
hover() is another example of convenience command. We are all delighted to see hyperlinks and images change into and out of different style or images. For that, we all have been busy writing out mouseover() and mouseout() code. Now, with JQuery, we just call this command: hover().
