Overview: SCE Starter Kit Architecture
This document describes the architecture of the application framework provided in the Syndicated Client Experiences (SCE) Starter Kit. This architecture maps relatively well to the Model-View-Controller (MVC) pattern. For simplicity, the three architectural layers will be referred to as Data-View-UI. The diagram below gives a high level overview:
Data
The data layer performs three main functions:
- Expose a data model to the view layer
- Synchronize the in-memory data model with feeds from the web
- Synchronize the local cache with the feeds from the web
<?xml version="1.0" encoding="utf-8">
<rss version="2.0" xmlns:csx=http://schemas.microsoft.com/rss/2007/contentsyncextensions >
<channel>
<title>Example CSX Channel</title>
<link>http://boguslink.com</link>
<description>This is a CSX feed sample</description>
<lastBuildDate>Mon, 2 Oct. 2006 12:35:12</lastBuildDate>
<item>
<title>Another Really Important Headline</title>
<link>http://boguslink.com/stories/lmnop.htm</link>
<description>Another really important</description>
</item>
</channel>
</rss>
The class DataManager exposes the data layer via a collection of methods and properties. From an architectural perspective, the important DataManager components are:
- DataFeedSource
This is an abstract base class which handles requests for data. A subclass, LocalDataFeedSource, fetches these requests from the network and caches them to disk. If a request is made for data that is already in the cache, LocalDataFeedSource serves the request directly from disk rather than going to the network.
- SubscriptionCache
This class performs automated data synchronization between the local cache and the web. It also fires a number of events which allow DataManager to keep its data model in sync as new data is downloaded from the web.
- Editions
This is the topmost data object generated from the synchronized feeds. It is a ReadOnlyCollection of type DataFeedContent. Each edition in this collection is generated from an "EditionFeed" item in the master feed (see the Reader Extensions Data Feed Spec for more details on the feed structure).
- Converters
DataManager requests converters from ServiceProvider.ConverterManager to convert between the XML based feeds and the in-memory data objects. Converters exposed via ConverterManager can be easily overridden to handle custom extensions to the feed format.
View
The view layer is an abstraction between the data layer and UI layer. The ViewManager class encapsulates all the functionality of the view layer. The primary functions of the ViewManager are:
- Expose an object model to the UI
The ViewManager exposes a view of the data that the data layer constructs from the feeds. In some cases, this view may be an unaltered view of the data in the feed. In other cases, the view of the data may be filtered, sorted, or otherwise altered.
- Maintain view state
There is a subset of data which neither the data layer nor the UI layer have a responsibility to maintain. For example, the ViewManager exposes an ActiveStory property which represents the Story currently in view. Events in both the UI layer and the data layer can influence the value of this property (for example, the ActiveStory is deleted from the feed or the user hits the arrow key to go to the next story).
- Expose commands to the UI
The ViewManager exposes a set of commands that the UI layer can bind to. This pattern separates the semantics of an action from its logic and simplifies UI development.
- Provide navigation services
The types of applications created with the starter kit are essentially navigation applications. The ViewManager provides a set of extensible services that enable proxy-based navigation via Navigators defined for various data types.
UI
The UI layer is responsible for all the onscreen interactions between the end-user and the application. Although the exact composition of the UI can vary greatly between applications, the starter kit includes a number of controls created to deliver a rich reading experience. In general, these controls:
- Display data
In conjunction with XAML resources, the controls display data to the end user
- Request data on demand
Controls such as the ImageControl asynchronously fetch data via the DataManager
- Provide application specific behaviors
Rich content applications have unique layout and interaction requirements. For example, the StoryListPresenter control flows story abstracts across disjoint regions.
Principles
Whenever possible, the starter kit adheres to the following design principles:
Asynchronous Fetching
Despite the relative simplicity of synchronous data fetching, user experience suffers when synchronous data operations block the UI thread. For this reason, all data operations in the starter kit occur asynchronously by default. MSDN has more information on asynchronous programming patterns.
Property driven UI
One of the primary architectural philosophies used in creating WPF was a preference for properties over methods or events for driving UI. Properties are declarative and allow you to more easily specify intent instead of action. This also supports a data driven system for displaying user interface content. This philosophy has the intended effect of creating many bindable properties in order to more robustly specify the behavior of an application.
This philosophy was also adopted while building the starter kit. The UI makes extensive use of databinding between controls and the View layer. Ultimately, this model allows for cleaner separation between the UI, View, and Data layers.
Data driven UI
Without a data feed, the starter kit sample application is an empty shell. Nearly all of the UI is driven in some way by the data provided in the feed. By following this pattern, developers can create highly dynamic apps that adapt perfectly to the data provided in the feed.
In the starter kit, the ViewManager class contains several properties which directly expose data objects created from the feed to the UI. In fact, content is displayed in the MainContentFrame by setting the Content property directly to a CLR data object. The visualizations of these objects are given by DataTemplates defined in your application (in the sample application, see BaseResources.xaml).
Commanding
Commanding is an input mechanism in Windows Presentation Foundation (WPF) which provides input handling at a more semantic level than device input. What makes commands different from a simple event handler attached to a button or a timer is that commands separate the semantics of an action from its logic. This allows for multiple and disparate sources to invoke the same command logic, and allows the command logic to be customized for different targets. Like properties, commanding allows for a cleaner separation between application UI and business logic.
Additional Resources
