The MossyBlog Times Archives 2007 - 2009 : DHTML

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?

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.

Why I love my PopFly.

scbarnes — Sat, 19 May 2007 09:24:40 GMT

I 've been using Popfly for a few weeks now and I'm loving it a lot, as it's got all the goodness of Web 2.0 and then some.

What is Popfly to the untrained eye?
Well this isn't the official wording, but to me it's a way in which folks will be able to converge in the one spot and piece together mashups containing a lot of interesting elements. An example would be how I managed to mashup Twitter, Flickr, World of Warcraft, XBOX Gamer Tags and Virtual Earth. The end result isn't as elegant as I had hoped, but that's fine as one thing that Popfly allows is the ability for me to go in and write some actual "code" via a web browser to make the pieces align appropriately.

How cool is that!

This looks similar to Yahoo! Pipes!
I must confess, this was my initial reaction as well. Yet, after playing with it I can argue the case that it exceeds Yahoo! Pipes in terms of functionality and community involvement. It's got more potential ahead of it and this is only alpha at the moment (so clearly Microsoft aren't done). I do like Yahoo! Pipes, but if I had to assemble a benchmark of what's out there today compared to what this is shaping up to be tomorrow, I'd have to say it's a cross between what Adobe JamJar was supposed to do, Yahoo! Pipes and Channel9 all blended into the one unified view.

ReadySteadyMashup.com gets closer!
I want to combine my original idea of using the ReadySteadyMashup.com with this and then combine it with other Microsoft products. As here's the thing, imagine if you will you take Popfly and mix it with your other applications out there in the Web 2.0 world as you can embed these pieces into websites/gadgets (I saw a demo earlier this month where a mashup was blended together to produce a SideBar Gadget - very cool)

Did you know you can code this stuff in Visual Studio Express?
Yeah it's true, not only can you use Silverlight to visually piece and assemble the parts together, but you can also code against them using Visual Studio (via the explorer plug-in). This is pretty darn cool for a lot of web punters out there, as doing so means you could utilize this in a number of ways and are only limited by your imagination.

I'm sure some other editors out there could think of some ways to also make plug-ins to empower their developer ranks to do what Visual Studio Web Express could do. If not, ours is always free remember (as in beer).

Why I care?
Well, back in the day I was asked to write the whitepaper for Adobe JamJar, a product in which at the time I thought was awesome. Only as I was writing the whitepaper and asking the folks more about it, I started to get a bit confused as the one thing I wanted the most from this product was - the ability for others to write pieces for JamJar (i.e. I can write my own widget in Adobe Flex/Flash and insert it into the JamJar ecosystem). It wasn't an option, and so I lost interest in it.

When I then saw Popfly, which used to have another code-name, I began to regain interest in this idea and after I got passed trying to benchmark it against both Adobe JamJar and Yahoo! Pipes I began to see some real goodness in the core of this puppy. I care, because it's what most of these cool Web 2.0 concepts should be like, where we take the awesome fun of Twitter and now can combine them with World of Warcraft API's - why? who cares! It just works.

Where to from here?
Chaos initially then maybe some order, but I'd prefer more Chaos. In reality this is going to be a good thing for the Web 2.0 community as it's empowering non-developers the ability to play with all your API's going forward. You will see a lot of Live.com API's in there of course, but equally other public/private API's as well (Flickr, Twitter etc). I'd love to see concepts like Tangler somehow get involved and so on, overall it's a good thing and it's purpose is to give the world a giant Web 2.0 sandpit, no strings attached.

