Monday, October 31st, 2005
Category: Editorial
Zimbra has gotten a lot of buzz with their killer Ajax products.
Since they are really pushing the envelope, they are good people to listen to on Ajax issues, and they just blogged about Ajax sweet spots. Here they talk about identifying sweet spots, the notion of an Ajax server, Ajax-based messaging, and more!
How do we identify the sweet and not-so-sweet spots for Ajax?
First, Ajax programming is still too hard (again see Ajax programming report card), and the associated programming challenges need to be taken into account before we suggest that all app’s should be rewritten in Ajax.
Second, we have to sort out where we want the Ajax servers to be deployed. The Ajax architecture is based on a closely-coupled network server providing all of the state/persistence, as well as the connectivity to other web-based applications/services (such as for mash-ups), required by the Ajax client. All Ajax clients have such a server, which can be programmed in Java, PHP, C#, and so on. (Indeed, one pundit even dismissed Zimbra as not an Ajax technology because we had the audacity to release the supporting Zimbra server as well as the Zimbra Ajax client!)
Intranet Ajax Servers
Today, Ajax servers are most typically deployed on the Internet as part of hosted services (such as for Google Maps, Yahoo! Mail, Netflix, and so on), but ultimately I believe the promise of Ajax will require that the industry deploy intranet and extranet-based Ajax servers too. For the Internet-only Ajax model to replace existing computing paradigms, we all have to be comfortable with the location of those Ajax servers and their data. For example, implicit in the Internet Ajax uber alles assumption is that enterprises are ready to outsource the storage of all of their proprietary documents and data. (For a discussion of the trade-offs between on-site and
off-site deployment, see Hosting versus on-premises.)
Category: Showcase
We recently saw Zoozio, which is a startup that isn’t out of the closet yet.
You will see a now-more and more familiar interface on the front page though. They have a drag and drop portal interface for us to play with :)
Category: Component
Sam Minnee has put out an “Unobtrusive JavaScript” Tree Control for download.
Why another tree control?
There are a lot of tree controls out there, but most of them
are tacky, heavyweight relics of the “DHTML” era. I felt it
was time for a change. In particular, I wanted to adopt “unobtrusive javascript” techniques. Among other things, the script has these notable features:
- All of the styling is in a seperate CSS file. The only thing
that the JavaScript manipulates is class names. This gives
you a lot of control over the design relatively easily.
- There is a no “set up code”. The script searches for <ul class=”tree”> and applies its magic to that.
- All of the content as loaded in a set of nested <ul>s - the
simplest, code that I could think of that was semantically linked to
heirachical data.
Are we seeing an increase in unorbtrusive javascript controls?
( via Ben Nolan )
Friday, October 28th, 2005
Category: Articles
Eric Pascarello is tackling the browser refresh and its effects on Ajax applications.
The last thing we want is for a user to hit refresh and all of your nice state goes bye-bye.
Eric takes an approach that changes the URL between state changes, allowing a refresh to capture the info:
function makeRequest2(str){
var loader1 = new net.ContentLoader(\"testHistory.aspx\",finishRequest2,null,\"POST\",\"q=\" + str);
window.location.hash = str;
}
function finishRequest2(){
document.getElementById(\"spanId2\").innerHTML = this.req.responseText;
}
window.onload=function(){
if(window.location.hash.length > 0)
makeRequest2(window.location.hash.substring(1,window.location.hash.length));
}
The first thing is we set the hash of the window to the parameter that the server recognizes. (Note: setting the hash does not cause the page to refresh/submit!) If your system is a little more advanced, you will have to figure out a relationship between the server and the client. The other thing we do is add the onload handler to the document so we can look for the hash. If it exists, we remove the # and send the XMLHttpRequest to the server. The request then fills in the information on the page. The user may notice the data swap depending on the lenght of time for the response. It is a rather simple solution with a lot of work that needs to be done if you have a complex request.
4.6 rating from 114 votes
Category: Editorial
Brendan Eich has pinged us on his roadmap again.
I have been working more and more with ECMA TG1 on JavaScript standards, at first E4X (which was all but done when
Mozilla joined ECMA last year) and now Edition 4. Our goals include:
- Bringing Edition 4 back toward the current language, so that
prototype based delegation is not a vestigial compatibility mode, but
the dynamic part of an object system that includes classes with fixed
members that cannot be overridden or shadowed.
- Allowing implementors to bootstrap the language, expressing all the
meta-object protocol magic used by the “native” objects (ECMA-262
Edition 3 section 15), including get/set/call/construct and control
over property attributes such as enumerability.
- Adding type annotations without breaking interoperation of existing and new editions, in support of programming in the large — which is needed more and more in XUL and modern web applications.
- Fixing longstanding problems that bite almost every JS hacker, as I’ve discussed previously.
Our intention is to finish by the end of next year, and to implement
and test interoperation along the way as much as possible. The
Macromedia folks are quite far along in their implementation of a
derivative of Waldemar’s Edition 4 draft, called ActionScript 3.
At the same time, and while also slaving over a hot Gecko 1.8 / Firefox 1.5 stove, I have been working with Mozilla leaders, especially shaver and other drivers, on roadmap-level plans for the next year to 15 months.
These plans build on bottom-up planning from module-sized projects such as the move to Cairo graphics as Gecko’s new graphics substrate, the Python for XUL project, and the XULRunner
project. We aim to balance the need to ship Firefox releases that
innovate quickly in user-facing ways with the longer cycle time
required to uplift the web platform with better graphics features and
content languages in Gecko 1.9.
The fruits of all this planning, in the form of a coherent draft
overview containing links to project and wiki pages, and a schedule and
branching plan for everyone to review, will be pushed out to http://www.mozilla.org/ imminently. The old roadmap page will contain at least links, if it doesn’t beome a redirect. Stay tuned.
Category: Toolkit
Zhijie Chen of Japan has created a new opensource framework for building Ajaxian web applications called Swato.
With the help of this framework, you just need to register your Java class (Model) at the server side (Spring), and do all of your View/Control at client side via JavaScript.
To build an application you:
- Configure Swato
- Build a POJO based service class
- Register the class as a service
- Use the service
Code Example Using the Service
var swatoEngine = new Swato.Engine('RPCServlet');
window.onload = function () {
new Ajax.Updater('banner','banner.html');
var languageCatcher= new Swato.Select('language_select');
swatoEngine.callAndCatch(languageCatcher,'countryList',
'getLanguageOptions',[]);
}
function changeLanguage(languageCode){
var autoSuggestCatcher = new AutoSuggestControl('country');
swatoEngine.callAndCatch(autoSuggestCatcher,'countryList',
'getCountryList',[languageCode]);
}
Demos
Category: Ruby
David Heinemeier Hansson wasn’t happy when he saw Google Web Accelator was back in action, and more deadly.
He wrote about how Rails is more prepared this time around and the interesting part from an Ajax side is how Rails has added a high level abstraction that gives you links via get or post.
link_to
Rails has a helper names link_to that builds <a href> links for you. Unfortunately in HTML, we don’t have a way to say “do this link as a post” by doing something like:
<a href=”…” method=”post”>
If you are using Rails, you do get this ability with a change to link_to that allows you to simply add :post => true.
Behind the scenes Rails will build the JavaScript to do an Ajax request via post.
“But what if the user doesn’t have JavaScript turned on?” I hear you cry. In this case it gracefully falls back to a get.
button_to
There is also a new button_to.
If you want to be a real pretty momma’s boy, you can use the new button_to, which just makes it easy to create a mini-form that’ll submit to the chosen URL as POST. But that generates a real, visible form, which despite being subject to styling, is often not something that’s easy to fit into an application design of your choice.
Thursday, October 27th, 2005
Category: Toolkit, PHP
A new PHP based Ajax framework put its hat in the ring: PAJAJ.
PAJAJ is a object oriented Ajax framework, created by Gilbert Hyatt, written in PHP5 for development of event driven PHP web applications. The framework follows 5 basic principles:
- Simplicity: Everything can be done in PHP.
- Various development models:
- Developer develops the whole application and interface in PHP
- Designer generate a pretty but dump page, and you then hook events to it to make it a real application
- You design an interface as a template (example Smarty), and have the framework make html, CSS, Javascript that you pore into the template
- Event Driven
- Late Binding of Events: no changes need to be made to the HTML themselves
- Object Oriented: There are not only objects for the Ajax plumbing, but for page elements that you are interacting with
Example Code
<?php
require_once('../../CO.inc');
$html = CO::getTag('html');
$html->setTemplateFile('../templates/pajaj_examples.tpl');
$section = CO::getStyledTag('DivDropShadow', null, null);
$section->add(file_get_contents('content.htm'));
//$section->setWidth('100%');
$html->add($section);
$html->add(br());
print $html;
?>
Demos
Category: Toolkit, Prototype
moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, written with prototype.js by Valerio Proietti.
This beast weighs in at a massive 3kb :)
Prototype seems to be one of those libraries that people just want to build on. And this one gives you effects such as:
- Toggle Opactiy
- Toggle Height
- Toggle Width
- FadeSize Width, Height, Both
- Toggle Resize
- Custom Resize
- Text Transition
To make this happen…
window.onload = function(){
var effect = new fx.Height('myelement',{duration:400,
onComplete: function(){
alert('the effect is finished');
}
});
}
Info
( via Rob Sanheim )
Category: Editorial
eWeek has a new piece claiming that support for AJAX Development Rising.
Sun gets more Ajaxian
Sun Microsystems Inc. is promoting an AJAX-supporting component model around its upcoming Java Studio Creator tool with hopes the model can succeed the way the component model Microsoft Corp. fostered around its popular Visual Basic development environment did, said Graham Hamilton, a Sun fellow and vice president of Sun’s Java Platform Group, in Santa Clara, Calif.
“The intent is to build components and create a catalog of them,” Hamilton said. “We think there are 10 to 20 common AJAX components you’re going to see” that Sun will likely build and then promote.
Jeet Kaul, executive director of Java EE (Enterprise Edition) and the Sun Java Application Server, said those two products already support AJAX and that Sun is looking to include AJAX support in other technologies.
“A core part of AJAX is JavaScript, and we’re including JavaScript support in the ‘Mustang’ release of Java SE [Standard Edition], with the core run-time,” Hamilton said. The Mustang release, also known as Java 6.0, is scheduled for release next summer, he said.
Wednesday, October 26th, 2005
Category: Toolkit
Backbase has made their flagship product available for download.
What’s new in 3.1
More user interface controls
- Date picker
- Context menu
- Sidebar
- Custom select/combo boxes
- Charting components mix Flash with Ajax
Support for XPath 2.0
Backbase 3.1 now contains support for XPath 2.0:
XPath is used to select nodes in an HTML or XML documents, but also to
make calculations. It’s one of the most essential building blocks of
the Backbase software.
Variables
Client-side Variables can contain a single value, but also a
complete piece of XML or HTML. This is useful for a large variety of
cases, for example to cache a piece of XML for processing at a later
point in time: you specify this piece of XML with an XPath expression.
Responses from the server can also be loaded into a variable.
Improved Data binding
If you would like to load data into a user interface Control,
you have basically two options: transform the data on the server, or on
the client. Server-side transformation works as good as ever, but
version 3.1 has introduced improved client-side data binding. A server
can send pure XML to the client, which is then transformed with an XSLT
stylesheet. This is very similar to the XML data islands pattern as described on Ajaxpatterns.org.
Focus model
With the browser’s standard Form controls - such as input boxes
and buttons - you can use the Tab- and arrow keys to navigate. When you
start creating your own user interface controls - such as a tab control
- you need to implement keyboard navigation yourself. The Backbase
Focus model makes this much easier: you can add b:focusgroup and b:focusitems attributes and the Backbase engine takes care of the rest.
Mix JavaScript and BXML
As you probably know, Backbase uses tags to define Rich
Internet Applications: this is so-called declarative development. In
some cases you might have existing JavaScript code that you want to
integrate. For this scenario you can now seamlessly include JavaScript
code using the <s:script> tag.
Improved Back/Forward support
Version 3.0 already supported the Back-button and bookmarking, but in this version we have improved it. All known limitations
are now solved, so we provide best of class support for the
back/forward button, bookmarking, page refresh and deeplinking. This
can be implemented with the <s:history> tag.
Category: Examples
This entry is just a pointer to an interesting resource that links to more cheat sheets that you can imagine.
As well as HTML / CSS versions, there is also info for various scripting languages, databases, and more.
JavaScript Cheat Sheets
HTML Cheat Sheets
CSS Cheat Sheets
Tuesday, October 25th, 2005
Category: Toolkit
MockiKit is a quality JavaScript library like Dojo and Prototype/Scriptaculous.
Bob Ippolito has blessed the 1.0 release, which offers a few updates:
- MochiKit.Async: MochiKit.Async’s sendXMLHttpRequest and anything that uses it will now call the errback chain under ANY error. This means that if the web server is down or if the user has gone to another page or started closing the browser, then you’ll get an error. From what I’ve seen, the error under both of these conditions is going to be an XMLHttpRequestError with undefined status. That’s right, you won’t be able to discern one from the other, so don’t do anything obtrusive (like an alert) if you see an XMLHttpRequestError in your errback! The best thing to do is just log or ignore these errors.
- MochiKit.Base: has a new updatetree(self, obj[, …]) function to update an object tree, in order to support new MochiKit.DOM updateNodeAttributes functionality (below).
- MochiKit.DOM: updateNodeAttributes now uses updatetree if it sees object values, so you can now set style attributes inline:
var div = DIV({”style”: {”display”: “block”}}, “div contents here…”);
- MochiKit.DateTime: isoTimestamp now uses one of the ugliest regexps I’ve ever written in order to parse ANY ISO 8601 timestamp. It doesn’t attempt to validate, so it will accept a large subset of incorrectly formatted ISO 8601-ish timestamps. RegExps in JavaScript are so bad that I had to write MochiRegExp to get this right!
- MochiKit.Format: New functions have been added:
truncToFixed(aNumber, precision): Truncate a number to the given precision (does NOT round).
roundToFixed(aNumber, precision): Round a number to the given precision (because Safari’s Number methods are mostly broken)
numberFormatter(pattern, placeholder=”", locale=”default”)
formatLocale(locale=”default”) brings Java style number formatting to JavaScript:
assert( percentFormat(1.234567) == “123.46%” );
assert( numberFormatter(”###,###%”)(125) == “12,500%” );
assert( numberFormatter(”##.000″)(1.25) == “1.250″ );
There are also new examples for you to peruse:
Interpreter:
An interactive JavaScript interpreter, much like python when run with no arguments. Very useful!
MochiRegExp:
A “live” RegExp explorer, good for debugging those gnarly
JavaScript RegExps. RegExps without named groups or a verbose flag
suck, you need this.
Category: JavaScript
One of those weird quirks of our profession is that Java and JavaScript have so little in common. As Marc Andreessen recently said, “[Netscape] did JavaScript to try to be an intermediate bridge between HTML and Java.” And with the demise of LiveConnect and Applets in widespread use, it’s become pointless and needlessly confusing to continue to refer to ECMAScript as JavaScript. 99% of web developers have never and will never use JavaScript to script Java.
Except, the next major release of Java, slated for 2006, will include a Sun-modified version of the Java-based Rhino JavaScript engine as an integrated part of the platform. Interesting to see JavaScript back in its role as a script wrapper around Java.
And now to the point of this blog entry. Depending on who you talk to, the lack of threading features in JavaScript is one of its best or worst features. Using a pre-release of Java 6, Sun engineer A. Sundararajan uses the new embedded JavaScript to go beyond simply using an external library to create a thread:
How do we write multithreaded scripts? JavaScript engine allows Java method calls. So, we can use that to create script wrappers for Java platform classes… we can easily create threads in script. But, what about mutual exclusion/communication/co-operation between threads? You may want locks, condition variables etc. Well, you may write few script wrappers using java.util.concurrent API. as shown below:
// creates a ReentrantLock
function lock() {
return new java.util.concurrent.locks.ReentrantLock();
}
// runs given function after acquiring given lock and releases the lock
// after the function is finished. (in effect the script function is
// ’synchronized’ in Java sense
Function.prototype.sync = function(lock) {
lock.lock();
try {
this.call();
} finally {
lock.unlock();
}
}
The caller of the above code would look like:
function myFunc() {
// code here
}
// create a lock
var lk = lock();
// run myFunc in ’synchronized’ way
// no two threads can run myFunc concurrently.
myFunc.sync(lk);
The latest released version of Java includes a state-of-the-art concurrency library; using it from JavaScript will be the source of endless amusement.
Of course, this has no application whatsoever for Ajax in the short-term, but it very well may provide a playground for developers to figure out what threading features they may want (if any) in future browser-based JavaScript engines.
Category: Library
Cory Rauch has combined the browser storage story of AMASS with the TrimPath SQL Query Engine.
What does this mean?
Cory now allows you to have storage of data in the form of JSON, in a local system, and query that storage on the client via SQL.
Say you have a datastructure such as:
Invoice : [ { id: 1, total: 100, custId: 10 },
{ id: 2, total: 200, custId: 10 },
{ id: 3, total: 300, custId: 10 },
{ id: 4, total: 400, custId: 20 } ],
Customer : [ { id: 10, acctBalance: 1000 },
{ id: 20, acctBalance: 2000 },
{ id: 30, acctBalance: 3000 } ]
you can hunt for data via:
SELECT Customer.id, Customer.acctBalance, Invoice.total
FROM Customer, Invoice
WHERE Customer.id = Invoice.custId
ORDER BY Customer.id
There is a full example on this
Where does Cory want to take this?
If these projects mature we eventually could have an even more reliable and fault tolerant generation of AJAX applications. I’m thinking one case for use would be if you are saving data on a form filled and the connection fails to the server a client side database query to store the data could take place and re-sync when the connection comes online again. The user interface could even technically still go on working as long as the UI is completely client side javascript. The details though would have to be sorted out, like syncing db keys, other issues regarding the UI being coded in Javascript (some what of a nightmare).
Another use could be cache for server side database queries, this could be used to cache the database queries happenign at the client side between the server and client lowering the amount of server requests. Or a variation on this idea of caching XML web service calls.
Category: Showcase
The Midnight Coders are at it again. They have released a chat application that is a little different. This has to be the Ajax example we have all be waiting for as it marries a Google Maps interface with a chat interface, both of which have been covered seperately many times :)
This example demonstrates bi-directional messaging between heterogeneous (Flash and AJAX) clients and WebORB Message Server. The server performs additional processing to geolocate chat users, injects necessary information in messages so users can plotted on the map.
—
Next Page »
