Dev411 Blog: Category yui

Comparing CPAN Modules with YUI DataTable

John Wang — Fri, 09 Nov 2007 00:09:00 -0600

There is a lot of choice on the CPAN for open source Perl libraries and sometimes it's difficult to get an idea of how modules compare to each other. CPAN Ratings is a good source of reviews but it's not convenient to compare one module with another. To provide a partial solution, I whipped up a quick CPAN Compare page which will pull the CPAN Ratings from a number of modules and summarize them for you.

I decided to use YUI DataTable for this. I've heard good things about YUI so I decided to give it a try. Getting the example code to work off of the Yahoo website almost as straight forward as say using Scriptaculous demos but it was faster than working with Dojo in the early days. The nice thing about the DataTable is that it takes a JavaScript array which can be populated using server-side JSON generated code. I used JSON::XS for this.

YUI DataTable has a nice sorting feature and it can sort on text, numbers, dates, etc. However, it does not seem to be able to sort on visual information only so if you include HTML markup, that will be used for sorting as well. To get around this I used standard text sorting and customized the title fields to assist in the sorting. For example, in a link, I start with <a title=" instead of <a href=" because title is arbitrary and can be used to mirror the InnerHTML. For numbers a text sort will have 25 come before 4 so I added leading zeros to numbers using sprintf and put them in the title attribute as well.

A few Perl modules and the Logo Creator website made this easy to set up. YUI DataTable has a nice default CSS so I just left that as is.

Note: YUI DataTable is convenient if you just drop in a Perl data structure and have it generate the HTML and JS for you. This script uses 3 DataTables (ratings, popular and recent) so I wrote a Perl wrapper for YUI which takes a hashref and generates the client code, extracting the fields from the column definitions. This works because YUI does not require the HTML table to be built beforehand. By not having an underlying table, it's faster to get running but also won't fallback as nicely for people who aren't running JS (8% of users?). As an alternative, jQuery has a couple of add ons which work by enhancing an existing HTML table. jQuery has some nice syntax but I haven't gotten around to using it yet. Perhaps it's worth a look.

Yahoo! UI (YUI) cheat sheets as wallpaper

John Wang — Tue, 25 Jul 2006 03:12:00 -0500

Yahoo! provides a number of cheat sheets for their YUI library widgets however these are in PDF format and not usable as wallpaper. PDF is great as a transport format because you can provide one version for everyone, however transforming it makes it more appealing for actual use. I prefer cheat sheets in standard image formats that can used as wallpaper, espcially useful with virtual desktops.

Here are the YUI 0.11 cheat sheets converted to PNG images of various sizes. Let me know if any other sizes would be useful.

Animation	1400x1050 1280x960 1165x900 1024x768
Calendar	1400x1050 1280x960 1165x900 1024x768
Connection Manager	1400x1050 1280x960 1165x900 1024x768
Dom Collection	1400x1050 1280x960 1165x900 1024x768
Drag & Drop	1400x1050 1280x960 1165x900 1024x768
Event Utility & Custom Event	1400x1050 1280x960 1165x900 1024x768
Logger	1400x1050 1280x960 1165x900 1024x768
Slider	1400x1050 1280x960 1165x900 1024x768
TreeView	1400x1050 1280x960 1165x900 1024x768

Autocomplete Survey

John Wang — Mon, 17 Jul 2006 23:15:00 -0500

Here are some screen shots of various autocomplete effects in action to show what people are doing. The images and names above the images have links to the relevant sites with the domain name shown. I'll add more screen shots here as I get them. Let me know if there are any other toolkits demos or interesting implementations.

Here are some observations:

All of the screen shots and links are for toolkits except for Google which is just shown as an example.
The jQuery and Scriptaculous demos do not automatically display "autocomplete" text in the input element.
All of the demos, except Dojo, include text that will end up in the input field as well as extra display text that will not.
Where both simple and customized demos are available, the customized one is used for the screen shot.
Del.icio.us also has nice variable horizontal location/width autocomplete for tags that I don't have a screen shot for atm. Gmail also has a nice autocomplete that isn't shown.

The observations are just for the particular demos available. The libraries may have the ability to be configured in additional ways.

Dojo (dojotoolkit.org)

(fullsize screen shot)

jQuery (jquery.com)

(fullsize screen shot)

Yahoo UI (yahoo.com)

(fullsize screen shot)

Google (google.com)

(fullsize screen shot)

Scriptaculous (script.aculo.us)

(fullsize screen shot)

NOTE: The jQuery screen shot has been edited to size it better from the demo page: (a) the number of results was reduced and (b) the width has been reduced because there's a lot of blank space in the demo. The original jQuery screen shot is also available.

UPDATE: CAPXOUS has an interesting paged autocomplete variation which adds Next and Prev links when applicable. The one minor issue I ran into when using this is that it would switch location (above/below the input) if it was near a browser edge and the number of items changed as shown below. I found this a bit disconcerting. I wonder if there's a way to making it always used the side for the larger list? CAPXOUS can also show info that's searched on but not shown but this was less interesting than the paging. One final note, unlike the other JS libraries listed above which are free open source software (FOSS), CAPXOUS is commecial requires a license fee. Pretty interesting idea.

CAPXOUS (capxious.com)

(fullsize screen shot)