Summary
The latest release of the Yahoo User Interface (YUI) library includes six new Ajax components, such as an image cropper, a file uploader, and a dual-thumb slider, and significant updates to the data table, layout managers, and other components. YUI 2.5 now also comes with over 270 examples and expanded documentation.
Advertisement
Yahoo's open-source User Interface library (YUI) has been emerging as one of the strongest, most feature-rich client-side Ajax component frameworks. Among YUI's strengths is that the library is used on various Yahoo sites, and is hence well-tested and ready for production deployment.
While YUI is an increasingly complete framework, providing APIs for testing, profiling, and logging, YUI's most visible aspect is its high-quality, feature-full components. For enterprise applications, YUI's DataTable is perhaps the most frequently employed component, and it received many new capabilities in the YUI 2.5 release:
DataTable has been one of YUI’s most popular and important components since its debut, and this is its strongest release yet...
[The latest release includes] more robust markup structure that allows greater control over all aspects of the table. This release also includes major performance enhancements, improvements to the fixed-header implementation for vertical scrolling, built-in support for horizontal scrollling, an all-new Paginator class, support for drag-and-drop column reordering, and a new set of column APIs with hooks for showing, hiding, adding and removing columns.
A brand new component in YUI 2.5 is an image upload widget that shares a code base with a similar component used on the Flickr Web site:
It’s the same code that underlies the Flickr Uploader... Uploader is our second JavaScript/Flash hybrid control (following on the heels of the Charts Control in 2.4.0)... If you’ve ever built a UI for uploading files via a browser, you know what the big pain points are: One file at a time, no easy way to track upload progress, no programmatic access to file metadata, etc. The new YUI Uploader addresses these issues and others...
Another new YUI component is a dual-thumb slider:
Sliders are “finite range controls”; dual-thumb sliders allow you specify a sub-range within the control’s larger range. The classic use case for dual-thumb sliders is on shopping sites, where such controls can allow users to filter results based on price range.
In addition to visual components, YUI also provides a host of non-visual APIs designed to make building rich-client Web applications easier. One such new component is a Resizer. In addition to new Resizer features, the Resizer component now underlies a new image cropper UI widget:
[It] makes it easier for you to make any block-level element resizeable. Resizing can be implemented directly (the resized element resizes in real time during the interaction) or by proxy (a proxy element visualizes the interaction until its conclusion, at which time the resized element snaps to its new size).
[Resizer is used for] the implementation of an ImageCropper interface, which Dav built out on top of Resize for 2.5.0... [It] provides for modifier keys in this very desktop-like UI control...
YUI 2.5 enhances the layout manager API as well:
Layout Manager eases development of multipane UIs that take up either the full viewport or the full canvas of any block-level element. Layout Units within a layout are resizeable, collapsible, removable and swappable; transitions between expanded and collapsed states have built-in animation support.
A new non-visual YUI component is a cookie manager:
Because browsers limit the number of cookies you can set per domain (and because that limitation can sneak up on you if you manage a large site with many subdomains), the Cookie Utility supports "sub-cookies." Sub-cookies pack multiple name-value pairs under the umbrella of a single cookie, expanding the number of data points that you can store in cookie space.
Finally, YUI 2.5 promotes to GA status several hitherto beta components, such as a color picker, an image loader, and utilities that ease working with GET requests, JSON, CSS, and a testing framework.