A [WP7] Code Project for CodeProject


Today's Mobile Monday project is a example that Windows Phone app's don't have to be hard or complex. It also lets us browse one of our favorite code sites, CodeProject, on one of our favorite devices to developer for...

Codeproject Windows Phone Application


This article tries to build an application (though naive) for accessing Codeproject on Windows phone 7 mobile. The RSS feed supplied by Codeproject is utilized to update the content in the application. I have shamelessly utilized the utility classes written by Arik Poznanski (mentioned in the article “Reading RSS items on Windows Phone 7”) to read the RSS feed.

The source code provided requires VS2010, Windows Phone SDK 7.0 for compiling and Windows phone emulator for simulation purpose. I have utilized MS Expression blend for creating XAML files. If you want to get your hands dirty these are available at: https://www.microsoft.com/visualstudio/en-us/products/2010-editions/windows-phone-developer-tools.


Codeproject have over 8 million users and the count is increasing at a rapid rate. Many turn to this site to keep up with the ever changing world of software development. And for many more this is the entry point for mastering new concepts, technologies and frameworks. The Q&A section which is most lively helps many to unwind their day to day coding problems and in many cases the seeker never waits for more than 5 minutes (of course if posted in correct way and with correct sense) to get the answer.

It saddened me a bit to know that a wonderful thing of this kind is not having a mobile application (at least I haven't came across any). And the need to have one is itself open to argument.
Currently Codeproject has a mobile website where many features are trimmed compared to the traditional desktop website. However a link is provided to access the full site. This is a strategy followed by many having continuously updating content. But as new features get added to the traditional website the mobile site tends to get left behind forcing the user to click full site option on his/her mobile, thus defeating the concept of having a separate mobile site.

Moreover an app provides a better viewer experience for scanning the same content on a mobile, rather than viewing it on an abridged site. At least I think so. And this motivated me to give a shot at developing this mobile application.

Putting all these aside isn’t it cool to have our own mobile application?

I choose to develop app on windows phone as it is having pretty good development tools and moreover I am comfortable in working with Visual studio.



Here's a snap of the Solution;


Organization of the code and pages

Now let's see how the pages are organized and connected.

The MainPage.xaml holds the UI to populate the home screen of the app (as shown in fig.2). If you parse this xaml you may be wondering why each button is wrapped with a border. This border is actually required to make the button corners round. As there is no way to set corner radius to a button I used a border and set it's CornerRadius property to get the feel of a round button.

The button clicks are handled in the code and depending on the button we will fetch the appropriate RSS from the _RSSFeed array

// string array to hold RSS feeds url
string[] _RSSFeed = { 
  "http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=1", // All latest content
  "http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=2", // MFC/C++ latest content
  "http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=3", // C# latest content
  "http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=6", // VB latest content
  "http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=4", // ASP latest content
  "http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=18", // Mobile latest content
  "http://www.codeproject.com/webservices/LoungeRss.aspx" // Lounge latest content

Utilizing NavigationService.Navigate method we will then navigate to ArticleView.xaml and this fetched RSS url is passed to ArticleView.xaml as an value with the key 'RSSFeed'

NavigationService.Navigate(new Uri("/views/ArticleView.xaml?RSSFeed=" + 
                             _RSSFeed[(int)RSSCategory.AllArticlesRSS], UriKind.Relative));

In the OnNavigatedTo event of ArticleView this value is retrived back.

protected override void OnNavigatedTo(NavigationEventArgs e)
string strTemp;
    NavigationContext.QueryString.TryGetValue("RSSFeed", out strTemp);    
// ......    
// ......

This RSS feed url is parsed by utilizing helper class RssService and the data is stored in RssItem class. Further this is made as item source to the list box so get the wonderful view as shown in fig.4 and 5.

Details regarding RSS feeds and a way to parse them is better explained in the article 'Reading RSS items on Windows Phone 7'. I do not want to bore the readers by duplicating all that information. One can always refer to this nice article. 

protected override void OnNavigatedTo(NavigationEventArgs e)
   // .....
   // .....

   // Fetch the RSS items using the helper and set this to the listbox controls
                             (items) => { listbox.ItemsSource = items; },
                             (exception) => { MessageBox.Show(exception.Message); }, null );

If you see in the ArticleView.xaml, this listbox is made up of a hyperlink button and two text blocks which are binded to Tittle, PublishedDate and PlainSummary respectively.


So as you can see, this app isn't complex or complicated, there's not a lot of moving parts and that building your own, either for your site or another, it's hard at all.



The Discussion

  • User profile image
    website application

    Thanks for writing such a good post. I do came from web design and web development field including 3D modeling and love to read fresh posts on this topics. Thanks for writing such a valuable and informative post. I am now your regular subscriber

  • User profile image
    Jeff Law

    Sounds great!

    Is the XAP or source-code available somewhere?

  • User profile image
    Jeff Law

    Don't worry - I just found the download :)

  • User profile image

    Looks like somebody didn't even take a second to read what Arturo Toledo tells on his blog (http://ux.artu.tv/?page_id=190) or the whole Metro Design Language is all about.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.