The MossyBlog Times Archives 2007 - 2009 : JavaScript

How To: Using AjaxControlToolkit to animate Silverlight.

scbarnes — Wed, 03 Oct 2007 10:47:50 GMT

In my Silverlight travels, I was thinking on how one is able to animate a "PullDown" menu, in that it comes down and then goes back up upon triggered events.

Approach A.

I decided to approach this using simplistic rules, where I'd create two animations inside Expression Blend using the KeyFrame Recorder. I'd simply move the "Canvas" in question to where I want it to rest, and then within a 1 second interval, animate it upwards. I'd call this "PLMoveUp". I'd then take the exact concept and reverse it through a separate KeyFrame Resource (KeyFrame Resources are basically XAML code that await you to trigger their animation sequence via play/stop methods) called "PLMoveDown".

This works, don't get me wrong, but sadly this approach is flawed. As how do you know where the current phase in the Storyboard is at? there aren't any "onStoryBoardStep" style events to subscribe to, resulting in "assuming" the animations end naturally. This means that if a user were to click on a button repeatedly you'd kind of get this flicker look (bad experience).

Approach B.

Instead of having two Canvas.Resource Storyboards, you consolidate into one. Then using the Silverlight API, you would utilse the power of Storyboard.AutoReverse and Storyboard.Seek(amt).

This works, but again, you've got to do a lot of work to poll where the animation is at, and that requires an outside "timer". In that in order to poll the current point in time of an animation, you'd create a "timer" that would constantly ping/pong the Storyboard for an update. Yet you'd need to further assign an x:Name attribute to one of the SplineDoubleKeyFrames for this as well, as you'll want to extract the KeyTime.Seconds amount in order to determine what the latest value is currently sitting at.

Overall, bad.

Approach C.

Using the ASP.NET AjaxControlToolkit, I was able to leverage the existing animation libraries to do my bidding for me.

First I created a project using the ASP.NET AJAX Futures Web application (.NET Framework 3.5) template.

I then added a Project to this Solution, using the JavaScript Silverlight Project (I'm not going to use the managed code (C#) approach to Silverlight, instead I'm choosing to use JavaScript + Silverlight).

I setup my GUI assets, using Microsoft Expression Blend. Positioned them to where I want them, and began then saved the project.

Then inside Visual Studio 2008, I added a "Add Silverlight Link.." via the Solution Explorer. Connected the two together.

Now, I must confess it's at this point where I had to figure out how to bring in the AjaxControlToolkit. As I've never really had a need to use it up until today. I downloaded the 3.5 Framework version of it and installed it (Basically follow the Install Videos to the letter and you should be fine).

Now comes the code.

 1:  <!-- -----------------------------------------------------------------------------------

 2:  SILVERLIGHT CONTROL

 3:  ----------------------------------------------------------------------------------- -->

 4:  <div class="SilverlightHost">

 5:  <asp:Xaml XamlUrl="~/Page.xaml" runat="server" ID="SilverlightControl" Windowless="true"

 6:  Width="1000" Height="750" />

 7:  </div>

Using the Xaml tag, i created a pointer to my Page.xaml file (which has my assets housed within). Note the name "SilverlightControl" (important).

In my UI I have a PullDownMenu, which I want to now animate up and down.

Now comes the code:

 1:  <script type="text/javascript">

 2:  Sys.Application.add_init(appInitHandler);

 3:  function appInitHandler() {

 4:  }

5:

 6:  // Silverlight is Ready, now proceed...

 7:  function appOnLoad() {

 8:  //$create(Demo.Person,null,null,null,null);

 9:  var animator = new AjaxControlToolkit.Animation.FadeAnimation($get("Overlay"), 0.5, 20, "FadeOut");

 10:  var customanim = new AjaxControlToolkit.Animation.ScriptAction("overlay", 0.5, 40, null);

 11:  animator.play();

 12:  customanim.onStep = onCustomStep;

 13:  customanim.play();

 14:  }

