Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

How to display multiple RSS feeds in a Nokia Asha Web App

From Wiki
Jump to: navigation, search

Note.pngNote: This is an entry in the Asha Touch Competition 2012Q3

This article shows how you can extend the SDK RSS app template to display multiple RSS feeds in the one app.

Article Metadata
Code ExampleTested with
Devices(s): Nokia C2-03
Compatibility
Platform(s): Series 40
Series 40
Device(s): All Series 40 Devices
Article
Created: e4studio (30 Jul 2012)
Last edited: pavan.pareta (04 Jun 2013)

Contents

Introduction

The Nokia Web Tools SDK 2.00 (beta) comes with a template app for displaying a single RSS feed. This article explains two methods for extending/using this template to create apps which are capable of displaying more than one RSS feed. The first version displays switches between feeds using a drop down list, while the second displays feeds within separate tabs.

Note.pngNote: This uses default UI templates and does not change the look and feel. As I am a new to programming Nokia Asha Web Apps I'd appreciate any feedback on my implementation.

Drop down list version

The simplest way to add support for more than one feed is to modify the SDK template; adding a selection list and loading the chosen feed in its onchange() function. This is also in many ways a superior UI than the tabbed version used below, as it makes better use of available space. Screenshots of the app are shown below:

To implement this, first open the Nokia Web Tools:

  1. Make a new project, Choose RSS Feed Project as the template.
  2. Fill in the information about your Application (I am using the default RSS Feed address as the first source)
  3. Create the project
  4. Right after the body tag, add the following code :
    <select id="newsSrc" onchange="getRSS('verview','horview',this.value);">
    <option value="http://feeds2.feedburner.com/time/topstories">Times</option>
    <option value="http://www.developer.nokia.com/Community/Blogs/rss.php?blogId=300129&profile=atom">Nokia Developer News</option>
    <option value="http://feeds.guardian.co.uk/theguardian/rss"> Guardian </option>
    </select>

That's it - the app is complete. You can add as many options and feeds as needed.

The way this works is straightforward. The SDK have a function called getRSS with three arguments. The first argument is the id of a HTML tag in which we are going to display the result if the phone orientation is vertical ("verview"), the second is the id to use if the phone is horizontal ("horview"). The last argument is the RSS feed address.

So, whenever the user change the option in the select tag, the getRSS function will be run using the current value of the of the select (note the this.value). If the user choose Times, then the third argument for the getRSS() is RSS feed http://feeds2.feedburner.com/time/topstories

Tabbed view

This section shows how you can display the multiple RSS feeds in individual tabs, loading the RSS feeds when the tab is selected. The screenshots below show examples of how this will look.

To implement this, first open the Nokia Web Tools:

  1. Make a new project
  2. You can choose either Multi-view, Accordion or Tab Control for the best UI. This example uses the Tab Control template
  3. Fill in the information required
  4. Add names for the tabs - in this example we use "Sport" , "Technology" and "Politic" for the tabs
  5. Open your Drop Down Multi RSS Feed project, or make one if you haven't make it yet, go to S40-theme/js and copy the jquery.jfeed.js file and put it in your new project in the same directory. This is the JavaScript library that allow us to parse an RSS file, it is modified by Nokia Team so we can display thumbnail picture (if any).
  6. Also, copy the jquery file (jquery-1.4.4.min.js), save it in the same directory (S40-theme/js)
  7. Copy the file S40-theme/images/rss3.png for the default thumbnail picture.
  8. Last of all, add the following code to the head tag :
    <script type="text/javascript" src="s40-theme/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="s40-theme/js/jquery.jfeed.js"></script>

Warning.pngWarning: You must import the jQuery first then the JFeed, or it won't work.

Below are the RSS feeds that we want to load:

  • Sport
http://feeds.feedburner.com/thetimessport
http://feeds.feedburner.com/theguardian/sport
  • Technology
http://feeds.technologyreview.com/technology_review_top_stories
  • Politic
http://feeds.feedburner.com/nymag/citypolitic

Because there are 2 feeds in Sport tab, we use a list to display them one at a time within the tab. Here is how:

  1. Search for the
     <div id="tab_1_content" class="ui-show">
  2. Remove the text "Sport Content" and replace it with one of built-in component that Nokia Web Tools provide us : "Category List Component"
  3. Add a little code at the list item 2, make it like this :
    <!-- list-item-2 -->
    <div class="ui-category-list-item">
    <div class="ui-category-list-item-title ui-close" id="category_title_2" onclick="mwl.toggleClass('#category_items_2', 'ui-show');mwl.toggleClass('#category_items_2', 'ui-hide');mwl.toggleClass('#category_title_2', 'ui-close');mwl.toggleClass('#category_title_2', 'ui-open');">The Guardian</div>
    <div class="ui-category-list-item-body ui-hide" id="category_items_2">
    contents goes here
    </div>
    </div>

Note that the code is added with id="category_title_2" in the code, because without it, the image (triangle) that is used to display whether the menu is opened or not, won't change for the second list item if we click it. And without the id, this application won't work properly. So, the id must be added.
Replace the text contents goes here , Technology content and Politic content to Loading feed ...

