Download Squad

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!