15:

 16:  // Custom Animation Sequence

 17:  function onCustomStep(percentage) {

 18:  var o = $get("SilverlightControl").content.FindName("pulldown");

 19:  var amt = Math.round(456*percentage/100);

 20:  o.SetValue("Canvas.Top", amt + -456);

 21:  }

 22:  </script>

It's that Simple! I also had a <DIV> tag called "overlay" which represents a screenout overaly.

I need my hosting provider on http://www.beyondTheBrowser.NET to move me over to the .NET 3.5 hosting plan in order to show you, but essentially using the AjaxControlToolkit.Animation.ScriptAction library, I'm able to empower it to control the Silverlight Animation sequence.

If you're confused? don't worry, I'll be videocasting this later this month.

JavaScript brings balance back to the force.

scbarnes — Sat, 01 Sep 2007 06:31:24 GMT

It's funny how you sometimes take something so simple for granted until you one day suddenly realise the answer has been staring you in the face all along.

JavaScript is that answer,it's now become this language widely used, mostly understood and pushed to the point where i doubt there is anything left undiscovered about it. It's now become the bridge between disparate technologies from most of the major software giants (Microsoft, Google, Adobe etc). It's being used in a number of creative ways and it doesn't appear to be stopping either.

You could use JavaScript to write a Windows Vista SideBar Gadget, Yahoo! Widget and whatever the next piece of technology of this kind can be inserted here.

You could use JavaScript to bridge the gap between Adobe AIR and Adobe Acrobat, to empower electronic forms to carryout out tasks dictated by Adobe AIR (via FLEX / AJAX).

You could use JavaScript to control and manipulate Microsoft Silverlight XAML, shape and bend it to suite your will, using it to hold the fort while we build and produce the application framework that's yet to come.

You could use JavaScript to write data to your hard-drive through the use of Google Gears.

You could use JavaScript to hijack other peoples HTML code and make it do some interesting things, much like how I don't have FTP access to this blogs code, but I can bring-in JavaScript to manipulate the DOM should I wish.

You could use JavaScript to fuse two competing technologies (Flash, Silverlight etc) together, and force them to bow to you, the developers will should you so desire.

There is much you can do with JavaScript that typically it was never imagined when it was first produced. It's quite a unique language to admire and utilize, as it's got one thing going for it that we all are somewhat envious about.

Everyone simply knows it. It's been around for far to long, hasn't had any changes really to it and combined with HTML + Browser Agents it can be quite a powerful ally to have.

I have new found respect for JavaScript the more I see it being used in variety of ways. It just keeps getting stronger and stronger, yet no actual changes are made to it?

JavaScript is what keeps the RIA dream alive today, so we can build better tomorrow!

Performing a hitTest with Silverlight

scbarnes — Sat, 16 Jun 2007 05:55:56 GMT

In my Silverlight coding travels, I've found the urgent need to carry out a hitTest to determine where my end-users mouse is currently located but also what elements are underneath it within Silverlight.

So what's a hitTest you ask? well essentially it's when you ask "Is this object colliding or in contact with that object?". It's used majority of the time in Flash world to determine where a relationship stops and starts with a MovieClip and Mouse (X/Y) coordinates. It can also be commonly used for collision detection with other MovieClips when you make a point and click "fire" game (ie shoot bullets via your mouse at other objects on screen).

Silverlight at present doesn't have a hitTest method, well it does but it's only found within Inking.

Well before one and all start to curse Silverlight for limited functionality compared to Flash (heh), it's not all doom and gloom. Thanks to the hierarchy index within Silverlight, one is able to ask objects individually where the mouse currently resides, but also where it currently is within the elements themselves.

Now for some code..

An example, say you had a Rectangle1 within Canvas1, and you want to find out where the mouse currently is, but also where that mouse is within the actual Rectangle1 that's relative to the Rectangle1 itself (ie if the Mouse x is 30px in from the Rectangle1's edge?).

