The MossyBlog Times Archives 2007 - 2009 : Flash

Meet "Dax", my idea for a mascot (not official).

scbarnes — Sun, 03 Feb 2008 19:46:00 GMT

I like both the "blue monster campaign" and SIlverlight and given I'm dabbling around in 3D at the moment, I decided to play around with the idea of combining the two.

Note: This is not the official mascot for Silverlight, instead it's simply me mucking around with 3D. Please do not use this in anyway in conjunction with Microsoft branding.

Here's "Dax" as I'd like to call him (why? dunno but Dax just stuck out as a cute name for the little guy). He's currently sitting in a surgical chair because he made fun of Flashbots new upgrades. He said they were rushed a bit to and looked like he just raided a dead storm trooper for them.

Flashbot obviously disagrees.

I'm so i love with these two cool characters, that I'm using them in my PowerPoint decks next week (TechReady 6 - Internal Microsoft conference in Seattle next week).

Here are some other picks

(Fig 1 - Since I'm an aussie, don't be alarmed at my accent fellow international audience members)

(Fig 2 - Here are your "Go Do's")

(Fig 3 - Putting Flashbot under the ...drill?)

(Fig 4 - Title Screen.. FLashbot's so proud of his new helmet)

(Fig 5 - Old title screen, Dax and Flashbot having a fall out over it)

(Fig 6 - Flashbot pinned to the wall heh.)

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

Lightmaker Interview.

scbarnes — Sun, 12 Aug 2007 14:05:00 GMT

At ReMIX I had the pleasure of interviewing Lucas Sherwood from Lightmaker (which reminds me, must get down to Melbourne again soon). It was an on the spur of the moment interview but in it, we talk about a lot around some of the challenges they faced coming from the Adobe toolset's over to our new product(s).

Lucas is one of the RIA Producers in this industry that I respect, as he's approach is pretty straight forward and rarely cares about which team is better then the other. Lucas has a quite an interesting background dating back to Allaire days (Coldfusion) through to present day.

At any rate, I hope you enjoy the interview and can use it in some way.

http://visitmix.com/blogs/joshua/interview-with-lightmaker-at-remix-australia/

RIA is a belief, Silverlight is the execution.

scbarnes — Fri, 03 Aug 2007 04:26:58 GMT

I interact a lot around discussions in the Rich Interactive/Internet Application (RIA) space. I read as much as I can on it and keep tabs on what I find interesting around theories associated to RIA. I also engage folks whom never have even heard the acronym RIA and it's interesting conversation to have as how do you explain it without going deep into a detailed technology discussion.

What does RIA represent really.
It's effectively an idea, on how to get maximum user experience through a browser payload initially. In that we all can agree that we'd love to balance our general ledgers via the browser as it's an easy footprint to leverage whilst at the same time we can get a sense of depth via such a small footprint.

HTML combined with JavaScript (aka AJAX) is doing a lot of interesting things, but it effectively hits a barrier at some point and it could come down to simple GUI (Graphic User Interface) positioning of elements that or involvement of other forms of media (animation, movie, audio, remote data connection points). RIA on the other hand overall is about clawing our away out of this realm of limitation and into the next natural existence, by aggregating as many of the media elements and the twists and turns that are associated with them into a rich interactive experience, which can empower end-users to solve real world business grade solutions (that or simply provide an existence to goof around in).

How does Silverlight Play a role then?
Silverlight has and will always be the missing piece in the overall Microsoft Platform stack. It's been missing for years and whilst we have made substantial bold movement in the Windows Form Project space and at the same time really pumped a lot of goodness into the Web Form Project space, we still have this missing piece in the middle. It's usually filled by Flash but in reality what does that do to the overall development practices buried deep within our customer base?

It means you may have to learn an alterative technology that has similar syntax to C# / XAML but is obviously different. It also means that you're not really getting an end to end tool driven solution (Visual Studio is a fantastic productive tool, so one has to agree that if we can keep in the one space and tweak/pull code to suite life is good right?).

Enter Silverlight's existence, in that our bet at Microsoft is to enable folks to move upwards and downwards in the three tiers of platform experience (ASP/AJAX | Silverlight | WPF). Each has their own righteous approach to execution but the underlying win for the average .NET punter is that you get to re-use your skill set and understanding of Microsoft's approach throughout. In that if you were a to study C# and XAML tomorrow, this effectively becomes your passport up and down the stack right?

Furthermore, it's a natural progression in enabling customers around the world to enhance their existence online both through browsers but also soon via other client surfaces using an enriching experience. That's the overall bet anyway. Is it going to happen tomorrow? nope, it's a marathon not a sprint and simply put focus on up skilling now as that will be your safest bet.

Well, what is Microsoft's vision overall around RIA then (Silverlight + VS2008 + Expression?)
Once you've grasped the context of what RIA represents you're probably going to either want to build or give it a miss. If you chose the earlier, you're now looking down the barrel of a whole new world in which to approach. You're going to have to weigh up both your developer & designer capabilities, along side associated logistics (servers, bandwidth etc) associated to the cost in implementation.

It's a lot of variables trust me (a lot of years playing in this space telling you hehe)

The key ingredient that we believe is worth the investment in Silverlight is that you're basically buying one socket but opening up into other realms of possibility. In that down the road the overall eco-system that surrounds Silverlight is growing to a rate that I've never personally seen.

For example, Visual Studio 2008 has a lot of new features and productivity gains associated to it and Silverlight is buried deep within. You also then have Expression Studio to match, so in a nutshell you have both ends of a gradient (developer vs designer) meeting in the middle via these two suite of tools. On top of this, you then have an entire platform stack to pick from, and given some of the improvements associated with Windows 2008, this is heating up to solid solution (eg: IIS 7.0 is quite an exciting piece). It gets better though, as we are making some strategic movements associated with Live.com cloud, and one thing I've came to a crashing conclusion is that folks internally are really looking to push the Microsoft service cloud further and deeper then it is today.

Overall you have an entire ecosystem, many brands and i mean many! waiting for you to pickup and engage. Silverlight is effectively one of many points of entry and it's journey is to be the middle guy, the one that is bound by obvious security restraints but at the same time hints at strong end-user experience over the wire (Internet). Looking to do more in client surface reach as well!

Are Microsoft competing with Flash?
Honestly, no. I think there is a lot of overlap and intersection points between Silverlight and Flash but if you step back and look at the entire product spectrum you'll see to isolate the argument down to feature vs feature in Flash battle, really undervalues you the proposition put forward around Microsoft's bet in Rich Interactive Applications. Silverlight has a roadmap that differs in my opinion from Flash, and realistically it both can be fused together or if you prefer to pick one then so be it.. choice is a brilliant thing to have.

Microsoft is simply looking to complete the circle of User Experience. Any questions?

We gave birth to RIA.

scbarnes — Tue, 24 Jul 2007 23:32:45 GMT

Adobe's Mike Downey and I were throwing comments back and forth on twitter.com this morning, it was derived from Brad Becker (ex Flash Product guy @ Macromedia and now Microsoft staffer) post on RIA.

Brad posted this a few months ago when JD @ Adobe got all fired up over Rich Interactive Applications vs Rich Internet Applications. Adobe will argue until they are blue in the face that Microsoft are attempting to Hijack the term RIA and .. blah blah blah.

Honestly, whom named RIA (Microsoft or Adobe) has become irrelevant. If you look at the history of RIA overall, it's something that we have always hinted at but never could quite get there.

VRML for example would have to by far my earliest memory of the "RIA" concept. You have a rich 3D world in which you can interact with, but of course in the late 1990's there was only so much you could do in terms of client-to-server side interaction.

In 2000, I remember seeing Erik's attempt at WebOS.com, which was by far the earliest iteration of RIA / AJAX I've seen. You may know of Erik today as one of the brains behind Google Gears, WebFX and Bindows.NET

I was working on Billabong's website's in 2000, when I first started to use Flash + Remote Servers, but it was with Flash 5 and all I could do was bring in variables remotely via PARAM or URL string. RIA was my intent but couldn't execute.

I've been on the Macromedia ride ever since, but like all the previous iterations of "RIA" it just hasn't been executed. There have been success stories of RIA working today, but it hasn't changed the landscape and I say this as if it has we wouldn't be seeing AJAX. There is no need for AJAX if "FLASH" RIA were to succeed? one cancels out the other and many have argued this case.

Silverlight and Flash Player are advanced, no question in this but both Adobe and Microsoft can't own RIA because it's realistically an idea or belief that was first formed many years ago and whilst Adobe will have you believe they are the founders of RIA, they simply built a campaign around it.

It's like saying AJAX is owned by Jesse James Garrett or he invented AJAX? (he did? I'm sure Google and Microsoft both had a large role to play in this, Microsoft with XmlHttpRequest and Google in its mainstream use).

