The MossyBlog Times Archives 2007 - 2009 : Going Flex to Silverlight

POC #1 - Project Harmony (pt1) (Silverlight & Flash)

scbarnes — Thu, 15 Nov 2007 11:18:00 GMT

I've been enjoying the overall experience of what Silverlight has to offer since I started with Microsoft back in January 07. That being said, I've often been an internal "goto" person at times for some Flash advice on behalf of Microsoft customers around the world.

In light of this, recently I also encountered a situation where a customer was looking to use both Silverlight and Flash together, something which I kind of gave a confused look at? (ie .. not because I wanted them to pick ours etc, but more to the point what was the root of the problem).

The problem was simply that they had deadline to meet, they wanted to retain the video in Windows Media format but were looking to use the GUI inside Flash as a base. Fair enough, this isn't a Zero Sum Game and we play well with others.

This isn't the first I've seen similar stories around this, but mostly its from Design shops around the world whom are keen to embrace Silverlight and Flash (fingers in both barrels) but are kind of skittish to start with (i.e. the assumption is really you have to pick a team, red vs blue).

Thus, I decided to put together this proof of concept, titled "Harmony". The project is quite extensive and I'll spend the next month dissecting it and talking about different cross-sections of how you as a designer & developer are able to produce compelling enriching experiences with Silverlight and that you can execute on your creative vision. The rest is simply semantics and bits/bolts.

In this first iteration of my Project "Harmony" I wanted to test to see how well the performance would be in the event one was to use 90% Silverlight and 10% flash. In that overlay Flash on top of Silverlight and see what happens.

The results speak for themselves, suffice to say that I really put in a lot of gratuitous animations in Silverlight to really try and break the performance overall.

You can view for yourself here:

http://www.demo.members.winisp.net/poc1/

(Note: Link Requires Silverlight 1.1 and Flash 9.x)

My Objectives for this first iteration was:

Objectives (v1.0)

Determine to see if Flash (Transparent windowless) degrades in performance in the event it sits on top of Silverlight.
Determine if PNG overlays impact the performance of the video whilst mixed with Flash.

Conclusion (v1.0)

