Fun with the javascript typesystem and silverlight

Javascript has a weird typesystem so far nothing was new for me. But today I discovered that it is really really weird. The following piece of code should generate an animation in silverlight that moves a canvas with content to a provided location:

function BuildMoveInAnimation(targetName,left,top) {
	var storyboard = '<Storyboard BeginTime="0" Name="' + targetName + 'MoveInAnimation">';
	storyboard = storyboard + '<DoubleAnimation Storyboard.TargetName="' + targetName + '" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:1" To="' + left + '"/>';
	storyboard = storyboard + '<DoubleAnimation Storyboard.TargetName="' + targetName + '" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:1" To="' + top + '"/>'
	storyboard = storyboard + '<DoubleAnimation Storyboard.TargetName="' + targetName + '" Storyboard.TargetProperty="Opacity" Duration="0:0:5" To="1.0"/>'
	storyboard = storyboard + '</Storyboard>';
        
	var storyboardElement = control.content.createFromXaml(storyboard);
        
	return storyboardElement;
}

However, this code doesn't work, silverlight won't move the object from its original location. This happens because the string I constructed isn't correctly parsed by the runtime and translated to the correct storyboard element.

After fiddeling around with the code trying various options I took out some hacks and converted the function into the following construction.

function BuildMoveInAnimation(targetName,left,top) {
    var x = 0;
    var y = 0;
    
    x = parseInt(left);
    y = parseInt(top);
    
    var builder = new Sys.StringBuilder();
    
    builder.append('<Storyboard Name="' + targetName + 'MoveInAnimation">');
    builder.append('<DoubleAnimation Storyboard.TargetName="');
    builder.append(targetName);
    builder.append('" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:1" To="');
    builder.append(x);
    builder.append('"/>');
    builder.append('<DoubleAnimation Storyboard.TargetName="');
    builder.append(targetName);
    builder.append('" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:1" To="');
    builder.append(y);
    builder.append('"/>');
    builder.append('<DoubleAnimation Storyboard.TargetName="');
    builder.append(targetName);
    builder.append('" Storyboard.TargetProperty="Opacity" Duration="0:0:1" To="1.0"/>');
    builder.append('</Storyboard>');
          
    var text = builder.toString();
    var storyboardElement = control.content.createFromXaml(text);
    
    return storyboardElement;
}

Somehow this code fixes my problem and the animation plays correctly. The typesystem is really freaking out on my code for some reason.Using parseInt and a StringBuilder (Which is in fact nothing more then an array that gets joined once I call toString on the builder) helps straighten out the typesystem so that the storyboard string gets parsed correctly.

I always thought that javascript was easy to understand, but this changed it radically ;P

Share this