Thursday, June 30th, 2005
Ed Burns (JavaServer Faces spec lead) has written his first Ajaxian JSF component: A progress bar
<d:progressBar id=”progressBar” value=”#{process.percentage}” interval=”1000″ />
It is based on “Greg Murray’s very useful but utterly non-componentized Progress Bar example”.
There is also an autocomplete Ajaxian Faces component.
Category: Library
The Pushlets team has added Ajax to their HTTP-based publish/subscribe framework.
You can check out an example here.
In the code they have functions for the various events:
function leave() {
doRequest(’/pushlet/pushlet.srv?p_event=leave&p_id=’ + sessionID );
}
and then the typical XHR to access the pushlet server side:
function doRequest(url) {
// Create XMLHttpRequest object and open URL in async mode
xmlhttp = new XMLHttpRequest();
xmlhttp.open(”GET”, url, true);// Response handler
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
onResponse(xmlhttp.responseText);
}
}
// No need to send body
xmlhttp.send(null);
}
and the meat in onResponse:
function onResponse(responseText) {
// Response is XML document: parse it using XParse
// Using XML DOM is too much hassle…
var xmlDoc = Xparse(responseText);// XML document is parsed into tree of arrays, contents[0] is
element
eventElements = xmlDoc.contents[0].contents;// Go through all
elements
for (i=0; i< eventElements.length; i++) {
nextEvent = eventElements[i];// Determine action based on event type
eventType = nextEvent.attributes['p_event'];
if (eventType == ‘refresh’) {
// Pull mode: need to sleep and refresh
refreshURL = nextEvent.attributes['p_url'];
timeout = nextEvent.attributes['p_wait'];
setTimeout(”refresh()”, timeout);
} else if (eventType == ‘join-listen-ack’) {
sessionID = nextEvent.attributes['p_id'];
} else if (eventType == ‘leave-ack’) {
sessionID = null;
eventCount = 0;
}
}
}
Category: JavaScript
In the “cool JavaScript snippets” department, we delve into the Prototype library for a nice function which tries to fire and forget through a set of operations.
Defining Try.these
var Try = {
these: function() {
var returnValue;
for (var i = 0; i < arguments.length; i++) {
var lambda = arguments[i];
try {
returnValue = lambda();
break;
} catch (e) {}
}
return returnValue;
}
}
Example using the function
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new ActiveXObject('Msxml2.XMLHTTP')},
function() {return new ActiveXObject('Microsoft.XMLHTTP')},
function() {return new XMLHttpRequest()}
) || false;
},
emptyFunction: function() {}
}
Wednesday, June 29th, 2005
Category: Articles, JavaScript, Usability
Ben Nolan has written a nice piece called Using CSS selectors to apply Javascript functionality. He looks at Ajaxian showcases, and doesn’t always like the code that is mixed in the HTML.
He goes on to explain how to use CSS selectors to abstract this code out, giving you the other benefit of a clean graceful failback model.
For example, migrating from:
<li>
<a onclick=”this.parentNode.removeChild(this)” href=”#”>
Click me to delete me
</a>
</li>
to:
<ul id=”example”>
<li>
<a href=”/someurl”>Click me to delete me</a>
</li>
</ul>And then use css selectors to select that <a> element and add javascript functions to it.
var myrules = {
‘#example li’ : function(el){
el.onclick = function(){
this.parentNode.removeChild(this);}
}
};Behaviour.register(myrules);
How important is this? Especially if frameworks are churning out the code for you?
Tuesday, June 28th, 2005
Category: Library
Microsoft got hit by the Ajax term like everyone else. They have been “doing Ajax” for a long time, as many companies had been, before the Ajax term took off. If you looked at ASP.NET 2.0 (Whidbey) you would have seen Ajax all over the shop. They have components that you can drag and drop in that use Ajaxian techniques.
They want the world to know that “WE DID AJAX!”, so they packaged together Atlas:
Microsoft’s Atlas is a “Web client framework” designed to make the job of building AJAX-style applications simpler, said Charles Fitzgerald, the company’s general manager for platform technologies.
“People who do (AJAX development) are rocket scientists,” Fitzgerald said. “In some ways, this papers over the mess that is JavaScript development. It’s easy-to-build ’spaghetti’ code.”
Atlas–which is a downloadable piece of JavaScript code–gives developers a more structured environment for building applications, providing time-saving services such as an object model and debugging, he said. It will work across any Web browser that supports AJAX technologies.
Read more
Microsoft Wants a Piece of the Ajax Action
Microsoft Plans An Alternative To Ajax
Category: JavaScript, Prototype
You may have seen $('someId') in some of the JavaScript frameworks out there such as Prototype and DWR.
We have had people wonder what kind of magic that is, and it is just a function. The name of that function just happens to be ‘$’, which is totally valid in JS.
Prototype, being nice and pragmatic, saw that there was a LOT of document.getElementById(element) all over the shop. So they give us the shorthand of $(element). A lot nicer :)
To see one implementation check out the DWR JavaScript docs.
function $()
{
var elements = new Array();for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == ’string’) {
if (document.getElementById)
{
element = document.getElementById(element);
}
else if (document.all)
{
element = document.all[element];
}
}if (arguments.length == 1) {
return element;
}elements.push(element);
}return elements;
}
Monday, June 27th, 2005
Category: JavaScript
“JavaScript doesn’t seem very OO”. I hear that a lot. How far from the truth it is though. A lot of us are just trained to think that OO == CLASS BASED OO, which has won out in a lot of popular OO languages of late.
JavaScript is fully OO, and arguably more so than many other languages (everything is an object, thank god). It just so happens that Brenden Eich was a fan of Self, and choose to sent JS down the path of prototype based OO.
Take some time looking into the way that JS works. It is actually ridiculously elegant, and if you need to grok inheritence read the smart article Object Hierarchy and Inheritance in JavaScript.
Another way to grok this all, is to go to Glenn Vanderburg’s talk about JavaScript on the NoFluffJustStuff conference tour.
His opening intro is one of the best starts to a presentation I have ever seen. Absolutely classic.
Armed with the knowledge, you will find your head exploding as you realise the power that you have in JavaScript. You can change anything. Hence the quote that JavaScript is LISP with a different syntax!
Category: Utility
A blast from the past here. A lot of people are not aware of Douglas Crawford’s JavaScript Minifier which does what it says on the box:
JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.
Think,
jsmin yourjsfile.js condensed.js
There has been a more recent port to C#, called Jazmin.
Friday, June 24th, 2005
Garrison Locke has updated his Ajaxian spell checker with a 2.2 release.
A few of the major updates to the spell checker are:
Nice work Garrison!
Category: Showcase
Johnvey Hwang has created an alternative UI for del.icio.us that enables you to browse all of your bookmarks in a more interactive fashion.
del.icio.us direc.tor uses the XML/XSL features of the browser to handle very large record sets. It works by downloading your entire bookmark file from the API, and managing it in the browser.
Category: Showcase
Today’s Friday item is the JSCalc: the JavaScript calculator bookmarklet.
With this bookmarklet you will never have the feeling of:
Man, I need to do a quick calculation, but I don’t want to open Calc!
Category: Showcase
A swedish search engine, Enviro, which uses Ajaxian techniques.
If you search for someone like ‘pettersson’ and the click on a result, you will see an example in action.
Thursday, June 23rd, 2005
Category: JavaScript, Library
The land of Google Code has released a little library used in their Ajaxian applications (such as Google Maps and Suggest). The first piece released is Google AJAXSLT.
AJAXSLT is an implementation of XSL-T in JavaScript, intended for use in fat web pages, which are nowadays referred to as AJAX applications. Because XSL-T uses XPath, it is also an implementation of XPath that can be used independently of XSL-T.
To be honest, I think it is a little funny that this JavaScript XSL/T library has Ajax in the name :)
There are also other XSL resources such as:
Great to see Google giving back in this way, hopefully we will see some real Ajaxian libraries and components soon :)
Category: JavaScript, Library, Prototype, Ruby
Thomas Fuchs has given birth to: script.aculo.us. (Note to self. Must. Kill. .us domains that make words).
script.aculo.us provides you with easy-to-use, compatible and, ultimately, totally cool JavaScript libraries to make your web sites and web applications fly, Web 2.0 style.
script.aculo.us builds on Prototype, and gives you interesting items such as:
Great to see libraries like this making app developers lives so much easier.
Category: Usability
The more I use the new Ajaxified del.icio.us the more I like it.
I had a “duh” moment when I realised that you could tab complete tags.
This brought up a usability issue. On the web we are trained to think:
Tab == Go To Next Field (or element if not in a form)
I think that del.icio.us and anyone trapping the tab (and others) need to follow the rules of:
What do you think?
Wednesday, June 22nd, 2005
Category: Showcase
Michal Migurski has put up a Giant-Ass Image Viewer showcase, which shows how to pan and scan a la Google Maps.
This is a draggable, zoomable satellite mosaic of Antarctica that Eric found. (This space used to have a print from Ernst Haeckel’s Kunstformen der Natur, but the current image is 4x larger) Please use Mozilla, Opera or Safari to view. I’m getting closer to getting this working in IE, mostly by accident - as soon as I have a chance to see why IE complains about killing the onmousemove handler, it’ll be pretty much done.
It doesn’t seem too happy when it comes to clicking and such, so it moves around like crazy sometimes.
There is a python script that takes the roll of splitting up the main image into the small square pieces that get painted.
In Episode 25, we chat about IE 8, standards, Acid3, server side JavaScript, and more.
Who are the ajaxians? Find out.
Please contact us at . We would love to hear about any news that we could put up here.
We have individual blogs too:
