CBE Slide Event DemoCBE objects support three slide events: slideStart, slide, and slideEnd. The slide EventThe slide event occurs before each move, during a slide. The event listener will receive four arguments:
Demo 1Demo 1 first stops any other demos that might be running, adds a slide event listener to the object, then calls randomSlide(), which slides the object to a random position, within a random time. Before each move of the slide, slideListener() is called, and the object's id, x, and y positions, and elapsed time are displayed on the status bar. function demo1(cbe) { stop(cbe); cbe.addEventListener('slide', slideListener); randomSlide(cbe); } function slideListener(cbe, x, y, t) { var s=" "; x = cbePad(x.toString(),4,'0',1); y = cbePad(y.toString(),4,'0',1); t = cbePad(t.toString(),5,'0',1); cbe.status = cbe.id + " x: " + x + " y: " + y + " time: " + t; window.status = e1.status + s + e2.status; } function randomSlide(cbe) { var x = Math.random() * (document.cbe.width() - cbe.width()) + document.cbe.scrollLeft(); var y = Math.random() * (document.cbe.height() - cbe.height()) + document.cbe.scrollTop(); var t = Math.random() * 2000; cbe.slideTo(x, y, t); } The slideStart EventThe slideStart event occurs before the first move of the slide. The event listener will receive one argument:
This event is not used in these demos The slideEnd EventThe slideEnd event occurs after the last move which completes the slide. The event listener will receive one argument:
Demo 2Demo 2 uses the same slideListener() and randomSlide() functions used by Demo 1. There's only one thing different about this demo - a slideEnd listener is added to the object. The listener is randomSlide()! This means that when the first randomSlide() ends, another one will start. And this will continue until you call the object's stopSlide() method. function demo2(cbe) { stop(cbe); cbe.addEventListener('slide', slideListener); cbe.addEventListener('slideEnd', randomSlide); randomSlide(cbe); cbe.demoRunning = true; } function stop(cbe) { cbe.stopSlide(); cbe.removeEventListener('slide'); cbe.removeEventListener('slideEnd'); cbe.demoRunning = false; } If it looks and smells like a behavior...Notice the way I've written these demo functions to take an object argument instead of using a hard-coded reference in the function. This technique takes advantage of the fact that the event listener's first argument is a reference to the object. The demo1() and demo2() functions become like generic behaviors. Once you design a function this way, any CBE object can take on those behaviors. I know this is not exactly the same as what Microsoft calls a behavior... but that word sure seems appropriate here :) |