The anatomy of the Social Media Dashboard

[This post is a part of a series of post about the Social Media Dashboard Sample. This post was written by Peter Bryntesson. For an introductory blog post, click here]

Introduction

This blog post will try to dissect the code in the Social Media Dashboard sample to get a better understanding of how the different parts relate. We will go into a moderate amount of detail focusing on a key number of areas. It will mostly revolve around the data model that drives the entire UI of the application. To recap, this samples illustrates how you can build an application around a configuration file that populates the data model. In this case we have written a number of connections to various social feeds although the techniques presented can be used in other cases.

10 000 foot View

The code is written in C#/XAML and is divided into three projects:

• SocialMediaDashboard.PCL, which contains common code and data that is used both in the Windows 8 and Windows Phone version.
• SocialMediaDashboard.W8, which contains code specific for the Windows 8 version.
• SocialMediaDashboard.WP, which contains code specific for the Windows Phone version.

All data displayed is contained in the root data object. Visually, the main page is a hub that displays top items for all different social feeds and details pages where individual items is viewed. Data binding is used and asynchronous calls are executed whenever possible. YouYube videos are displayed inside a MediaElement for a more native experience. Search, share and live tiles are supported. Flyouts for About and Privacy Policy are implemented.

The root data object

In both the Windows 8 and Windows Phone Project we have a root data object which is the storage for the content retrieved when parsing the configuration file. In the Windows 8 code it’s called HubDataSource and in the Windows Phone version it’s called MainViewModel. Both these objects essentially contain an observable collection if HubDataGroup objects. The HubDataGroup object is responsible for holding the data for one entry in the configuration file. Mainly it contains two observable collections of HubDataItems (all items and top items) which are the individual items displayed in grids, listview etc. The HubDataItem is a base class for all the specific implementations such as blog entries, tweets, Flickr pictures, YouTube videos etc. This root data object is then used for all the bindings done in the UI.

So the basic startup flow for the program is:

• Show the extended splash screen.
• The extended splash screen reads and parses the JSON configuration file.
• For all feeds, load the external content into the root data object. This is done asynchronously and in parallel to make things as quick and responsible as possible. When everything has loaded we display the main page.

Search

The Social Media Dashboard sample supports search, so every item stored in the root data object can be searched. This is implemented in the HubDataSource, HubDataGroup, HubDataCommon. Here are the different code snippets:

HubDataSource.cs

     public static ObservableCollection<HubDataItem> Search

         (string text)

     {

         ObservableCollection<HubDataItem> foundItems = 

             new ObservableCollection<HubDataItem>();

         foreach (var group in _hubDataSource.AllGroups)

             group.Search(foundItems, text);

         return foundItems;

     }

HubDataGroup.cs

     public void Search

         (ObservableCollection<HubDataItem> foundItems, 

         string text)

     {

         foreach (var item in Items)

         {

             if (item.Contains(text))

                 foundItems.Add(item);

         }

     }

HubDataCommon.cs

     public virtual bool Contains(string text)

     {

         return Title.Contains(text);

     }

Of course, the Contains method is overridden in derived classes to provide context related search. The Search method in HubDataSource returns an observable collection of items that is used for data binding the search results page.

For more information about Portable Class Libraries, click here.

For more information about implementing search, click here.

For more information about how to implement an extended splash screen, click here.

For more information about Windows 8 app development, go here.

For more information about Windows Phone development, go here.