Close
Loading, please wait...
This announcement will hide in 60 seconds

Behaviors to Extend the YUI's Widgets and Controls

2007-11-25
RSS Channel bookmark this link
Behaviors

The most common technique to apply an action to a large number of links, buttons or images, is the use of "getElementByTagName", processing each tag and creating an instance of the desired component (context menu, snapshot, thumbnail, etc), and attach the corresponding object to each tag. This pre-processing can freeze your browser, and usually create memory leaks when you are using dynamic areas. With the bubbling technique we can guarantee the success without worry about dynamic areas. You will have the advantage of the possibility to catch the mouse event before any other element in the page, and determine the target of the event, analyze it, and then apply the certain behavior to this class of target.

Actually there is three components in the bubbling library that use this technique to create different behaviors:

  • Bookmark Links
    With this component you have the possibility to catch the mouse event, and determine if the target is a Bookmark link or a Feed RSS link, and then drive the event to show a context menu with a certain list of links. Besides, this implementation using the bubbles "Navigate" and "Properties" only has an instance of the context menu's object, decreasing the memory use and compiling the context menu on the fly in real time when is needed.
  • Feed Links
    As the bookmark links behavior, this implementation uses the same technique, and allow to create a context menu for RSS Channel's links, and offering to clients the opportunity to decide what to do with the RSS links.

No Comment yet

Latest Releases

Accordion Manager
This YUI Widget will allow you to create expandable and collapsible areas using the correct HTML and CSS, but without writing a single line of javascript code. (new)

Sound Manager
This plugin will allow you to play sounds (mp3, wav) in your pages based on the classname of the elements, also it can can be integrated with any YUI and YUI-CMS components.(new)

Loading Mask
The Loading Mask widget will hide all the page's content until the onLoad's event, which mean that the website will not be displayed until the current page be fully loaded. Also this widget can be used in conjunction with the YUI Connection Manager to block the actions over the page until the AJAX's request finish. (new)

 
Hot Components

Accordion Manager
Create expandable and collapsible areas using the correct HTML and CSS, but without writing a single line of javascript code. (released)

Bubbling Core
The bubbling core now include a generic communication mechanism for widget2widget, widget2browser and widget2server messages. (updated lately)

Tooltip Manager
Improved, now using the YUI Overlay instead YUI Tooltips, also introduce a new feature, "content onDemand" using the YUI connection manager. (updated lately)

 
Coming Soon

Dynamic Layouts
A customizable interface to create a dynamic application (a single page without scrolls) with collapsible panels and multiple areas. (comming soon)

Plug and Play Widgets and Mashups
The dispatcher now support all the necessary features to create plug and play widgets, then I decide to produce some examples and some widgets to boost this features. (comming soon)

 
Bubbling's Radar

Photography by Mateu
"Photography by Mateu" uses the YUI Wizard Manager and the Bubbling Core to control the navigation in a single page website, and loading the content on demand. (Well done guys)

 
Related Links

Yahoo! UI Library (YUI)
YUI Official Website at the Yahoo! Developer Network.

YUI Official Forum
Get help and share your knowledges thru the frenetic javascript mailing list at Yahoo! Developer Network...

Motionbox EventHandler
For those who use propotype instead YUI, here is an implementation of the bubbling core routine for Propotype, I never tested it, but it's seen like a good implementation.

 
Recommended Reading

The Bubbling Technique & Custom Event, YUI’s Secret Weapon
In this article I’ll share my experiences in the event-driven programming within the web browser and show how the Bubbling Library, combined with YUI’s Custom Event capabilities, can create an unobtrusive behavioral layer suitable for powerful web applications.

Event-Driven Web Application Design
I recommend you to read carefully the Christian Heilmann's paper, where he wrote about how to plan an Event-Driven application, and how this technique will become the future of the web application as a result of an evolutive process.

A JavaScript Module Pattern
Eric Miraglia's detailed explanation of how to use the closures and specifically the module pattern (singlenton) as a flexible and multi-funcional structure...

 
 
Linux MySql Server PHP Mozilla FireFox FireBug YAHOO! Bubbling Library
This website is XHTML 1.0 valid! This website can be browsing with all browsers! This website is valid for Level A of Web Accessibility!