Windows Phone App Studio – Part 2 – RSS Reader Fix

Start Using App Studio

If you have not tried the Windows Phone App Studio, you should give it a try. It is a simple online tool that allows anyone to build a Windows Phone app with a few clicks of a button.

It predominantly relies on hooking up RSS Feeds, YouTube channels or seaches, Bing searches and Flickr queries. There are some other features such as adding HTML or a DataCollection to store data, all of which serve its purpose, to have the ability to create a quick and simple app.

In Part 2 we will look into some of the limitations of Windows Phone App Studio and look at a few easy ways to correct them. If you have not looked over Part 1, you can and follow along.

 

 

 

Prerequisites

Beyond the first part of the tutorial series, it is assumed that you are familar with development as well as developing for Windows 8. The following items are needed to follow along with the rest of the series.

Windows 8.1

Visual Studio 2013

Windows Store Developer Account

More information can be found at the getting started page for Windows Store App Development and Windows Phone App Development.

App Studio Limitations

When I started creating a few apps, I found some limitations rather quickly. The first one is on the design side with the set of templates that are provided. There are a few “predefined” templates that will allow you to arrange your content the way you like it. However, if you were adding a Data Collection or an RSS feed/Search and wanted a few more fields that are returned to display on the template, you are out of luck.

The other big limitation is the RSS Feed data source and using WordPress or any blogs that support RSS 2.0.11 with the content:encoded field.

As you can see in the example image, the full “content” or the article of the RSS Feed is never displayed. We are left with the [..] truncating where we should have the full article.

This has to do with the logic of the code and the parsing of the XML document.

There are a few other limitations such as HTML not displaying all of the elements, encoded characters displaying and some others.

We will focus on the RSS feed for part 2.

Fixing RSS

The first thing we need to do is “Generate” our project and download the source code. It does not matter if you download the Windows Phone project or the Windows Phone 8.1 and Windows 8.1 project. To review how to “Generate”, take a look at Part 1 of the Tutorial.

Once downloaded, open the project up in Visual Studio 2013 and you will see all of the files the App Studio generates. There are a lot of things going on in this solution but I am only going to cover a few of them to fix our issues defined above.

visual studio project

First we want to navigate to our AppStudio.Data project and go to DataProviders > RssReaders and open RssReader.cs.

This is where the problem lies with not displaying our content fully.

 

 

 

 

 

RSS Reader  ParseItemSearch for the method ParseItem and we will step through the code.

The first thing it is doing is creating an object of RssSchema. This shcema defined in the DataSchemas folder. We do not need to change anything to that file, however, it probably would be good to look at and make sure it has everything your RSS XML document is returning. For this purpose it is just fine.

The next couple of lines are getting the value for “title” and “link”. The code is using a helper method called GetSafeElementString and returns the value of the XElement.

Issue 1:

The next line is getting the “description” element and storing it in a string. If this string is NULL or Empty then it looks for the “content” element. If not then it moves along and eventually stores the “description” in the rssITem.Content property. This is where the first problem is seen. Chances are “description” will never be NULL and the “decription” will always be stored in the rssItem.Content property. Which is what we might not want.

“Description” is an element of the <item> tag that is defined in the RSS Feed. Description is used for the synopsis of an article/story. As defined by the RSS Board:

An item MAY contain the following child elements: authorcategory,
commentsdescriptionenclosure,
guidlinkpubDatesource and title. All of these elements are OPTIONAL but an item MUST contain either a title or description.

If the publisher chooses to use “description” as a synopis or summary, then the code that is will NEVER allow the full article to be shown. We will put in a fix that will work no matter what and use the properties in the RSS Schema correctly.

Issue 2:

The other problem is if the “description” is NULL or Empty, the content element is then searched to find the full article. The problem here is it is not found when parsing through the XML. The reason it is not found is due to the namespace that is specified for the content element. T

The “content” element is actually in the namespace http://purl.org/rss/1.0/modules/content/ and is returned via “content:encoded”. Most WordPress blogs use the “description” as a summary and “content” as the full blog post. If we keep the code as is, we will never get the full article.

While we are here, you can see line where it is truncating at 500 characters for the summary. If you want to change that to be more or less, feel free.

The Fix

How do we fix this? Simple, lets rewrite the code but in reverse order to take account of both elements.

The RSS Board states the following:

When an item contains both elements (description and content), six of the eight aggregators display content:encoded and ignore description. FeedDemon displays the element defined last within the item element and Firefox 2.0 doesn’t support descriptions.

Publishers who don’t want to employ item summaries in their feeds SHOULD use the description element for an item’s full content rather than content:encoded because it has the widest support.

Publishers who employ summaries SHOULD store the summary in description and the full content in content:encoded, ordering description first within the item. On items with no summary, the full content SHOULD be stored in description.

