Jul 27

YUI 3.2.0 preview release 1 – touch events support, transitions and browser-specific loading

Ajax No Comments »

Over at the the YUI blog the team just announced the preview release of YUI 3.2.0. YUI3 now has some interesting new features that the team wants you to try and tell them if they work out for you. The changes to the already very powerful library are quite ambitious:

  • Touch event support for mobile interfaces including flick and move gestures
  • Browser capability loading – which means that every browser gets the least amount of code necessary to make it work
  • Transition support for the animation module – meaning only browsers that don’t support CSS3 transitions get the JavaScript animation fallback
  • An update to the CSS grids to allow for more flexible layouts
  • A ScrollView widget similar to the one in Apple iOS
  • The uploader has been transitioned over from YUI2 to YUI3

So check out what is on offer and give the YUI team feedback on what would be nice to have and what is broken. In their own words:

The goal of a preview release is to make it as easy as possible for all of us in the community to evaluate progress of the upcoming release and provide feedback. Please take some time to test 3.2.0pr1 and let us know what you find by filing tickets in the YUI 3 bug database marked as “Observed in version” 3.2.0pr1. We’ll do our best to address preview-release questions on the YUI 3 Forums, too.

There are three ways to get started with the preview release: YUI 3.2.0pr1 is available on the CDN via the 3.2.0pr1 version tag — so you can reference preview-release files like http://yui.yahooapis.com/combo?3.2.0pr1/build/yui/yui-min.js. If you switch to this seed file for the preview release, all subsequent use() statements will continue to load YUI 3.2.0pr1. Or You can download the full YUI 3.2.0pr1 from YUILibrary.com, including source code and examples for all components. Or you can simply explore the functioning examples roster.

Continue reading »

Tagged with: • • • • • • • •
Jun 25

How Custom Events Will Save Us All

Ajax No Comments »

I am a big fan of both Andrew Dupont, and custom events.

In his presentation he goes through some very nice use cases. Some are cross cutting (e.g. the fact that you can unit test, or debug, or … so much easier) and some are specific such as:

Scripty2 animation heartbeat

PLAIN TEXT
JAVASCRIPT:

// keep the heartbeat going
setTimeout(function() {
  document.fire(“effect:heartbeat”);
}, 0);

// listen in
document.observe(“effect:heartbeat”, advanceEffectByOneFrame);

// allows for nice debugging
document.observe(“keydown”, function(event) {
  if (event.keyCode === Event.KEY_RIGHT) {
    document.fire(“effect:heartbeat”);
  }
});
 

Another nice example is how you can start using the new and cool EventSource while retrofitting the functionality for browsers who don’t implement the new standard:

PLAIN TEXT
JAVASCRIPT:

// new browsers
var eventSource = $(‘event_source’);
eventSource.observe(‘server-sent-event-name’, function(event) {
  document.fire(‘data:received’, event.data);
});

// old browsers
new Ajax.Request(‘/legacy/polling’, {
  onComplete: function(request) {
    document.fire(‘data:received’, request.responseJSON);
  }
});

// observer works for both
$(document).observe(‘data:received’, function(event) {
  doStuff(event.memo);
});
 

And, there are many more great examples in the slides.

How have you been using custom events?

Continue reading »

Tagged with: • •
Mar 29

jQuery Special Events; Virtually… not in Real Life

Ajax No Comments »

Ben Alman has a mother of a post on his special events work for jQuery. I have a special penchant for custom events and the like, even though I have abused them just as I did in the old days of AOP! :)

What are special events?

The jQuery special events API is a fairly flexible system by which you can specify bind and unbind hooks as well as default actions for custom events. In using this API, you can create custom events that do more than just execute bound event handlers when triggered—these “special” events can modify the event object passed to event handlers, trigger other entirely different events, or execute complex setup and teardown code when event handlers are bound to or unbound from elements.

He does into intrigue detail on the API and gets to show you how to implement the hello world of custom events: tripleclick:

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. (function($){
  3.  
  4.   // A collection of elements to which the tripleclick event is bound.
  5.   var elems = $([]);
  6.  
  7.   // Click speed threshold, defaults to 500.
  8.   $.tripleclickThreshold = 500;
  9.  
  10.   // Special event definition.
  11.   $.event.special.tripleclick = {
  12.     setup: function(){
  13.       // Initialize the element plugin data, including clicks counter and
  14.       // last-clicked timestamp.
  15.       $(this).data( ‘tripleclick’, { clicks: 0, last: 0 } );
  16.  
  17.       // Add this element to the internal collection.
  18.       elems = elems.add( this );
  19.  
  20.       // If this is the first element to which the event has been bound,
  21.       // bind a handler to document to catch all ‘click’ events.
  22.       if ( elems.length === 1 ) {
  23.         $(document).bind( ‘click’, click_handler );
  24.       }
  25.     },
  26.     teardown: function(){
  27.       // Remove all element plugin data.
  28.       $(this).removeData( ‘tripleclick’ );
  29.  
  30.       // Remove this element from the internal collection.
  31.       elems = elems.not( this );
  32.  
  33.       // If this is the last element removed, remove the document ‘click’
  34.       // event handler that "powers" this special event.
  35.       if ( elems.length === 0 ) {
  36.         $(document).unbind( ‘click’, click_handler );
  37.       }
  38.     }
  39.   };
  40.  
  41.   // This function is executed every time an element is clicked.
  42.   function click_handler( event ) {
  43.     var elem = $(event.target),
  44.  
  45.       // Get plugin data stored on the element.
  46.       data = elem.data( ‘tripleclick’ );
  47.  
  48.     // If more than `threshold` time has passed since the last click, reset
  49.     // the clicks counter.
  50.     if ( event.timeStamp – data.last> $.tripleclickThreshold ) {
  51.       data.clicks = 0;
  52.     }
  53.  
  54.     // Update the element’s last-clicked timestamp.
  55.     data.last = event.timeStamp;
  56.  
  57.     // Increment the clicks counter. If the counter has reached 3, trigger
  58.     // the "tripleclick" event and reset the clicks counter to 0. Trigger
  59.     // bound handlers using triggerHandler so the event doesn’t propagate.
  60.     if ( ++data.clicks === 3 ) {
  61.       elem.trigger( ‘tripleclick’ );
  62.       data.clicks = 0;
  63.     }
  64.   };
  65.  
  66. })(jQuery);
  67.  

There is a lot in his article, so give it a once over.

Continue reading »

Tagged with: • • • • •
Feb 10

Working with events and reusing your own new widgets in xQuiD (Spanish version)

Ajax No Comments »


In this video tutorial we show you how to create a new form widget from other simple xquid components with xquid Eclipse Plug-in, and how to reuse it in any application publishing some private events and methods as part of its public interface. The result is a 100% reusable javascript component, rendered to HTML by xquid.

Tagged with: • • • • • •
preload preload preload