Javascript Event Handler for Silverlight
So, a couple of us at work have been forging ahead with Silverlight and created a nice way to handle mouse click events. It's an idea borrowed from one of the tutorials/quick-starts that you can find on Microsoft's Silverlight site.
Here's the code to set-up an EventHandler javascript class:
// Javascript class that handles mouse events
if (!window.EventHandler)
window.EventHandler = {};
EventHandler = function()
{
}
//Properties
EventHandler.prototype.target = this.target;
EventHandler.prototype.clickHandler = this.clickHandler;
EventHandler.prototype.mouseEnterAnim = this.mouseEnterAnim;
EventHandler.prototype.mouseLeaveAnim = this.mouseLeaveAnim;
EventHandler.prototype.mouseDownAnim = this.mouseDownAnim;
EventHandler.prototype.mouseUpAnim = this.mouseUpAnim;
EventHandler.prototype =
{
//Property Setters
setTarget: function(theTarget)
{
this.target = theTarget;
},
setClickHandler: function(ClickHandler)
{
this.clickHandler = ClickHandler;
},
setMouseEnterAnim: function(MouseEnterAnim)
{
this.mouseEnterAnim = MouseEnterAnim;
},
setMouseLeaveAnim: function(MouseLeaveAnim)
{
this.mouseLeaveAnim = MouseLeaveAnim;
},
setMouseDownAnim: function(MouseDownAnim)
{
this.mouseDownAnim = MouseDownAnim;
},
setMouseUpAnim: function(MouseUpAnim)
{
this.mouseUpAnim = MouseUpAnim;
},
handleLoad: function()
{
// Register event handlers
this.target.addEventListener("mouseEnter",
Silverlight.createDelegate(this, this.handleMouseEnter));
this.target.addEventListener("mouseLeave",
Silverlight.createDelegate(this, this.handleMouseLeave));
this.target.addEventListener("mouseLeftButtonUp",
Silverlight.createDelegate(this, this.handleMouseUp));
this.target.addEventListener("mouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
},
handleMouseEnter: function(sender, eventArgs) {
sender.findName(this.mouseEnterAnim).begin();
},
handleMouseLeave: function(sender, eventArgs) {
sender.findName(this.mouseLeaveAnim).begin();
},
handleMouseUp: function(sender, eventArgs) {
sender.findName(this.mouseUpAnim).begin();
if (this.clickHandler) {
this.clickHandler(sender, eventArgs);
}
},
handleMouseDown: function(sender, eventArgs) {
sender.findName(this.mouseDownAnim).begin();
}
}
I just put all of this code into it's own .js file, such as, "EventHandler.js." Then, you can make calls to this mouse event handling code like this:
// Bind XAML buttons to javascript code
var GreenCircle = rootElement.findName("CnvGreenCircle");
var gcEventHandler = new EventHandler();
gcEventHandler.setTarget(GreenCircle);
gcEventHandler.setClickHandler(Silverlight.createDelegate(this,
this.onCnvGreenCircleClicked));
gcEventHandler.setMouseEnterAnim("SbGreenCircle_MouseEnter");
gcEventHandler.setMouseLeaveAnim("SbGreenCircle_MouseLeave");
// gcEventHandler.setMouseDownAnim("SbGreenCircle_MouseDown");
// gcEventHandler.setMouseUpAnim("SbGreenCircle_MouseUp");
var handleLoader = gcEventHandler.handleLoad();
this.createDelegate( gcEventHandler, handleLoader);
A few things to note about this code sample (which, for us, sets up the mouse event handlers from within the onLoad function of our main page/screen Javascript):
- I don't have to pass in all 4 mouse events. Check out the lines that are commented out.
- The Event Handler class is set-up to have animations (storyboards) passed in for each mouse event. Each of those "Sb..." parameters are names of storyboards in our XAML, for instance.
- Notice the "setClickHandler." You can pass in additional click handling support. This is totally borrowed from the quickstart/sample that I got from the Microsoft documentation. But, basically, I have a function in my main page/screen handling code that tells the application what to do when the object (i.e. canvas) is clicked. For instance, on the click event you could have a media element start or stop.