We the community are the ones whom own RIA, not Microsoft or Adobe. They simply enable and market the idea of what RIA should be.

Taking on the RIA fight, Adobe, Microsoft and Scoble.

scbarnes — Wed, 18 Jul 2007 15:00:53 GMT

I stumbled upon Scoble's post around how great it was to see Ryan Stewart being agnostic in terms of praising Silverlight via his blog.

I guess I didn't really pay attention to this, as Ryan's always been one of these guys that generally has a great pulse when it comes to what I call the "RIA" movement. I'm glad though he didn't tread down the path of blue vs red, and stood to his word by proving that he's more relevant to the audience out there by staying open minded then close minded.

I also scanned the comments below and noticed a couple of folks pitched me as being Ryan's Mirror here at Microsoft. I giggled at this, as to me for the past 6 months I've really dogged Adobe on a number of issues. It wasn't to make my bones with them, it was simply to see if I could cause some impact / change being Microsoft guy instead of non-Microsoft guy and I think I got a reaction (both positive and negative).

My heart essentially sits with RIA in general, I have wave after wave of ideas around how I could combine Silverlight with Flash, especially in the Video space but part of me wonders how dangerous this would be as whilst the smart people with whom I prefer to hang around with get the fact that most people couldn't care which brand is better, there are those whom get nervous over the idea of "crossing the streams".

