Yahoo! User Interface Blog

In the Wild for May 30

May 30, 2008 at 9:06 am by Eric Miraglia | In In the Wild | 8 Comments

On the heels of Wednesday’s YUI 2.5.2 release, we wanted to take minute to share some of the YUI links and projects that have caught our eye in the past few weeks.

• Matt Snider (F2E lead at Mint) continues his long-term process of blogging about the work he’s doing building on top of YUI with "Dom.activate to Focus on Form Elements." Matt writes: "Each browser supports focus in a slightly different way and until recently most did not support the ’select’ Function on an Input Element. In addition, you should never attempt to focus on a hidden or non-displayed Element, nor should you focus on an Input Element of type ‘hidden’. Because of all this trickiness, it is rather handy to have one method that manages all this for you." Looking for more explorations of forms management with YUI? Check out InputEx.
• New YUI-based accordion menu: Simple By Design has a new SBD Accordion Menu based on YUI. It’s always great to see another variation on this evergreen interaction pattern (see also Hedger Wang’s accordion from a few years back).
• Calendar range selection tutorial: John Peloquin has created a fantastic tutorial on using the YUI Calendar Control for date-range selection. His example shows you how to implement this with single-month and mult-month displays. John’s generously contributed the code to the YUI project, so we’ll be adding this as a standard Calendar example in a future release.
• Bold Lentil shows you how to get YUI working on the Google App Engine: The Google App Engine, Google’s new cloud-computing platform, is framework-agnostic on the JavaScript side, so if YUI is your framework of choice you’ll be happy to see this quick tutorial from Bold Lentil that shows you how to get a YUI-driven donut slider (and, alas, a feral pumpkin slider) going in the Google environment.
• Ongoing progress from Robert Schultz on World of Solitaire: Last August we told you about Robert Schultz, who’s created a fantastic, highly polished card-gaming platform at worldofsolitaire.com. He’s up to 41 games now and more than 750,000 registered users; and a few months ago, the one billionth move and 2 millionth winning hands were registered on the site. You can follow his progress on the World of Solitaire blog.
  
• More integration news — YUI RTE with Backbase: With the proliferation of JavaScript frameworks, it’s increasingly common to see projects based on one framework that go to a second or third framework to pull in unique features. We see that frequently in YUI with the Rich Text Editor, which is a unique and highly specialized component. Backbase has published a new tutorial on "Integrating YUI Widgets with Backbase", focusing on the RTE.
• YUI Compressor MSBuild task: Nick Berardi at Coder Journal put together a nice tutorial on using YUI compressor as part of his MSBuild workflow.
• Johanna van Egmond’s YUI-based UED design portfolio: We’ll leave you on a high note here with designer Johanna van Egmond’s personal portfolio site (coded with YUI by Maarten van Egmond). Most sites of this kind are done with Flash, but what Johanna and Maarten have put together here is an extravagant testament to how good DHTML is as an environment for celebrating visual design.
  

Find conversations: bloglines | technorati

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

Mojarra Scales — New JSF Component Library Supporting Numerous YUI Components

May 29, 2008 at 7:37 am by Eric Miraglia | In Development | No Comments

Jason Lee announced the Release Candidate of Mojarra Scales, a new JSF component library that provides support for YUI Charts, Menus, Calendars, Rich Text Editors, Sliders, TabViews and TreeViews (demos of these components and others are available). From the announcement:

I am pleased to announce the first release candidate of Mojarra Scales 1.0, a new JSF component set. Mojarra Scales started out as the Sandbox for the JSF RI (now known as Mojarra) and was recently promoted to its own java.net project. The component set includes a tab view, several menu controls, JavaScript charts, a multi-file upload control, the first (as far as we can tell) free JSF rich text editor control, as well as several other visual controls. Additionally, Scales offers a simple, easy to use pretty URL component, allowing JSF applications to offer search engine-friendly “deep links.”

Congratulations to Jason, Ken and Ryan on the launch.

Find conversations: bloglines | technorati

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

YUI 2.5.2 Released: Bug Fixes and Support for Upcoming Firefox and Opera Releases

May 28, 2008 at 2:59 pm by Eric Miraglia | In Development | 9 Comments

The YUI development team released version 2.5.2 today; you can download the new release from SourceForge or configure your implementation using the YUI Configurator. This is a focused release that addresses several key bugs while providing support for Firefox 3 and Opera 9.5, both of which are expected to reach GA this summer. Key points for YUI 2.5.2:

• Anticipating Opera and Firefox updates: When Firefox 3 and Opera 9.5 go GA this summer, they will be A-Grade browsers, and we wanted to make sure that we anticipated those debuts with a release that was validated against the latest betas available. YUI 2.5.2 was tested against Opera 9.5b2 and Firefox 3.0RC1. In both cases, the new browsers look terrific, and this YUI release incorporates several changes that will help users make the upgrade seamlessly.
• Major bug fixes: DataTable, Menu, Rich Text Editor and Button are the key beneficiaries of bug fixes in 2.5.2, but dozens of fixes are provided throughout the library. Check out George Puckett’s release rollup in the YUI Community Forum for a complete rundown of what has changed in this release.
• Charts Control: The experimental Charts Control is upgraded for 2.5.2 with support for integral legends and for three new series styles.
• ActionScript Source: The ActionScript source for components that use Flash (Charts and Uploader) is now available as part of the download for developers who want to dig more deeply into these components.