It is the javascript for loading an RSS feed. It receives four arguments: the first is the id where the result should be loaded, the second is how many news items should be displayed, the third is the URL of the feed, and the last one is a boolean to define whether a thumbnail should be displayed.

Create a new file called multirss.js and input the following code :

var sport1 = true;
var sport2 = true;
var techno = true;
var politic = true;
 
function loadRSS(place, numbers, urlfeed, isImage){
var rssContent = "";
jQuery.getFeed({
url: urlfeed,
success: function(feed){
for(var i = 0; i < Number(numbers); i++){
var items = feed.items[i];
rssContent += "<div class='inline'>";
if(isImage){
rssContent += "<img ' width=\"" + ((items.image && items.image.width && parseInt(items.image.width) <= 77)? items.image.width: "75") +
"\" height=\"" + ((items.image && items.image.height && parseInt(items.image.height) <= 75)? items.image.height: "50") +
"\" src=\"" + ((items.image && items.image.url)? items.image.url: "s40-theme/images/rss3.png") + "\"/>";
}
 
rssContent += "</div>";
rssContent += "<div class='inline' style='font-weight:bold;'><a href='"+items.link+"'>"+ items.title +"</a></div></br></br>" +
"<div style='display:block;'> <p style='padding-left:3px'> "+ items.description+" </p></div><br/>";
}
document.getElementById(place).innerHTML = rssContent;
}
});
}

Note.pngNote: The image script is from the RSS Template by Nokia

Do not forget to import the multirss.js file using script tag. We then need to load the first feed when the application starts. Modify the opening body tag as shown below to load the Times Sport feed:

<body onload="loadRSS('category_items_1', '5', 'http://feeds.feedburner.com/thetimessport',false);">

We also want to load the second sport feed by clicking the list. So modify the Category List Component code to match the following:

<div class="ui-category-list-item-title ui-close" id="category_title_2" onclick="loadSport2();mwl.toggleClass('#category_items_2', 'ui-show');mwl.toggleClass('#category_items_2', 'ui-hide');mwl.toggleClass('#category_title_2', 'ui-close');mwl.toggleClass('#category_title_2', 'ui-open');">The Guardian Sport</div>

We also want to load the feed for Technology and Politic by clicking the corresponding tab. Modify the code as shown:

<div class="ui-tab ui-tab-selected inline" id="tab_1" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_1_content', 'ui-show', 'ui-hide');mwl.switchClass('#tab_1', 'ui-tab-not-selected', 'ui-tab-selected');mwl.switchClass('#tab_2', 'ui-tab-selected', 'ui-tab-not-selected');mwl.switchClass('#tab_3', 'ui-tab-selected', 'ui-tab-not-selected');"><div style="margin-top:10px;">Sport</div></div>
<div class="ui-tab ui-tab-not-selected inline" id="tab_2" onclick="loadTech();mwl.setGroupTarget('#tab_control_content', '#tab_2_content', 'ui-show', 'ui-hide');mwl.switchClass('#tab_1', 'ui-tab-selected', 'ui-tab-not-selected');mwl.switchClass('#tab_2', 'ui-tab-not-selected', 'ui-tab-selected');mwl.switchClass('#tab_3', 'ui-tab-selected', 'ui-tab-not-selected');"><div style="margin-top:10px;">Technology</div></div>
<div class="ui-tab ui-tab-not-selected inline" id="tab_3" onclick="loadPol();mwl.setGroupTarget('#tab_control_content', '#tab_3_content', 'ui-show', 'ui-hide');mwl.switchClass('#tab_1', 'ui-tab-selected', 'ui-tab-not-selected');mwl.switchClass('#tab_2', 'ui-tab-selected', 'ui-tab-not-selected');mwl.switchClass('#tab_3', 'ui-tab-not-selected', 'ui-tab-selected');"><div style="margin-top:10px;">Politic</div></div>

Note that the code above just modified the onclick function, added loadSport2(), loadTech() and loadPol(), those are the functions to load the Sport2 feed, technology feed and politic feed respectively. Now, add the following javascript code to multirss.js:

function loadTech(){
if(techno){
loadRSS("tab_2_content", "5", "http://feeds.technologyreview.com/technology_review_top_stories",false);
techno = false;
}
}
 
function loadPol(){
if(politic){
loadRSS("tab_3_content","5","http://feeds.feedburner.com/nymag/citypolitic",true);
politic = false;
}
}
 
function loadSport2(){
if(sport2){
loadRSS('category_items_2', '5', 'http://feeds.feedburner.com/theguardian/sport',true);
sport2 = false;
}
}

Note the 5 var we defined in the beginning of the code. In the above section we use these to detect whether the feed is loaded - this ensures that the feed is loaded only once, even if the tab is clicked continuously.

Code Example

Drop Down : File:Multi RSS Drop Down.wgt
Tabbed : File:Multi RSS Feed.wgt

Summary

This article has shown how to create apps which support more than one RSS feed. I hope you've enjoyed it.

This page was last modified on 4 June 2013, at 14:03.
341 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×