Part of me also wants to show this off to the world, just to annoy as I think we need to annoy more people online with RIA, in order to stimulate more discussion around it. RIA is complex, I don't think either Microsoft or Adobe have solved this today, and we all have more work ahead of us but I'm glad both camps are getting more aggressive in our approach to solve problems associated with RIA.

RIA 1.0 (2002 - 2006) was for me really about showing the idea is possible. Yet we still aren't quite there. RIA 2.0 (2006-2008) is going to be about tools, focus on solving the problems between designer and developers today, get both ends of the gradient in sync, working, shipping and producing so that when we look to breaching beyond the browser limits, we have a clean foundation to build up from. AIR is to early, that's why I think it won't pass the version iteration, WPF is to early and that's why I think there is large adoption hurdle in front of it.. but in time, we'll get there. As RIA 3.0 is going to kick some butt.

We just aren't ready to go beyond the browser... but we are getting close.

P.S
Any Adobe Staffers want to collaborate on a RIA Community project, ping me, as this would be a fun project :)

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

Lightmaker Downunder Doing great things.

scbarnes — Tue, 15 May 2007 04:48:09 GMT

Lightmaker is one of my favourite RIA companies and have quite an impressive portfolio ranging from JK Rowling's infamous Flash Site through to Orlando Magic built in Silverlight. These folks are kicking some nice goals in the RIA space and are quite talented / agnostic in their approach.

Last month, Shane & I caught up with Lucas Sherwood and Attila Csobonyei two local Aussie guys whom are running the show for Lightmaker Australia. They showed us what they've been up to and both pieces were using two sets of Microsoft technology (WPF and Silverlight).

The first was the Olympian Alliance built with Windows Presentation Foundation (WPF). It's quite an impressive application using the new stuff we have on offer and it was also exciting to see how Lucas & Attila were able to overcome transition pain points in terms of going from everything but Microsoft technology to using Microsoft Technology.

