The MossyBlog Times Archives 2007 - 2009 : AJAX

Do you know Silverlight has an inbuilt native RSS Reader?

scbarnes — Thu, 14 Aug 2008 09:28:21 GMT

Interesting, I keep asking this question a lot and the responses I get are something that un-nerves me. In that, in Silverlight there is a native RSS Reader built in, so the ability to consume an RSS Feed is so easy, it's almost cheating (Sharepoint readers, pay attention here).

The secret to this can be found in the namespace:

using System.ServiceModel.Syndication;

The class in question is the SyndicationFeed.

Code example of how to use this great API, can be found here:

http://silverlight.net/Quickstarts/Remote/ed86e719-0da0-49e1-a9e1-b31f483070d4.aspx

I personally have been using it with Sharepoint, in that I'm no Sharepoint 2007 guru at all, I've learnt Sharepoint through just goofing around and playing with it. Given that I'm a total newbie to the product, I decided to build out an intranet with Sharepoint, where I'd use Silverlight as the one-stop client, with it's own native forms built within and then simply leverage Sharepoint for the hard stuff (business logic, workflow, document collaboration etc).

The way I did this, was I'd use RSS Feeds (that well basically come free on every Custom List etc you spin up inside Sharepoint) that would help me with my data sets, and it would do in a way that was very automatic. In that, the READ part of my RIA solution is child's play with the above RSS Reader API.

Yet, comes the part on how to Create, Update and Delete. This requires forms right? RSS Reader need not apply here.

That's ok, as what I've done is used a basic iframe, hidden it via CSS and using Silverlight forms, I'd data bind the forms themselves to html forms within the iframe via the HtmlWindow Class (the natural JavaScript way of life in Silverlight, it's free!).

As you can hopefully imagine, I've got the full power of Sharepoint now at my disposal, and Silverlight has such a passive amount of control over it that again, it's almost considered cheating. To the end user, visually it just appears 100% Silverlight and at the same time, I can easily use a hybrid approach (point is, AJAX + Silverlight can be a really good bet here).

That's the reason I think Silverlight is such a powerful runtime that at times we get lost in the whole Flash vs Silverlight battle, and never really sit down and look at what's in front of us. A great Line of Business RIA solution which can have a passive impact to a solution such as Sharepoint.

Passive being the keyword, in that no need to learn a 3rd party language, keep it .NET, keep it inside Visual Studio, just ship.

You can do this passive approach with any solution as well.

Not convinced? that's ok, i'll blog about this in depth shortly but before I do, what's your thoughts on this approach?

Silverlight has a more natural support of JavaScript.

scbarnes — Tue, 12 Aug 2008 04:48:58 GMT

It was interesting to read this CNet.com article around Flash, HTML and AJAX.

It talked about the various ways in which the Adobe Flash is struggling to compete with AJAX in the RIA space. In fact, some of our early research showed that AJAX was associated with RIA, and not Flash, despite Adobe's best efforts to claim the ownership behind the acronym.

The article mentioned various pieces to the Silverlight discussion, which to me wasn't enough. In that with Silverlight enabling JavaScript interoperability is more seamless and natural than Flash has ever as been.

How?

Well you have to take a hard look at Flash. In order to merge both Flash and AJAX solutions together, there is a degree of compromise: if you wish to allow JavaScript to get deeper access to assets within the closed binary, you first have to write a method or two via the ExternalInterface API. This is like poking holes in the runtime for JavaScript to access.

Example, Ryan Stewart @ Adobe was quoted:

We need to bring Flash and HTML/Ajax closer together. You absolutely should be able to reach inside of the Flash Player as a JavaScript developer and pull out some of the good bits that make the Flash experience so great. We shouldn’t force the “1 pixel SWF” or a sand-boxed Flex application.

Inside Silverlight, we've empowered JavaScript folks to have a more natural amount of access to the content within (without any extra proxy code API's). This can be done via our HtmlWindow Class within Silverlight itself or if you're looking to access the content from JavaScript, it's simple a matter of using the below:

document.getElementById('yourcontrolId').Content

From the .Content onwards, you now have full access to the Silverlight solution as if you were accessing the content from within C#, IronJava, IronRuby etc.

This again, illustrates how committed we are to ensuring Silverlight is an open cross-platform, cross-browser and cross-device solution for your next bet. As opposed to a closed binary format which has restrictions implied such as the External Interface API.

