Android-er: Display Google Feed in mobile style, using jQuery Mobile.

Last exercise "Using Google Feed API in embedded local HTML" display the feed in normal lsitview. In this exercise, it is modified to use jQuery and jQuery Mobile Javascript library to display in mobile style.

Modify /assets/mypage.html in last exercise.

<!doctype html>
<html>
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Android-er</title>
 
 <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>

  <script src="https://www.google.com/jsapi"/>
  <script >

  google.load("feeds", "1");

  function initialize() {
    var feed = new google.feeds.Feed("http://feeds.feedburner.com/Android-er");
    feed.setNumEntries(10);
    feed.load(function(result) {
      if (!result.error) {
    
       var feedlist = document.getElementById("feed");
       for (var i = 0; i < result.feed.entries.length; i++) {
    var li = document.createElement("li");
        var entry = result.feed.entries[i];
        var A = document.createElement("A");
        A.setAttribute("href",entry.link);
        A.appendChild(document.createTextNode(entry.title));
        li.appendChild(A);
        feedlist.appendChild(li);
       }
       $("#feed").listview("refresh");
        }
    });
  }

  google.setOnLoadCallback(initialize);

  </script>
</head>
<body>

 <div data-role="page" id="home">
  <div data-role="header">
   <h1>Android-er</h1>
  </div>
  
  <div data-role="content">
   <ul data-role="listview" id="feed" />
  </div>
 
  <div data-role="footer">
   <h4><a href="http://android-er.blogspot.com/">Android-er</a></h4>
  </div>
 </div>
 
</body>
</html>

Download the files.

Android-er

Wednesday, April 11, 2012

Display Google Feed in mobile style, using jQuery Mobile.

2 comments: