Blog: Archive for February, 2009

Flickr Uploadr: Improving Browser-based File Uploads with YUI Uploader

Traditionally, file uploading in the browser has been awkward, slow and error-prone. File selection is done one at a time and monitoring progress of the upload is difficult. There are no simple callbacks for total bytes, progress, error handling and so on, restricting the developer’s ability to provide meaningful messaging on the UI end.

Conveniently, existing browser plug-ins such as Flash can be used to provide or enhance certain functionality which browsers themselves do not support. The combination of Flash and JavaScript allows for batch file selection, progress and error reporting, and speedier uploading.

In a typical Flash-driven uploader, Flash provides the core service and provides callbacks to JavaScript-land with status updates, messaging and so on. JavaScript then updates an HTML and CSS-driven UI. Flash-JavaScript communication is made possible by Flash’s ExternalInterface API, introduced with Flash 8. Several projects have implemented uploaders based on this approach, including the YUI Uploader control and SWFUpload among others. While developing against ExternalInterface can get a bit quirky, an effective library can abstract away most of the quirks and provide a convenient API allowing you to take advantage of Flash’s improved file-handling abilities through JavaScript.

Building an effective upload UI

Screen capture of Flickr Uploadr's initialized state

On Flickr, we implemented a simple large “Choose photos and videos” link which when clicked, opens a multi-select-capable file-selection dialog driven by the YUI Uploader (which requires Flash 9). YUI Uploader provides file metadata via fileSelect event callbacks after files are selected, at which point the file list and UI can be updated. The user can add and remove files as they like according to business logic, configure upload options and so on.

Beginning the Upload

Screen capture of Flickr Uploadr's files-added state

Once the user has prepared their selection of files and clicked “Upload Photos and Videos”, the file queue is processed. YUI Uploader can upload files simultaneously or in sequence to a given URL (a signed API call in Flickr’s case) with callbacks for file progress, errors, file completion and upload completion. The idea is that the control’s Flash component simply sends files and reports errors and progress, leaving all of the event handling to JavaScript. Because of this separation, upload behaviours can easily be changed or updated without having to change the Flash component.

Upload Progress

During file upload, the uploadProgress event fires regularly, providing the file ID, bytes uploaded and total bytes for each file. This data can be reflected as a progress bar, a percentage value or raw bytes depending on your UI.

Flickr Uploadr screencast from designingwebinterfaces on Flickr.

Connection Error Handling

If a file upload fails due to a connection or IO error from Flash, the uploadError event will fire so you can attempt to gracefully recover by retrying the upload of that file. Another safeguard is to implement a basic timeout such that if a file upload “hangs” for too long without a reported error (e.g., 2 minutes passes without an uploadProgress event), the file upload can be aborted.

File Upload Response Handling

When a file has been posted to the target URL, the server response is passed to a JavaScript callback via the uploadCompleteData event. Photos are processed asynchronously post-upload in Flickr’s case, so a processing ticket ID is provided in the upload response. The ticket ID is then polled via API calls until a success/fail result is ultimately returned after server-side processing.

Uploader Start-Up Handling

YUI Uploader handles the creation and writing out of the Flash object and its initialization process. Once the control has loaded, the contentReady event fires and the file selection process can begin. It is worth considering displaying some sort of “loading” element in your UI, in case the user wants to “choose files” before the control has initialized. In Flickr’s case, we show a small animation next to the “Choose photos and videos” link to indicate a loading state, as well as greying out the text itself.

It is also helpful to have a fall-through error handler that redirects the user to an alternate upload method, such as a non-JavaScript form-based file upload. The Flickr Uploadr detects for Flash 9+ upfront with JavaScript (e.g., the SWFObject), and also uses a try...catch block in the init method and around the file-selection bits. So if something goes wrong during initialization or when the user clicks the “Choose” link, exceptions trigger a fall-through to our basic uploader. This also is an appropriate fallback for users who don’t have Flash or JavaScript to begin with.

Special Casing: Handling Flash 10 Security Restrictions

Due to a change in the security model beginning with Flash 10, file selection must now begin via the user clicking directly on the Flash movie. With previous versions, you could call [Flash movie].selectFiles() from JavaScript and the selection dialog would be shown without requiring user action.

To keep the user experience consistent on Flickr where an HTML link could trigger the selection dialog, we made the Flash movie transparent and overlaid it on top of the HTML link. Thus, the Flash movie captures the click and the selection dialog works as expected. One might call this a legitimate, local form of clickjacking.

