<nick:node> : Code Sample

MSDN Subscriber Evening - Building UX with Silverlight 2

niwong — Tue, 15 Apr 2008 00:26:55 GMT

I did a session last Wednesday (9 Apr) -- introducing our Rich Internet Application technology Silverlight to our MSDN subscribers.

In the session, we re-acquainted with Silverlight 1.0 and its AJAX-like programming model, but dedicated most of the time to introduce Silverlight and the new .NET development paradigm.

I've put the slides from the presentation, as well as the comics-book viewer sample project used for the code walk-through on my SkyDrive and you can find them here.

The sample code demonstrates Silverlight 2 controls (particularly Layout), control data-binding, asynchronous data fetching and LINQ. Much of the work was based off samples by Joe Stegman and Scott Guthrie.

Sample Code: Silverlight 1.0-enabled Quiz

niwong — Fri, 29 Feb 2008 18:43:28 GMT

A Customer who asked if a quiz-type application can be enabled by Silverlight.

The answer is yes (obviously ) and I had to put my rusty coding skills to work over a good part of a Saturday afternoon.

The result is a Silverlight 1.0 proof-of-concept application, which meant adopting an "AJAX-styled" coding model with JavaScript. In fact, just for the heck of it, I wanted to go the full client-only approach which meant no ASP.NET AJAX server-side controls, etc.

The code demos a couple of simple features:

Quiz questions are easily configurable with a XML data file. The Silverlight application accesses the quiz as JSON data with a simple web service. This was simply achieved by first converting the XML data to JSON format at the server-side with XmltoJSON C# code (made available at http://www.phdcc.com/xml2json.htm). To allow the web service to be accessible (invoke-able) by the client JavaScript, I also marking the web service with the System.Web.Script.Services.ScriptService attribute.
An auto timeout (set to 10 seconds) is set for each quiz, this is done with a XAML animation storyboard to mimic a timer. Jesse Liberty details this useful technique in his blog here.
At the client end, I dabbled a little with the JavaScript Prototype library to demonstrate interaction between the Silverlight application and the host browser's DOM.

The application can definitely do with polishing (e.g., with some creative design work, one can imagine fireworks animation when the user gets a correct answer,) but this should serve as a nice simple base for extensions, tearing apart, etc.

Links:

The source code is available for download at my SkyDrive here.
The application can also be viewed online here.

Microsoft Singapore .NET Briefing - Web UX Technologies

niwong — Tue, 12 Feb 2008 23:19:51 GMT

On 30th January, we did the first of a planned series of web-related technology talk events -- this time focusing on Web User Experience (UX). I'd like to thank everyone who attended and stayed back late (we overran by 45 minutes!) I think we had a lively time.

We covered the following in the 3 hour presentation session:

An overview of the spectrum of Microsoft's user experience technologies. This spans from the ubiquitous web-based (such as ASP.NET AJAX) to rich user interfaces leveraging platform capabilities (such as Windows Presentation Foundation, Windows Mobile), and finally to the new class of Rich Internet Applications (enabled by Silverlight.) We also showed (or, in a specific instance, attempted to show ) real-life applications deployed by customers / partners using these technologies.
Jocelyn (our ISV Developer Evangelist) then did a code-talk / demo session on ASP.NET AJAX. Be sure to check out the ASP.NET AJAX Control Toolkit -- you saw how easy it was to add interactivity to ASP.NET web applications!
We had Yong Hwee from patroids creative works who shared first-hand experience on developing their first project on Silverlight.
I then did a code demo on how we actually developed a real-world Silverlight 1.0 application using Visual Studio and JavaScript. Of course, you can also build video-rich application in 7 steps, and no code with Expression Media Encoder.

My presentation decks for the session can be found on my SkyDrive. You can find Jocelyn's presentation deck (Overview of ASP.NET AJAX) here.

I have also uploaded my two slide decks, which can be accessed from the links below:

(I will be sharing the Silverlight demo code as I clean it up for public consumption, so do check back this blog again in a week or so...)

Prelude:

Do keep a look out for the next event entitled "Building Web 2.0 Mash-ups" -- where we will talk and demo building Facebook applications with Visual Studio, creating mash-ups with Windows Live Services, and introduce cool technologies like PopFly, etc.

This scheduled for the evening of 12 March 2008 -- keep it free!

CodeProject Article: Silverlight Controls - The Path to Reusable XAML

niwong — Tue, 25 Dec 2007 04:13:03 GMT

Came across this very nice article by Justin-Josef Angel on the Code Project web site -- Silverlight Controls - The Path to Reusable XAML.

I've been working on a few Silverlight 1.0 projects recently, and a consistent struggle on these has been to maintain data-presentation separation, as well as to adhere to object-oriented principles when dealing with JavaScript and XAML.

This article provides the clearest, most prescriptive guidance I've seen to-date on the use of the JavaScript Prototype pattern to support as "code-behind" for XAML-defined user-interface elements.

Justin-Angel does a code walk-through that refactors Richard Z's JellyBar sample (which emits XAML dynamically in code with JavaScript) into a "One JavaScript class - One XAML file" model. The result, as the author says, is "it's extensible, it's maintainable, it's object oriented."

Also check out the cool trick with with Visual Studio 2008 JavaScript comments syntax in building the "class constructor" function!

To all who celebrate, Merry Christmas!

Technorati Tags: silverlight,javascript

I Want Dinner Now!

niwong — Mon, 05 Feb 2007 18:54:11 GMT

This is it - the "mother of all demos": The demo with EVERYTHING (well, almost... ) - ASP.NET 2.0, ~~Atlas~~ ASP.NET AJAX, all the .NET 3.0 components (Windows CardSpace, Windows Communications Foundation, Windows Workflow Foundation, Windows Presentation Foundation), Windows Live Maps, Vista Sidebar Gadgets, PowerShell, .NET Compact Framework, ....

Click the image on the left to see a demo walkthrough video; then go download the source code from CodePlex.

Now, if we can only tie in an OBA in there somewhere (dinner ordering from Outlook, anyone?) and life will be so sweet!