AutoComplete, Windowing, Menu and More: A Second Beta Release for the YUI Library

By Nate KoechleyMay 9th, 2006

I’m very happy to announce today a whole bunch of new stuff in both the Yahoo! Design Patterns Library and the Yahoo! User Interface Library. On the design side, there are more than a dozen new patterns (as well as oft-requested examples for some existing patterns like Tabs and AutoComplete). On the development side, we’ve updated all the existing components and broadened the platform’s reach with several important UI controls. With this release, we’re offering CSS packages for the first time. And, as part of the evolution of our open-source processes, we’ve migrated YUI Library distribution to SourceForge.

Development

Let me call your attention to several things on the development side: We’re proud to offer three new JavaScript packages. The first is a suite of DHTML windowing controls, each of which implements a distinct contextual-window interaction with just a few lines of JavaScript. These components — we call them the Container family of controls — build upon a standard unit for modular content (the Module control) and a common foundation in which a module floats over its page context (the Overlay control). Four Container-family UI controls build upon the Module/Overlay system: Tooltip, Panel, Dialog, and SimpleDialog.

A fifth control, Menu, shares the same Module/Overlay foundation and allows you to create mouse-and-keyboard-accessible, application-style fly-out menus in just a few lines of code. Extending Progressive Enhancement into the world of UI controls, Menu can be dynamically generated or layered on top of simple, semantic unordered lists.

Our third new YUI Library component for this release is the highly-anticipated AutoComplete control which allows you to streamline a variety of user interactions involving text-entry. It’s robust, configurable, and easy to implement; I hope you’ll agree it was worth the wait.

In addition to these new additions to the Library, we’ve updated and improved all existing packages with numerous optimizations, bug fixes, increased functionality, and improved consistency. Each component includes reworked and expanded examples and more detailed documentation on our Yahoo! Developer Network website. In the distribution, you’ll find a README file with a detailed change log accompanying each component.

This time around, we’re going beyond new and updated JavaScript components and including what we think is some important, useful work around the intrinsic challenges of CSS. Three CSS packages are included in this initial release. CSS Reset is a simple foundational file that normalizes browser-supplied CSS defaults. CSS Fonts provides cross-browser font families, and, importantly, recommends what we think is the optimal font-sizing strategy. CSS Fonts also works to normalize the width of an em across browsers and platforms. The normalizing strategies applied in CSS Reset and CSS Fonts provide a stable foundation for my favorite CSS package, the CSS Page Grids. Its single file, weighing less than 2KB (minified), provides seven basic wireframes and numerous subsection grid components which together offer more than 100 page layouts — all of which scale up in size when the user applies browser-level font zooming.

Design

On the Design side, our User Experience and Design team has published over a dozen new patterns codifying our language of Invitations and Transitions, and they’ve added a companion pattern for Page Grids. These topics are critical as richer interfaces proliferate. Discoverability of new functionality remains a challenge, and as content change continues to be divorced from page-load events we need new types of transitions to help sustain the user’s intuition about what’s happening on the screen. We hope you’ll find information in these new patterns that helps you boost the intuitiveness of your applications even as you increase their richness.

Many of you have asked since our debut in February for implementation code to support both Tabs and AutoComplete. With this release, code for both of these patterns is now available. Moreover, all of the new patterns link to code samples.

Infrastructure

The YUI Library’s emergence as an open-source project important to the work of developers throughout the world during the past four months has been exciting and gratifying. Much work remains to be done with respect to managing community-contributed bug reports, feature requests, implementation samples, and code patches. However, we’re taking an important step in that process with this release, moving our code distribution and public bug reporting to SourceForge. This move will give us better and more flexible control over distribution of the code — and it will improve our ability to release critical patches between releases in a timely, convenient manner. Formalizing our public bug reporting on SourceForge will make it easier for the YUI community to report, research and track issues related to library components.

Note that we will continue to rely on the YDN-JavaScript group for community communications and we will not, as yet, be using SourceForge for community-contributed code submission.

