4Blogging – Social Networking – Facebook – Twitter

A key feature in many blogging site is the ability to integrate into social networking sites such as Facebook and Twitter. This blog will detail adding functionality to auto announce new blog posts on these two media channels. If possible this will be later migrated into a plugin framework to allow adding of further social networks using a standard interface.

4Blogging – External Image Hosting – Picasa – Part 2

After an initial exploration into the options for connecting a Silverlight application to a Picasa image library a strategy was formed to retrieve metadata via a WCF RIA Domain service and load the images directly from Picasa. This get round the issue of Silverlight making cross domain calls to third party services without a cross domain policy.

I have prototyped a solution which can be downloaded from the sister codeplex site:

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

This is a very simple project that just demonstrates the possibility of interaction between the two technologies. It is not thorough in quality, validation or error handling. It does however demonstrate calling a Picasa album from Silverlight given a user name and album Id (These need to be replaced in the solution with your own library for it to work). 
As there are no data entities created the return is a list of a custom class which has the requirement to be serializable and have an entity key.

The Silverlight application creates a Domain Service context and Entity Query with the user name and album id and calls a Load Operation on the context and adds an event handler to the callback.

 

            PicasaGoogleContext context = new PicasaGoogleContext();
            EntityQuery<ImageItem> query = context.GetAlbumImagesQuery("user.name""albumid");

            LoadOperation<ImageItem> queryOperation = context.Load(query);
            queryOperation.Completed += new EventHandler(queryOperation_Completed);

 

If the operation has been successful new images are created from the result and added to the StackPanel.

 

            LoadOperation<ImageItem> queryOperation = sender as LoadOperation<ImageItem>;
            if (queryOperation.Error == null)
            {
                foreach (ImageItem img in queryOperation.Entities)
                {
                    Image img1 = new Image();
                    img1.Source = new BitmapImage(new Uri(img.ThumbSmall, UriKind.Absolute));
                    img1.Width = 100;
                    img1.Height = 100;
                    ImageList.Children.Add(img1);
                }
            }

 

The Domain Service makes the call to the Picasa service to retrieve the feed for photo items by user and album. This feed is then used to populate the ImageItem with the thumbnail and full image url as well as the filename. The list of these ImageItems are then returned.

 

            List<ImageItem> images = new List<ImageItem>();

            PicasaService service = new PicasaService("PicasaGoogleImageService");
            PhotoQuery query = new PhotoQuery(PicasaQuery.CreatePicasaUri(user, album));
            PicasaFeed feed = service.Query(query);

            foreach (PicasaEntry entry in feed.Entries)
            {
                ImageItem item = new ImageItem(entry.Title.Text, 
                                                entry.Media.Thumbnails[0].Url, 
                                                entry.Media.Thumbnails[1].Url, 
                                                entry.Media.Thumbnails[2].Url,
                                                entry.Media.Content.Url);

                images.Add(item);
            }

            return images;

 

From an application viewers perspective the Silverlight application loads and the images appear in the application shortly after, this successfully demonstrates the process. Additional features required for a full blown implementation would include security and navigation of albums before reaching an image selection with lightbox functionality when an image is clicked on.

4Blogging – External Image Hosting – Picasa – Part 1

This post will explore the option of hosting images using another provider such as Picasa to reduce hosting bandwidth/storage. The prerequisite is to have and account with a public gallery already set up.

Here we will attempt to link to thumbnails and when clicked on open a lightbox style full image to the user. If successful a standard interface will be created that all third party image hosting modules can be built against as part of the overall plug-in environment that 4Blogging is to support, this will enable developers to build their own plug-ins for providers that are not catered for out of the box.

To start with we will need the Google Data API SDK for .NET this can be downloaded here:

http://code.google.com/apis/picasaweb/code.html

After working through the Google Data/Photo API, Silverlight, JQuery and WCF RIA Services I have come to the following conclusions.

  • Silverlight connecting directly to the Picasa service is not possible as the Google Picasa web would have to have a valid clientaccesspolicy.xml file granting cross domain access.
  • JQuery can be used to call the Picasa service but the communication between Silverlight and JQuery with JQuery making async calls has too much of an overhead.
  • WCF can communicate directly to the Picasa service and stream to Silverlight but this would defeat the object of saving bandwidth.
  • While Silverlight cannot call the service it can display an image from Picasa given the URI.

With these points in mind, in Part 2 of this post, I will prototype a solution that has a WCF RIA service that can be called from Silverlight and returns a list of images within a library that are loaded directly from Picasa. This should minimise the required bandwidth as the images are pulled directly from Picasa and only data is transferred via the service.

The code for this will be posted to the CodePlex site when complete.

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.