To do this you would do the following (this is JScript Code btw):

    	// Commit Default Properties.
    	private_commitProperties : function() {
	      var local_owner = this;
		var cnvs = $get("slControl").Content.FindName("Canvas1");
		// EVENT: onMouseMove
        	var local_onMouseMove = function(sender, eventArgs) {
            	local_owner.MouseObj = eventArgs;
            	local_owner.private_updateDisplayList();
        	}
		
        	// Create Events
       	cnvs.addEventListener("MouseMove",  local_onMouseMove);
    	},	

    	// Update the DisplayList.    
    	private_updateDisplayList : function() {
		var cnvs = $get("slControl").Content.FindName("Canvas1");	
		var rect = cnvs.FindName("Rectangle1");

		// Determine where the X/Y Mouse Co-ordinates are 
		// within Silverlight itself.
		var currentX = this.MouseObj.GetPosition(null).x;
		var currentY = this.MouseObj.GetPosition(null).y;
		
		// Determine where the X/Y Mouse is within the Canvas
		var cnvsX = this.MouseObj.GetPosition( cnvs ).x;
		var cnvsY = this.MouseObj.GetPosition( cnvs ).y;

		// Determine where the X/Y Mouse is within the Rectangle
		var rectX = this.MouseObj.GetPosition( rect ).x;
		var rectY = this.MouseObj.GetPosition( rect ).y;


		// IsMouseInsideRect ?
		var isMouseInsideRect = false;
		if( rectX >=0 && rectX <= rect.GetValue("Width")) {
			isMouseInsideRect  = true;
		} 

		// IsMouseInsideCanvas ?
		var IsMouseInsideCanvas = false;
		if( cnvsX >=0 && cnvsX <= cnvs.GetValue("Width")) {
			IsMouseInsideCanvas = true;
		} 
		
		if( IsMouseInsideCanvas  & IsMouseInsideCanvas ) {
			window.status = "Mouse is Inside Rectangle";
		} else {
			window.status = "Mouse is Outside Rectangle";
		}
    },

So what's happening here? Firstly I'm using ASP.NET AJAX ToolKit so the $get() is found within this framework. I'm also wiring up a local object to react to the MouseMove event, which in turn invokes private_updateDisplayList() method.

I then inside JavaScript create two variables (cnvs & rect) as pointers to XAML elements within Silverlight.

MouseObj you'll note was declared inside the local_onMouseMove method, which essentially translates to Silverlights MouseEventArgs and inside this object, you have a method GetPosition() which returns a Pointer (x/y).

Using this, I'm able to then determine in the first round (currentX/currentY) where the Cursor inside Silverlight currently is (why, not important in the above example but thought it's worth noting you can achieve this simply by providing null as your reference object).

The second round, I then determine where the Cursor is currently at in relation to the Canvas1 (cnvsX/cnvsY), which should return the same results as currentX (seen as though Canvas1 is the root element).

I then determine where the Cursor is located within the Rectangle1 element itself. Now, what will happen here is if the Rectanle1.x is located on 100 pixels from the left, and the Cursor is located 150 pixels from the left, the rectX will return "50" as its result.

Ahhh so now you see, that the GetPosition() method returns the appropriate x/y coordinates relative to the reference object in question and local x/y as the result. Important to know this one!

Lastly, I then determine if the Cursor is within the Rectangle1 boundaries, and to do this it's a simple case of asking "Does the rectX sit between 0 and the width of Rectangle1?, if so then it's within"

Note: If Rectangle1 has a width of 200px and the Cursor is located at 400px from the edge of Rectangle1, rectX will still return a positive integer which is essentially cursor's actual position (Math.round(currentX-rectX)) relative to the Rectangle1 (Summary: rectX will always return positive integer never a negative one).

Where to from here?

Don't be afraid, Silverlight 1.1 is basically alpha and all this shows is that with enough brain power a CursorManager Class could be put together quite easily and managed code approach to using hitTest logic could apply here. The overall walk-away point for all is that, Silverlight has a lot of powerful primitives in place, enough for anyone to build upwards from and create their own approach to Silverlight. Combining this effort with AJAX and one could get some interesting HTML/Silverlight offerings on the table.

