Yahoo! User Interface Blog (YUIBlog)

Previewing AlloyUI, a YUI 3-based Component Library from Liferay

Nate Cavanaugh and Eduardo Lundgren of Liferay have spent the last six months building out a new widget library, AlloyUI, based on YUI 3. Nate wrote about the project recently on his Liferay blog. AlloyUI is available as a preview release today and early April is the GA release target.

AlloyUI comprises a wide array of components — more than 60 in all — that range from utilities to sugar layers to full-blown UI widgets. All of Alloy’s component’s are built on YUI 3; some of the widgets are based to some degree on YUI 2. All are free to use under an LGPL license. Nate and Eduardo intend to share AlloyUI components on the YUI 3 Gallery, making them as easy to use as any YUI 3, YUI 2, or other Gallery module; they hope to have more news on that effort soon.

AlloyUI components include:

• AutoComplete
• Calendar
• Charts
• ColorPicker
• Dialog
• Image Gallery
• Paginator
• Rating
• Resize
• Sortable
• Tabs
• TextBox List

Check out their demos page to explore all of these and many others.

If you’re pinching yourself and asking, “Are Nate, Eduardo and Liferay contributing dozens of components into the YUI ecosystem, core UI and utility elements that I can use in my everyday development?”, the answer is yes…that’s pretty much what they’re doing. Although we’ve known about the project since late last year, we had the chance to visit with Nate and Eduardo at Yahoo! today and we’re extremely impressed with the work they’ve done.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

In the Wild for March 12, 2010

Here at YUI HQ, we’re working toward the next major release of YUI, YUI 3.1.0. Yesterday we shared some YUI 3 loader work that Adam Moore has done for 3.1.0. His “YUI 2 in 3″ project allows you to use components like YUI 2 DataTable simply and efficiently in YUI 3. Meanwhile, his loader improvements also mean you can bring in YUI 3 Gallery modules like Storage Lite with the same ease and efficiency. 3.1.0 will also mark the GA release of Satyen Desai’s component/widget foundation for YUI 3.

We’re also running the YUI 3 Gallery Contest, the winner getting a JSConf conference pass and $500 at Expedia.com to help with travel. You’ve got two full weekends left of hacking before the deadline!

In the meantime, there’s been a lot going on in the community — here are a few of the things we’ve noted recently:

• In the YUI 3 Gallery — Jeff Craig’s Slideshow Module: Jeff Craig, author of the Chromahash and Crypto modules, has released his Slideshow module for the YUI 3 Gallery.  His writeup on his blog provides a good introduction to the component, which he used for the Washington State University commencement site.
  

  Recently, at work, we had a desire to update an instance of a flash-based slideshow widget on our commencement website. This widget did absolutely nothing special, but the real problem we had was that, we didn’t actually have a license for Flash, and the way the slideshow had been built, we needed to be able to build the SWF file from scratch in order to update the order. Since our users rarely come to us with anything that isn’t some sort of emergency, we had to take the flash files to another department to make our quick change and compile a new SWF.

  You can read Jeff’s full writeup on his blog.
  

• Stoyan Stefanov on YUI’s CSS Compressor: Stoyan has signed on to work on the YUI Compressor, and he’s written about the CSS minification component of that tool on PHPied.com: “Originally written in PHP by Isaac Schlueter and ported to Java by Julien Lecomte, CSSMin got a JavaScript port by yours truly some time ago. Because, after all, JavaScript is the language of the web, isn’t it? You can play with the latest git version of the JS port online here. I’m also happy to report that the JS port is now used in PageSpeed and YSlow (as you probably know Firefox extensions are written in JavaScript).” (Original source.)
• Satyam’s YQLDataSource for YUI 2: “Thanks to Jonathan LeBlanc’s article on the YUI Blog I thought that it would be cool to have a YQLDataSource to make it easier to use YQL data in YUI 2 DataTable, YUI 2 Charts and YUI 2 AutoComplete. The table below is built using such a DataSource…The YQLDataSource does not require any parameters. It will automatically use the YUI 2 Get Utility to access the YQL servers using JSON format and providing a suitable callback. The DataSource just needs to be instanced like: var ds = new YAHOO.util.YQLDataSource();.” Check out Satyam’s full documented example for all the details.
  
