Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Windows js 1
  • Overview
  • Transcript

3.4 Download the Feed

In order to read our feed, we first need to download it. In this lesson, I'll show you how to use a SyndicationClient to download a feed.

3.4 Download the Feed

The next thing our application needs to do is download and process our feed. So that we can then display it. So that's what we are going to start with in this lesson. Let's go to our main JS folder, let's add a new Javascript file. And let's call it syndication JS. Let's start this file with our immediately invoked function, and there's only going to be one thing that we are going to expose out of here. It's going to be a method that we use to start downloading and processing our feed. So let's start with a name space. WinJS.Namespace.define the name of this namespace is going to be Syndication. And this is going to have just a single method. We'll call it getFeedAsync. Now we've seen this pattern used before. Anything that is asynchronous ends with a term Async. That way, whoever is calling the method knows that this is asynchronous, which means that we are working with a promise. Because that is how asynchrony is handled within WinJS applications. So if we say Async, then we know that this is a promise so that comes in handy later on. So getFeedAsync, this is going to be a function that accepts the URL that we want to download. So that is the feed url. So here we are going to return a new winJS.Promise. That is how we create a new promise. And, whenever we create a promise, we want a function that accepts the complete and the error. So that's whenever our operation is completed we can call that complete handler, if there's an error we can call the error Hitler. So, inside this promise, we want to retrieve our feed, and we do that with an object called a syndication client. So let's create a variable called client and we will set that to windows.web.sindication.SyndicationClient and this .SyndicationClient has a method called retrieve feed async so we say client.retrieveFeedAsync. But if we look at there's only one overload of this method. And it accepts an object of type URI. We can not pass just a string url. So we need to create a uri for our url. And that's very simple. We simply new up Windows.Foundation.Uri. And then we pass in that url. So it's an extra step that really we don't need, but it's there, so we have to do it. Now retrieve feed a sync. This is asynchronous, therefore it's a promise which means that we can say .done. So whenever the client has finished retrieving our feed, then we want to process that feed and that is essentially what we're going to do here. So we would call, complete here but we are going to process the feed because this gives us an object called a syndication feed, and that's a lot like working with an XML document. So, if we wanted to access the title of this feed, we would have to say feed.title.text and we would have to do the same thing for all of the articles within this feed. The article, and the title and the text and we would have to do something similar to access the body. So we're going to write a couple of classes that simplify this API, because when it comes time to displaying this information, we want to write less code not more. So we'll get to that here in a few moments let's go ahead and finish our call to this done. So if we have our feed than greats we're gonna call complete here but if not then an error occurs. So let's go ahead and write that code we'll simply call error, and we will pass this an object that has a message, and basically we're just gonna say that you were unable to download that URL. So, unable to download, and then URL. This is some type of network related error. It could be that the URL was incorrect, it could be that the server was inaccessible. There's a variety of things that could go wrong here, so we just want to have a simple, generic message. And then we need another closing curly brace, another closing parenthesis and a semicolon. Okay, so for our completion, we are going to write two classes, one for the feed and then one for the article. So let's start with the feed. Class Feed and we are going to have a constructor htat accepts one of these indication feeds, so let's just call that feed. And we might want access to the actual underlying feed later on. So let's create a property called feed and we will set that equal to feed. Then we can say this.title = feed.title.text. Now there could also not be a title, so let's do this, we will check to see if there is a title. And if so, then we will get the text otherwise the title is just going to be an empty string. And then we want our articles, so we'll say this.articles equals an array and then we will populate that array by processing all of our articles. So let's have a method that we will call this._processArticles. Now we could be actually using privacy here. We could create a symbol for this method and that would actually be wonderful. Because this is a method that really shouldn't be accessible outside of this class. Let's just go ahead and do it more correctly. So let's create a symbol. Let's say processArticles, and this is going to be a symbol. And then, instead of this._processArticles, we'll say this, and then we will use that symbol, and we will call that method. So, for all intents and purposes, we have a private method here that is not accessible outside of the class of feed. Or actually, it's not accessible outside of this immediately invoked function. So we need to define that method, so once again, we are going to use our symbol there and then the method is going to be pretty simple. We're going to need a reference to this objects. So we'll do the normal that = this and then we'll say this.feed.items. We want to loop over all of these items, so we're going to use forEach and each item and we want to create an article around this item. So we'll say that.articles.push and we will new up the Article constructor which we haven't created yet. But we will, because this is pretty much all that we need to do for our feed class. So basically, we're just making it easier to access our title. We're also going to make it easier to access the individual articles. So let's write our article class and it's going to be somewhat similar. Our constructor is going to accept the item that this article represents. We have a title property which is going to be the exact same type of logic that we used in the feed class. So let's just copy that and paste it. Because it's the same thing. If we have a title then we want to get the text of that title, otherwise the title is going to be an empty string. And then we also need the body of the article. So we have this content property on the syndication feed although this is syndication feed item or something along those lines. We have content but it's possible that we actually don't have any content. So we want to check if we do and if so then we will get to the text of that content. Otherwise we will get the text of the summary. So we'll say summary.text and that's basically it for the article class. So to recap, we have two classes that make it easier to get to the pieces of the information that we need from the feed and the articles in that feed. So for the feed class, we have a title property which gives the title or an empty string based upon if we have a title or not. It also gives us access to the articles and we process those articles with a private method. So the article is processed just essentially with this article class. And we do kinda the same thing, we get the title of the item, although not so, we just copied and pasted that without changing it. So we get the title of the item In the same way that we did with the feed, we check to see if there is a title. If so we get its text and for the body of the article we check if there's content. If there is we get its text otherwise we get the text of the summary. But then we have a method that kick starts all of this called getFeedAsync, and we call this passing in the URL of the feed that we want to retrieve. This returns a promise so that we can call get feed async and after it is done processing, then we can display the articles or the list of articles in our application. So let's go ahead and let's open up the default html because we need to add a reference to this file. And we can do that before default.js. So let's say script src="js/synducation.js. And let's also go to our news page. Right now, we just have an html. But let's go ahead and let's add a JavaScript file because we need to set this up as a page control as well. Just like we did with syndication, for subscriptions I mean. So, let's add a new JavaScript file called news.JS. It's going to be somewhat similar to subscriptions JS, at least as far as defining this control, so let's copy this and use this as a basis for news. We will of course need to change this from Application.navigator.home, that is the URL for our news page. We don't need the feed URL. We don't need the page. We do need this ready method. Because that is where we are going to make our call to the get feed async method. Let's first of all check to see if we have a feed. And if we don't then we are going to navigate back to the subscriptions page. Now I know that we are doing this whenever our application launches but it's also a good idea to do it here, just in case. So we need our navigation. Lets go ahead and create a shortcut to WinJS.Navigation. And then here we'll say Nav.Navigate and we will go to Application.navigator.subscriptions. And that will take care of that. But if we do have a feed, then we want to download that feed. So then we will say Syndication.getFeedAsync. We pass in the URL that we have that is Data.feed.feedUrl and this is a promise, so whenever it's done we will have a feed object that we can then display within the page. And that is what we will do in the next lesson. We're going to add a control to our news html file, that we are then going to bind to the articles. So the only thing we're going to have to write are a few lines of html, a couple of lines of javascript and then our news page is going to be completely populated.

Back to the top