We don't see AJAX as competition (in fact, Outlook Web Access was one of the first AJAX applications ever built), it's more of a complimentary extension (Silverlight v1 was released with JavaScript first, before C#) than a competitor and we've made a lot of efforts around our ASP.NET AJAX Control Toolkit to ensure that it's being proven. You don't need ASP.NET to use the Control Toolkit either, as the source code is freely available for other dynamic languages to make use of.

Further, if .NET isn't your cup of tea, that's fine you can add your own dynamic language support to Silverlight, via the DLR such as the OpenSource Project that is currently working on enabling Client-Side PHP to work ontop of the DLR.

Finding your balance between AJAX and Silverlight

scbarnes — Thu, 24 Jan 2008 17:30:33 GMT

Tonight, I found via twitter a deck from Plaxo’s Joseph Smarr. In this deck he talks about the war injuries he received in heading down the AJAX route. It’s a great deck and worth checking out but what I liked the most about it, was that it reminded me of my struggle back in 2002 as a web start-up.

This is a story of how I made my first start-up work using RIA, but at the time didn’t know what RIA was or heard of it and it was also the reason I took up Flash over DHTML – aka AJAX.

I’ve got an idea, let’s build..

In 2002, both the Managing Director and I left the company we worked for and made a go of it with our own start-up. We had little or no money to begin with and our grand vision at the time was to build a CMS (Content Management System) that focused purely on user experience. As in those days, UX was something that most product teams would simply echo the following fatal words – “don’t spend too much time on the UI, function is more important” and thus you’d see some really scary CMS. So scary, that we believed that the CMS features weren’t the differentiator, but the user experience was (how funny life turns out).

We however, believed back then that UX was not only important but would separate us from the pack and with this vision; we set out to make our millions. I took Coldfusion and Flash 5 and decided to build out this CMS in a way that I felt was not only unique, but had elements that I’ve always wanted in a CMS but never found. The UX was simple, keep the graphics in a more “pixel art” form, steal as many ideas as I could from Apple in terms of their user interface guidelines and ensure that any mum or dad could use it – whilst providing areas of complexity for those whom wish to venture out of the ui sandbox.

I made use of DHTML (AJAX to the new comers to this space) and it was quite a bold step, as you see Internet Explorer at the time was probably the only realistic browser that made use of XmlHttpRequest. I chose to use XmlHttpRequest at the time simply because Flash 5 had imitated capabilities and I remember seeing Erik’s WebOS.com many years before (it’s by far the best AJAX/DHTML creation I’ve ever seen to date – incidentally Erik now works for Google - ie Google Gears). I wanted to take elements of Erik’s gratuitous but elegant use of DHTML talking to server-side and also apply them to my CMS and it was pretty much what we’d call “RIA” today (only there wasn’t a buzz term for it back then).

I chose to head down this path, as well, that was the technology at the time and it’s all I had to work with.

User Experience took a lot of trickery to get working...

The vision of focusing on UX was sound. We found some success with the early stuff I wrote & designed in the previous versions. As this is what we felt helped sell the first version of the CMS (as it had really weak features).

What we needed though was the ability to minimise the end users need to refresh and provide instant feedback as they interacted with the web application. In order to fulfil this I’d make use of a lot of iframe and XmlHttpRequest trickery, in that I’d write a Coldfusion wrapper which basically encased an iframe tag with server-side generated attributes. Then using XmlHttpRequest I’d ask the server to give me back the iframe in html packets, which using the Internet Explorer DOM API inject back into the interface – so yes, in 2002 I was using “AJAX” and didn’t think anything of it, as well Erik did it and it was a normal thing to be seen.

I first showed this approach working in what I’d call the “Publish Wizard”. The Publish Wizard was a feature within the CMS that allowed the end user to publish pages they had in draft form into real life static html pages (only with a .cfm extension to ensure parts of dynamic were in place). We chose to build out the pages in static form as back then search engines preferred static instead of blah.cfm?ver=1 style url’s (aka we wanted friendly urls).

The previous version of this feature I built used to basically generate the dynamic to static files in a way that was really bad for the end user. In that the end user would stare at a “Publishing..” text on a blank screen and wait for untold minutes until the process finished (we once had a government department that had 20,000 pages at one stage – so imagine that wait).

I wanted to improve on this, so I made use of the iframe / XmlHttpRequest idea’s I found in Erik’s work. I instead figured that Coldfusion needed to “thread” its processes as I found that if I could write 5 pages in one batch, it would give me 5 times the speed. The problem however still remained, in that the end user was staring at the dreaded “Publishing..” text. I decided to tackle this head-on, and decided that I needed a way to show progress but with a degree of accuracy as to show inaccurate progress would result in more human error (i.e. I also forgot to mention that users would assume it stalled and hit refresh, thus incomplete publishing and bugs would occur).

I found that if I were to create 5 iframes hidden, and using JavaScript I would update each of the iframe URL’s with a pageID to be published. Coldfusion would do its job and write out the dynamic pages to HTML and when finished would update a flag in their respective database rows. That worked, but what I really wanted to do was obviously show the visual progress being adjusted. The way I did this was using XmlHttpRequest I’d ask the server “what’s published so far” and it would return a percentage complete JavaScript object (yes, I was even using a quasi XmlHttpRequest JSON style solution).

The end result was that the user was seeing progress bar updates as each batch of 5 were being published. I thought this was brilliant and how great was DHTML!

The browser started to die, people were afraid.

The Publish Wizard worked a treat and the rest of the UI flowed in similar fashion, in that I’d find ways to ping/pong the server and use the iframe / XmlHttpRequest approach to minimise page refreshes. However, cracks began to immerge as once I started adding more and more of this technique to the UI, the memory started to climb.

Internet Explorer had memory issues (garbage collection) and I cursed its existence – it let me down!. Yet little did I know that it was actually my fault, as I wasn’t disposing of my variables after use and I’d cache way too many getElementById() results inside JavaScript.

It was too late in the end to recover, as by this stage we were roughly 1 year in and I was mentally exhausted from being a lone coder, designer and architect in one. I needed a break and I had lost the passion as well as the vision. The thought of turning back and re-writing a year’s worth of work was too much, and so we looked at exit strategies quickly. We made a fair bit of money and so it wasn’t a total loss.

The lessons learnt, AJAX can be an evil cretin at times.

I mention all of the above, as I see the same formula apply day in day out with Web Start-ups whom preach at me around why AJAX is by far superior to Flash or Silverlight runtimes. I simply sigh when I hear them, as I could argue the point with these folks further or I could simply let them be and hope they find a better way around the pitfalls associated with AJAX.

It’s relatively simple folks, the browser in a nutshell was never really meant to be pushed and poked into the way it’s been used today. We see great uses of AJAX daily whilst other times we see terrible, painfully poor uses of it. It’s a technique that should be used only when absolutely necessary and I state this simply from experience. Experience in not just building with it many years ago, but also watching others preach the AJAX gospel only to see them a year later hit what I call the browser barrier (similar to Moore’s law in terms of the thermal barrier).

It happens regularly; a web application starts out great, strong and really exciting in its use of AJAX. Yet as more and more features are added, suddenly the weight of the browser begins to fail and one or two pieces of the UI stall. Then another 2 and before you know it, you’re debugging JavaScript and Server-side code trying to figure out which part of the transaction is the one at fault – did I put a try/catch behind that ..Or is the event bubbling right? Etc..

A Runtime is the only way to fly

This is where Runtimes such as Silverlight or Flash play a strong role in today’s web application(s). It’s the right tool for the right job and to hide behind “I don’t want plug-in to be installed” is no longer a fair argument. It’s now a necessity to have both runtimes going forward as to do so will help shift this web 2.0 culture hells bent on using 100% Ajax applications into a different realm of user experience.

The reason why, is simple – the runtimes are mostly goaled on one thing. Make sure you don’t make your users wait and above all else, make sure you don’t make your developers wait either. Browsers on the other hand have to tread much more carefully as in the end they have to treat the web in many ways as either an application or a document. Runtimes simply treat the web as an application or animation, different rules apply and different calibre of developers & designers also.

The simple ability to accurately predict when a data stream is likely to finish download is by far the most basic and simplistic feature within a runtime, yet the browser cannot give you this data with as much degree of accuracy.

Plaxo found out the hard way, you don’t have to

I see Joseph of Plaxo’s deck and I think to myself that was me in 2002 and will this madness ever end? (Note: Joseph did an exceptional job and this by no means taking anything away from him in that regard - it's more a broader question).

Give the RIA idea a shot, pick up Silverlight and take it for a test spin, see what it can do to mitigate the pain ahead. Use both Silverlight and HTML together and yes, mix it up with some AJAX if you like, but consider moving away from a 100% AJAX driven solution as it’s not necessary in tomorrow’s web application. Remove the idea that search engine friendly RIA’s are a stumbling block and instead build in your own way of ensuring users can find information in a contextual way that suites your product. Leverage Live.com cloud’s API or Macros to help you achieve this as in the end separation of your content from your RIA is probably where you need to focus your energy the most.

Deep linking is simply a fool’s errand. Think of an alternative approach to that problem, and think of it at the start of your product’s architecture as it’s something you shouldn’t put off until after v1.

I’ve been mixing Flash, Silverlight, Flex, AJAX, HTML, Coldfusion, ASP.NET, PHP, Java and XUL together for many years trying to find an ideal way to build RIA. The end result overall was simply that I tried to hand roll too much of the workload myself whilst relying on the browser to do most of the work. Instead focus on ensuring your UX Platform scales in terms of performance and can talk back and forth between the servers.

I think Silverlight is going to be the better bet out of all that I've tried, and I state my job on it (heh)

Well done to Joseph for sharing his learning(s) around AJAX. I think it’s a great deck and special thank you to Ashley of Faraday Media for pinging me with this URL via twitter.

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

RIA: Difference between an Application and Website.

scbarnes — Thu, 25 Oct 2007 05:59:03 GMT

There are many things that make up a RIA today. I posted last week about Interactive vs Internet, and I think it's played out enough. Personally my conclusion is to let the "I" be silent, and it could be "Information, Interactive, Internet, Interface, Idiocy" etc. "I" of the beholder if you will.

Yet, one thing that was uncovered in the process is what really is the difference between RIA and a website? I mean technically speaking the Website of today is really getting blurry in what it's doing vs supposed to. I say this as the AJAX movement has empowered webowners (if that's the right title) to embrace JavaScript driven experiences without question (something you would of been publicly beaten up on in the early days).

This blog is what I'd classify a website, but one could also argue that it has a degree of "application" associated to it, in that think of the context of use. You visit the site, you read my posts, you decide to move on or leave a comment - if you will - you reply.

Now where have I seen that methodology before. Oh yes, email.

What are the differences between Email Messages and Blogs, especially as more and more agents popup around the globe in helping you manage all your RSS feeds. Yet, at the grass roots of them all, they are simply websites?

What is RIA today, and where is it going. Already folks from the competition are talking about branded applications being accepted as RIA? (*shrug*)

Website or Application? show me the distinct difference between Flickr and Picnik.com? once you do, compare the results against Nike+ while at the same time compare to <insert your favourite RIA here>.

Confused? I know I am and I've been in this space since 1999. I must be getting old and all this new RIA fashion seems to be skewing my understanding of a website.

Is it a case of "If it has a runtime, it's classified as RIA until proven otherwise" or is it even possible today to show a definitive split between website and application. That being said, the Rich part of the discussion will be easy, as it's simply a case of underpinning the user experience quality and degrees of such.

Overall, I doubt there will be a true definitive answer suffice to say, the term is slowly starting to crack in places and in a very subtle way, being bent to suite different agenda's. In saying this, my conclusion is that it's fast becoming a term that lacks maturity, governance and is practically the same as other terms like CMS, CRM, ERP, SOA etc.

It's what you make of it, and any whom oppose your belief is both right and wrong. It will just come down to your debating skills as to which of the two will ultimately win out.

In the end, it's all a website, just with different grades of user experience housed within an aggregated view over different layers of services.

How To: Using AjaxControlToolkit to animate Silverlight.

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

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

Approach A.

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

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

Approach B.

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

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

Overall, bad.

Approach C.

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

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

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

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

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

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

Now comes the code.

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

 2:  SILVERLIGHT CONTROL

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

 4:  <div class="SilverlightHost">

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

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

 7:  </div>

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

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

Now comes the code:

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

 2:  Sys.Application.add_init(appInitHandler);

 3:  function appInitHandler() {

 4:  }

5:

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

 7:  function appOnLoad() {

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

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

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

 11:  animator.play();

 12:  customanim.onStep = onCustomStep;

 13:  customanim.play();

 14:  }

15:

 16:  // Custom Animation Sequence

 17:  function onCustomStep(percentage) {

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

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

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

 21:  }

 22:  </script>

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

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

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

RIA and Search Engines.

scbarnes — Sat, 04 Aug 2007 08:46:52 GMT

The latest annoyance with RIA (Rich Interactive Applications) these days (not wide-spread thankfully) is how they aren't really suitable for search engine's such as Google.

There's a reason for this and it's simply put, they aren't web pages. They aren't documents, and furthermore they aren't worth indexing. That being said the data that they connect to, is all of this and above.

You see, the confusion kind of sits around how they are deployed, in that we typically gain access to a RIA via a browser right? In this context, then by rule of thumb they should be indexable and search able by our favorite search engines - after all, it's the browser paradigm right?

Actually no, the browser is simply the payload first and foremost, it's your footprint to gaining access to the RIA in question. In some cases (AJAX/Silverlight) the RIA makes use of HTML or XAML, so surely that means it's crossed the boundaries of being part of a graphical element and into indexable data? Wrong - this is just us using the subset language we've been dealt to produce layout, or positioned elements on screen and although the code is somewhat transparent, assume it was just a ball of .DLL.

How does one strike a balance then? Take a look at the New York Times Reader built in WPF, this by far is a perfect example of a RIA. It basically connects to a remote location, downloads the latest news articles, saves them as XML packets on a person's hard drive and then is indexed by Windows Vista. If you were to go to your Start -> Start Search, type in say "IRAQ" you'd get all news articles relating to IRAQ. If you then click on the article in question, up comes the story inside the WPF Reader in full view and within context.

This is what the next evolution in RIA Designers/Developers will have to think about, how does one produce a high-end user experience to end users whilst allowing them to hunt for information of interest via search engines. I think the WPF Reader methodology is one of many correct ones to use, and this is realistically where deep linking plays a role.

This all being said, we now need more RIA Architects, as the developer & designer base can do the between bits, but it's important to have an architect whom can see the overall vision end to end.

Here's some good reading on this, and interesting thought process around these:

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.

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.

I predicted Microsoft Surface in September 2005

scbarnes — Thu, 31 May 2007 15:40:37 GMT

It was 29th September 2005, I posted on my old blog "AJAX is a one trick poney" (yes, it should be pony). Inside my rant you'll find the following snippet

"..Content is king, and always will be but how does one access the content, thats the key deciding principal. Its now about User Experience and less about complexity. We tried our hand at "functional" large systems that had poor usability, it fails and the reason is people just dont want to keep flogging that dead horse. They need perception upgrades, they need a virtual medium in which they can access software through a rapid response...we want the Minority Report style UI, where we place gloves on and simply sort through UI as we need it... yet the scarey part right now is, you could get very close to emulating that with FLASH 8 .... Through Video and motion detection you can play games like "Ping Pong"... Imagine the ability to move data around through hand movements... now..how does AJAX play a role again? .."
[ Continue Reading via old blog ]

Fast forward and what is it I see in my beloved Microsoft employer, our new and greatest toy, Microsoft Surface.

At present it's current demo is about how people can split the bill for dinner, mobile phones spewing out contact details within and so on. I look at this and wonder where it could go to next, provided it's affordable to the average consumer. One internal staffer joked today that it now gives him the finishing pieces he needs for his fridge, as combine RFID products with this and life gets interesting.

Given that it uses some serious brain powered pattern recognition thingy to identify objects that are placed on it, who's to say it doesn't go to the next level with life science? In that could Hollywood actually be real now? where I place my palm on the desktop surface and it creates a diet based on my cholesterol level using WPF (sorry, I blacked out there from the excitement rushing to my head).

Life Science should get behind this, as imagine researches combing their way through gene pools looking for something that stands out that shouldn't and so on.

Data Mining, just like in minority report, allow consumers to pick their way through web pages, images, videos - new media - the works looking for that topic or visual bubble gum for the brain somewhere out there in the interweb.

What powers this thing? WPF?, Flash?, Silverlight? you know what, who cares other then the developers as once this becomes accessible to people around the world, old Apollo / Google's Gears may need to pickup the slack a little more is all I'm saying.

This is the overall meaning folks about "Channel Delivery" when it comes to Microsoft, to think that all this power under the XAML hood is only reserved to Internet Explorer and Windows Vista Desktops is well, misinformed?. Combine the Nintendo WII, Microsoft Surface, XBOX 360 and all other devices that aren't PC and you'll start to see an emerging pattern - humans are being put into contact with digital code through "hands on user experience".

That in lies the lesson for today from the chaotic mind of Scott, Microsoft is really serious about this User Experience thingy that everyone keeps talking about.

Ok, I didn't predict Microsoft Surface itself, but the hands one experience thing and read the comments, people were against it! (hah! who's laughing now punks!) hehe.

