Codeproject Windows Phone Application

• Download Windows_phone7_emulator_screenshots.zip - 416.24 KB
• Download CodeprojectPhoneApp source code - 47.24 KB
• Download CodeprojectPhoneApp_xap.zip - 196.61 KB

Introduction

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: http://www.microsoft.com/visualstudio/en-us/products/2010-editions/windows-phone-developer-tools.

Motivation

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 anwser.

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. If I get good response I will give a try on Android too.

Emulator screenshots

Before proceeding into internals let's visualize how this app looks like on emulator (the same is provided as an attachment for download).

Fig 1: The application screen

Fig 2: Codeproject Home in portrait mode

Fig 3: Codeproject Home in landscape mode

Fig 4: Fetched latest MFC/C++ content in portrait mode

Fig 5: Fetched latest MFC/C++ content in landscape mode

Fig 6: Article view in portrait mode

Aren't these images great. Hope by now you all are convinced that it is really cool to have an app like this.

Organization of the code and pages

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
 WindowsPhone.Helpers.RssService.GetRssItems(
                             PhoneApplicationService.Current.State["RSSFeed"].ToString(),
                             (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.

Now when some one clicks the hyperlink button the respective page will be navigated automatically in the browser. But say if any user clicks another link in this web page and then if he wants to come back to the first page he can not do by clicking the phone's hardware back button (this will take him to the ArticleView.xaml page but not to the first page).
This is very much annoying and after much searching I decided to have a new xaml page with a browser control. The back and forward operations are handled in this page to give nice user experience. All the visited web pages are stored in a list named URLHistoryStack to facilitate circling around them.

At the initial click of the hyperlink the respective url is passed to Browser.xaml (which is having a browser control webBrowser1) as value with 'SelectedArticle' as key and in OnNavigatedTo event of this page the url is retrieved and set to webBrowser1.

protected override void OnNavigatedTo(NavigationEventArgs e)
{ 
   string uri = "";
   if (NavigationContext.QueryString.TryGetValue("SelectedArticle", out uri))
   { 
      webBrowser1.Navigate(new Uri(uri, UriKind.Absolute)); // set the intial click url
   } 
}

When the user navigates to webBrowser1 of Browser.xaml initially by clicking the ArticleView listbox's hyperlink button then we have to clear all the old history and add this a fresh.

private void webBrowser1_Navigated(object sender,
                                   System.Windows.Navigation.NavigationEventArgs e)
{ 
   if (this.webBrowser1.Source != null && !this.IsNavigationButtonClicked)
   { 
     if (PositionIndex == 0)
     { 
        // This is the first page, so clear the old history if any and add this a fresh
        string firstURL = this.URLHistoryStack[0];
        this.URLHistoryStack.Clear();
        this.URLHistoryStack.Add(firstURL);
      }
     // Add this url to the history and increment the index
     this.URLHistoryStack.Add(this.webBrowser1.Source.ToString());
     PositionIndex++;
  }
  this.IsNavigationButtonClicked = false;
}

To facilitate the movement between web pages in the way I described, two new buttons are added and their click is handled to update the history stack

// Handling back button click
private void Button_Click_Backward(object sender, RoutedEventArgs e)
{ 
   if (PositionIndex <= 0)
   { 
     // He came to the first page and may be wants to go back to ArticleView
     NavigationService.Navigate(new Uri("/views/ArticleView.xaml", UriKind.Relative));
   } 
   else
   { 
     // Add this url to the history and decrement the index
     this.IsNavigationButtonClicked = true;
     this.webBrowser1.Navigate(new Uri(this.URLHistoryStack[PositionIndex - 1].
                                                                     ToString()));
     PositionIndex--;
   }
} 

// Handling forward button click
private void Button_Click_Forward(object sender, RoutedEventArgs e)
{ 
   if (this.URLHistoryStack.Count > PositionIndex + 1)
   { 
     // Add this url to the history and increment the index
     this.IsNavigationButtonClicked = true;
     this.webBrowser1.Navigate(new Uri(this.URLHistoryStack[PositionIndex + 1]
                                                                  .ToString()));
     PositionIndex++;
   }
}

Another set of buttons are provided in this page to go back to the Article view or to the home page.Now when an user comes back to Articleview page we will not have the original RSS feed used to populate this page. So to handle this the RSS feed is stored as application state data.

 PhoneApplicationService.Current.State["RSSFeed"] = strTemp;

// Note how the RSS data is stored as application data with RSSFeed as key.   
 

Epilog and Points of Interest

As I am just crawling in to the world of Windows phone development, I neither have the experience or expertise to develop a professional mobile app. I know that the application is naive, but makes the reader familiar with few concepts like accessing RSS feed in Windows Phone, using the application state data, creating image buttons, making buttons round etc.

I want to do many more things in this application like:

1. Let the user customize/pick the RSS feeds he wants to monitor.

2. Provide him the option to login into his account (currently I don't know how to achieve this in app).

3. Make controls properly align in Landscape mode and improve their look and feel.

4. Allow the users to bookmark items and pop up alert when these are updated (in a proper way, else we may be consuming phone resources too much and the users may not appreciate it).

And many more. I feel that to do few things (like providing login support) we need data/help from the CP site - Hope Chris Maunder (CP site Admin) & Sean (CP site content Manager) are interested in providing them.

I would like interested amateurs to make appropriate changes for better viewer experience.

Thanks for peeking through this article and hope that you would appreciate this little effort of mine.

External References

1. http://www.codeproject.com/Articles/153472/Reading-RSS-items-on-Windows-Phone-7
2. http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/
3. http://microsoftfeed.com/2011/how-to-convert-an-image-into-a-button-control-in-windows-
phone-7/
4. http://msdn.microsoft.com/en-us/library/ff817008%28v=vs.92%29.aspx
5. http://www.kunal-chowdhury.com/2011/06/windows-phone-7-mango-tutorial-11.html

Acknowledgments

Thanks to Sifayideen for his help in creating the XAML files.

History

1^st February 2012: Added this article
20^th February 2012: Added xap file for download