Page Example

News Feed Sample Overview

The News Feed sample application demonstrates how you can get data in the XML format from an Internet connection.

The following figure illustrates the main screen of the News Feed.

Figure: News Feed screen

News Feed screen

The application opens with the first page of the news feed. To move to the next page, touch the screen.

Source Files

You can create and view the sample application project including the source files in the IDE.

File name Description
css/style.css This file contains CSS styling for the application UI.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screen.
app.js This file defines the operations of the application, such as sending requests and receiving data.

Implementation

The following code in the main.js file sends an XML request and receives the return data:

xmlhttp = new XMLHttpRequest();

xmlhttp.open(XML_METHOD, XML_ADDRESS, false);
xmlhttp.onreadystatechange = function() 
{
   if (xmlhttp.readyState === 4) 
   {
      if (xmlhttp.status === 200) 
      {
         clearElmText(objNews);

         xmlDoc = xmlhttp.responseXML;
         dataItem = xmlDoc.getElementsByTagName('item');

         if (dataItem.length > 0) 
         {
            lengthNews = (dataItem.length > NUM_MAX_NEWS) ? NUM_MAX_NEWS : dataItem.length;
            for (i = 0; i < lengthNews; i++) 
            {
               arrayNews.push(
               {
                  title: dataItem[i].getElementsByTagName('title')[0].childNodes[0].nodeValue,
                  link: dataItem[i].getElementsByTagName('link')[0].childNodes[0].nodeValue
               });
               arrayNews[i].title = trimText(arrayNews[i].title, NUM_MAX_LENGTH_SUBJECT);
            }
            resetNewsIndex();
            showNews();
         } 
         else 
         {
            addElmText(objNews, 'subject', MSG_ERR_NODATA);
         }

         xmlhttp = null;
      }
   }
};

xmlhttp.send();