It sounds like “description” is the standard for full articles, however, WordPress blogs use description as summary and content as full article. I will try to structure it that the code will work with both.

I am first going to get the content element. Getting the content first allows me to check to see if I have a full article or not and my fallback would be to use description as the content. I mentioned above that parsing content usually returns NULL, that is becuase there is no namespace to help the parser. I will now pass the proper namespace for the content element and look for the “encoded” attribute instead. This now returns the full content.

The next step is to get the “content” element to determine if there is anything in there.

We did not dive deep into the method GetSafeElementString but basically you can pass in an element name and it uses the default namespace to traverse and find the element specified. In our case for content, it is not part of the default namespace. I am passing it in. We will clean that up later.

I will now check to see if any content was returned using the namespace. If there is nothing returned, I will fallback and look for the content element without the namespace.

It still might be empty, which is completely normal for some RSS feeds (as stated above) so I will now go look for description. Descriptions are usually there so I won’t perform any checks on that. I could but if there is no content and no description then most likely you have an app that nobody would want or an RSS feed that you should not be using.

The next line performs a check on the content variable to see if it is NULL or Empty. Then it sanitizes the string to use and sets the rssItem.Content.

This way, if content is NOT NULL then content is stored otherwise it will use description. Again, description should not be null and if it is, I would reccommend trying an different RSS Feed.

The last 2 lines stay the same as the original method, cleaning up any HTML and storing it in the rssITem.Summary.

Whats Next

That is it. Now you have a fully functioning blog reader app.

Visit Part 1 for the Getting Started tutorial.

Part 3 will be focusing on cleaning up the XAML and making it work for your application.

Download RssReader.cs

 

Leave a Comment

