YUI 2.4.0 Released — Selector, Charts, Profiler, Script/CSS Get, and JSON Support

By YUI TeamDecember 4th, 2007

We released YUI version 2.4.0 today; it’s available for download and full documentation is up on the YUI website. Here are the all-new components being issued with 2.4.0:

  • Selector Utility: Matt Sweeney introduces the Selector Utility Beta in 2.4.0, our first pass at a CSS query engine. Of course, this genre owes a huge debt to Simon Willison, Sam Stephenson, John Resig and many others; most major libraries have now added selector functionality, and there’s an emerging body of work that helps implementers sort out the relative performance profiles of the various tools. The YUI Selector Utility implements much of the CSS Selector syntax as defined by the W3C, including the proposed CSS3 Selector extensions. Matt has provided support for most pseudo-classes, attribute operators, and combinators included in these working drafts. While performance is always a priority for query engines, in this initial beta our primary focus has been on passing test cases to meet the requirements of the CSS3 spec. We think we have the right selector framework to support YUI’s needs going forward, and we’re looking forward to your feedback as this goes out for a beta round.

    The YUI Selector Utility.

  • The Charts Control and DataTable Control sharing a single DataSource.Charts Control: Josh Tynjala of the Yahoo! Flash Platform team contributes the new YUI Charts Control, a hybrid JavaScript/Flash component that supports bar, line, and pie charts. The Charts Control draws data from the same DataSource Utility that underpins the YUI DataTable Control, making it possible to do combined chart/table visualizations. The Charts Control accepts CSS style information, allowing you to skin the chart itself without touching the underlying .swf file. But if you do want to dig into the Flash side of this project, you can get full access to those assets on the ASTRA site.
  • Get Utility: Adam Moore adds another foundational YUI component in the new Get Utility. Get provides an interface for dynamically adding script nodes and CSS link nodes to the page. This is the same engine we use in the YUI Loader Utility; with 2.4.0, we’ve reorganized the functionality and made it available as a separate module. You’ll find the Get Utility useful for loading JavaScript and CSS on an as-needed basis and for proxyless web-services calls where you’re retrieving JSON data.
  • Profiler: Nicholas C. Zakas is back in 2.4.0 with a brand-new component, the YUI Profiler. Profiler allows you to target specific code for profiling and to retrieve profiling data programmatically while your application is running — in any A-Grade browser. In combination with Nicholas’s YUI Test Utility, Profiler allows you to build unit tests in which success or failure is predicated on performance benchmarks. Profiler is issued without a visualization layer in 2.4.0, but check out the examples to get a feel for the data that gets rolled up by this tool and how to make use of it.
  • JSON Utility: YUI’s newest team member, Luke Smith, contributes an adaptation of Douglas Crockford’s public-domain JSON parse and stringify functionality. You’ll see the JSON Utility at work in the new Charts Control and working in tandem with the Get Utility to support proxyless web-services in AutoComplete.

Beyond these all-new pieces, you’ll find some other goodies throughout the library. Here are some notable ones:

  • Button: Todd Kloots celebrates the GA promotion of the YUI Button Control with a set of new examples, including a calendar-menu button, color-picker button, throbber/glowing button, and slider-button.

    New YUI Button Control examples from engineer Todd Kloots.

  • The new Calendar Navigator UI.Calendar: Satyen Desai has added built-in year navigation to the YUI Calendar Control.
  • Drag & Drop: Dav Glass enriches the Drag & Drop Utility API for 2.4.0 with a new dragOnly configuration option. If your implementation requires simple drag-to-reposition functionality, this configuration option suppresses the complex targeting and interaction logic that is the most computationally intensive aspect of drag and drop; in those cases, you’ll see significant performance boosts. Note that Satyen has brought support for this option into the Container Family, where you can use it to improve the drag-and-drop performance of Panels and other draggable Containers.
  • Rich Text Editor: Dav continues to push the YUI Rich Text Editor in both size and performance. With 2.4.0, you can better control the dependency list, allowing you to shave more than 50% off the overall k-weight of the widget (vs. its 2.3.1 profile) if you don’t need some of the glossier UI elements.

For a full rollup of the changes, see George Puckett’s change manifest posted to the forum. We’ll have more to say about some of the new components here on YUIBlog in the coming weeks. In the meantime, please download the new release and drop by the YUI community forum to let us know what you think.

-Eric

(on behalf of the YUI team: Adam Moore, Dav Glass, George Puckett, Jenny Han Donnelly, Luke Smith, Matt Sweeney, Nate Koechley, Satyen Desai, Thomas Sha and Todd Kloots; and contributors: Josh Tynjala, Matt Mlinac, and Nicholas C. Zakas).

58 Comments

  1. Thank you for releasing those NICE controls :-D

    BTW, I’m looking for one I haven’t seen yet: a text input field which suggests results from a (possibly big) remote DB, but on which you CANNOT type a free input. Only select one of those suggested.

    I’ve seen it on sites like Facebook. Where you select a Network you cannot just invent a new one. User has to choose one of the thousands suggested by AJAX.

    Does this exist in YUI? How is it called? :-)

  2. Jenny Han Donnelly said:
    January 22, 2008 at 11:06 am

    @Jaime – Have you checked out the AutoComplete widget? What you describe sounds like the “forceSelection” feature of AutoComplete.

  3. [...] missed a lot of news since November. In the meantime, Yahoo! UI 2.4.0 was released, which finally adds CSS selectors. Over the last few months I pretty much tightened my [...]

  4. Help wanted!

    Hi need a source code of yahoo.com page
    i e … dynamic buttons in right side moves up and down.

    thnks
    skumar

  5. I have creating a website with jsp,servlet mysql , i require to put the horizontal chart for the data in my mysql database

    how can id do it

    please help me out

  6. I’m trying to add images or colors to my pie chart of my choice. They give you a series to define the styles you want:

    series: [{}]

    I need an example on using colors or images for the pie chart.