If repositioning the Flash movie is undesirable in your use case, another option is to render the link, text or button UI within the Flash movie itself and show the movie as a normal inline element.

Should I Use This?

While there are some notable technical considerations associated with developing a Flash-based uploader UI — such as initialization and error handling — as with most nifty/shiny web things, the technical complexity of the implementation rests solely with the developer. Once the application logic has been implemented by the developer and integrated with YUI Uploader, the end result is an upload experience that is consistently faster, more convenient, efficient and more robust to the end user.

By Scott SchillerFebruary 26th, 2009

Date Formatting with YUI – Part II

In Part I, we saw how to format a date using YUI’s date formatter. In Part II, we’ll look at formatting dates for a specific use case — inside the DataTable control.

DataTables are a great tool for presenting all types of data to the users of your website, including dates. As we’ve seen in Part I, the date formatter makes it easy to transform a Date object into a formatted string. For this example, we’ll take DataTable’s Basic Example and add a custom date formatter to it. We’ll start with the includes we need:

<!-- Individual YUI CSS files --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css"> 

<!-- Individual YUI JS files --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>

Next, we’ll add markup to input a user-defined format and to trigger a DataTable redraw:

<label>Format: <input type="text" id="date-format" value="%b %d %Y" size="30"></label> <input type="button" id="render-table" value="Redraw">

<div id="basic"></div>

The key here is to define a custom date formatter:

YAHOO.namespace("YAHOO.example.DateFormatter");
YAHOO.example.DateFormatter.formatDate = function(elCell, oRecord, oColumn, oData) {
	var el = document.getElementById("date-format");
	var sFormat = el.value;

	var str = YAHOO.util.Date.format(oData, {format: sFormat});
	elCell.innerHTML = str;
}

And finally, here is the JavaScript to create the DataTable. Note that we point the formatter for the “date” column to our own:

YAHOO.example.Data = {
    bookorders: [
        {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4},
        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345},
        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5}
    ]
};

var myColumnDefs = [
	{key:"id", sortable:true},
	{key:"date", formatter:YAHOO.example.DateFormatter.formatDate,
			sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
	{key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true},
	{key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true}
];

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
	fields: ["id","date","quantity","amount"]
};

var myDataTable = new YAHOO.widget.DataTable( "basic", myColumnDefs, myDataSource );

For our example, we’ll also include an event handler to redraw the table when the “Redraw” button is clicked:

YAHOO.util.Event.addListener("render-table", "click", myDataTable.render, myDataTable, true);

Putting it all together, we get a DataTable with customizeable date formating.

In this example, our DataSource holds actual Date objects. This isn’t strictly necessary. For an application to support internationalization, date/time information should be stored and transmitted in UTC. For instance, if your data resides on your server as a DATETIME field in a MySQL database, then the best way to convert it to a Unix timestamp is to use the UNIX_TIMESTAMP() function:

SELECT id, UNIX_TIMESTAMP(pubdate) AS date, quantity, amount FROM bookorders;

Other database engines have their own method of extracting a Unix timestamp.

The result set can then be JSON encoded using a server-side JSON library in your language of choice, before it is passed back to the browser. In PHP, we’d do something like this:

$bookorders = array();
while($row = mysql_fetch_assoc($results))
{
	$bookorders[] = $row;
}
header("Content-type: application/json");
echo json_encode($bookorders);

On the client side, we’d receive this data using an XHRDataSource:

var myDataSource = new YAHOO.util.XHRDataSource("http://hostname/your/script.php");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
// See DataSource documentation for full details

Since your data comes in as JSON from the server, you’re probably better off passing dates in as Unix timestamps and using the Date constructor inside your formatter:

YAHOO.example.Data = {
    "bookorders': [
        {id:"po-0167", date:320227200, quantity:1, amount:4},
        {id:"po-0783", date:410428800, quantity:null, amount:12.12345},
        {id:"po-0297", date:279705600, quantity:12, amount:1.25},
        {id:"po-1482", date:479376000, quantity:6, amount:3.5}
    ]
};

YAHOO.example.DateFormatter.formatDate = function(elCell, oRecord, oColumn, oData) {
	var el = document.getElementById("date-format");
	var sFormat = el.value;

	var oDate = new Date(oData*1000);

	var str = YAHOO.util.Date.format(oDate, {format: sFormat});
	elCell.innerHTML = str;
}

