4Blogging Research – Silverlight Navigation

For Silverlight to be effective as a blog engine the navigation needs to be tightly integrated into the browser. Each blog post will be using the same xaml control but needs to be able to have a unique url in the browser to enable users to bookmark pages. For general use the browser back and forward buttons need to be supported to meet non technical users expectations. Below are documented the steps to create and test this functionality.

Prerequisites:

Steps:

  • Open Visual Studio 2010
  • File > New > Project
  • Installed Templates > Visual C# > Silverlight > Silverlight Navigation Application
  • Enter a name for the application and select a location and click OK
  • Accept the defaults for creating the Silverlight.Web project by clicking Ok
  • Press F5 to run and debug the initial project
  • A browser should open with the image below (or something very similar)

 

The site displayed already has two navigation pages (home and about) available and we can see by the url there is a reference to the current page (home) see below:

http://localhost:[port]/NavigationApplicationTestPage.aspx#/Home

Clicking the about button changes the end of this URL from Home to About

This already means we are part way to meeting at least one of the required criteria to bookmark pages and clicking the back button returns to the home page which checks another item off the list. The next step is to determine if the same xaml control can receive and process multiple URL’s for example:

http://localhost:[port]/NavigationApplicationTestPage.aspx#/BlogPost/?id=MyPostTitle1

http://localhost:[port]/NavigationApplicationTestPage.aspx#/BlogPost/?id=MyPostTitle2

Both links need to be processed by BlogPost.xaml

Steps:

 

  • On the Navigation Application project right click the Views folder > Add Item
  • Select Silverlight Page give it a name such as BlogPost.xaml and click OK
  • Add a textblock to the new page and add the x:Name attribute and call it Title
  • Go to the code behind and in the OnNavigatedTo event set the Text property of Title to the NavigationEventArgs.Uri property e.Uri.ToString()
  • This will display the path passed to the page and if it supports additional parameters to make it unique such as an id
  • Open MainPage.xaml and locate the Home and About HyperlinkButton controls
  • Copy one of the controls modify the Content to a unique name and the NavigateUri as shown below:
  • /[YourPageName]?id=1
  • Repeat and give and id of 2

 

Now press F5 to run and debug

If all has gone well the application will open again with two new buttons, clicking one of the buttons should update the Url to the new page and the path should be displayed in the application. This demonstrates that the page can be aware of additional identifiers and bookmarked with a parameter identifying a blog post.

This may not be the way the navigation is finally implemented but it proves that the concept is sound and can be executed. The code for this example can be downloaded from the 4Blogging CodePlex website.

http://4blogging.codeplex.com/SourceControl/list/changesets

 

4Blogging Architecture – First Draft

Proposed Technical Architecture

UI – Silverlight 4 – The point of the exercise is to learn Silverlight 4 so this is the only option.

Services – WCF RIA Services – These have been specifically designed with Silverlight in mind and reduce the development time so currently appear to be the best option.

Database – SQL Server – This will be the choice for the initial build but the solution as a whole will be designed to support other options if possible.

Data Access – Entity Framework – Supports SQL Server and unlike Linq to SQL other database support is available so has been selected for flexibility.

Caching – Enterprise Library 5.0 – Reduce round trips to the database where possible by caching display data where possible. There may be other areas of the library that are of use, this will be investigated in more detail in a later post.

This is only the first cut for technologies and each will be examined in more detail as the 4Blogging project progresses.

4Blogging Requirements Part Two – Posts

This is the initial set of requirements for individual posts.

Text Editing – Rich editing of posts supporting font face, size color, bold etc.

Image – Embedding of local and hosted images.

Code Blocks – Ability to add formatted code blocks with copy to clipboard functionality.

Comments – Post comments threaded and organised like conversations. Plugin support for external comment hosting such as Disqus.

Provided in an easy to use familiar format similar to HTML rich text boxes or MS Word.

4Blogging Requirements Part One – Site

Site Requirements

Hosting single multiple blogs – Site should be able to manage either a single blog or multiple blogs and default to a different home page according to needs.

Security – Site should manage single/multiple users per blog as well as overall administration of site. Self registration for site users including automated email account validation.

Tag Cloud – Auto generated based on blog content, needs to support per blog and per site.

Categories – Posts should support categories.

Series – Ability to create a series of blog posts with each post displaying navigation to all other posts in the series.

Social Networking – Plugin framework to support social networks such as Facebook, Twitter, StumbleUpon etc.

External Image Hosting Part 2 – To reduce bandwidth costs, plugin framework to support third party image hosting such as Flickr.

Navigation Bookmarking – Utilise the new Silverlight 4 navigation to enable bookmarking of pages.

Syndication – Plugin framework to support RSS, Atom feeds etc.

Ad Support – Plugin framework to support Google/Amazon ads to generate revenue.

Statistics – Logging of visitors locations, time spent on pages etc.

This is the first draft of requirements all of which are currently subject to change and will need to be investigated in more detail.

4Blogging Quality Tools

All code written for the 4Blogging engine will be written in compliance with existing standards. I have a fairly standard set of tools to this end listed below:

StyleCop http://stylecop.codeplex.com/ Ensures consistent look and feel of code layout

GhostDoc http://submain.com/products/ghostdoc.aspx Excellent auto-commenting tool

Code Analysis out the box and ready to go in Visual Studio 2010

I will add details of further tools as I need and test them.

4Blogging CodePlex Site Created

For anyone wishing to follow the project and/or download source code/compiled binaries the CodePlex site has now been created. There are currently no downloads available as I am still in the planning phase but as soon as code starts to emerge it will be published. All code written will be open source and can be freely distributed, the CodePlex project can be found:

http://4blogging.codeplex.com/

As a first time user of CodePlex I am impressed with the ease and speed of setup and TFS support which will hopefully help my development run smoothly.