Some minor Silverlight assumptions/queries.

scbarnes — Fri, 08 Jun 2007 14:17:31 GMT

It's been an interesting couple of days for me, as I've meet some developers in both business meeting setting and via social setting (aka WebJam).

In my chats with these developers, they all seem very keen to learn more about Silverlight but have hesitations on it that range from "Isn't it bleeding edge?" to "It looks good but I'm not a .NET developer".

I'm not a .NET developer, so I guess Silverlight isn't for me.
Wrong, it can be, you can use Silverlight with HTML as if you would with Flash and HTML. Having zero .NET experience won't hamper you in anyway from building applications in future with Silverlight. You can do a lot with Silverlight today + HTML + AJAX. Microsoft wasn't kidding around with it being a natural progression from AJAX To the next step. You can control the entire Silverlight SDK from JavaScript (no .NET assembly required). So "Silverlight bots, transform and roll out!"
What does Silverlight do differently to Flash
Lots, none and some. Wrong question, what does Silverlight do for you going forward and if you are a .NET developer it compliments your skill set (removing the need to learn new tooling & languages together. Expression Studio isn't that bad of an effort to be honest, as it took me 2 days of playing and I got it).

If you are a budding Flash Developer and are looking for a reason to take it on as an extra piece to your portfolio, do so with that in mind. It's another hammer for your tool kit, another piece of clay to sculpt with and so on. It approaches things differently to Adobe Flash, but that is because the roadmap beyond its release has different visions of where RIA is likely to go thus Microsoft's approach. Rich Web, Rich Client & Rich Device is your mantra.
How do I combine ASP.NET AJAX with Silverlight then?
That's easy, you create a Project Solution in Visual Studio Orcas, you nominate ASP.NET Futures (with AJAX Toolkit installed) as your chosen template. You then create a Silverlight Project within the same solution.

Now comes the really hard part.

You then right click on the ASP.NET AJAX Futures project and hit the "Add Silverlight Link" to this project.

Congratulations you've just linked the two projects together and every time you make changes to your Silverlight project, it will reflect into your ASP.NET AJAX Futures project. "Look mah, no hands".
What would you tell me that's cool about Silverlight?
Honestly, so far I've found (even after today) the Brush Fills to be the sexiest thing in this round of releases. I like it for it's simplicity and allow me to demonstrate

<Rectangle>
	<Rectangle.Fill>
		<Image Source="myimage.jpg"/>
	</Rectangle.Fill>
</Rectangle>

I'll post more of these leading up to ReMIX as it amazes me some of the questions being asked (hey you don't know what you don't know, no harm, no foul) and if these are all that are stopping folks from having a go, then consider it greenlight time hehe.

Going Flex to Silverlight: Understanding our DisplayList API.

scbarnes — Sun, 27 May 2007 12:49:39 GMT

Disclaimer: This is part two of my Going Flex to Silverlight series, where I'll be talking about how one is able to transfer concepts they have learnt in Flex world but are looking to explore what Silverlight also has to offer. Whatever reason they have chosen, is entirely up to them and this isn't to be taken as a feature for feature comparison.

In the Adobe Flex (ActionScript) to create a child element/object within the code base, you would punch out something like this:

	var txt:TextField = new TextField();
	txt.x = 100;
	txt.y = 0;
	txt.text = "Click for more info...";
	addChild(txt)

Which would then render MyButton onto the DisplayObjectContainer in question (provided it derives from a DisplayObject).

Inside Silverlight, there is a similar approach but instead of just limiting to syntax code, one is able to piece together elements within elements through loading XAML at runtime. In that, you can access XAML pieces parked on your host, bring them in at runtime and instantiate them (children and all) through the CreateFromXAML. example:

    // Retrieve a reference to the control.
    var control = sender.getHost();
    
    // Define a XAML fragment and create it.
    var xamlFragment = '<TextBlock Canvas.Top="200" Text="Click for more info..." />';
    textBlock = control.content.createFromXaml(xamlFragment);

    // Add the XAML fragment as a child of the root Canvas object.
    sender.children.add(textBlock);

As you can see, there are some similarities in approach, suffice to say that one is mode of approach. It's also important to note that you are also able to create child elements through managed code such as C# using Flex style syntax - which - can be found in both WPF and Silverlight. Yet, if you prefer JavaScript you can use the CreateObject(type) approach, which is similar I guess to the Coldfusion approach to life as well (CreateObject is used to instantiate Coldfusion Classes inside managed code).

Another cool feature within the CreateFromXAML bag of tricks, is that you can also create XAML pieces loaded in via .ZIP files themselves similar to I guess Flex Modules API. This is done via CreateFromXamlDownloader Method.

function onDownloadCompleted(sender, eventArgs)
{
    // Determine whether the download was successful.
    if (currentDownloadProgress != 1)
    {
    	alert("Failed to succesfully download zip file");
        return;
    }

    // Retrieve the XAML content from the downloaded package file.
    var jacketBrowserXaml = sender.getResponseText("jacketBrowser.xaml");

    // Create the objects from the XAML content.
    var jacketBrowser = control.content.createFromXaml(jacketBrowserXaml);

    // Add downloaded XAML content to the control.
    sender.findName("root").children.insert(0, jacketBrowser);

    // Retrieve a reference to the Image object representing the jacket.
    var jacketImageSlice = sender.findName("jacketSlice");

    // Set the Source property of the Image object to the specific jacket image
    // within the downloaded Zip package file.
    jacketImageSlice.setSource(sender, "rotation01_green.png");
}

The children collection there after has also all the typically Method calls made available for you then to find different elements by various means. Yet, if you are unsure of where an element exists within the XAML DOM itself but do remember it's name, one is able to then use the FindName Method

function onLoaded(sender, eventArgs)
{
    // Retrieve a reference to the control.
    var control = sender.getHost();

    // Retrieve a reference to the specified object.
    var object = control.content.findName("myTextBlock");

    // If a valid object reference, display an alert dialog box.
    if (object != null)
    {
        alert(object.toString() + " found");
    }
}

This is also the very similar to the way Flex does it inside Flash.display.DisplayObjectContainer's in that it would allow something along the lines of:

	var target:DisplayObject = container.getChildByName("myTextBlock"); 
	trace(container.getChildIndex(target)); // 0

This however would be done on the same node level as the actual Parent of the child. The FindName method however searches the entire Silverlight hierarchy for the element that have the name you provided.

Summary
There is a lot that Silverlight has on offer and when you dig deeper into what it has today, even in it's alpha state, there is a lot of goodness to be found. I'll continue to expose some of these gems going forward, and if you want me to discuss a topic of some kind, drop me an email on it. That being said, one thing I'd like you all to take away from this post is that the CreateXAMLFromDownloader is a massive step forward if you ask me in terms of performance / architecture design & development for applications should they enter the Silverlight path post its release.

More Info: http://msdn2.microsoft.com/en-us/library/bb412361.aspx

Silverlight + AJAX eh?

scbarnes — Wed, 25 Apr 2007 17:51:34 GMT

John Udell has posted a few things around Silverlight, specifically the standout is around how you can use the XAML DOM within JavaScript much like you would with the HTML version. That's an excited thing to celebrate to those of you out there that are happy to play in the AJAX space (which seems to be a large portion). This now empowers you initially to combine your existing AJAX applications and Video in the one space using JavaScript.

This is pretty damn cool, as you're using your existing skill set in AJAX development, but having access to Silverlight's features with minimal effort, as most generally in this space have a pretty average (minimum) understanding of how to use things like "getElementById()" to traverse the DOM. Silverlight in this scenario, is about extending AJAX experience using Video, that's pretty cool right?

Wonder what else we could do in this space? ;)