Note that we multiply the Unix timestamp by 1000 because the Unix timestamps we received were in seconds, while the Date constructor requires milliseconds.

That’s all for now. In Part III, we’ll look at formatting dates in the Charts control.

By Philip TellisFebruary 25th, 2009

Improving Accessibility Through Focus Management

A core requirement for developers using ARIA is to provide keyboard access for widgets, as users of screen readers rely on the keyboard to navigate web sites and applications. A large part of providing keyboard access is managing focus of a widget’s descendants (e.g., buttons in a toolbar, tabs in a tablist, menuitems in a menu, etc.), and the W3C guidelines provide two different approaches for doing so. This article explains both approaches and provides some practical advice for choosing between them.

The Benefit of Focus Management

As outlined in the ARIA specification and corresponding Best Practices document, providing keyboard access requires, in part, that each widget has one tab stop by default and is responsible for discreetly managing focus for its descendants. Following these guidelines enables users to quickly navigate a page or application by using the tab key to move between widgets. Once a user has tabbed into a widget, they can then use other keys (the arrow keys for example) to move focus amongst the widget’s descendants.

Two Approaches

When it comes to managing focus, the WAI-ARIA Best Practices document provides two different techniques for developers: the Roaming TabIndex Technique and use of the activedescendant property.

Using the Roaming TabIndex Technique

The Roaming TabIndex Technique requires each of a widget’s descendants be focusable, either through the use of natively focusable HTML elements, or by making an element focusable using the tabIndex attribute. To use this technique, begin by setting the tabIndex attribute of a widget’s first descendant to a value that is equal to or greater than 0. (A value of 0 will result in the tab order of the widget being relative to its position in the page. Use a value greater than 0 to precisely control a widget’s tab order.) Next, set the tabIndex attribute of all remaining descendants to -1. (A value of -1 removes an element from the default tab flow, while preserving its ability to be focused via JavaScript.) This ensures that all of a widget’s descendants are focusable via JavaScript, but only one is in the default tab flow of its containing page or application, and therefore focusable by the user.

With these tabIndex values, use a keydown event handler to manage focus of the descendants once the widget is focused by the user. As the user presses the arrow keys, call the focus method to activate the appropriate descendant and update the tabIndex of the remaining descendants so that the currently focused element is the only one that is natively focusable.

The following menu button example illustrates how to use the Roaming TabIndex Technique to create a widget that is both keyboard and screen-reader accessible. To test this example yourself, you can use the free NVDA Screen Reader and Firefox 3. Alternatively, you can watch the screen cast of the example running in Firefox 3 using the NVDA screen reader.

Roaming TabIndex Example

Test Menu Roaming TabIndex Example

Roaming TabIndex Example Screen Cast

Menu Button Using Roaming TabIndex Technique @ Yahoo! Video

The Roaming TabIndex Technique Best Practices

Having studied the WAI-ARIA Best Practices document, as well as having used the Roaming TabIndex Technique in several widget implementations, I have distilled several best practices for using this approach:

I prefer using natively focusable elements instead of using the tabIndex attribute to make non-focusable HTML elements focusable, for better backward compatibility in browsers that don’t support the tabIndex attribute on all elements.
Use the keydown event when binding handlers used to manage focus since it is not possible to handle non-alphanumeric keys using the keypress event in IE.
In most cases it is necessary to prevent the browser’s default behavior when handling key events.
When setting the tabIndex attribute, avoid using the setAttribute method, to prevent case-sensitivity mistakes in IE. Setting the tabIndex attribute using the camel-case DOM property is both the most compact and most compatible syntax across browsers. For example: myElement.tabIndex = -1;
When updating the tabIndex attribute of a widget’s descendants, set the attribute’s value to 0 before calling the focus method to ensure that the element’s default focus outline is rendered in IE.
When styling a descendant’s focused state, work with or augment the browser’s default rendering of focus rather than suppress it. The default rendering of focus is familiar to the user and, in many cases, consistent with the browser’s host OS. Working with the default focus model improves the learnability of the widget. If you suppress the browser’s default rendering of focus, be sure to provide a focus model that is consistent across your entire site or application so that the user only has to recognize and learn one focus model within a single context.
Set focus to HTML elements using both the setTimeout method and a try/catch block. Using setTimeout can help screen readers keep up while the focus is being changed. I have found this to be true when testing on VoiceOver for the Mac. A try/catch block can help suppress unwanted XUL-related errors logged to the console when focusing elements in Firefox.