We hope you find a lot to smile about in this major step in the YUI Library’s beta cycle. I know I speak on behalf of the entire team when I say that I can’t wait for you to get your hands on these new components. Go check it out. Don’t forget to stop back here, or over at YDN-JavaScript or YDN-patterns, to let us know what you think.

Thanks,
Nate Koechley
Yahoo! Presentation Platform Engineering

37 Comments

  1. [...] AutoComplete, Windowing, Menu and More: A Second Beta Release for the YUI Library [...]

  2. Yahoo! Design Patterns Update…

    The Yahoo! Design Pattern Library was updated today with new patterns for creating visual transitions, invitations, and page grids….

  3. [...] 新的 Yahoo! Design Patterns Library 與 Yahoo! User Interface Library 詳見官方 blog 公告, 多了不少元件, 還有這兩個 Design Pattern: Transition & Invitation [...]

  4. [...] Yahoo! has announced a new rev of the Yahoo! User Interface library. I’ve already thought of an innovative use for the windowing controls, which must remain sekrit for now. Safari died a spectacular death when testing out the AutoComplete feature, though. I guess that’s one reason they’re still calling it a beta test. I really wish I’d had this library available when I did the NASA mission planning interface. [...]

  5. [...] Por otra parte, el equipo de Yahoo! UI Library también ha añadido nuevos códigos (windowing control, menus, auto-completion, CSS Fonts/Reset). [...]

  6. Mostly nice, but the CSS fonts seems like a total fuckup that encourages bad practices, and what’s worse, it defaults to a font size significantly smaller than browser defaults.

    Given the rest of your work, I thought you Yahoo devs had a bit of a clue when it comes to publishing for the web. But this just dramatically lowered my opinion of you and made me question how much of the rest of your code I can trust that I haven’t personally reviewed.

  7. Michal Tatarynowicz said:
    May 10, 2006 at 6:11 am

    The context menu example doesn’t work for me in Firefox 1.5.0.3 on WinXP. On right click your context menu is shown behind Firefox’s context menu.

    http://developer.yahoo.com/yui/examples/menu/contextmenu.html

  8. [...] Net Neutrality, a simple video explanation AutoComplete, Windowing, Menu and More: A Second Beta Release for the YUI Library abazab.com – new Social Networking Site [via] 10 Reasons Why the Internet Is No Substitute for a Library [via] Google Calendar tips CSS3 Preview Corporate Usability Maturity in Stages [...]

  9. This was an excellent release guys. I think over time folks are really going to start seeing the usefullness behind these libraries if not already.

    I wouldn’t pay any attention to Jim’s comment above. Basing an opinion off of one css file is hardly reason enough to put down an entire organization of web developers.

    Regardless of that matter, again, great job and keep up the great work.

  10. Hey Jim,

    I think there’s a compliment in there somewhere for the library as a whole, so thanks for that. Community feedback makes our code stronger, which is a key reason we share it openly with the world. Too bad your comment wasn’t associated with an email address or url, as I’d like to understand your feedback in more specific and practical terms.

    In any event, I hope you’ll review the more detailed information on CSS Fonts here http://developer.yahoo.com/yui/fonts/ . We’ve been using and refining this system internally for more than three years, and stand behind it fully. Look for an upcoming blog post that will more deeply examine the rationale behind the system.

    I’ll also take this opportunity to point out to everybody that public bug reports are welcome on SourceForge. Information about your environment (browser, version, OS) as well as clear instructions for reproducing the issue are signs of a useful bug report.

    https://sourceforge.net/tracker/?func=add&group_id=165715&atid=836476

    Thanks,
    Nate

  11. Hi Michael,

    Some Firefox extensions disable the ability for JavaScript to prevent the display of the browser’s default context menu. I’m pretty sure this is the issue you’ve encountered.

    Each control in our distribution has a README file containing known issues (including this one) and a change log. For Menu, find that file at this path within the SourceForge distribution: yui\build\menu\README

    Thanks,
    Nate

  12. Yahoo becoming developers’ best friend…

    Yahoo released a new version of their YUI library yesterday. I have to say I’m very impressed with what these guys are doing–they’re taking Microsoft’s place as the most developer-friendly company on the Net. Some of the cooler things they’re…

  13. Alex Kadis said:
    May 10, 2006 at 6:37 pm

    Wow, I had heard about this framework earlier, but I never took a deep look at it until now. I can’t believe you’re releasing this not only free, but under such a nice license.

    I especially like the Reset CSS and Fonts CSS.

    I can’t help but wonder, was the Reset CSS inspired by Tantek’s undohtml.css? (Eric Meyer has a great write-up on undohtml.css)

    I’m a bit worried about the Grids CSS, while I can’t argue with the amazing amount of extendibility it offers; I fear it seems like a Divitis Nightmare, and I wonder if it won’t just be abused.

    Out of curiosity, is there any plan for adding a WYSIWYG editor to the mix? At the moment, the only truly standards oriented and semantic one I have been able to find is Cameron Adams’ widgEditor, which is fairly limited in it’s capabilities.

    Thanks for your hard work!
    - Alex

  14. Igor Poteryaev said:
    May 10, 2006 at 9:35 pm

    Small question about CSS Fonts.


    table{font-size:inherit;font:100%;}

    Why do you have omitted font-family part in ‘font’ property ?
    I suppose it is not correct.

  15. [...] The latest release includes the module/container library. This group makes it super easy to add window functions to your site. These are not the popup windows of yesterday. This is about manipulating divs to hide or show on top of your existing content. [...]

  16. [...] The Yahoo! team has released another version of the Yahoo! UI library. I’m very happy to announce today a whole bunch of new stuff in both the Yahoo! Design Patterns Library and the Yahoo! User Interface Library. On the design side, there are more than a dozen new patterns (as well as oft-requested examples for some existing patterns like Tabs and AutoComplete). On the development side, we’ve updated all the existing components and broadened the platform’s reach with several important UI controls. With this release, we’re offering CSS packages for the first time. And, as part of the evolution of our open-source processes, we’ve migrated YUI Library distribution to SourceForge. [...]

  17. @Igor Poteryaev: ‘font’ is shorthand for quite a few other font properties which also includes font-family. Check out this css shorthand guide to explore some of the other interesting shorthand properties that css offers.

  18. [...] Come si legge sul blog ufficiale, Yahoo ha rilasciato oggi una nuova release della propria libreria Js per creare User Interfaces dinamiche ed interattive. La prima release ci aveva gi impressionato favorevolmente e, con questo nuovo rilascio, le cose sono migliorate ulteriormente. Fra le nuove funzionalit vi segnaliamo il tanto atteso modulo per il completamento automatico dei campi di input e un componente di windowing DHTML decisamente ben fatto. Per download, documentazione e una marea di esempi potete consultare il sito ufficiale sul Yahoo Developer Network [...]

  19. [...] The Yahoo! team has released another version of the Yahoo! UI library. These seem to be another real great bunch of handy AJAX tools from the YAHOO people! [...]

  20. [...] Yahoo has released an update of the Yahoo! UI Library. These are very nice widgets that you can assemble to build sophisticated AJAX sites. [...]

  21. I think inclusion of Menu and CSS is one the best that has come out from Yahoo UI Lib.

    Many web-devs (not UI designers), are horrified to use Javascript, CSS, JS-Menus, etc. I’m sure the new Yahoo Lib will give them a easier life.

  22. [...] Похоже, теперь каждаю уважающая себя крупная компания считает долгом выпустить собственную библиотеку для разработки веб-приложений с использованием AJAX. Кроме Microsoft с её Atlas и Yahoo! с запущенной 9-ого числа второй версией YUI Library в эту гонку решили включиться и разработчики из Adobe. [...]

  23. Your framework documentation sets the gold standard!
    Come on Scriptaculous and Dojo, the bar has been raised!

  24. Yahoo Gets It…

    Eric Miraglia at the Yahoo! User Interface blog talks about creating their JavaScript library. One point  he touches on is the hetrogeneity of client configurations, and how that underscored the need for a robust cross-browser toolkit:……

  25. Compared to the “wall calendar” type of selecting dates, the simpler drop-down selection with separate drop-down boxes for month, day, and year is still faster and more compact. Day ranges should remain valid according to the month selected.

    Have you considered converting to this type of date selection?

  26. [...] and some more additions to the YUI library [...]

  27. I love you guys! This is soooooo perfect for an app I’m working on and your documentation is top-notch too. Now to get my teammates on board… it should be easy.

  28. First, thanks to Yahoo and YUI developers for such a great library.

    I have a little problem – I cannot find tab implementation in source and examples.
    When you say you have Tabs are you thinking of tab as a keystroke, or tab as a dom menu navigation.
    I would like to use of ajax based tab menu with yui library.

  29. Hey delacko,

    As Eric pointed out on our mailing list:

    Some clarification is in order here.

    The Tabs example noted on YUIBlog and provided on the Patterns site is merely that — an example. It’s not part of the YUI Library, but rather a piece of sample code provided to support the Tab Pattern in the Patterns Library. The code is functional and we believe it to be a good starting point for implementing a tabbed interface. But at this point we’re providing it only as a point of reference, not as a supported part of the YUI Library.

    The work you see documented at the YUI Library’s site, http://developer.yahoo.com/yui, is the full extent of the YUI Library.

    Thanks,
    Nate

  30. No Datagrid control?

  31. [...] Yahoo seems to be opening up in the spirit of Google. This Yahoo UI Library is an interesting idea at using “more than 100 CSS-based browser-tested page layouts, available under a generous BSD-style open source license”. In addition, you can read more at the Yahoo User Interface Blog or peruse the Yahoo Design Pattern Library [Found via Daring Fireball] [...]

  32. [...] Yahoo! is doing some nice work, including blogging about their components. [...]

  33. [...] a hónap elején lett kibocsátva, amint ezt a fejlesztők blogja jelenti. A könyvtár egy sor JavaScript-ben írt eszközt és vezérlőt tartalmaz, amit minden további nélkül bárki felhasználhat. A könyvtár DOM, (D)HTML és AJAX technológiát használ. Egy jól átgondolt és remekül megvalósított megoldásról van szó, mindannyiunk hasznára. Sok mindent kipróbáltam és kitűnően működik. Mindenkinek melegen ajánlom. A Yahoo! User Interface Library honlapjáról a következők érhetők el: [...]

  34. [...] In the two months since our last release, the YUI Team has been hard at work improving the library, optimizing code, and working with our colleagues at Yahoo! as they’ve launched numerous products using YUI as a foundation. The new Yahoo! Front Page beta is just one example where YUI is helping Yahoo!’s frontend engineering community to bring its most interesting visions to fruition. [...]

  35. I would love to see a DataGrid control :-)

  36. [...] Escrito por csr el 25 Jul 2006 a las 12:39 pm | Archivado como: Enlaces, CSS (y ms) Comencemos con un poco de JavaScript, con una Quick guide to somewhat advanced JavaScript, una de Simple JavaScript Debugging y otra de JavaScript and Selectors. Y un poquito de AJAX. Uno sobre integracin de AJAX y JavaScript, un artculo sobre el Dojo Toolkit y otro sobre Spry, la alternativa de Adobe. Y finalmente, un artculo (de mayo!) sobre las entonces ltimas evoluciones de la Yahoo! User Interface Library. [...]

  37. [...] OK, I’m a little behind the time but when I saw the headline that Yahoo had updated their UI Library for Javascript I was really excited! The most notable additions are windowing and menus. I have been developing a windowing module in JS with a friend for a few weeks now and the results always struck me as substandard, now I can scrap that code and start using the UI library. This will be my first foray in to using someone else’s JS library and I hope it goes well. [...]