YUI Storage Utility

YUI 2.8 came out last week while I was on vacation. There are many improvements, including a Storage Utility (by me) that allows developers to store large amounts of textual data client-side, regardless of whether the browser supports the proposed HTML 5 specification or not. The package does this by using one of three storage engines (HTML 5, Google Gears, or SWF), although each engine has its own limitations (see documentation). However, all engines implement the same Storage model, so they have the identical interface, regardless of their actual implementation.

Here is a visualization that describes how it works:

Example 1: Diagram of Storage Utility

storage utility diagram

Example 1 shows the 3 main parts of the Storage Utility: StorageManager, Storage engines, and StorageEvent. A developers asks StorageManager for an a StorageEngine, which they can use once the ON_READY event fires. The developer can configure which engine is returned by StorageManager and some engine specific properties (see documentation), otherwise the first available engine will be returned. As the developer adds, updates, or removes key/value pairs from the engine, the CE_CHANGE event is fired, which passes a StorageEvent object to the callback function.

Each storage engine extends the Storage object. Looking into the Storage object source code, you will see that there are many public and protected functions that mirror each other. The developer will interact with the public function which handles basic validation, applies any necessary meta information, then calls the protected function which is overridden by the engine implementation and will actually interact with the underlying engine. This provides the most flexibility for writing your own engines, as each engine need only extend Storage and implement the protected functions, without having to worrying about common validation. After defining an engine, simply call the register function of StorageManager and it will be added to the list of available engines.

The Storage Utility also has some improvements over the HTML 5 specification as it can accept and return Boolean and Number objects as well as String by using meta information. Also, if you are confident that your end-users support multiple engine types, you can use as many engines as you want to maximize the available storage space. Next article will walk through how to write your own engine.

Quick Note

The new design is coming along quickly. I am in the process of converting all the old articles, and expect to have a working version uploaded soon.

Comparing Widget in Y2 Versus Y3

I have been wanting to do a YUI 2 versus YUI 3 comparison for some time, and it took a while to design a simple example that was complex enough to be meaningful. Anyway, for this comparison I wrote a simple CheckboxList widget, that renders a list of checkboxes and labels from a JSON object. Both versions will require only a DOM node to instantiate, they will include two custom events onCheck and onBeforeCheck, and ...

Adding a Library Class to YUI 3

The upcoming release of YUI 3 is going to change the way we develop using the YUI framework. Instead of namespacing the library behind the YAHOO object, as was done in YUI 2, in YUI 3 the library will be referenced in isolated functional contexts by calling "YUI().use". Thus developers need to modify their code to wrap everything that uses the YUI library with a "YUI().use" call.

Example 1: Calling YUI().use

YUI().use(widget, function(Y) ...

Leverating YAHOO.env._id_counter for Unique Ids

This topic was originally covered in the Unique Id Generator article, where you can find more a heavy-handed solution, allowing a developer to determine the character set used for and length of the generated id. However, as most of the commenters pointed out, there is a simpler way to create unique numbers that will work for most developers; that is to increment a global number each time it is used. YUI already has a ...

YUI-EXT-MVC Controller, Adding Command AJAX Pattern

Todays article covers a new feature added to the AJAX control system of the YUI-EXT-MVC Controller (Controller.js). This feature leverages the command pattern, as originally proposed in Data Singleton For Ajax Request, to retrieve and cache data from the server. A new call method was added to the Controller object, which sends only one request to the server to fetch AJAX data, but can be called repeatedly to retrieve data. A callback function ...

YUI EXT MVC Controller

The AJAX control system of the YUI-EXT-MVC Controller has been tested and made available, Controller.js. Currently, it is mostly a simplified wrapper around YUIs Connection Manager, allowing the same functionality with additional support for registering callbacks and defining the expected response type. The Controller also contains logic to force all developer specified callbacks through a common set of wrapper functions by using the CustomEvents of Connection Manager. This allows for generic AJAX abort/failure ...


Last week, I came to the conclusion that this blog is not an affective tool for managing the YAHOO Extension MVC Library, as it is being supported for readers of this blog, two of my side projects, and soon it will be incorporated into the next version of Mint.com. Already, since the librarys release last week, there has been dozens of improvements. To keep you all up-to-date, I am moving the codebase to ...

Adding flashBackgroundColor function to YUI

Sometimes a designers finds the need to draw attention to an element on the page, perhaps some new content was dynamically added or made available to the user. There are many tricks to draw a users attention to this new content, but one of my favorites is to flash a light background color. For this purpose, flashBackgroundColor was added to "/yahoo-ext/dom.js" and a helper function getBackgroundColor.

Example 1: flashBackgroundColor and getBackgroundColor

flashBackgroundColor: function(node, color) ...

Adding getChildNode Function to YUI

One of the well-known differences between IE and FireFox is the treatment of whitespace when searching the DOM. In IE whitespace between tags is stripped out, while in FireFox those white spaces remain. This can be a problem when using DOM pointers like firstChild, nextSibling, etc., because in FireFox, they may not return the node you expected, unless you compress white spaces out of your HTML. One solution is to write a method cleanWhitespaces that ...

YUI, Augmenting Cookie

Over the past week, I have had the opportunity to explore the YUI Cookie object. It has all the functionality from the 2007 article on Cookies, with the addition of sub cookies. Sub-cookies get around the maximum number of available cookie limitation, by allow the developer to store multiple cookies inside of one cookie. This is especially useful for sub-domains, see YUI -Cookie for more information. However, there are a few methods that ...