Using the `activedescendant` Property

Unlike the Roaming TabIndex Technique, use of the activedescendant property doesn’t require any of a widget’s descendants to be focusable. Instead, this technique requires only that the widget’s root element be made focusable via the tabIndex attribute. (Note: this technique doesn’t work in the current version of Safari as it doesn’t support the tabIndex attribute on all HTML elements.) Using this approach, the activedescendant property is applied to the widget’s root element, and as the user presses the arrow keys, the value of the property is set to the id of the element that represents the user’s current selection. Since this approach doesn’t rely on focusing a widget’s descendants via the focus method, the browser will not provide any default rendering of the user’s current selection. Therefore, when using the activedescendant property the developer is responsible for rendering focus for the widget’s currently active descendant via CSS.

`activedescendant` Example

The following example adapts the previous example to illustrate how to use the activedescendant property.

Test activedescendant Example

`activedescendant` Example Screen Cast

Menu Button Using The "activedescendant" Property @ Yahoo! Video

As illustrated in the screen cast, the activedescendant property can provide a user experience that is identical to the Roaming TabIndex technique.

Best Practices for Using the `activedescendant` Property

Depending on the browser and the attribute’s value, setting the tabIndex attribute on a widget’s root element can result in a focus outline being drawn around the widget. For widgets with descendants, having a focus outline surround an entire control is both unfamiliar to the user (not something you’ll see on the desktop), as well as ugly. So when using the activedescendant property, it is best to suppress the focus outline. This can be accomplished by setting the outline CSS property in Firefox and IE 8, and using the hideFocus attribute for IE 6 and 7. Unfortunately it is not possible to suppress the focus outline in the current version of Opera.
Use CSS to render focus for a widget’s descendants in a way that is consistent with, and/or builds on, the default browser focus, or is consistent within the scope of the site or application.

Choosing a Technique

Having evaluated both the Roaming TabIndex Technique and the use of the activedescendant property, the Roaming TabIndex Technique is the better choice, because it is a solution that works “with the grain”. As such, it is more forward and backward compatible — especially when you are trying to support a wide array of browsers like we are at Yahoo!. Using the activedescendant property requires more effort for less overall benefit and compatibility. Here are the downsides to using the activedescendant property:

Requires browser support of the tabIndex attribute on all elements. Currently this not supported in Safari.
Suppressing the default focus outline drawn around a widget’s containing element is a slight pain in that it requires different techniques for different browsers. It turns into a bigger pain in Opera, where it is not only currently impossible but also exacerbated by Opera’s egregious focus model, illustrated in the following screen capture:
Loss of the default, familiar focus outline drawn around a widget’s descendants. The focus outline can be restored via CSS. However, developers get the focus outline for free when using the Roaming TabIndex Technique.
Since descendants aren’t focusable they cannot be clicked by pressing the enter key or space bar. This requires that developers listen explicitly for these key events and route the code responsible for handling the click event accordingly. When using the Roaming TabIndex technique, developers can simply listen for the click event.
Every descendant needs a unique id.

Unlike the activedescendant property, the Roaming TabIndex Technique allows widgets to be both keyboard accessible and screen-reader accessible in browsers that don’t support ARIA and don’t support the tabIndex attribute on all elements. For example, if a widget’s descendants are built using the set of natively focusable HTML elements, users of screen readers will still perceive them as actionable/clickable elements. Consider the following screen cast of our first example running in IE 7 (a browser without ARIA support) using JAWS 10.

Screen reader accessible Menu Button @ Yahoo! Video

In this example, while the user doesn’t perceive the button’s menu as a menu, the screen reader does announce each button in the menu as it is focused — letting the user know that each item is actionable/clickable. Additionally, since the button’s menu is built using the natively focusable <button> element, this widget will be keyboard accessible to all A-Grade browsers, not just those that support the tabIndex attribute on all elements.

I suspect that the activedescendant property was developed as an alternative to the Roaming TabIndex Technique in part because the focus and blur events don’t bubble like other DOM events. This was a problem since developers need to listen for these events in order to customize how focus is drawn in a way that works cross browser, and attaching individual focus and blur event handlers to each of a widget’s focusable descendants has consequences for performance — especially for large composite widgets like trees and menus. That said, since we now have an easy way of listening for focus and blur in a performance-conscious way, I feel like there are currently more downsides than upsides to using the activedescendant property.