Thanks Silverlight, you just validated RIA (Wrong, here's why)

scbarnes — Sun, 22 Apr 2007 06:06:15 GMT

In 2002 one of the guys ( Jeremy Allaire) whom I owe my house & lifestyle to, came up with an idea that Rich Internet Applications (RIA) should exist in a certain way, with a certain direction going forward. I trusted his idea, as the last one was Coldfusion and it paid off for me so I went with it (had been using Flash prior to this so figured it wouldn't hurt).

Redsquares were evil.
I spent enormous amounts of time trying to either extend Flash's V1 Framework to suite my own needs or beat it with a version of my own framework. I was vocal about it, saying how hard and annoying it was and had zero love for "mix-in" approach (Decorator pattern to all you design pattern folks). I ended up supporting ghostwire.com's components as they were more mature and decided to build on from them.

The running joke in my cubicle in these days was "Barnesy, you going to upgrade to a blue circle" as for weeks on end, I'd have a Redsquares on my screen which represented a placeholder for code.

Point, I wanted RIA to succeed like the next guy, but it meant time and energy to build it.

Royale with Cheese please.
Around 2003. I remember reading up on DENG, this idea that Claus had where you could use Flash to read XHTML pages and it would render accordingly (as Flash had most of the primitives in place). I thought this was awesome as from there you could extend upwards and take a normal web page to the next level, so it was kind of like having a runtime within a runtime.

I decided to have a go at using this concept by reading in XML that would produce runtime applications that talked to Coldfusion. I posted about it on Macrofun.pvpers.com a blog I ran at the time. Libby Freligh (Former Product Manager for Flex) contacted me offline and asked if I would be interested in seeing this project Macromedia was working on, called Royale.

They showed me FLEX and I was hooked. I loved it's concept and it was 10 times more mature then anything I could ever come up with and so I built a career from there on out around it. I wanted RIA as badly as Jeremy had painted it.

Price is what killed RIA.
I got a call one day, it was missed one at that. I remember hearing the message "Scott, we are about to release the price tag and I know you don't like it, but could you not blog about it for a while" (as inside the GMC List for FLEX, we were told ahead of time and I was vocal about it). My blog at this time, Mossyblog.com was one of the first generation of Flex related blogs outside Macromedia and so I guess they thought folks would read and get spooked.

I hated the price tag, but I felt I owed Macromedia for letting me in on the Alpha, Beta and RC stages, so I complied. I also thought if more people use it, then it has to be a good thing for me right?

Wrong, the uptake was painfully slow, for weeks on end I'd get no love in the FLEX space and went back to coding Coldfusion 80% of the time.

People wanted FLEX SWF's outside the server but were told in order to use FLEX you must house the product on the server itself. Yet everyone whom knew FLEX agreed that the server was taking up valuable CPU and caught on that it was due to price tag that kept the reason for it's existence in place.

They got greedy.

Flex 2.0 came out and it was free.
Finally FLEX was given back to the people, the RIA movement in 2002 would move on and I even wrote an article for MX Developers Journal celebrating this. I thought, this is what we need, the RIA concept will take the world by storm and life would be good.

Adobe acquires Macromedia was the headline in blogs and I got nervous about all of this at the same time. I didn't know what was going on with Flash anymore and so I waited patiently. In doing this, A friend told me about Microsoft's movements have gotten mature, I had already known about XAML but didn't realize how mature it had become until around this time.

I was thinking "why would they want to enter the RIA space" as these guys aren't built for this kind of thing, design is foreign to them.

Can't beat them, join them.
I began to learn more about Microsoft, how Windows Form Development was easy to use and so on. These guys had their act together and once you got past the whole "Microsoft is evil" campaigns, you start to uncover that Microsoft has a valid offering here. If only they would use the technology in smarter ways. I caught onto WPF in its early form, and later WPF/e (Silverlight) and I started to see a picture immerge.

Late last year, I saw a job advert ("Developer Evangelist") and I actually thought it was Adobe, so I figured hell yeah, why not. I got a phone call it was Microsoft, and I was shocked. I made the interviews and got the job and was sent to Seattle for chip implants.

I arrived and was shown around the product stacks, meet some of the brainstrust behind WPF and Silverlight, and was amazed at the level of thinking they have around the products. They got it, it's not about runtime it's about experience, going beyond the browser and doing so in as many ways as possible that reflect the developers themselves.

Good Experience (HTML/CSS/AJAX), Great Experience(Silverlight), Ultimate Experiences(WPF).
These are the three tiers of emerging technology coming out of Microsoft and they are going to offer developers three channels of distribution. It's not about Flash being a killed, it's about offerings.

Did Microsoft come to the table late? or is Adobe just not equipped to handle Jeremy's theory? Are we competing? or did Microsoft just grow impatient with all this RIA development happening at snails pace? I don't think it's an evil plot, I just think it's Microsoft catching onto the simple fact that DHTML (AJAX) development still to this day happens in a wide variety of solutions. In order to help these web applications go beyond the browser were possible, they came up with the above three tiers of execution.

Adobe will do their thing and they will eventually do it well, much better than what they are doing today. I hope LiveCycle doesn't end up being the new price tag killer for the FLEX 3.0 equation and I'm seeing signs of this in Apollo (hence why I'm so vocal about it). I look back on the first days of RIA, FLEX & so on and ponder as to where we would all be if Flex 1.0 was given away and was integrated with Flash Professional instead of going after Enterprise aggressively as they did.

Microsoft are getting back to basics, empowering developers & designers to talk with one another through languages like XAML. Make no mistake, this isn't about validating Adobe, it's about focusing on the user experience.

I've been doing RIA both pre-2002 and post-2002, Jeremy put the ideas to words but i'd love an update to this RIA paper though.