CBE Slide Event Demo

CBE objects support three slide events: slideStart, slide, and slideEnd.

The slide Event

The slide event occurs before each move, during a slide. The event listener will receive four arguments:

  • cbe: a reference to the CBE object about to move,
  • newX: the x coordinate to which the object is about to move,
  • newY: the y coordinate to which the object is about to move,
  • time: the elapsed time of the slide, in milliseconds.

Demo 1

Demo 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);
  }

Top

The slideStart Event

The slideStart event occurs before the first move of the slide. The event listener will receive one argument:

  • cbe: a reference to the CBE object about to slide.

This event is not used in these demos

The slideEnd Event

The slideEnd event occurs after the last move which completes the slide. The event listener will receive one argument:

  • cbe: a reference to the CBE object which just completed a slide.

Demo 2

Demo 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;
  }

Top

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 :)

E1
Demo 1
Demo 2
Park
E2
Demo 1
Demo 2
Park
Menu
Stop
Park
Top
Home