Jose Fajardo

Monday April 14, 2008

My "Digg Mashup" that taught me so much about Silverlight 2.0 beta - part 1

Ok over the next couple of post's I'm going to walk through my Digg mashup that I built with Silverlight 2.0 beta.

The mashup began by me wanting to create a feed reader type of application end-to-end with Silverlight. Basically I wanted to see if Silverlight could handle a real RIA situation.

I wanted to utilize a lot of features in Silverlight that I knew would be required for any type of business RIA. I also wanted to go wild with the UI and test out just how flexible XAML was.

Here is a screen shot of my DIGG mashup! (the demo site link can be found at the bottom of this post)

 

User Interface and User Experience

 

Let me walk through some of the major components of the UI, this brief run through will be very high level and I will go into a much lower level definition in future posts.

1. Rich Extra's button - basically I try to persist the Digg stories locally in the Isolated Storage, much like an offline type of scenario. I try to mask this fact from the end user "Activate Rich Extra's" :). Increasing the Isolated storage needs to be an end user initiated thing hence why there's a button that they need to press. The actual button is a Silverlight Button that is skinned with a pure xaml asset. I love this button, it screams "Press Me" :)

2. Top Menu - I have a library of controls that I've built over time and a set of these controls mimics the Apple web site look and feel, it's in my blog under "A beautiful web site". These set of controls I've recently re-written for Silverlight 2.0 beta and will release very soon. Here is a taste of what those components look like. (Apple set 1, Apple set 2, Apple set 3). I leveraged the apple top menu for my mashup, I just changed the gradient background and added a pincer below the menu.I'll go into further detail later on how this all works from a code and blend perspective.

Clicking on "Upcoming" makes a async webservice call to DIGG and pulls back the 40 latest upcoming stories. Clicking on "Popular" pulls back the latest popular stories and clicking on "You" opens up a area where you can customize things about your digg account and configure the application (this part is still work in progress because of limitations in Silverlight that I will outline later in a future post)

3. Search - Again I utilized a control that I built as part of the "A beautiful website" apple like control set. The search is actually a filter of the stories on screen. It doesn't actually make a web service call to Digg, I should change it from search to filter :) too lazy!

4. Refresh Timer - This is a simple control that count's down the time till the RIA automatically refreshes. It use to have an storyboard animation of a rectangle that grew over time BUT that was causing the CPU to max out at 100%, I took it out and am currently investigating why that storyboard is doing that!

 

5. Legend - this is a control that lets you filter the stories based on categories, there are further child categories under each parent BUT that will be part of the next version, this control is getting into the domain of a tree-view style of control so I decided to push that to the next version of my prototyping.

When you hover over them it glows and when you unselect one the colored dot disappears. All this is done using storyboard's and blend so that the designer can 100% control the look and feel of it. This highlights an important lesson learnt in that I went through a lot of refactoring of the code whereby I rewrote alot of components to favour the designer in that I ultimately wanted them to control the UI. It's easy to fall into the habit of creating code to render you UI's BUT the cost is that the designer looses control over the look of that component. The best decision I made regarding this issue was in the next control (5 - views), where by I let the user choose different views of the stories where each view is a usercontrol that the designer can 100% configure.

6. Views - this lets the user choose how the story looks. This is by far the coolest part of the project, it took 3 code rewrites to get it the way I wanted. Basically each view of a story is a usercontrol that the designer has 100% control over. They can make a story look anyway they want and in all honesty this shows just why the future of web applications is Silverlight, because the user experience that it can create is nothing short of amazing.

"Imagine giving an amazing designer 100% freedom over how an application looks and behaves, that's what I'm talking about!"

 

Verbose view:

Condensed view:

News Reader view:

Submitter view:

<

Dated view:

 

7. Actions - this is made up of 2 buttons that perform refreshes and list cleanups. I went wild with skinning a button control because I could :)

8. Story List - I had fun building this. It's a stack panel within a scroll-viewer and I skinned the scroll-viewer to move the vertical scroll-bar to the top of the scroll-viewer and made it horizontal, I also hid the real horizontal scrollbar. This really shows just how powerful the skinning "parts" model of Silverlight is. It's awesome :)

 

 

9. Splash screen - I created a splash screen that isn't plugged in because I can't work out how to get it to work. It's meant to be a very simple animation that runs whilst the initial xap package is downloaded (around 240Kb)

10. Customized Silverlight Install screen - if the user doesn't have Silverlight 2.0 beta then they are directed to my customized Silverlight install screen. I really like this feature because Silverlight allows the designer to have 100% control over the entire user experience!

 

11. Comments - when you click on the orange comments picture it will retrieve the comments from Digg and render them just below the story. I tried to do this in a way that would make reading comments very simple. Again the designer has 100% control of how the comments render, if they wanted to change it's layout etc they could! Wow, talk about power!

 

 

Back end design

 

The back end design is very simple...

 

1. Make a call to Digg via the networking stack

2. Take the response XML from DIGG and store it in the Isolated Storage, make sure that if there is already data in there that we merge the XML's. Basically a very crude persistence database on the client end.

3. Pull the XML from the Isolated-Storage and use it to populate the UI lists.

 

It's a very simple design and the code behind it is very simple, a lot of RIA applications will require some form of client side caching and this is exactly what I wanted to prototype. It works well, even though my code logic may be wrong in some part's overall it demonstrates the ability of Silverlight to achieve this requirement.

 

Where can I play with it or get it

 

Go to my Demonstration Silverlight application here:

  

Source code can be downloaded here, bare in mind it is only a prototype and that a lot of refactoring is still yet to be done : Digg Mashup Code

 

Also if you have time and want to support the proliferation of Silverlight DIGG this article and help get the word out that Silverlight is cool and here to stay :)