By Todd KlootsFebruary 23rd, 2009

In the Wild for February 19, 2009

It’s been a big week in the YUI world, with YUI 2.7.0 being released and our third birthday coming up. But, as usual, most of the news is coming from the YUI community, with new implementations, articles, and adaptations emerging every day. Here’s some of the YUI news we’ve noticed in the past few weeks:

YUI Sightings — Flurry, Real-time Mobile Anlaytics: According to VentureBeat: “San Francisco-based Flurry has launched a new mobile application analytics tool that works across a variety of mobile platforms, including the iPhone and Google’s Android. Today, the company is announcing that more than 300 developers have used its free service since the beta launched in October… The program also works with BlackBerry and Java ME platforms (though not Palm). Flurry lets developers see exactly how consumers use their applications, and provides information on which features of the application are used and for how long.” Flurry uses a third-party charting library and a wide assortment of YUI components in its Google Analytics-style dashboard. (Original source.)
YUI Sightings — WeUseCoupons.com: New site WeLoveCoupons.com adopts YUI while availing you of a frugal selection of links.
Chad Auld, “jChat – YUI, Jaxer, & ActiveRecord”: Writes Chad: “For those familiar with MiaCMS you’ll already know I’m a huge fan of the Yahoo! User Interface Library (YUI). I recently finished up the JavaScript work for version 4.8 of MiaCMS. With some free-time on my hands I figured what better way to fill it than with a new project? So I set out to learn some new technology and see how I might mash it up with some existing skills like YUI. The new technologies I decided to experiment with were Aptana’s Jaxer and their new ActiveRecord.js framework. Jaxer ships with a number of basic samples, but I’ve seen quite a few people online in search of more complex examples and specifically ones that make use of the new ActiveRecord.js library. The extended example I developed is called jChat. jChat is fully functional chatroom application that demonstrates integration of the following web related technologies; HTML, CSS, JavaScript, MySQL, YUI, Jaxer, and Activerecord.js.”
Sarah Gray of DevChix on Using YUI DataTable with Rails: Writes Sarah: “I am currently working on an Rails app that integrates the YUI DataTable, and in going through the tutorials I noticed they are all assume a PHP back-end. I also saw a number of people asking how to get this to work with a Rails controller, so I thought I’d write up my experience in the hopes that it helps someone else.” She provides detailed code samples and exposition in her post.
YUI Sightings — Favicon Editor from Ed Eliot, Cyril Doussin, and Stuart Colville: Old friends Ed, Cyril and Stuart have formed Project Fondue, and one of their new creations is a web-based favicon editor. The frontend is built with YUI, including YUI Loader and a fantastic implementation of YUI Color Picker. (Original source.)
YUI Sighting — Diddit, a Social Lifelist for the Web: diddit is a new experience-sharing site that makes your best life experiences sharable in a checklist format. Check out TechCrunch’s coverage of their launch. TechCrunch writes that diddit “is looking to help you check off all the things you’ve done with your life, and discover new things that you’d like to do. The site allows users to browse through thousands of activities in categories ranging from the bars you’ve visited to ‘Bizarre Retro Candies’ you’ve eaten at one time or another. To coincide with the launch, Ludic Labs, the company behind Diddt, has also announced that it has closed a $5 million funding round led by Accel Partners with KPG Ventures also participating.” They’re launching with a frontend laced with more than a dozen YUI components.
YUI Sighting — MyMathMind, a New Math-learning App: MyMathMind is a new math-learning application that leverages YUI to create a varied set of math challenges. From the site’s description: “Master basic mathematics by completing addition and multiplication challenges. Challenges are presented in table format to help reinforce a pattern of understanding.” Progress is depicted graphically as you go.
Simon Tiffert on “Javascript Unit Tests with the YUI TestManager”: Over on the Agimatec blog, Simon Tiffert writes about test-driven development and unit tests in JavaScript: “The easiest [tests to use] are unit tests. We have tried several JS unit test frameworks. Including JSUnit, Scriptaculous Unit Test Runner and YUI Test. With a lot of YUI components like the YUI Loader and many YUI widgets we refactored our unit tests to use YUI Test. We like the Yahoo User Interface because of its documentation and also…its code quality.”
YUI Sightings — StanfordAlumni.org: Good to see YUI being used on the alumni website up at The Farm, where, many years ago, Yahoo was founded in a trailer by two grad students. YUI Core (Yahoo, DOM, Event), TabView and Containers are all in use.
YUI Sighting — “The Marketplace” OpenSocial/MySpace Storefront App: Navaneeth Krishnan, founder of NetCarnation, emailed to tell us about The Marketplace. The Marketplace is a storefront built for OpenSocial platforms, and it currently runs in MySpace and Friendster. Nava writes: “The Marketplace is completely written using YUI and we have used almost all YUI components in the product including Animation, Button, Dom, Dialogs, Paginator and TabView. Since OpenSocial is a Javascript-based API, our complete rendering is based on YUI.” You can check out some example stores on MySpace here.
Matt Snider on Augmenting YUI Cookie: Matt Snider of Mint is back with more built-on-YUI innovation in his exploration of Nicholas C. Zakas’s YUI Cookie Utility. Cookie is robust, Matt writes, but “there are a few methods that were missing: ‘getNumberOfCookies’, ‘getCookieSize’, and ‘isCookiesEnabled’. The ‘getNumberOfCookies’ function returns the number of cookies currently set; simply splitting around ‘;’ seems to work in the browsers I tested. Let me know if there is a better way or browser issues I missed. The ‘getCookieSize’ method does a pretty good estimation of the cookie size, by assuming all alpha-numeric characters are not escaped and thereby stored as 1 byte and all non-alpha-numeric characters are escaped and thereby stored as 3 bytes. Although, the later is not always true, it is a fairly accurate assumption; I am open to a better regex that considers the other characters which are not escaped. Lastly, the ‘isCookiesEnabled’ enabled function determines if Cookies are enabled, first by looking at the ‘navigator’ object, then by checking if there is a cookie set, and lastly by adding a test cookie.” Check out Matt’s blog for the full scoop and code samples.
AutoComplete Inputs with PHP, Pear and YUI: Vikram Vaswani of DevZone writes about using YUI with PHP and PEAR, noting that YUI’s AutoComplete provides all the frontend magic you need to create search-suggest and other innovative interactions. “Add a little bit of server-side glue, in the form of a PHP script that talks to a database to generate valid suggestions, and enabling this functionality in a Web application now becomes a matter of hours, rather than days. In this article, I’ll show you how to do this using three different libraries: PEAR HTML_QuickForm, YUI, and Dojo. Come on in, and find out more!”
Bret Levy’s Dialog-with-Confirmation Demo: Bret Levy of Levycode is back with a new demo “showing how to setup a dialog submission with a confirm step… We have a sample form which accepts some fields and has save, delete and cancel buttons. The form itself ‘blocks’ submission by normal means — that is, there is no submit button and the <form> tag contains code to block any browser’s ‘standard’ or ‘default’ submissions (such as when the enter key is pressed).” Check out his post for full code and the working demo.
YUI Sighting — SeatHound: Looking for tickets for Springsteen at the HP Pavillion? Check out SeatHound, a richly YUI-based site for comparing aftermarket ticket prices. DataTable, Slider, and a bevy of other YUI components are in play.
Mmutham’s Wiki on Using YUI and DWR Together: Interested in adding YUI to your existing DWR project (or vice versa)? mmutham’s Wiki has a new article out walking you through some of the key steps. (Original source.)
YUI-Shed on YUI and Google Gears Data Sets: YUI-Shed helps you get up to speed using YUI DataTable with data from a Gears dataset. (Original source.)
Easy YUI Compressor for Windows: User hani on the YUILibrary.com developer forums has released a Windows app that wraps YUI Compressor. This is one of several YUI Compressor UIs that we’ve seen lately, all of which are helping to make YUI Compressor accessible to an even wider developer base. (Original source.)
Norman Kosmal on Django and AJAX Using YUI: Blogs Norman: “I was wondering how requests via AJAX can be implemented into Django framework. So I wrote a small application and hooked it into an existing Django project for testing purposes. The application has two models, Employee and Project, and two methods. The first method fetches data from the project and employee tables and renders that data onto a template. The second method takes care of the AJAX request and returns a JSON string. There is javaScript code embedded on the template itself, which is responsible for the AJAX requests and manipulating DOM on a successful response.” Check out his post for full sample code. (Original source.)
YUI Sighting — SpinCloud: SpinCloud is an intriguing maps/weather mashup making use of a wide swath of YUI components — including AutoComplete, Button, TabView, Cookie and much more. (Original source.)
Using YUI Uploader with CakePHP: Andrew Kolesnikov has a new article on the Bakery that shows you how to use Allen Rabinovich’s YUI Uploader (our Flash/DHTML hybrid mutiple-file uploader used on sites like Flickr and Yahoo! Video) in your CakePHP projects. Andrew’s article should get you up and running in just a few minutes’ worth of work.
Pierre Rineau’s Drupal Module for YUI-enhanced Forms: Pierre Rineau describes this new module as follows: “This module intends to provide FAPI pre-defined custom form elements using the YUI Library. It’s a developer module, providing such form elements, it helps to develop YUI-based forms easily without a line of javascript. This module is only starting, it only provides a non configurable YUI Calendar and a simple YUI horizontal slider.” Pierre is looking for developers to try out the new module and provide feedback. (Original source.)

