Best Practices for Applying AJAX to JSR 168 Portlets
January 12, 2007 | Leave a Comment
At Plymouth State University we are just beginning to look into JSR 168 portlets for our institution’s portal. This technology for creating channels is just becoming available with the impending release of Luminis IV in Q1 of this year. In doing my initial research on JSR 168, I turned up this interesting article from Greg Ziebold and Marina Sum written in September of 2006.
From the summary/overview:
A year ago, the article Asynchronous Rendering of Portlet Content With AJAX Technology demonstrated how to apply Asynchronous JavaScript and XML (AJAX) to portlets. Since then, AJAX has become increasingly popular in the software arena and many new AJAX technologies have emerged. Examples are JavaScript libraries and toolkits, such as the Dojo Toolkit, the Yahoo! UI Library, the Google Web Toolkit, Script.aculo.us, and DHTML Goodies. In addition, new standards bodies like Open AJAX and the Dojo Foundation are key players.
In light of the many developments in the past year and the host of feedback on how to use AJAX in portlets, this article describes several helpful tips and practices on how best to exploit AJAX in portlets that comply with the Java Specification Request (JSR) 168: Portlet Specification.
The article refers to an updated version of the sample, AJAX Portlet Invoice Viewer, from the original article. You can download the binary Web archive (WAR) file. In the near future, this sample will reside in the Open Source Portlet Repository on java.net.
As we are new to JSR 168 and definitely interested in incorporating Ajax with most any channel we create, this seems like a useful guide.
Tags: AJAX, channel, dojo, greg ziebold, jsr 168, jsr168, luminis, luminis IV, Marina Sum, portal, portlet, xml, yahoo ui
jQuery: Form Plugin, Sweet… Almost
November 8, 2006 | 1 Comment
I am a recent convert to the powers of jQuery ever since Matt fell in love with it at "The Ajax Experience". The syntax and simplicity exceeds the combination of Prototype and Script.aculo.us that I was using.
By far one of the greatest features of jQuery is the ability for the community to create amazingly useful plugins. As I become dependent on many, I will highlight them here (mostly so I don't forget). The plugin I want to talk about right now is the form plugin from malsup.
Basically this plugin allows you to have a form be submitted through an XHR call. It uses the form's defined action URL to determine where to post the values and by default will update a specified div with returned data. It has additional flexibility to get returned data in XML or JSON if you would prefer. Go check out the example on his site, this is extremely simple to implement. This is exactly what I was looking for and I was quite happy, until I found a bug...
There is a problem with the internal formToArray() function when dealing with multi-select lists. If you are pre-selecting values in the list on load with some sort of server side language (PHP in my case), the pre-selected values will be submitted along with the newly selected user values. Obviously this is not what you would want to happen. The problem code occurs around 300 lines in:
-
if (t == 'select-multiple') {
-
jQuery('option:selected', this).each( function() {
-
a.push({name: n, value: this.value});
-
});
-
return;
-
}
The jQuery search is finding more than it should. I have two ways in mind to resolve this issue. Most simply, you can add an if statement before the push, like this:
-
if (t == 'select-multiple') {
-
jQuery('option:selected', this).each( function() {
-
if(this.selected == true)
-
a.push({name: n, value: this.value});
-
});
-
return;
-
}
This makes sense and is simple, yet it feels dirty since you receive more data from the search than necessary. I'm not certain about the efficiency, so here is another option:
-
if (t == 'select-multiple') {
-
for(var i=0;i<this.options.length;i++) {
-
if(this.options[i].selected==true)
-
a.push({name: n, value: this.options[i].value});
-
}
-
return;
-
}
In this second one, we loop over all the elements in the multi-select to determine which are checked.
Like I said, I'm unsure which would yield the better performance, so hopefully someone will do the benchmarking and it can be rolled into the next version of this sweet plugin.
Tags: AJAX, ajax experience, ajax form, form plugin, javascript, jquery, jquery form plugin, jquery plugin, jquery plugins, malsup, plugins, xhr
Armenian Junior Web Developer Falls Off A Mountain
June 22, 2006 | 1 Comment
Tim Haroutunian is working with us this summer in ITS at Plymouth State University as our Jr. Web Developer. Tim is an interesting character. He is quite proud of his Armenian heritage and at lunch explained in excruciating length about how while visiting Armenia he fell off a mountain. This story took a good 30 minutes to tell, but is summarized in it's entirely above in the diagram. The diagram was brilliantly composed by Cliff.
Over the course of the summer we have all conspired to throw insane amounts of harrassment in hopes of thickening Tim's skin. So far he is taking it well, we'll find his breaking point though I'm sure.
(In quick defense of Tim, he is shaping up to be a pretty kick-ass PHP/Ajax/MySQL programmer)
Tags: AJAX, armenia, armenian, cliff, mysql, php, time haroutunian, web developer
Zimbra
June 4, 2006 | 3 Comments
For a long time I've been touting Zimbra as the greatest available web-based mail client. I've never gotten around to mentioning it here, but I figure it's time. In fact, Zimbra is more than just a web-based mail client, they call it a collaboration suite. Basically this means it has email, calendar, and contact management. It's all Ajax based, open source, extendable, and provides a free version.
In addition to the fantastic interface, it is also a complete email server with industry level SPAM protection built-in. The email server supports IMAP and POP so users can continue using whatever desktop application they may prefer as an alternative to the web-based application.
With my general unhappiness with Outlook and most other web-based email solutions, I really wish I could use Zimbra. Go check out the hosted demo.
Tags: AJAX, collaboration, email, web 2.0, webmail, zimbra
Behaviour, Return of Clean HTML
March 9, 2006 | 1 Comment
As we've begun adopting Ajax, JSON, and similar JavaScript heavy technologies a problem quickly arose. Suddenly our clean HTML was being cluttered with tons of script tags, onclicks, and other various event handling functions. Trying to extract this logic back out of the HTML was a definite desire for us.
Enter Behaviour.
Behaviour uses CSS selectors to specify what elements to apply JS handlers to.
Check out these demos. View the source and you'll see clean markup that is free of logic. This allows us to step back and once again fully separate the presentation layer from the application layer.
Tags: AJAX, behavior, behaviour, css, functions, html, javascript, js, JSON, programming, web, web 2.0, web development, web20, xhtml
Wufoo - Form Builder
February 26, 2006 | Comments Off
Matt has been using this interactive form builder as an example for our form builder he is writing as part of a prospective student portal we are writing for Plymouth State.
Today, I found an even cooler one called Wufoo (not Hufu) over on a sweet Chinese blog that previously linked to me. Wufoo uses a heavy union of Ajax and Flash techniques. It may be a little heavier on the Flash than I would have gone, but it is still really cool.
Tags: "form builder", "prospective student portal", AJAX, form, hufu, web 2.0, web development
Scriptaculous
January 6, 2006 | 1 Comment
Matt recently came across and got very excited about Script.aculo.us for doing DHTML effects and AJAX.
From Matt's post: Script.aculo.us Is My New Best Friend:
Script.aculo.us is a Javascript Effects and Control framework developed by Thomas Fuchs, a software architect living in Vienna, Austria who, like me, was disappointed by current web application frameworks that made no sense to him. His framework is 3 things: Easy to Use, Simple, and Easy to Use. His libraries - built off of the AJAX framework, Prototype - blow SAJAX out of the water!
One of the things that makes script.aculo.us especially great is the detailed and well written documentation/apis. Arguably, this is why I first loved Java and eventually became addicted to PHP. The Java API was great, but PHP.net is unmatched. Like PHP.net, the script.aculo.us wiki allows users to contribute back knowledge easily.
Tags: AJAX, api, apis, dhtml, java, php, programming, prototype, SAJAX, scriptaculous, web, web application, web development, wiki