I Love my Silverlight: MossyVideo Player

scbarnes — Wed, 23 May 2007 10:26:25 GMT

Since I have a lot of time on my hands at the moment, due to a foot injury (I had my big toe's toenail ripped off), I decided to go nuts with a project I'm working on, called MossyVideo Player System Thingy which is built in Silverlight.

Fig 1.0 (The Design in its early stages, it starts with the orb of power and grows outward)

This project is got a lot of goodness associated about it and here's what I expect to deliver to the big world wide interweb post it's release.

Video Diaries. Every step of the way, I decided what better way to describe to the world my process and approach to this project, then to simply create some video diaries of my journey. Starting from Day 0 you're going to see a segment on my pain that which is installing Adobe CS3 Web Premier (that was a lot of fun with Windows Vista). I'm also going to edit the video and use it as the first demo reel for the player (what better way to dog food it).
ASP.NET AJAX ToolKit. We hear all this way to often with Silverlight, in that it's been stated that it's a natural progression from HTML/AJAX world to the next evolution step. I plan on proving this by showing how Silverlight + Video + AJAX can play a role with one another.
Something New, Something Borrowed & Something Blue. I've got a nice idea of how to involve some existing Web 2.0 API's with this project, can't tell you now as it's a secret surprise. Suffice to say, it may involve PopFly.ms - it may not - who's to tell.
The Adobe Killer. I'm so tired of these rants as of late, so through-out you're going to see me refer to the "Zealots", these are folks whom believe in the theory that Silverlight vs Adobe is going to be a Zero Sum Game. I plan to illustrate to one and all it's about choice, it's about blending the pieces together to create, innovate and design as best I can (e.g. I am using Adobe CS3 for part of the artwork! as well as Expression Design - I can hear a few people hit the floor in shock)
It's new to me. Yes, I have spent many nights tinkering with Silverlight, and I'll be pushing everything I know about it to the max. I'm in constant chatter between folks internally and externally whom are helping in a number of ways with some of my questions, recently around Effects such as Blur inside Silverlight. More on that another time (heheh).
Code examples. Once this is done, I hope to put this onto Codeplex.com for one and all to pick over, steal, laugh at you name it you get it.
It's about the Journey. Lastly, it's about understanding the overall experience it took from having an idea in a shower one day (which is my best source of inspiration) through to building. It's also most important of all, showing that playing with Silverlight (even in Alpha) doesn't have to be this serious religious battle that appears to flow online, lighten up folks, it's a new toy! so play!

Microsoft AIRLIFT 07 (Live.com Debrief)

scbarnes — Sun, 29 Apr 2007 03:30:14 GMT

I can't say much about much about what took place in an internal debrief around Live.com and Spaces.com. I have to watch my wording here as I could get into trouble for letting things slip, suffice to say I can talk about what's public today.

Live.com exists, it's got a lot of already established goodness on the table and what most of you see via dev.live.com has gotten better, and one day in the near future you'll see more and more additions to this approach taken by Microsoft.

At first when I heard Microsoft was heading into Web 2.0 space with Live.com, I must admit I rolled my eyes and simply "nodded" and smiled. I was an idiot, as once you look at ASP.NET + AJAX Toolkit and then think some more around Web 2.0, you don't have to be smart before you realize that these folks may know a thing or two about empowering users of all walks of life (coders, designers etc) to create their own Web 2.0 pieces.

I urge you all, whom play with the Web 2.0 concepts and AJAX for that matter, to take a look at dev.live.com and download Visual Studio Web Express (Free, as in Beer) with ASP AJAX Toolkit and start learning now.

As from what I just saw in the past three days, I can only give a strong thumbs up.

So far these are some of the pieces available today around Live.com

Windows Live Call for Free

Windows Live Custom Domains

Windows Live Dev

Windows Live Expo

Windows Live Favorites

Windows Live Mail desktop

Windows Live Mail for mobile

Windows Live Messenger

Windows Live Messenger for mobile

Windows Live Mobile

Windows Live OneCare

Windows Live OneCare Family Safety

Windows Live OneCare Safety Scanner

Windows Live Product Upload

Windows Live Publishing Portal

Windows Live Shopping

Windows Live Spaces

Windows Live Toolbar and Desktop Search

Windows Live Web Search

Windows Live Writer

I also have uploaded some Photos of my AIRLIFT07 Seattle adventures, so if you have time to kill check them out. Also keep http://blogs.msdn.com/klevy/ blog in your RSS watch list as he has the inside scoop around what MIX07 will have in stock.

Silverlight + AJAX eh?

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

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

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

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