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().
Snail on with my learning and writing about the very very basic lessons on JQuery. Again, thanks to all of you for the kicking (ouch! yet the more the merrier), dzon-ing and reddit-ing. I am still glowing in and baffled by the attention (as little as it is. Big for me, since I am no Scott Gu) ...
JQuery, the very very basics - Lesson 2
In "modern" (DOM) web programming, web pages are made up of a hierarchy of elements. Manipulation of elements goes far beyond styling and positioning, it involves almost everything, adding / deleting content, appending and removing children elements, attaching itself to a new parent, cloning ... Everything is possible. The question is : How?
Content manipulation: html() and text()
Pretty much all JQuery commands go both ways: get and set. To access a property only, call the command without parameter; to modify, call the command with a parameter.
html() returns the innerHTML property of a element;
html(content) set the element's innerHTML to the content passed
text() returns the text content (stripped of any html markups) ;
text(content) changes the text content of the calling elements.
So say for example, we have a little html code as the following:
$('table#table1').html(); // returns everything inside the table (id=table1), including the html tags
$('table#table1').text(); // however returns only the actual content (in one big unsepearable string): test1item1
Form element values: val()
To get or set values of form elements, we use val() command (in its two-way street fashion: val() for get and val(content) for set).
A couple of especially neat things about val() command with form element.
a) Remember how we used to painstakingly enumerate through a group of radios until we found the chosen one?
Now with JQuery (with selectors and val()), we may just say:
var selected = $('input[name=selectMe]:checked').val();
b) Remember that JQuery command can always multitask, besides that it can chain up more number of commands than a chain smoker do with cigarettes?
Here is the deal with the val(values) command. It can be used to set up values for each element in selected set in one shot.
Consider the following code:
$('input').val(['red','blue','orange']);
It will check all checkboxes or radio boxes whose value matches any of the values in the array (red, blue, orange) passed to command.
Appending and inserting
JQuery is skilled in moving things around. And it uses exactly the same English words we do (except in a very very economic fashion).
append(something): stick the "something" passed to the end of a matched set;
appendTo(target): stick everything in the selected set to the end of the target;
prepend(something): stick the "something" passed to the beginning of a matched set;
prependTo(target): stick everything in the selected set to the beginning of the target;
before(something): insert the "something" before each element of the matched set
insertBefore(target): insert the whole matched set before the targeted set of elements
after(something) : insert the "something" after each element of the matched set
insertAfter(target) : insert the whole matched set after the targeted set of elements
Wrapping and removing
Like candies that need sparkling wrapping paper, sometimes we want to wrap our element(s) in some sort of wrappers too. For this, we can use wrap(wrapper) command.
$('p.note').wrap("<div class='note'>This is our notes section</div>");
Flipping the coin, we may want to remove things from a wrapper too.
remove(): removes all elements in a selected set. For example:
$('div.note').remove();
Cloning with clone()
We do cloning with clone(), then move the clone to elsewhere, chaining up with commands such as appendTo, insertBefore, before, after, etc.
$('img#cloneme').clone().appendTo('div#gallary');
Read more
Continue on with the series of lessons I learned about some of the very basics of JQuery. Thanks to all of you who has generously kicked, dzoned, redditted my first of N posts on this topic:
JQuery, the very very basics - Lesson 1
So it is nice to be able to use a combination of JQuery selectors to grab an array of elements, however, it would be better if we know how to inspect them one by one and operate on them.
size() and each(iterator)
To determine the size of the set we just selected, we use the size() command.
For example, to list all the ids of the <p> elements we just selected, we can use a for ... loop and the size() command:
To cut the chase even more, we can use the each() command, which takes a literal function as parameter to deal with each element in the set. The element can be accessed using the this keyword. So rewrite the above code:
Get and set attributes' values
attr(name) and attr(name, value)
Well, you probably have guessed it. The first attr() command lets you access the value of an attibute designated by the name, the second attr() command assign the named attribute with the value specified in the second parameter.
For example, I have a dummy <p> element as such:
<p id="p1" title="test">Test, test</p>
$('p#p1').attr('title') returns the value of the attribute title ('test'),
$('p#p1').attr('title', 'more than a test') change the title's value to "more than a test".
Css Style: Dress up, dress down 
addClass(names), removeClass(names) and toggleClass(name)
addClass dresses up all of the elements in a selected set with one css class or multiple css classes; conversely, removeClass strips off the elements one or more css classes specified by the name paramter, as in:
$('p.notes').addClass('notes', 'highlight');
$('p.notes').removeClass('highlight');
Do not we all love to toggle, add and remove, switch and off? Well, toggleClass command does just this, add the specified css class to element(s) if it is not there, remove it if it is.
$('p.notes').toggleClass('highlight');
css(name, value)
What if we want to change css style of elements without using any css class names? There, css command affords us to do so.
$('p.note').css('background-color', 'yellow'); changes the background color of all <p> elements whose class name is note.
There are more css related commands such as width(value), height(value) to allow us to directly change elements' apparence, for example:
$('p.note').width(500).height(100); changes the width then height of all <p> elements whose class name is note.
Read more
JQuery is the star among the growing list of JavaScript libraries. A few of its characteristics are light-weight, cross-browser compatibility and simplicity. A task that would take 10 lines of code with traditional JavaScript can be accomplished with JQuery in just 1 line of code. For example, if you want to dress up a table with an ID mytable with alternative color for every other row, in query, you can simple do this in JQuery. 
Belatedly and slowly, I warm up to JQuery, surprised by its simplicity and sensibilities. Yes, unlike ASP .net ajax libraries, where it feels like that I have to relearn everything and where I was hopelessly overwhelmed by new terminologies, JQuery seems to work along the logic that we have trained our brain with traditional JavaScript and css.
I write to record the series of very basic lessons I learned about JQuery (my study source is the very readable book JQuery in Action).
The magic dollar sign ($) and a chain of operations
In JQuery, the most powerful character / symbol is the dollar sign. A $() function normally returns a set of objects followed by a chain of operations. An example
$("div.test").add("p.quote").html("a little test").fadeOut();
Think it as a long sentence with punctuations. Indeed it is a chain of instructions to tell the browser to do the following:
1) Get a div with class name = test
2) Insert a paragraph with class name = quote
3) Add a little text to the paragraph
4) Operate on the DIV using a predefined method called fadeOut
So there it is, the first two basics: $() and chainable
Selectors:
1. css selectors
We dress up web pages with css stylesheets, css stylesheets dress up DOM elements by DOM hieriachies:
body, table, p, input; or by element ID, since all ids are unique; or class names.
JQuery uses the same set of css retrieval methods to single out one element or a group of elements, and normally we use a combination of them to cut the chase. For example:
$("p.note") returns all <p> elements whose class name = note
$("p#note") returns the <p> element whose id = note
$("p") returns all p elements
2. child, container, attributes selectors
To select a child or children, we use the right angle bracket (>), as in
$("p > a"), which returns all of the href link with <p> element
To select element(s) with certain attributes, we use [], as in
input[type=text], returns all text input elements whose type is text
To select a container of some other elements, we use has keyword, for example:
$("p:has(a)"), returns <p>
3. Position based selectors
JQuery allows us to select element by their relative order, as in:
$("p:first") returns the first <p> element
the predefined positions are
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)
All of them are self explanatory
4. Custom Selectors
The above selector seems to have provided everything we need. However, there is more that JQuery can offer. It allows us to do custom selections using the following keyword:
animated, button, checkbox, checked, disabled, enabled, header, hidden, image, input, not(filter), parent, password, radio, reset, selected, submit, text, visible
Again, nothing fancy, plain English, right?
I thought Bill Gates was out saving the world, now that he has officially taken the full-time job as the chairman of Melinda and Gates Foundation and that he is now in full swing promoting creative capitalism, something about advancing common social good while also making profits.
Turned out, Bill Gates can never quit from Microsoft. Now he i
s starring side by side with Jerry Seinfield prompting, what else? Microsoft windows. The ads are so subtle, so nothing, actually it is not clear what the two men were trying to do other than for being wierdly funny.
In the first ads, Gates twisted his shoes and wriggled his butt; in the second, Gates made dead-pan complaints about food and played powered-out robots. I think he is quite good as an actor, mild-mannered, taciturn.
Many people are puzzled or even angered by the lack of point of the ads. On the other hand, many people raved and are still raving about the Mac Vs. Microsoft ad, where a young lad (good looking, lean, supposedly cool. To me he looked like a Chinese young man in the fifties) called Mac coolly sizes up a happy, clumsy, untidy middle-aged man called PC. The ad ends with a line "Switch to Mac" (or something like that.)
I personally do not find the ads that good. Cannot find any reason that Mac has such a sense of superiority. I cannot stand a Mac computer, with which even word processing becomes a challenge.
When ADC was first released, it had an pretty impressive set of features, sorting, paging, animation, dragging and dropping, client-side databinding.
As time went by, ADC team has added bits and pieces of updates.
1. Enable referencing to an ADC control using its client-name. Sonu uploaded the changes on July 18, 2008. Because it is no fun to reference your control using $find("gridview1"), now instead, you can directly bind a datasource to ADC by its ID, for example:
Gridview1.DataSource = myDataSource.
2. Add onMouseOver, onMouseOut as part of the ADC controls' events, so instead of manully attaching the mouseOver events to a GridView's RowCreatedEvent, coding like the following:
//change css style of a gridview row when mouse over/mouse out
function onRowCreated(sender, e)
{
if (e.get_row().get_isDataRowType())
{
var row = e.get_row();
var tr = row.get_container();
tr.onmouseover = function(){ this.className = 'rowMouseOver' };
tr.onmouseout = function(){ this.className = 'rowMouseOut' };
}
}
We do the following:
<AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" RowMouseOverEvent="onRowMouseOver"
RowMouseOutEvent="onRowMouseOut">
Of course, you have to define you own onRowMouseOver and onRowMouseOut functions.
function onRowMouseOver(sender, e)
{
}
...
Putting it all together, an example of GridView with MouseOver / MouseOut events:
See it how it runs:
please read my other posts about ADC:
When browser usage is tipping toward to FireFox, Microsoft released IE 8 last week, yesterday Google launched Chrome, formally stepped into the browser battlefield.
I like my IE 7 enough I did not bother with IE 8. However, I was curious to see what Chrome can do and how. I went to its download page. Immediately I was hit by an error and was asked whether to debug. I chose yes, and the following is the debugging screen:
Probably it is just me. Searching around no one complained.
.....................................................................................
What do people say about IE, FireFox and Chrome
Chrome: fast and simple. However, it lacks some key features, such as bookmarking.
FireFox: fast, secure and snappy interface. It started tab browsing, which was adopted by IE 7. The best adds-on to me is the FireBug, which provides a rich set of debugging features.
IE: IE suffers the same fate as other products in the Microsoft family. Many people has a visceral dislike about anything Microsoft. I like it and am happy to be one of the 70% of people who is using Internet Explorer.
What holds in the future?
Rome was not built in one day. Even as FireFox has gradually won over users at the expense of IE, it still has no more than 30% of the market share, Chrome likely has a long way to go.
Go with the flow. People say. However, it is not easy to go with the flow, especially the flow branchs out into five-tooth-fork.
I started web programming in 2003. I used asp then. Now five years later, asp was ditched and much ridiculed, asp .net has moved from 1.0 to 3.5. It took me a while, a long while, to wholeheartedly embrace asp .net. The learning curve was deep, programming became an exercise of discovering available properties and methods. However, once I was up above the curve, I felt great and appreciative of what asp .net offers: a comprehensive framework that is flexible, scalable, with many tools big and small for pick and use.
Season turns, time flies.
In marching to the .net world was ASP .net AJAX. ASP .net AJAX is a complete departure from the asp .net server-centric model, now server's role is pretty much limited to that of a data-provider and client script takes over the rest of tasks such as event-responding, data-dressing. For this purpose, asp .net releases a quite bulky asp .net AJAX library. It also introduces a quick and dirty control updatePanel for a partial page refreshing. Most people have realized that updatePanel is a dangerous entity, it incurs heavy perfomance penality, complicates a page's control tree, and posts all unnecessary bits back to server.
Then there is MVC (model-control-view). It is not really that new and it has just released its fifth version. MVC again represents a modal, new mentality. It does not resemble in any way with the now "legacy" model of asp .net web form application. The model represents the information (the data) and the business rules used to manipulate the data; the view corresponds to elements of the user interface such as text, checkbox items, and so forth; and the controller manages details involving the communication to the model of user actions such as keystrokes and mouse movements. This architectural pattern is new. The url rerouting used in controller is new. MVC ushers in a new framework.
Microsoft is battling on all fronts. Silverlight is a product of the battle against ADOBE's flash, which now made the very, very popular YouTube. Looks like that Silverlight has not made much ground at the expense of FLASH. But sure, Silverlight is a new baby too, even though now it is into its second release. Officially, "Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web."
Whatever that means?
Of course, there is more. There is always more.
More Posts
Next page »