I did see some performance degrading on both technologies, but that is mostly due to both making use of alpha transparency (I'm yet to meet a runtime of any brand that can withstand alpha transparency)
Working inside Flash & then crossing over to Visual Studio / Expression Blend is not for the feint hearted (I kept tripping up in C# vs AS3.0 scripting syntax hooks hehe - nothing against both technologies but its more of a mind map thing).

Highlights (v1.0)

Using PNG's a designer is capable of doing some interesting things to a graphical interface. In this case used a bullet that appears to not only be embedded into the TV Screen but also shatters it.

I also added the "bullets" in the top right corner as PNG overlay to also test how 2xOverlays inside the Video would perform.
Using Video Reflection within Silverlight, one is able to really bring home a gloss finish by giving it a "glass" effect (as we all know there isn't enough glass effects online
Using an infinite loop within Silverlight, I was able to create a "ambiance" feel to the UI by making two sets of images fade in/out underneath the Flash area and the Silverlight Video. This again, was to really see how the performance would go with a Silverlight animation underneath Flash.

Using Adobe Photoshop for the bitmap artwork, I stumbled upon a technique whereby if you take a photo, duplicate its layer and then apply "gussian blur" with 50% transparency it kind of gives this glow/ambiance effect commonly seen in most games today.

Silverlight (Video aside of course) handles its progressive loading of assets in a unique way, I'm yet to put my finger on it but I must look into this more as I expected the GUI to take much longer to load (as there aren't any preloaders in this design).
The Flash Slider (ie works like iTunes) was done reasonably quickly, and the code has already been ported to Silverlight suffice to say, it looks seamlessly integrated within the GUI and unless you don't have Silverlight or Flash installed, it would argueably be forgiven as being part of one technology not 2.

It's a small experiment at first, mainly to test the waters and see what holds together initially.

The walk away message here is simple, this isn't a Zero Sum Game firstly and I want to stress that the most. The other impact is that if you're keen to try Silverlight but aren't quite ready for that big leap, it's ok you can use both without penalties implied.

The last but most important of all, is prove your concepts initially. In that if you're looking to switch from using Flash (for whatever reason) and aren't bold enough to do the lock stock and barrel or aren't allowed to, that's ok. Establish some objectives initially, build a Proof of Concept (POC) and chip away at the idea, as you will no doubt learn both technologies limitations faster than any book can really teach you.

The secret of a truly successful RIA in my opinion is knowing the technologies limitations.

The next POC (pt2) I'll talk more about the JavaScript Bridge and how I was able to make the Thumbnail Slide load up the Video Playlist etc. I'm also putting together some Video Casts on not only how I made this but also will upload the code once I get it locked into Codeplex.com (open source). All code & design is hand-made by myself only.

(NOTE: This is a crude, raw POC and progress bars etc for both technologies aren't important for this initial purpose. They are coming, and I'll talk more about that later. Again, this is a POC so don't lock this down as some end to end final production grade solution).

(NOTE: I used Teamfortress 2 Artwork, because it's my favorite game at the moment, I have personal history with it and well, the Soldier video is by far the funniest game trailer I've seen in quite some time. Valve Software are legends in my book - My Steam ID is "[te] Skittlez")

Next: The "HOW" (Code Dump / VideoCast).

Related Post: Writing Proof of Concept RIA's

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

Going flex to Silverlight: The basics (easy stuff first).

scbarnes — Thu, 10 May 2007 10:38:01 GMT

Introduction

This is going to probably annoy some, and signal mixed messages but overall the approach I am taking is to provide a context driven learning path on how to go from Adobe Flex coding to Microsoft Silverlight. I really don't want these posts to be fuel for the "Flash Killer" BBQ's as that's counter-productive, it's intended to be more focused on helping folks whom are curious about Silverlight (for whatever reason they chose) and are about to embark on the ramp-up in learning about it.

It's important no matter what bloodline you come from to be at least aware of the basics of Silverlight, what it has to offer going forward and lastly how easy it may make life for you (depending on your project / context).

In light of this, I'll be doing a lot of these "If only I knew" style posts, as one thing I learnt very fast coming over to the Microsoft feeding tank was how easy life really is for the average .NET developer and Silverlight is no different.

Hopefully this won't be turned into a "Flex vs Silverlight" piece but more of a way to empower Adobe Flex developers to gain an understanding of Silverlight through a more context driven discussion (e.g. "You know how you do x in Flex right? well in Silverlight they do it this way")

Namespaces

Typically in MXML to load in controls within your project, you would do something along the lines of this:

<mx:Application xmlns:appCntrls="com.mossyblog.controls.*"/>

<appCntrls:MyButton/>

Essentially, appCntrls:MyButton is a pointer to a file in the com/mossyblog/controls/MyButton.as (or mxml) but done so through tag based approach. It's actually quite useful in doing this as you're effectively creating your own XML vocab along with custom properties (attributes) and in Flex can even go further by nesting tags within tags (similar to DOM in essence)

Life in Silverlight is really no different, except when you make namespace declaration you're also telling the CLR where to compile the end result (DLL) , which is an interesting thing to note. As within Adobe Flex typically to do this you'd start to look into strategies around mx:Modules or Runtime Shared Libraries, which can be extremely powerful when used appropriately.

In Silverlight, to do this you simply type:

<app:MainView xmlns:app="clr-namespace:com.mossyblog.controls;assembly=MyBinDir/com.mossyblog.controls.dll">

There's more to this, but I'll discuss this another time (i.e. what does Assembly mean along with the specifics of clr-namespace)

Note: In Adobe Flex generally the xmlns (default) points to a URI path which is consistent globally (In essence this points to the framework manifest file which in turn points to the components and their respective name / path pairs within), same deal in Silverlight only it's "http://schemas.microsoft.com/client/2007" which gives the compiler the core framework reference pointer locations (will expand on this in future posts).

GEOM / Graphic Tags.

Inside Adobe Flex your entire tag based approach to life is driven from components that have a specific purpose (Usually not so much around Assets but more so in specific Navigation/Layout/Form style controls etc). In that you would rarely ever see the tag <Line> as what purpose would this serve in Flex? You could easily write a .AS file called Line.as which inside that uses the LineTo style approach to life (i.e. render a line using the drawing API + Flash.Geom Objects). That or you would typically use bitmap assets to handle a lot of the creative elements, but overall you have a lot of possibilities in Adobe Flex to handle this but are usually kept inside the actual components themselves.

In Silverlight, you're using the XAML language itself and what this means is that whenever you have a vector based asset inside your application, you in turn will see tags that outline what that "asset" is made-up off in terms of properties and semantically marked up description (i.e. you'll hear the words brush thrown around a lot for example).

eg:
<Line x:Name="HeaderTextLine" Opacity="0" X1="25" Y1="62" X2="635" Y2="62" StrokeThickness="4">

The overall point is that you're combining the drawing tag elements with future form/layout components and default controls as they eventually come. It can be somewhat of an initial shock as coming from a Adobe Flex environment you're typically used to seeing specific tags like Accordion, Button and so on only (also custom tags like <MyForm> etc). Silverlight offers you the same approach as this, but the important piece out of all of this to understand is that with XAML all assets are marked-up in an XML format (except if you prefer to use bitmap of course).

Basic stuff right? (Let me know if that did not make sense).

However, you really don't need to be to worried about the specifics of hand-coding these tags, as Expression Blend for example takes over that burden and automagically spits this out into inline code for you (yay!). This is good thing as if you're a code nutter like me, you can wrap these pieces into composite components, which house the XAML code within (just like you'd make your own MXML component out of the Adobe Flex Framework primitives etc).

Next Post.. Code-behinds and XAML

P.S
If there is a part of Silverlight you want me to cover in this "How to" approach, please leave comments as I'll do it! :)

The MossyBlog Times Archives 2007 - 2009 : Going Flex to Silverlight

POC #1 - Project Harmony (pt1) (Silverlight & Flash)

My Objectives for this first iteration was:

Objectives (v1.0)

Conclusion (v1.0)

Highlights (v1.0)

Going Flex to Silverlight: Understanding our DisplayList API.

Going flex to Silverlight: The basics (easy stuff first).