(47 Comments)

  • Brad

    Thanks for the explanation! Not showing the full articles is a pain and seems like such a simple fix they could implement. Thanks for showing how we can fix it on our own.

  • Antonio

    not working for me 🙁

    • Joshua Drew

      what part is not working?

  • Sagar

    Thanks Joshua. I downloaded my project source code from the App Studio site but unsure which solution is to be opened i.e. “App” or “AppPhone”. And in any solution if I open I get an error that “AppStudio.Phone.Data\AppStudio.Phone.Data.csproj” & “AppStudio.Phone.UI\AppStudio.Phone.UI.csproj” is incompatible. It would be great if you could shell some light on it. I’m using Visual Studio 2014 pro. Thanks

  • Sagar

    Thanks Joshua. I downloaded my project source code from the App Studio site but unsure which solution is to be opened i.e. “App” or “AppPhone”. And in any solution if I open I get an error that “AppStudio.Phone.Data\AppStudio.Phone.Data.csproj” & “AppStudio.Phone.UI\AppStudio.Phone.UI.csproj” is incompatible. It would be great if you could shell some light on it. I’m using Visual Studio 2014 pro.

    • Joshua Drew

      Can you check to make sure you installed the Windows Phone SDK when you installed Visual Studio. Also – are you on Win 8.1?

  • Sagar

    Hi Joshua. Thanks I didn’t install the SDK @ the time of VS installation. Which I’ve corrected now & can make changes in the App. Also waiting for the next parts of your posts very eagerly.. Any approx dates for them 🙂

  • Joshua Drew

    Soon. 🙂

    • Kale

      How to add notifications my live-tile or push notifier? It´s possible?
      Etc. “2 new articles”

      Thanks! 🙂

      • Joshua Drew

        Great suggestion. I am working on using Azure mobile services and adding JSON feeds. Those will be released hopefully next week. I have been a bit busy. I will look into adding notifications. Ver good suggestion

        • Kale

          Thanks! 🙂

  • Kale

    How to add a time stamp to articles?

    • Joshua Drew

      if you know the binding element you can add that in windows phone app studio OR you can add it to the XAML. take a look at Part 3, it actually shows how to create a date time converter and add the publish date

  • Nathan

    Hi, thanks for your tuto !

    I have an other question, how to display the image ? In my rss (http://lecafedugeek.fr/feed) I have image for the article

    In my application I just have “img” with a link to see the image in the browser..
    Is it possible to display the image in the application directly ?

    Thanks in advance

    • Joshua Drew

      there is a bug in the html text block. if you have a href tag surrounding an image, it strips the image out. no clue why. the html text block is a 3rd party control out on codeplex. I have the source but have not had a chance to see why it is stripping it out. I will either try and fix that or use a different control.

      • Nathan

        Okay, thanks for your answers, now I’m waiting for push notification 😀

      • Nathan

        An other things, is it possible to unlock the numbers of article give by the feed ? (article is in my case)

      • Richard George

        Thanks a lot for the fix, It helped me a lot. Now I need your help to display the images in RSS feeds. (As already asked by “NATHAN”)

      • Adithya

        Which control will display the image instead of img ?

        • Joshua Drew

          Sorry for the delay. I have not been able to look into the code yet on why the control is stripping out the image. However, you can remove any HREF tags from images and it will display. The HTML Text Control is specifically looking for a HREF wrapped around an image and removing the image. Not sure why, maybe to save on request time. Workaround for now.

          • Nathan

            The HREF tag, you speak about this tag on the RSS feed ?

  • Richi_Ric

    Hi there, I’m facing an issue with this fix. Whenever the detail page loads the RSS feeds data it crashes while moving from one page to onother.

  • Richi_Ric

    Hi there, I’m facing an issue with this fix. Whenever the detail page loads the RSS feeds data it crashes while moving from one page to another.

  • Felipe

    Hello, thanks for the fix it works fine with me, except for the images, i cant make it load them can you help me?

  • Richi_Ric

    Okay! I’ve found a way to remove “href” tags from my rss feeds this solved the problem of not showing the images in feeds but now I’m facing a new problem i.e. whenever any image occurs in the feed the texts after that is not shown. :/

    • Joshua Drew

      Are you within the HTML text box control? I am pretty sure that is a 3rd party control that the source is out on codeplex. I will add that to the list to take a look at.

  • Antonio

    Hi Joshua, I can’t get image from Can you help me? Sorry for English and tank you.

    • Antonio

      from enclosure url: “”

  • Isidoros

    Thank you!

  • Roger

    Hello Joshua,
    Not working on my side, Can I send you my app so you can take a look?
    I really appreciated
    Thanks a lot
    Regards

  • Alex

    Hello Joshua,
    I work on mac and I modified the xaml file with netbeans.
    How can upload this file now?
    Thanks
    Alessandro

    • Joshua Drew

      You cannot. The source you downloaded is a Windows app. You will need to utilize Visual Studio 2013 to load the project in and make the changes. Once complete you can compile. You can download Visual Studio 2013 for free. You can also download a trial version of Windows and run that on your Mac using bootcamp or parallels.

  • myhyazid

    Hi Joshua,
    I would like to thanks because it works for my WP8.1 app but unfortunately it does not on Windows 8.1.Did you have any solution to overcome this prob. for Windows 8.1

    • Joshua Drew

      Need to explain a bit more

      • myhyazid

        Hi again, sorry for the late reply.Ok here is the problem.. At first attempt i have try follow your code and steps.It works well on my Lumia.It shows full article but when i try to launch it in my PC it only shows the description of the articles.

  • Patrick Johnson

    The RSSReader.cs file you have for download seems to be missing:
    string id = item.GetSafeElementString(“guid”).Trim();
    if (string.IsNullOrEmpty(id))
    {
    id = item.GetSafeElementString(“id”).Trim();
    if (string.IsNullOrEmpty(id))
    {
    id = rssItem.FeedUrl;
    }
    }
    rssItem.Id = id;

    it excepts on refresh.

    • Joshua Drew

      not 100% sure what you mean re: refresh. I will have to take a look. I think the RSS Reader has been updated via App Studio since my original posting of this article.

      • Patrick Johnson

        Unaltered the AppStudio code will have a refresh menu button in the appbar. When clicked it utilizes the Id property of the class rssItem which is not getting set in the class you put up. I think you may have clipped it from the org file by accident.

        • Patrick Johnson

          Or like you indicated the code base has moved forward since your article.

  • billstamaniac

    I did but it doesn’t work , it doesn’t show me the full rss feed any ideas ?

  • saurabh

    Hi,

    I tried the code for the feeds of MSNBC”

    http://www.msnbc.com/feeds/latest

    It doesn’t work there.

    Any help will be great for that.

    Tnx.

    • Daniel

      Apparently Microsoft modified the RssProvider code, after the publication of this tutorial. I implemented the method in this way, following the concepts of Joshua and got success:

      First Step: Declare namespace:

      //NEW Namespace for
      // see: http://www.rssboard.org/rss-profile#namespace-elements-content-encoded
      private readonly static XNamespace NsConentNamespaceUri = “http://purl.org/rss/1.0/modules/content/”;

      Second Step: Alter the method:

      private static RssSchema ParseItem(XElement item)
      {
      var rssItem = new RssSchema();
      rssItem.Title = Utility.DecodeHtml(item.GetSafeElementString(“title”).Trim());
      rssItem.FeedUrl = item.GetSafeElementString(“link”);

      rssItem.Author = GetItemAuthor(item);

      string description = item.GetSafeElementString(“encoded”, NsConentNamespaceUri);
      if (string.IsNullOrEmpty(description))
      {
      description = item.GetSafeElementString(“content”);
      }

      rssItem.Summary = Utility.DecodeHtml(description).Trim().Truncate(500, true);
      rssItem.Summary = RssHelper.SanitizeString(rssItem.Summary);
      rssItem.Content = string.IsNullOrEmpty(description) ? RssHelper.SanitizeString(description) : RssHelper.SanitizeString(description);

      string id = item.GetSafeElementString(“guid”).Trim();
      if (string.IsNullOrEmpty(id))
      {
      id = item.GetSafeElementString(“id”).Trim();
      if (string.IsNullOrEmpty(id))
      {
      id = rssItem.FeedUrl;
      }
      }
      rssItem.Id = id;

      return rssItem;
      }

      Daniel, from São Paulo, Brasil.

  • Zeeshan Khan

    Hi,

    Its not working at all and secondly when i m trying to refresh the source its take to me to the debug break point.

    Regards

    • Daniel

      Apparently Microsoft modified the RssProvider code, after the publication of this tutorial. I implemented the method in this way, following the concepts of Joshua and got success:

      First Step: Declare namespace:

      //NEW Namespace for
      // see: http://www.rssboard.org/rss-profile#namespace-elements-content-encoded
      private readonly static XNamespace NsConentNamespaceUri = “http://purl.org/rss/1.0/modules/content/”;

      Second Step: Alter the method:

      private static RssSchema ParseItem(XElement item)
      {
      var rssItem = new RssSchema();
      rssItem.Title = Utility.DecodeHtml(item.GetSafeElementString(“title”).Trim());
      rssItem.FeedUrl = item.GetSafeElementString(“link”);

      rssItem.Author = GetItemAuthor(item);

      string description = item.GetSafeElementString(“encoded”, NsConentNamespaceUri);
      if (string.IsNullOrEmpty(description))
      {
      description = item.GetSafeElementString(“content”);
      }

      rssItem.Summary = Utility.DecodeHtml(description).Trim().Truncate(500, true);
      rssItem.Summary = RssHelper.SanitizeString(rssItem.Summary);
      rssItem.Content = string.IsNullOrEmpty(description) ? RssHelper.SanitizeString(description) : RssHelper.SanitizeString(description);

      string id = item.GetSafeElementString(“guid”).Trim();
      if (string.IsNullOrEmpty(id))
      {
      id = item.GetSafeElementString(“id”).Trim();
      if (string.IsNullOrEmpty(id))
      {
      id = rssItem.FeedUrl;
      }
      }
      rssItem.Id = id;

      return rssItem;
      }

      Daniel, from São Paulo, Brasil.

  • Ted

    It doesn’t work on my side either. Built this nice app using AppStudio. It is using description as content :(. I tried all you said. Here is a screenshot : http://i.imgur.com/RSKjg4F.png?1

    • Daniel

      Apparently Microsoft modified the RssProvider code, after the publication of this tutorial. I implemented the method in this way, following the concepts of Joshua and got success:

      First Step: Declare namespace:

      //NEW Namespace for
      // see: http://www.rssboard.org/rss-profile#namespace-elements-content-encoded
      private readonly static XNamespace NsConentNamespaceUri = “http://purl.org/rss/1.0/modules/content/”;

      Second Step: Alter the method:

      private static RssSchema ParseItem(XElement item)
      {
      var rssItem = new RssSchema();
      rssItem.Title = Utility.DecodeHtml(item.GetSafeElementString(“title”).Trim());
      rssItem.FeedUrl = item.GetSafeElementString(“link”);

      rssItem.Author = GetItemAuthor(item);

      string description = item.GetSafeElementString(“encoded”, NsConentNamespaceUri);
      if (string.IsNullOrEmpty(description))
      {
      description = item.GetSafeElementString(“content”);
      }

      rssItem.Summary = Utility.DecodeHtml(description).Trim().Truncate(500, true);
      rssItem.Summary = RssHelper.SanitizeString(rssItem.Summary);
      rssItem.Content = string.IsNullOrEmpty(description) ? RssHelper.SanitizeString(description) : RssHelper.SanitizeString(description);

      string id = item.GetSafeElementString(“guid”).Trim();
      if (string.IsNullOrEmpty(id))
      {
      id = item.GetSafeElementString(“id”).Trim();
      if (string.IsNullOrEmpty(id))
      {
      id = rssItem.FeedUrl;
      }
      }
      rssItem.Id = id;

      return rssItem;
      }

      Daniel, from São Paulo, Brasil.

      • Joshua Drew

        Yes. There has been a few iterations of the Windows Phone App Studio since this was first published. I will try and update at some point. Thanks for posting!

  • Your email address will not be published. Required fields are marked *