PhoneGap RSS Reader - Part 5
For a while now I've been talking about, and upgrading, a basic PhoneGap-based RSS reader application. (See the related entries at the bottom for the earlier iterations.) I was thinking about the application this morning. One of the things I noticed about the application is that when you clicked to read a full article, the application launched the native web browser. In IOS, there wasn't a nice way to get back to the application. On Android, you could use back, but overall, the transition was a bit jarring. I thought this would be a perfect opportunity to try the ChildBrowser plugin.
The ChildBrowser plugin creates a "pop up window" that acts like an embedded browser for your application. You can load it with a URL and add event handlers for things like location changing or the browser being closed. The end result is that the user isn't really "leaving" the application when they view a web page.
The ChildBrowser plugin is available for iOS and Android. (You can also use it with Blackberry and Windows Phone.)
The API is really simple to use. Since I'm not concerned with any of the events thrown by the ChildBrowser and just need it to go some place, I added a class to my "Read Entry on Site" link and then added this touch handler:
I've talked about PhoneGap plugins before so I won't repeat the story behind how you use them, but the basic idea is that you get the native code bits installed with your editor and then copy over one JavaScript file that provides the connection to the native code. For the most part, it's really pretty simple.
That being said - I was in luck. Turns out that PhoneGap Build supports a few plugins - and one of them is the ChildBrowser. I opened up my config.xml file and added one line:
The last thing I needed to do was add a call to the childbrowser.js file in my index.html. Do not forget that even though you include a script tag that points to the file, you don't actually include the file when creating your zip. Another thing to note. My application - previously - had not actually done anything device related. Yeah, that makes the application kind of dumb I guess, but because I wasn't accessing the camera or doing anything special, I never actually included cordova.js. PhoneGap Build will not include a plugin JavaScript file unless you also have a call to cordova.js. I'm assuming some basic regex is being done on that back end and the first script tag is required before any plugins are checked for. Here's what I added to the head block of my index.html file:
And that's it! I uploaded my code and within about two minutes I had my iOS and Android versions up and running. I've included a full zip of the code as an attachment to this blog. You can download individual binaries via the embed below. Note that the iOS version will not work for you - sorry - I'm not adding to this to the AppStore.
http://www.tricedesigns.com/2012/10/03/phonegap-ap...
e.preventDefault();
window.plugins.childBrowser.showWebPage($(this).attr("href"));
});
and assigned a class of fullLink to the link.
actual I made some changes with javascript
I am able to get data from <title> <author> <link> tags and put it into SQLlite database.
but unable to get data from <description>. It gives me undefined.
thanks in advance.....
can we avoid use of feed burner...?
because the data I have to parse is to confidential.
1) Note that the latest version of PhoneGap supports ChildBrowser w/o using a plugin. Check the InAppBrowser spec.
2) Pascal, if Google's Feed parser doesn't return it, then you need to switch back to parsing the XML yourself, as I did in earlier entries. To see if Google returned it, simply use the console.dir() command on the results to look at it.
//RSS url
var RSS = "http://serambi.blankonlinux.or.id/rss20.xml";;
But It's doesnt work.
What I must to do?
Anyway, can I modified this and put it on my github?
Oh btw - don't forget PhoneGap now supports ChildBrowser natively, w/o a plugin. It is called InAppBrowser.
InAppBrowser: Not familiar with it? Check the docs. It should clear it up.
Post Display Region: Please read this tutorial closely, and the earlier parts, and you can see where an individual entry is displayed to the user.
jQuery Events: Then I'd recommend learning jQuery. :) Yes I can write this for you pretty quickly, but honestly, you should be able to get up to speed on jQuery in an hour or so, and it would be well worth your time to take a look at it.
$(window).on("touchstart", ".fullLink", function(e) {
e.preventDefault();
window.plugins.childBrowser.showWebPage($(this).attr("href"));
});
You want the exact same code, but links within where the entry text is text. Entry text is stored in a div with the ID entryText. I think, stress think, this will do:
$(window).on("touchstart", "div#contentPage a", function(e) {
// the rest is the same
$(window).on("touchstart", "div#contentPage a", function(e) {
I try to show the pubDate inside each post with
$('#postdate' + i).text(entry.pubDate);
but it doesn't pick the date from the feed
any ideas ?
:)