Tuesday, April 10, 2012

Using Google Feed API in embedded local HTML

Using Google Feed API, you can download any public Atom, RSS, or Media RSS feed using only JavaScript. By embedding WebView loading local HTML web page, with Google Feed API; it's easy to load and display any feed in your apps.

In this exercise, the app simple embed a WebView with Javascript enabled, loading local HTML page in /assets/mypage.html, to parse the feed of my blog (http://feeds.feedburner.com/Android-er).

Using Google Feed API in embedded local HTML

package com.exercise.AndroidGoogleFeed;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class AndroidGoogleFeedActivity extends Activity {

WebView myWebView;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  //setContentView(R.layout.main);

  myWebView = new WebView(this);
  setContentView(myWebView);
  myWebView.getSettings().setJavaScriptEnabled(true);
  myWebView.loadUrl("file:///android_asset/mypage.html");
}
}


/assets/mypage.html
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

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 container = document.getElementById("feed");
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      var div = document.createElement("div");

      var A = document.createElement("A");
      A.setAttribute("href",entry.link);
      A.appendChild(document.createTextNode(entry.title));
      div.appendChild(A);

      container.appendChild(div);
    }
  }
});
}

google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>


"android.permission.INTERNET" is needed in AndroidManifest.xml.

Download the files.

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

No comments:

Post a Comment