Combining Silverlight 4 and Umbraco pt. I: Setting up Umbraco

Hi all, time again to update my blog here with some new stuff regarding Umbraco and Silverlight. I’ve always been fascinated by the possibilities of working with Silverlight and since my first impression of using Umbraco in my online solutions I’ve thought about combining these two powerful tools – even though the man himself, Niels Hartvig doesn’t seem to enjoy the existence of Silverlight ;-)

What got me started on this were the videos from Umbraco.tv about combining Flash and Umbraco: reading and writing data from/to Umbraco. So by any means, go check these out at http://www.umbraco.tv (you’ll need a subscription to view them though) they give you a good idea of what I’m about to babble about.

So what did it take to use Silverlight with Umbraco the way I did it? Basically, three things are needed:

  • Setting up a new site in Umbraco that is supposed to only show XML data to the frontend (more on this later)
  • Setting up a Silverlight navigation application in Visual Studio
  • Creating the WCF services needed to consume data from Umbraco

At first, let’s take a look at the site structure:

As you can see, this site is quite simple since it’s for demonstration purposes. We have our root site “Simple Silverlight website” where the .xap file is hosted, a news section and some regular text pages with the standard text in it. Last, there is a folder called [XML Files] which is placed outside the site itself. This folder should contain documents that outputs XML – in this case, the menu structure of the site.

As you can see, I’ve made an icon to show the Silverlight logo in the content tree and a thumbnail for when creating the document. These can be found here:

http://www.bo-mortensen.dk/silverlight_umbraco_icon.gif

and

http://www.bo-mortensen.dk/silverlight_umbraco_thumbnail.gif

The first 16×16 pixel icon should be placed in /umbraco/images/umbraco and the thumbnail should be placed in /umbraco/images/thumbnails and you’re good to go.

The good thing about this structure is, that you can actually create another site for the non-Silverlight users and copy over the content from the Silverlight site, you simply just switch the template to a regular HTML template on the documents.

The document types I have used are as follows:

I have then created a template for every one of them to be able to output the XML needed to show in the Silverlight application.

To output the XML, I’ve used XSLT files. In this case I have the following XSLT files:

  • XMLGetTextPage – outputs the XML for any of the text pages.
  • XMLListNews – outputs the XML for the list of news, this being “News Item 1, News Item 2 and News Item 3″
  • XMLTopNavitation – self-explanatory: outputs the XML for the top navigation

Let’s have a look at the XMLGetTextPage.xslt at first to get an idea of how to output XML:

Basically, I have the main XML tag called <Content> (could be whatever you decide, really) and the child node called <TextPage>. In this child node I’m setting the attributes I decided to output: id, name, author, createDate and content. More (or less) could, of course, be added if needed. Time to place my XSLT/Macro on the Text Page template:

When you hit save and try to load one of the text pages in a browser it will be blank, but if you go to “View Source” you should see the XML output.

This above example goes for the other XSLT files I have – simply just tell it to output the XML you need and place the macro on the given template.

That’s about it for part one, we’re now ready to consume the XML data with WCF services in our Silverlight project. In the next post I’ll take you through my (very) simple Silverlight application in Visual Studio. Thanks for reading.

This entry was posted in Silverlight, Umbraco CMS. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


six + 2 =