Thanks to everyone who wrote in with tips for this column. Let us know in the comments if we missed something big, and we’ll get it into the next post.

By YUI TeamFebruary 19th, 2009

YUI Turns Three!

The YUI Library turned three years old this month and we’d like to invite you — our community of developers and implementers — to come out and celebrate! To celebrate our third birthday (and our 2.7.0 release), we’ll be hosting a recession-chic happy hour at the Blue Chalk Cafe in downtown Palo Alto, Thursday, February 26 from 6:00 to 8:00 pm. Nothing too fancy, but we’ll have fun goodies to give away and the first few rounds of drinks are on us (until the tab runs out). Details and signups are at Upcoming. Hope to see you there!

By Jenny DonnellyFebruary 18th, 2009

YUI 2.7.0 Released

The YUI development team is pleased to release version 2.7.0 of the YUI Library. You can download YUI 2.7.0 from YUILibrary.com or configure your implementation using the YUI Configurator.

Version 2.7.0 introduces a new StyleSheet component, graduates three components out of “beta”, improves support for the upcoming release of IE8, includes over 180 bug fixes and enhancements, and ships with more than 300 functional examples.

Introducing StyleSheet

The YUI StyleSheet Utility, developed by YUI engineer Luke Smith, provides a means to optimize the application of a style or changes to existing styles across multiple elements without incurring the cost of a page reflow for each element. Using the benefits of dynamic CSS, the StyleSheet Utility allows the creation of new stylesheets and changes to existing stylesheets that can be applied to multiple elements without the need to loop through the elements in the DOM, thus maintaining an optimal experience for the end user of the page.