After you’ve downloaded YUI 2.5.2 (or changed your pathnames using Yahoo!’s free edge-hosting service), head over to the YUI Community Forum and let us know how it’s working for you.

Find conversations: bloglines | technorati

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

Durable Objects

May 24, 2008 at 3:13 pm by Douglas Crockford | In Development | 11 Comments Cooperating applications, such as mashups, must be able to exchange objects with robust interfaces. An object must be able to encapsulate its state such that the state can be modified only as permitted by its own methods. JavaScript’s objects are soft and currently the language does not include any means to harden them, so an attacker can easily access the fields directly and replace the methods with his own. Fortunately, JavaScript provides the means to construct durable objects that can perfectly guard their state by using a variation of the Module Pattern. You’ll recall that the Module Pattern makes it possible to make an object with privileged methods. Privileged methods are able to access the private state of the constructor’s closure. By adding one simple rule, we can easily generate secure objects:

A durable object contains no visible data members, and its methods use neither this nor that.

This is a template for a durable constructor: function durable(parameters) {
    var that = {} or the product of another durable constructor;
    var private variables;
    function method() {
        …
    }
    that.method = method;
    return that;
} Define all of your methods as private methods. The methods you choose to expose to the public get copied into that. None of the functions defined or inherited make use of that or this. We can give the object created by the durable constructor to untrusted code. That code will be unable to get direct access to the private state. It can replace the methods with its own methods, but that only reduces the usefulness of the object to the attacker. It does not weaken or confuse the object. Each method is a capability. The object is just a collection of capabilities. Durable objects allow code from multiple (possibly untrusted) parties to cooperate. Durable objects can be expressed in a safe subset of JavaScript, such as ADsafe or Cajita.

Find conversations: bloglines | technorati

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

Reid Burke’s Scrolling TabView

May 20, 2008 at 8:17 pm by Eric Miraglia | In Development | 5 Comments

Reid Burke of IdeaRefuge writes in with a new YUI implementation that tweaks the standard “stacked” spatial orientation of a tab control and replaces with a scrolling orientation (either horizontal or vertical). In his own words:

I’ve created a YUI addon, ScrollTabView, that allows you to transition between TabView content with a Scroll animation.

This allows you to use YUI’s tabs to create an effect similar to:

• Panic’s Coda
• Mozilla’s Firefox 3 pre-release start page

You can specify your own direction (horizontal or vertical), animation duration, and easing as attributes. Complicated styles are all applied automatically — just use it like a normal TabView.

View examples of ScrollTabView in action and grab the code here.

Direct links to examples and code:

• http://internal.reidburke.com/yui-addons/yodeler/widget/ScrollTabView.js
• http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/horizontal.html
• http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/vertical.html
• http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/easing.html
• http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/quick.html

It’s all available under a BSD License — so feel free to use it for your own projects!

Reid’s work builds on top of Matt Sweeney’s YUI TabView Control and Animation Utility.

Find conversations: bloglines | technorati

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

Tor Norbye and James Gosling Demo YUI Support in NetBeans at JavaOne

May 16, 2008 at 9:13 am by Eric Miraglia | In Development | 5 Comments

Jason Lee wrote in with this tip:

In a general session with James Gosling at JavaOne last week, Tor “NetBeans Guy” Norbye demoed the really nice JavaScript support that was just added to NetBeans (code completion, browser-compatibility warnings, syntax highlighting, refactoring, etc). He did so using YUI, and NetBeans did a very nice job with the code complete, etc. Really slick demo…

Sun has video of the session; I recommend downloading the mp4 file and queuing to 8:30 for the NetBeans section, where Norbye shows how easy it is to instantiate a YUI Rich Text Editor using the new NetBeans JavaScript support.

Find conversations: bloglines | technorati

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

Tutorial: Implementing Instant Search with YUI AutoComplete and the Yahoo Search API

May 15, 2008 at 6:38 am by Eric Miraglia | In Development | No Comments

O’Reilly’s InsideRIA blog has a feature up that steps through the creation from scratch of a sample YUI implementation. The sample application implements an Instant Search feature using YUI AutoComplete backed by the Yahoo! Web Search API. This is the same treatment we use on the YUI web site to power the search box at the top right corner of the header. It searches developer.yahoo.com and yuiblog.com for relevant content and populates the AutoComplete suggestion container with likely destinations based on what’s been typed in the search field. The tutorial shows you how to apply this treatment to your own site while searching the domain or domains of interest to your users.

The InsideRIA piece is cast as an introduction to YUI for those who have not explored the library, so check out the first few sections in particular if you’re looking for a compact YUI overview. If you’re an experienced YUI implementer interested in the the Instant Search functionality, skip to the “Building Your First Application” section about a third of the way in.

Find conversations: bloglines | technorati

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

Tags: yui, instant-search, autocomplete, yahoo+search, api