Wednesday, April 11, 2012

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.

Display Google Feed in mobile style, using jQuery Mobile.

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.

2 comments:

jrme said...

Hi, this code have an error. Do you know how fix it???

Thanks

Remigi said...

thanks, it works perfectly!