Updates to Existing Components

Charts Enhancements

The Charts Control benefits from several new additions in the 2.7.0 release made by Dwight “Tripp” Bridges. Charts can now be specified with rotated axis labels and titles. New series styles have been added which allow more control over the color and alpha settings of lines, borders, and fills for the series markers. A zeroGridline style has been added to be able to draw attention to a chart’s zero gridline when it appears beyond the origin. Several bugs have been addressed in the TimeAxis class, resulting in more accurate majorUnit and minorUnit calculations.

Additions to the Dom Collection

Matt Sweeney has been hard at work in both the 3.x and 2.x code lines of YUI. As an enhancement to 2.7.0, the work done in 3.x on getXY() and setXY() has been integrated into the Dom Collection for this release. The properties height and width are now available in Region; the get() method now supports Element instances; and several new methods have been added for this release, including getComputedStyle(), getElementBy(), setAttribute(), and getAttribute().

Container Changes

The Container family of components has received a couple notable updates from YUI’s own Satyen Desai. Dialog now supports sending post data along with any data mined from the form for “async” post requests. It also provides the Connection object as the first argument to subscribers of the “asyncSubmit” event. Overlay’s “fixedcenter” support has been enhanced with the ability to optionally disable centering on scroll when the window size is not large enough to fully contain the Overlay. The Container README file included in the release contains full details on these items and a full list of changes for 2.7.0.

Updated Treeview

Prolific YUI community member and developer Satyam has contributed a long list of enhancements and bug fixes to YUI’s TreeView Control for this release. Node highlighting and selection has been added, including single and multi-node selection support as well as upward and downward propagation. There have been significant improvements to focus and event handling. The parsing in buildTreeFromMarkup() has been updated to read an HTML attribute called “yuiConfig” which can override any property read from the markup. It assembles an object literal that is then passed to buildTreeFromObject(). Several class names have been added to TreeView in order to make it easier to identify elements in the generated HTML. This is only a small sample of the changes to this component for 2.7.0. Refer to the TreeView README file for the full summary of changes in this release.