Lucas made a joke "I wish there was a site that showed how to go from Java to C# as the syntax tripped me up" (He didn't laugh when I said I own a book on that very thing, he had one of those "if only i knew" looks on his face)

They faced some initial challenges in getting up to speed with WPF but were able to overcome them after a short while and that underpins the story behind how easy WPF can be if approached with a serious amount of focus.

The second piece was they were also building Orlando Magic using Silverlight 1.0 and this was impressive for a number of reasons, as firstly they weren't using Managed Code instead were using JavaScript. Secondly, they weren't using Visual Studio Orcas but were using Blend (pre-release) and Visual Studio 2005 (as-is). Yet they were able to conjure an impressive piece of work online (I was really impressed with both their efforts to be honest).

Here's the good news, Lightmaker didn't abandon Adobe Flash or Flex, they are still happily coding away using Adobe technology, yet they also now use Microsoft technology as well. I make a point of expressing this as despite what folks read online about Microsoft "killing flash", companies with high profile brands such as Lightmaker are proving that wrong (you can be both). Cynergy, Metaliq etc are one's on this list that comes to mind as well, it's about choice folks!

I'll be following up with Lucas and Attila when I'm next in Melbourne as I think there is more to their story and want to uncover it.

If you're in Australia and are using either WPF or Silverlight, please let me know!!

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 Rich Web, The Rich PC & The Rich Device.

scbarnes — Thu, 03 May 2007 12:12:59 GMT

I was going to do a MIX07 wrap-up, but it's been done to death and to be honest, I spent a bulk of my MIX07 experience meeting and greeting a large number of folks whom attended (I counted around 40 business cards at one stage). That being said, the common questions I was given were around where Silverlight sits, how does it relate to Adobe Flash and more to the point where to from here?

Silverlight's Posture

It's a basic equation, how does one give developers the ability to go beyond the initial browser experience offered today, whilst more importantly nurturing their existing skill set(s). Let's face, it we all hate having to learn new things as it gets in between shipping an end result and having free time to innovate on the next series of projects.

This is extremely important, as you being a developer have to evaluate where you next go in your career, is it about changing languages (I've just flipped my entire language portfolio, it's not easy) or is it about changing perspective. I look at Silverlight as an extension of ones current core competence in most programming cubicles around the world and that is JavaScript/HTML. It's a language which at the best of times seems to smack you in the head when you least expect it. It doesn't offer much in terms of innovation and whilst we saw exciting movements in the AJAX space, it didn't really change much other then illustrated that we can architect the pieces we already had in a much more efficient and innovative way (via the means of a methodological approach).

Silverlight is looking to take that core skill set, and provide an extension, a tunnel if you will into the Rich experience driven application(s) and it's only version 1.0. It's got potential and capabilities to go further into the device channels, by providing a secure context driven environment in which the browser sort of gets an upgrade, patch if you will to help formulate a more focused understanding of the possible roadmap forward for Silverlight.

It's quite a unique value proposition when you take a step back, where we have a runtime solution which not only will offer you the similar metaphor for building web applications, but it has services and pieces already in place to empower you the developer to build up from. It's version 1.0 and already you have the capability to write your own online Video-ware application that has full streaming and free (up to a point). Already it's version 1.0 and you're first hurdle is to pick which tool to use in order to build with, then there is the entire features within this tool that are quite extensive and rich. You're going to be drinking from the fire hose with your first "Hello World" application, but like other solutions of past, you got through it eventually.

Silverlight as a channel of delivery is looking to expand its horizons beyond the browser and into other areas such as devices. It won't happen overnight, but it will happen it's only a matter of time.

Silverlight and Flash

You get this a lot, the flash killer syndrome whereby a lot of Flash developers around the world are concerned that initially all the years of experience they have invested is subject to being terminated, thanks to Microsoft. It's not that easy I'm afraid, and more to the point it's not the approach going forward. This is an emotional issue, it is one that should be discussed more but not from Microsoft or Adobe, but more to the point from the community overall. Up until now, the RIA community has been somewhat self-contained in either Adobe's hands or the makers of AJAX Frameworks hands. The notion that these communities can co-exist is proven, and more to the point there is now a third option, Silverlight Community (It's "Our" community not "Your" Community, Our being all of us not one single brand). Microsoft offers this community (Silverlight) one thing and only one thing, a focus driven approach to empowering these users in the ability to develop, design, deploy and distribute there Rich Web experience. In doing this, it's Microsoft's burden to figure out what makes all of you tick, what keeps you motivated and how can ensure there is interoperability with brands like Adobe.

An example of co-existence is Adobe Flash has ExternalInterface API, one of the best API's i've seen in quite some time, and not being used as effectively as it could be. It's possible today, to use this API to leverage the capability and power of pushing/pulling data through remote servers such as Flex Data Services or WebORB. There as many more scenarios in which if you look close enough, and keep a agnostic approach you will uncover other pockets of commonality between the two.

Silverlight plays well with others, in it's transparent open format, it will provide developers the ability to harness it's language(s) to integrate with various pieces online in the RIA space. If you isolate by itself, then you will need to move beyond the Flash Killer instinct as you're setting yourself up for an emotionally charged debate, which will have no ending.

Silverlight and where to from Here?

It's simple, to broaden the Internet reach from beyond the Rich PC into the Rich Device arena. The notion of sharing one day a Silverlight application inside concepts like Windows Live Messenger, using Windows Live Platform that connects to Microsoft XBOX 360 all the while using Silverlight as the connecting piece. To top it off there, to then provide developers a unique value proposition, learn C# once and only once.

You could argue you need to know XAML, but when you begin to use the Expression Studio it becomes clear that when you are learning XAML it's usually due to a limitation in the Expression Studio offering, something in which Microsoft will pay close attention to going forward.

I for one have noticed the one emerging pattern amongst all of the Expression Tooling, that is it's primary focus is to remove the burden of choosing what type of plumbing an application is to use, but how to get developers and designers shipping innovative applications so that they can push the Internet to the next tier of experience (whichever that maybe).

The tag line Silverlight uses, "Light up the web" can mean many things to many people, but for me it's casting the first spark, the fusion of ideas around RIA and how concepts like Web 2.0 clouds can be combined with products offered by Microsoft while at the same time provide paths for other brands to play a role in.

I've been reading a lot about how the DLR is both good and bad, but you're missing the point as it's about providing the notion, the idea that Silverlight is looking to integrate and to what, is your job. You need to figure out where the blank canvas is going to take you once you've got the swing of it all, as the demo's found in MIX07 illustrated that with imagination and determination you can create a lot from little.

Cynergy Systems a brand well regarded in the Adobe Flex community announced today they will support Silverlight. The key word is support, not ~~replace~~. They get it, they get the notion that this isn't about one brand vs another, it's about being relevant to their customers and Adobe and Microsoft can play multiple levels of roles in enabling this notion to carry forward.

Feel free to comment in anyway you want, personal flame, anonymous the works as I'm looking for the next pain point developers & designers have, as so far with both brands I think they are covered now (Best of all, you have potential to move into three tiers of experience as well (Ultimate, Great and Good).

The Silverlight Team have your back.

Lastly, I spent a lot of time with various folks in the Silverlight Team and these folks have put in some enormous amount of hours to get Silverlight online this week. I've heard stories from both the developers, support squads, marketing teams through to the executive level on how hard they have worked to make all of this happen. I am amazed at the level of skill that has gone into making this happen and when I was first shown an internal build in February 07, it wasn't all that exciting. It's now April and they have exceeded my expectations 10 fold, and already they are thinking of 1.1 and beyond. Think about it, why would 1.0 be released now, and 1.1 at the same time? it's about getting the latest pieces to you as soon as they can, as they are curious to see what you do with it as history has proven in this space that designers & developers can take something, flip it on it's head and change a products future quite easily.

I watched Mike & Joe yesterday stare in amazement at BBC Radio application and was glad that they got to see how something they both worked hard on get flipped into a new innovative approach. It inspired them, and it may have unlocked the next feature or idea for Silverlight 1.2 and so on. Software is never perfect and inspiration is what keeps it from decaying, as it physically can't by itself.

It's a simple task given to you, make the most craziest, stupidest hello world Silverlight application today and show Microsoft which direction you want to head with it? It's more productive then comparing it to other brands right?