• German-language Screencast on Using YUI in DreamWeaver CS4: According to the author, ‘In diesem Film zeigt Ihnen der Trainer die Verwendung und Konfiguration des Web Widgets “YUI TreeView“. Sie lernen die HTML-Struktur dieses Widgets kennen.” This is a beautifully produced screencast on using CS4’s YUI support, focusing on the YUI TreeView Control.
  
• Ajaxian Covers SVG Wow, SVG + YUI 3 Animation: Brad Neuberg notes on Ajaxian the debut of Vincent Hardy and Erik Dahlström’s SVG Wow site.  Many of Vincent’s examples, including the flying song-lyric animation called out by Brad, are powered by YUI 3’s Animation library running within the SVG document.
  
• Simple File Upload in Grails (using YUI Connection Manager): Simon Palmer shows you how he leveraged Thomas Sha’s YUI Connection Manager and Matthew Taylor’s slick Grails UI package to add asynchronous file upload to his Grails project. (Note: You may be able to lighten the kweight of this solution by not including the full utilities.js package but rather cherrypicking the components you need — in this case, that might result in just <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo/yahoo-min.js&2.8.0r4/build/event/event-min.js&2.8.0r4/build/connection/connection-min.js"></script>.
  
• Chris P. Jobling on Watching YUI Theater: Writes Chris: “This last week or so I’ve been watching a lot of Yahoo! YUI Theatre videos on JavaScript, starting with Douglas Crockford’s excellent five-part series Crockford on JavaScript and ending yesterday with Christian Heillman’s inspiring talk on YQL and YUI. This has inspired me to explore how I can use YUI (a JavaScript library) in the next version of my Proman dissertation project management application which will be needed for 2010-2011 allocation round in May. If it works out, there’ll also be some new teaching material for next year’s Web Applications module (EG-259). I’ll post more in the under the tag YUI on the Proman, Man blog as I get to grips with this stuff.”
• YUI Panel: Changing Buttons and Re-using a Panel on Same Page: Ciitronian.com has posted a brief YUI 2 Panel tutorial: “The requirement was to make a modal panel in YUI, which work at its own as a activation widget using Ajax (YUI 2 Connection Manager). The idea was pop up a YUI Panel when a user clicks on ‘Activate’, that modal panel will allow the user to enter details of when he/she wants to schedule the activation (where user can choose now or a later date) and then user can hit Submit and Cancel buttons.”  Click through for the full tutorial.
• YUI 2 Calendar: Using and Modifying Multiple Calendar Picker Instances on Single Page: Ciitronian.com “explains how to create multiple instances of calendar widget of YUI 2. There are many examples of how to use Calendar widget on YUI’s official website but for my application, the requirement was to to schedule multiple actions on the same page, giving each one a date of its own, so I developed my calendar widget” to solve that problem. Click through for the full tutorial.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

YUI 2 in 3: Coming in YUI 3.1.0, a Simpler Way To Use YUI 2 Modules

Using YUI 2 components in the context of YUI 3 implementations is important for some implementers making the transition between YUI 2 and YUI 3. In some cases, we simply want to transition our code in stages, but we want to do so within the context of a YUI 3 implementation pattern. In other cases, we may be relying on high-level components like YUI DataTable that aren’t yet present in YUI 3.

As part of the upcoming 3.1.0 release, Adam has improved the experience of using YUI 2 components from within YUI 3. To this end, he’s added some intelligence to YUI 3’s loader that allows you to load YUI 2 modules directly from your YUI().use() statement:

YUI().use("yui2-button", function(Y) {
	
	//YAHOO is not a global object; it is sandboxed along
	//with the rest of your YUI 3 functionality.  This line
	//is necessary if you want to use existing implementation
        //code:
	var YAHOO = Y.YUI2;
	
	//YUI 2 implementation code
	var button = new YAHOO.widget.button("mybutton");
	
});

You’ll find this functionality in the YUI 3 codeline as of build 1933, and we’ve deployed an experimental YUI 3 build (nominally “yui3.1.0pr2″) and an early build of YUI 2.8.0 functionality wrapped for use in YUI 3.

When you download YUI 3’s latest source from GitHub you’ll find some working examples in sandbox/loader (look for files with the 2in3 prefix). These examples demonstrate the use of a number of YUI 2 modules. We’ve posted a simple live example that shows how to use YUI 2 DataTable within YUI 3, which is one of the most frequently requested transitional features.

Key points about the YUI 2 in 3 effort:

• This work is available in the latest builds of the upcoming 3.1.0 release (build 1933 and later). It is not available in 3.0.0 or in the 3.1.0pr1 preview.
• The project is in an experimental state. Neither the yui3.1.0pr2 build nor the wrapped YUI 2 builds from which it pulls have been extensively tested, although we’ve staged them on the CDN to make it convenient to explore the implementation.
• Download the latest build for examples. You’ll find a few of Adam’s proof-of-concept files in sandbox/loader — other than the simple example above, those are the best code references available until the official 3.1.0 release (which is still about a month out).
• Your feedback in the forums is welcome — and, if you find problems, we’re interested in hearing about them.
• When used this way, YUI 2 does not create a global YAHOO object. YUI 2 components are wrapped in YUI 3 module definitions and they stay contained in the YUI 3 sandbox to which they’re attached. The line from the codesample above, var YAHOO = Y.YUI2;, is needed in order to cut and paste YUI 2-style implementation code — or you can change YAHOO references to Y.YUI2.
• YUI 2 releases are supported back to 2.2.2 — the latest bug-fix release for every minor version is supported (2.2.2, 2.3.1, 2.4.1, 2.5.2, 2.6.0, 2.7.0, 2.8.0). You can specify the YUI 2 version to use as follows: YUI({yui2: '2.7.0'}).use('yui2-button', ...). The goal here is to allow you to avoid migrating to 2.8.0 (or later) prior to a YUI 3 migration.

Gallery Is Easier To Use, Too

Adam’s enhancements to YUI 3’s intrinsic loader have improved the experience of working with the rapidly growing YUI 3 Gallery, too. As of 3.1.0, you’ll be able to bring gallery modules into the page from the use() statement without additional configuration — the loader will be able to determine and resolve dependencies for you and will do the right thing with respect to combo’ing the gallery source code with other YUI files. Here’s an example Dav Glass put together for 3.1.0 that demonstrates the use of his YQL Query gallery module in combination with a pre-release build of 3.1.0.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

In the YUI 3 Gallery: Matt Snider’s Number Module

Natively, JavaScript has a very limited set of functions for working with numbers located on the global Math object. Mostly these functions are for working with exponents, trigonometry, and rounding. And while these functions are needed and efficient, the Math API has remained unchanged for years, and probably won’t be improved anytime in the near future. So it is up to the developers of JavaScript libraries to create and maintain a component for working with numbers.

The Number component in the YUI 3 Gallery, derived from work originally used on Mint.com, aims to fill in missing number-related functionality. It provides a light-weight set of static functions for working with numbers. The Number component weighs in at about 1.8kb after minification and before gzip; it’s supported by all A-grade browsers.

One of the features in Number that I use the most is the format() function, which injects a formatted number into a string by evaluating the format of the placeholder number in the string. (Note: This is similar to the formatting support Y.DataType.Number currently provides, but rolls up the separate configuration properties which Y.DataType.Number.format accepts into a single formatting pattern string.) The function works with all symbols, but it formats numbers according to the English standard. Here are a few example of how to use format() from its unit test:

var n = 1111.11,
	formatDollars = "$0,0.00'" // use comma and decimal when formatting
	formatPercent = "0.00%", // use decimal when formatting
	formatRound = "0,000", // use comma when formatting
	formatText = "Please add the $0,0.00 to my tab!";

Y.Assert.areEqual("$1,111.11", Y.Number.format(n, formatDollars));
Y.Assert.areEqual("1111.11%", Y.Number.format(n, formatPercent));
Y.Assert.areEqual("1,111", Y.Number.format(n, formatRound));
Y.Assert.areEqual("Please add the $1,111.11 to my tab!", Y.Number.format(n, formatText));

Other useful functions include:

• random(): provides an easy API for getting random whole numbers;
• isBetween()/isNotBetween(): simplifies the evaluation of number ranges;
• radian()/degrees(): when working with the Math trigonometry functions (such as Math.cos()), which expect radians instead of degrees, both radian() and degrees() are useful for converting values.

To use the Number Gallery component, first include the script:

<script 
src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&
gallery-2010.02.22-22/build/gallery-number/gallery-number-min.js"></script>

Then include 'gallery-number' in your use() function, to get the following functions:

YUI().use('gallery-number', function(Y) {
	Y.Number = {
		degrees(number),
		format(number, format),
		getPrecision(number),
		isNotBetween(number, number, number, boolean),
		isBetween(number, number, number, boolean),
		isPrime(number),
		radians(number),
		random(number, number),
		roundToPrecision(number, number)
	};
});

These functions were modeled after the native Math functions and, like the Math functions, the functions on Y.Number return NaN if the value provided is not a number. If you would like to contribute to the development of or require new features added to Number, please leave a message on the Forum.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

YUI Theater — Douglas Crockford: “Crockford on JavaScript — Episode IV: The Metamorphosis of Ajax” (93 min.)

Last week, Yahoo! JavaScript architect Douglas Crockford delivered the fourth installment of his Crockford on JavaScript series:

1. Volume One: The Early Years
2. Chapter 2: And Then There Was JavaScript
3. Act III: Function the Ultimate
4. Episode IV: The Metamorphosis of Ajax
5. Part V: The End of All Things (March 31 — RSVP)

In this session, Douglas tackles the DOM. On the one hand there was JavaScript, he says, and JavaScript is “what made the browser work.”

On the other hand, there was the Document Object Model, also known affectionately as the DOM. It is what most people hate when they say they hate JavaScript. Most of the people who say they hate JavaScript don’t know JavaScript, might have never seen JavaScript, but they’ve felt the DOM alright. If you don’t know what the difference is and you say, “JavaScript is the stupidest thing I’ve ever seen,” you’re not talking about JavaScript, you’re talking about the DOM. The DOM is the browser’s API. It is the interface. It provides JavaScript for manipulating documents.

The DOM may be imperfect, but it’s nonetheless crucial to what frontend engineers do when they write web applications. In this talk, Douglas provides an overview, situated historically, of where the DOM came from, how it achieved ascendance with Ajax, and what the future might hold. In Douglas’s inimitable fashion, this history starts with Sir John Harrington and takes us up to the present day. A few choice words for CSS are among the many applause lines for veteran developers:

I find within the community of people who use CSS great affection for it. They’re totally invested in CSS, they love it. They can’t imagine any other way of doing formatting in a document. It’s it. It’s sort of like watching an episode of Cops where the cops come in and break up the family dispute, and there’s this “CSS ain’t bad, you just don’t understand it like I do. I know it hurts me, but I make mistakes, I’m wrong.” CSS is awful, and it amazes me the way people get invested in it. It’s like once you figure it out, kind of go “oh, OK, I see how I might be able to make it work,” then you flip from hating it to loving it, and despising anybody who hasn’t gone through what you’ve gone through. It doesn’t make sense to me.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater.

• Download HD video (480p ~720MB)
• Download video (m4v)
• Download slides
• A high-resolution, transcripted version of this talk is available on the YUI Theater site

Other Recent YUI Theater Videos:

• Douglas Crockford: Crockford on JavaScript — Act III: Function the Ultimate — Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with a discussion of functions in JavaScript. ‘Functions are the very best part of JavaScript,’ Crockford says. ‘It’s where the power is, it’s where the beauty is.’ Watch the video to learn why.
• Douglas Crockford: Crockford on JavaScript — Chapter 2: And Then There Was JavaScript — Yahoo!’s JavaScript architect Douglas Crockford surveys the features of the JavaScript programming language.
• Douglas Crockford: Crockford on JavaScript — Volume 1: The Early Years — Douglas Crockford puts the JavaScript programming language in its proper historical context, tracing the language’s structure and conventions (and some of its quirks) back to their roots in the early decades of computer science.
• Christian Heilmann: YQL and YUI: Building Blocks for Quick Applications — The Yahoo! Developer Network’s international evangelist Christian Heilmann discusses his philosophy for creating fast, powerful, compelling applications using the Yahoo Query Language (YQL) and the Yahoo User Interface Library (YUI).

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

YUI 3 Gallery Contest 2010 — Win a Ticket to JSConf 2010

We’re pleased to announce the YUI 3 Gallery Contest 2010. Thanks to our friends at the Yahoo! Developer Network, we have a conference pass to the sold-out JSConf 2010 to offer. We’re pairing that with a $500 gift certificate to Expedia.com to help the prize winner get back and forth to Virginia for the conference.

The prize will go to the person who authors the best new YUI 3 Gallery module between March 5 and March 22 and submits it for community use under YUI’s BSD license. As with any contest, there are lots of rules. We’ve noted some of the big ones on the contest page and you can read the full legal writeup here.

We’re thrilled with what we all as a community have done since late 2009 to make the Gallery a hotbed for YUI 3 growth and innovation. Greg Hinch’s Form module (submitted hours after the Gallery opened), Ryan Grove’s excellent Storage and History modules, Ilyan Peychev’s über-popular Accordion, Julien Lecomte’s SimpleMenu, Stephen Woods’s Timepicker, Adam Moore’s TreeView, Jeff Craig’s Chromahash, Dav’s own YQL module…and dozens more.

We hope you’ll consider doing some YUI 3 hacking over the next few weeks to add to this collection. We’ve listed some resources on the contest page, and there’s a forum thread going with ideas for new modules (please weigh in there even if you’re not going to be writing a module for the contest yourself). And, of course, the current Gallery is a good source of inspiration.

Happy hacking, and we’re looking forward to seeing a YUI Gallery author head out to JSConf next month!

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Happy First Birthday, JSMag

Our friends over at JSMag are celebrating their first birthday. If you haven’t read JSMag it’s a monthly PDF magazine that covers news on hot JavaScript topics and provides practical tutorials.

JSMag are giving away a free issue from their first year. Simply log into your JSMag account and use the code ‘oneyear’ to get a free issue.

When selecting your free issue, you may want to seek out the articles in JSMag written by Yahoos frontend engineers or about YUI over the last 12 months:

• March 2009
  
  • Matt Henry on unit testing with YUI
• April 2009
  
  • Yours truly on Profiling your JavaScript
• June 2009
  
  • Yours truly on Build Scripts
• July 2009
  
  • Stoyan Stefanov on Function Patterns
• August 2009
  
  • Jon LeBlanc on YQL and browser MVC
• August 2009
  
  • Stoyan Stefanov on function patterns
• September 2009
  
  • Chistian Tiberg on using administration system with YUI
  • Stoyan Stefanov on more function patterns
• October 2009
  
  • Chistian Tiberg on inline editing with YUI
  • Stoyan Stefanov on more constructor patterns
• November 2009
  
  • Yours truly on Enhancing YQL with server-side JavaScript
  • Stoyan Stefanov on more inheritance patterns
• December 2009
  
  • Christian Tiberg on using the YUI2 datatable and chart components
  • Stoyan Stefanov on more reuse patterns
• January 2010
  
  • Christian Tiberg on using YUI to build desktop gadgets for Windows
  • Stoyan Stefanov on the sandbox pattern
• February 2010
  
  • Stoyan Stefanov on the private members pattern
• March 2010
  
  • Yours truly with an overview of server-side JavaScript
  • Stoyan Stefanov on currying

Happy Birthday, JSMag!

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!