Internet Explorer 8 Support

The YUI team has put a great deal of effort into testing the library components with the pre-release versions of the new IE8 browser. There have been several changes made in the library to provide better compatibility with the new browser. Please note, at the time of the 2.7.0 release, IE8 is still a release candidate. Should any significant issues be found when IE8 is officially launched, we will work to post a timely YUI update.

Promotion from Beta Status

The following components have been promoted out of “beta” status in the YUI 2.7.0 release:

Over 180 Enhancements and Bug Fixes

The information included above describes just a few of the updates in 2.7.0. Refer to the README digest or the individual README files for full details on changes in this release. YUI 2.7.0 also addresses over 180 defect reports and enhancement requests that have been submitted by the development community. A comprehensive change log has been provided for your reference.

Thanks!

The YUI Library has grown in functionality as well as quality as a result of the feedback and suggestions we get from all of you in the community. We hope you will enjoy using the 2.7.0 release of YUI, and we look forward to your continued feedback on the YUI mailing list and forum. Please continue to log any enhancement requests you have for the library as well as defects you run into in your development at our new ticket repositories on YUILibrary.com.

For all of your feedback and support, I extend a big thank you to everyone in the YUI community on behalf of the entire development team: Adam Moore, Dav Glass, Eric Miraglia, Jenny Han Donnelly, Luke Smith, Matt Sweeney, Nate Koechley, Satyen Desai, Thomas Sha, and Todd Kloots; and contributors: Allen Rabinovich, Caridy Patiño, Dwight “Tripp” Bridges, Gopal Venkatesan, Julien Lecomte, Matt Mlinac, Nicholas C. Zakas, Philip Tellis, and Satyam.

By George PuckettFebruary 18th, 2009

YUI in Action at University Hack Days in Mumbai and Delhi

We recently conducted Yahoo! University Hack Days at the premier technology universities in India, IIT Mumbai and IIT Delhi. Hack U is a wonderful avenue to “catch ‘em young” by throwing open the challenge to bright minds to innovate over Yahoo!’s open offerings. The event was a great success, and a lot of fantastic young developers left with a new interest in open web technologies (and, hopefully, in Yahoo’s developer offerings).

Subramanyan's YUI talk

Both at IIT Mumbai and IIT Delhi, students were really excited to learn how to use YUI in their projects. Christian Heilmann introduced hacking with YUI in Delhi and I presented the YUI talk in IIT Mumbai. I also learned that in IIT Mumbai, YUI is being taught as a subject in their computer science lab.

We saw close to 25 hacks at each school. Many of these hacks used YUI. A really cool hack from IIT Mumbai called “ChoosY!” was an idea that merged social, personalization and search. With this hack, a user can create a search profile and then share that profile with other users. Each of the search profiles created was displayed in a YUI Tab, and their page was structured using YUI Grids.

Another excellent hack at Mumbai was the “Guitar Tab Finder,” which uses YUI Animation to animate tabs on a virtual guitar for an uploaded song. YUI Image Cropper was used by a hack called “Flickard” that uses images from Flickr to create greeting cards by burning in text on to a image or section of an image.

At IIT Delhi, there was a hack called “Bird of Paradise” which uses the Flickr API to make a more visual travel planning site. That team employed YUI Layout Manager and YUI Grid Builder for layout and Yahoo! Maps to show the travel route.

Another crazy hack in IIT Delhi was called “SpaceHack” which tells you what your space address would be corresponding to your address (latitude & longitude) on Earth. The Yahoo! Maps API was used here. The “Flicking Flickr” hack from IIT Delhi uses Flickr images to create a screen saver concept on the browser. The screen saver animations were created using YUI Animation, chaining many different kinds of animations at random. Apart from the hacks mentioned above, most of the hacks tried to use the YQL service and did all their Ajax calls through YUI Connection Manager.

Hack U demo

The general feel I got from the University Hack Days is that the examples in YUI are really good to work with for aspiring hackers, since most of the students don’t read the documentation. The examples have great coverage and are a starting place for learning and developing more complex solutions. That’s a big win for those of us who care about and work on YUI around the world.

Thanks to N Raja Gopal for providing pictures and feedback on the Hack Demos in IIT Mumbai.

By Subramanyan MuraliFebruary 17th, 2009