RSS Feed Reader Using jFeed and Bootstrap
PUBLISHED
Introduction
RSS (Rich Site Summary) is a popular method of publishing posts in blogs and other websites. Subscribers of RSS feeds are able to receive updated articles and syndicated posts timely. Subscribers need to use RSS readers to receive the feeds from service providers or servers.
RSS is basically an xml file that contains information related to the posts like “Title”, “Date”, “Link”, “Description” etc. RSS-xml file has to follow a specific format set by the board (RSS Advisory Board [4]) that reviewed and set it.
Here’s an example RSS feed:
<?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0"> <channel> <title>RSS Title</title> <description>This is an example of an RSS feed</description> <link>http://www.example.com/main.html</link> <lastBuildDate>Thu, 04 Aug 2016 00:01:00 +0000 </lastBuildDate> <pubDate>Thu, 04 Aug 2016 16:20:00 +0000</pubDate> <ttl>1800</ttl> <item> <title>Example entry</title> <description>Here is some text containing an interesting description.</description> <link>http://www.example.com/blog/post/1</link> <guid isPermaLink="true">7bd204c6-1655-4c27-aeee-53f933c5395f</guid> <pubDate> Thu, 04 Aug 2016 16:20:00 +0000</pubDate> </item> </channel> </rss>
In this tip document, jFeed is used which a java script library that simplifies RSS fetching and parsing. It is supported by most of the web browsers (desktop and mobile) and mobile web apps.
Steps to do
Step 1: Create a new Tizen Web Project from Basic Template. Then add the following JS and CSS files in the “js”, “css” and "fonts" folder in the project:
CSS File: bootstrap.min.css Javascript Files: bootstrap.min.js jquery.js jquery.jfeed.pack.js fonts: glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff glyphicons-halflings-regular.woff2 *All of these files can be found from the following links: http://getbootstrap.com/getting-started/ https://github.com/jfhovinne/jFeed https://code.jquery.com/jquery/ The main.js file is a Tizen project file.
For demo purpose a local xml file is used which is a valid RSS document collected from the Internet. To use any other RSS feed URL, just replace the local RSS url link with the new RSS feed link and add an URL entry in config.xml policy.
Step 2: Then add the following HTML codes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>:
<meta name="description" content="Tizen Mobile Web Demo App" />
<title>Tizen Mobile Web Basic Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.jfeed.pack.js"></script>
<script src="js/main.js"></script>
</head>
<body style="width: 100%;">
<div style="width: 100%;" id="result"></div>
</body>
</html>
Step 3: In “main.js” file add the following codes:
window.onload = function() {
// TODO:: Do your initialization job
// add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
if (e.keyName === "back") {
try {
tizen.application.getCurrentApplication().exit();
} catch (ignore) {}
}
});
jQuery(function() {
jQuery.getFeed({
url: 'rss/sample.xml',
success: function(feed) {
var html = '';
for(var i = 0; i < feed.items.length; i++) {
var item = feed.items[i];
html += '<div class="panel panel-primary">'
+ '<div class="panel-heading">'
+ '<h3 class="panel-title"><span class="glyphicon glyphicon-globe"/> '
+ item.title
+ '</h3>'
+ '</div><!--End panel heading-->'
+ '<div class="panel-body">'
+ item.updated
+ item.description
+ '</div><!--End panel body-->'
+ '<div class="panel-footer">'
+ '<span class="glyphicon glyphicon-eye-open"/> <a href="' + item.link + '">'
+ item.title
+ '</a>'
+ '</div><!--End panel footer-->'
+ '</div><!--End panel primary-->';
}
jQuery('#result').append(html);
}
});
});
};
Here is a little description of what is going on in the code:
a. url: 'rss/sample.xml' is where the RSS url is set. (Please check NOTE1).
Do not forget to add the URL in “config.xml” policy. For better performance please allow subdomain.
b. success: function(feed) {…} is the function where the events after getting the data from the server are handled.
c. In the “for loop” the parsed data is retrieved and decorated with HTML codes and are added to the variable “html”. For a better looking GUI, Bootstrap library is used.
d. In “var item = feed.items[i];” each item in the feed list are stored in “item” variable while running the loop. The loop will run as long as there are RSS items available.
The following items can be found in “var item”:
|
item.type |
item.version |
item.title |
item.link |
|
item.description |
item.language |
item.updated |
item.items: an array of JFeedItem |
e. Finally, “jQuery('#result').append(html);” is used to add the processed html code to the tag with id “result” in the HTML page.
Step 4: Please download the attached code, build and run it. The RSS feed will be shown as screenshots.
Screen shots:
Links for further studies:
[1] http://www.whatisrss.com/
[2] https://github.com/jfhovinne/jFeed
[3] getbootstrap.com/components/
[4] https://en.wikipedia.org/wiki/RSS_Advisory_Board
