Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Make a rich web-application easily

Tuesday, April 7th, 2009 by Servage

yui1Rich web-applications feature similar functionality and usability as desktop software and are mostly powered by JavaScript or Flash. The whole Web 2.0 concept evolves around such rich, interactive web-based services that provide the user with a smooth experience. Creating rich web-applications can be a big project, but working with the right utilities, you can get started really fast – adding great value to your website. Among many options I would like to present the open source Yahoo User Interface Library (YUI) to you today. YUI basically features a whole lot of ready-to-run scripting libraries, that can add great functionality to your website – really easy and fast.

Example 1) Creating cool sortable tables based on a regular HTML table
Tables are commonly used on websites, but often they look boring and lack obvious functionality such as sorting capabilities. The YUI DataSource and DataTable libraries enable you to do exactly that (and so much more) in a few minutes. Basically the DataSource library is used to convert your regular HTML table into a usable data format for the DataTable library. The DataTable library then creates an enriched table and updates the page with it. Et voila: You boring table is now modernized ;-) This procedure is called Progressive Enhancement because it takes the existing, working website and turns it into something better.

» Example of enriched HTML table

Example 2) Creating charts from your DataSource
To create a graphical representation of some data in charts you can use the YUI Charts library. Again, a DataSource is used (and yes, this could be a regular HTML table, even the same as above) and fed to the Charts library, which turns it into a nice looking chart. Very easy, and very effective.

» Example of chart

There are numerous YUI libraries for all sorts of purposes. Some of the other prominent examples are Calendar, Rich Text Editor and CSS (Reset, Base, Fonts & Grids). Common for them all is that you fairly easy can add cool functionality to your website, and if you want, all doors are open in terms of advanced customization.

Make a rich web-application easily, 4.2 out of 5 based on 15 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 comments (leave a comment)

Very nice AJAX / Web 2.0 library indeed. Also a library with a great variety of features is jQuery. Until now I’ve always used jQuery, but maybe I’ll switch to YUI if it is easier to handle. I read somewhere it was also highly compatible with Zend Framework. Or something like it was partly integrated in Zend Framework..

Thanks for the help – I have long been a user of flickr but was not aware of this – Thank You Again.

Thanks for the heads up, I am a great Yahoo! fan for some reason I missed this offering. Well designed to incrementally enhance an existing website with an elegant fall-back for those without javascript capabilities.

Good information, thanks for sharing.

Thanks for the update – Keep’em coming!

There are also platforms that enable you to deploy in a more shorter time rich application sites. Sites like Joomla and Drupal comes to mind.

Well, honestly I think you’re comparing apples with oranges here.

Leave a comment

You must be logged in to post a comment.