Hot on HuffPost Tech:

See More Stories
Free Switched iPhone app - try it now!
AOL Tech

Yahoo User Interface gets a big update

Tuesday the good folks from the Yahoo User Interface team released version 2.2.0 of their much loved JavaScript framework. The exciting changes this time around include a browser history manager, a data table control, and advanced button control. These additions are all still considered beta and extend the huge number of components currently available in the YUI library.

The Yahoo User Interface, if you haven't played with it, is a massive open source JavaScript framework along the lines of Prototype or Dojo. The library is heavily documented and supported (featuring examples, forums, cheatsheets, and videos) and lets you easily bundle Ajax, calendar, tab, drag and drop, auto complete, and all manner of other cool functionality into your web applications.

More on the new version (including examples) after the jump.

DataTable and Datasource

With the YUI Datasource utility you can create a local or server based datasource (think JSON). This datasource can then be integrated and rendered in a table format using the DataTable library. Why is this cool? It allows for:
  • Dynamic Scrolling/Resizing
  • Sortable Columns
  • Inline Editing
  • Dynamic Pagination
  • Row Selection
In this example from the YUI documentation you can see a table that allows inline editing of values while this example combines column sorting with pagination. Most web developers have at one time or another grappled with these problems and found building a server side way of handling them both frustrating and inelegant.

Jack Solcum has offered a grid component that does a lot of the same things as part of his YUI-EXT for some time, but it is nice to see the same kinds of functionality it rolled into the primary library.

Browser History Manager

This is the kind of script that simply blows my JavaScript mind, both with the possibilities but also with the complexity. Since most Ajax application abandon entirely the concept of "pages", how are you supposed to handle browser history and, more importantly, the Back and Forward buttons? This manager library provides a framework to use the back and forward buttons within your application.

In this example you can click on the DHTML tabs on the page and then use the back button to navigate back to the last tab you viewed. It is easy to see how this becomes useful.

Imagine if you build a web 2.0 photo viewer with a list of photos on the left and "viewing window" on the right. Click a photo and then clicking the back button would take you to the last photo you viewed, while the forward button would take to you to back to the last photo you clicked on.

This component is mostly experimental at this point but it does work across all A Grade browsers.

Button Control

Yahoo has started to standardize the look and feel and functionality of buttons throughout their numerous products and this control is a key driver of this task. The button control gives you a standard way to represent checkbox, radio, link, button, and submit controls within your application. As you can see in this example you can create a button that will take an action or let the user use the drop down list to take a related action (picture an Add Event option with a default setting letting you add to the current date but a drop down letting you add the event to the next week, month, or year).

There are a number of other minor code tweaks and updates but these are the big ones. Have at it and build something cool!

Tags: ajax, dhtml, dojo, opensource, prototype, yui



Add your comments

Please keep your comments relevant to this blog entry. Email addresses are never displayed, but they are required to confirm your comments.

When you enter your name and email address, you'll be sent a link to confirm your comment, and a password. To leave another comment, just use that password.

To create a live link, simply type the URL (including http://) or email address and we will make it a live link for you. You can put up to 3 URLs in your comments. Line breaks and paragraphs are automatically converted — no need to use <p> or <br /> tags.