Sunday, October 03, 2010 11:40 PM
Tanzim Saqib
Creating a News Framework Windows Phone 7 App
UPDATE: for Oct 25, 2010 changes. Full source code is available.
News Framework is a tiny library (DLL) that you can use to build your own Windows Phone 7 application in just minutes especially if you have a news portal and your site exposes RSS data. If you are not sure about News Framework yet, see introductory video here. I have built a fully functioning unofficial Mashable app using this framework which you will find in News Framework codeplex site. You can use that as a template while you build your own.
Step 1: Get the tools
One of the good reasons why everyone can now have his/her own WP7 is that the tools it requires are all free. Download and install the tools from there and News Framework from here: http://newsfx.codeplex.com/ and follow the steps. You will find the simplest form of template application built for you in src\TanzimSaqib.NewsFramework.Demo using News Framework. You can change the namespace, backgrounds and what not to tailor to your needs.
Step 2: Tailor to your needs
Take a look at the app.config file now:
<?xml version="1.0" encoding="utf-8" ?>
<appSettings>
<add name="AppTitle" value="Mashable! Social Media News and Web Tips – The Social Media Guide" />
<add name="AppHomepage" value="http://www.mashable.com" />
<add name="ShareArticleSubjectTemplate" value="Check it out" />
<add name="ShareArticleBodyTemplate" value="Hi, check out this cool article: "{article-title}". URL: {article-url}" />
<add name="DarkThemeBackground" value="/DarkThemeBackground.png" />
<add name="LightThemeBackground" value="/LightThemeBackground.png" />
<add name="PageOrientation" value="Both" /> <!-- Portrait OR Landscape -->
<add name="FeedsPath" value="/Feeds.xml" />
<add name="RssItemCount" value="10" />
<add name="ClearCacheOnStartUp" value="false" />
<add name="Article-View-CSS" value="body { font-size: 14px; }" />
<add name="Article-View-DarkBackground-CSS" value="body { background-color: black; color: white; } a { background-color: white; color: black; }" />
<add name="Article-View-LightBackground-CSS" value="body { background-color: transparent; color: black; }" />
</appSettings>
As you can see, these are the options that you can control from outside of the framework (i.e. your application). The properties are quite self-explanatory and I believe they don’t require to be described in great detail. Many more new settings yet to be added. Now let’s take a look at a piece of code that is mandatory according to the XML format of the RSS that your site exposes. In the constructor of the App (App.xaml.cs) class of your WP7 application, you need to specify how it will find the thumbnail and content tags from the Feed XML.
Fx.Initialize(this, new RssExtendedParser()
{
ThumbnailParser = (item) =>
{
Check.Null(item);
return item.Element(item.GetNamespaceOfPrefix("mash") + "thumbnail")
.Element("img")
.Attribute("src")
.Value;
},
ContentParser = (item) =>
{
Check.Null(item);
return item.Element(item.GetNamespaceOfPrefix("content") + "encoded")
.Value;
}
});
You will have to create an instance of RssExtendedParser which has two properties. Pass two delegates to them to direct how a single RSS item (node) will be handled with respect to the thumbnail and content extraction. We need this because almost all popular news sites expose thumbnails and content with their own namespace. For Mashable it was mash:thumbnail and mash:content. For example:
<mash:thumbnail>
<img src="http://cdn.mashable.com/wp-content/uploads/2010/11/foodwine_ipad_thumb.jpg"
alt="Food & Wine Magazine Serves Up Holiday Treats for the iPad"
class="post_image item" />
</mash:thumbnail>
<content:encoded><![CDATA[<p><div><div
style="float:right;margin-bottom:10px;"><a
target="_blank" href="...">
...
</content:encoded>
Now that the application is ready. It is time to feed the RSS. Open up Data\Feeds.xml and enter URLs to the feeds like the following:
<?xml version="1.0" encoding="utf-8" ?>
<feeds main="http://feeds.mashable.com/Mashable">
<feed title="Social Media Channel"
url="http://feeds.mashable.com/mashable/socialmedia"
subtitle="The latest happenings in social media, plus tips on using Twitter, Facebook, YouTube, Foursquare and more." />
<feed title="Tech Channel"
url="http://feeds.mashable.com/mashable/tech"
subtitle="Gadgets, software, web design, web development, video games and geek culture."/>
<feed title="Business Channel"
url="http://feeds.mashable.com/mashable/business"
subtitle="Small business, advertising and marketing, money and finance, plus careers and business apps."/>
...
...
</feeds>
main attribute of the feeds tag is the feed URL that is being used to render feed items in the main screen as latest, and the feed tags inside feeds are the ones for rendering categories and their respective feed items. Hope this helps you get started with writing your own Windows Phone 7 app using News Framework.