Email	Print Reprint
	add to:
	Del.icio.us Digg Google Furl	Slashdot Y! MyWeb Blink
	TABLE OF CONTENTS Introduction Windowless Interoperability Bringing the Canvas to Life

Bringing the Canvas to Life

With the HTML/ASPX and XAML now all complete, the JavaScript is the only remaining piece. If you refer back to Example 2 you'll notice that a Storyboard was added, which until now has not been hooked up. Activating the Storyboard is done through JavaScript by attaching to the mouseEnter event. This is done by using the addEventListener JavaScript function. You can get a reference to the Storyboard by using the findName function as in Example 4. Once you have a reference to the Storyboard, starting the animation is done by calling the begin method. The JavaScript file is loaded by the Silverlight Host automatically as long as you add the script reference to the Scripts collection of the Xaml control (Example 3). To attach the client-side representation of your object defined in the script file, the ClientType property on the Xaml control must be set to the type specified in the registerClass call of your JavaScript file as shown in the last line of Example 4.

Type.registerNamespace("Wrappers");

Wrappers.TextBox = function(element) {
    Wrappers.TextBox.initializeBase(this, [element]);
}

Wrappers.TextBox.prototype = {
    _events: null,
    xamlInitialize : function() {
        Wrappers.TextBox.callBaseMethod(this, 'xamlInitialize');
        
        // Hookup mouseEnter and mouseLeftButtonUp events
        var func = Function.createDelegate(this, this._animate);        
        var rectangle=this.get_element().content.findName("rectangle");
        // Use mouseEnter to begin our Storyboard animation
this.addEventListener(rectangle,"mouseEnter", func);
        
        // Use mouseLeftButtonUp to transfer focus to our TextBox
func=Function.createDelegate(this,this._transferFocus);
        this.addEventListener(rectangle,"mouseLeftButtonUp",func);
    },
    _animate : function(sender, e) {
        sender.findName("animation").begin();
    },
    _transferFocus : function(sender, e){
        $get("TextBox1").focus();
    }
}
Wrappers.TextBox.registerClass('Wrappers.TextBox', Sys.Preview.UI.Xaml.Control);

After the JavaScript file is put in place and the animation is hooked up, there's still one piece of housekeeping to do. Because the canvas is layered over top of the TextBox, clicking on the TextBox does not transfer focus. You need to manually pass this on by adding a mouseLeftButtonUp event handler to the rectangle, and passing focus to the textbox when the click occurs. This is demonstrated in the _transferFocus function in Example 4.

AJAX and Silverlight

The idea that User Experience is a key aspect of an application is a concept that has quickly gained acceptance lately. AJAX was an enabler, and helped to break down the barriers of both performance and usability in Web applications. However, we're still limited to using the core elements of a browser, along with CSS and JavaScript to provide styling and overall visual appeal. JavaScript animations are very limited, and as they become more complex they tend to get choppy, and in many cases are so processor intensive that they make the client browser unresponsive. An unresponsive browser is an immediate User Experience killer. Breaking through the visual appeal barrier requires a technology like Silverlight. While it's possible to create a project entirely out of Silverlight, there are many cases where this is either not necessary, or even feasible. Instead, by strategically layering Silverlight canvases over areas of your existing application, you can raise the User Experience to the next level without losing valuable time and money associated with a rewrite.

Previous Page | 1 Introduction | 2 Windowless Interoperability | 3 Bringing the Canvas to Life

RELATED ARTICLES Logging In C++ : Part 2 OutSystems Updates Agile Platform SDK, .NET Controls Released for Communications Enabling Web Pages Welcome To the World of Cryptographic Voting recls 100% .NET		TOP 5 ARTICLES No Top Articles.