PhoneGap RSS Reader
这是关于如何使用phoneGap来开发手机上的RSS阅读器的文章，原作者分别写了四个版本。如下所示：
原文链接：http://www.raymondcamden.com/index.cfm/2011/10/11/PhoneGap-RSS-Reader
Part1
原文：
PhoneGap RSS Reader - Part 1
Earlier today I noticed an entry on the PhoneGap forums from a user asking about an RSS reader. I thought I'd whip one up using PhoneGap and jQuery Mobile and see what it took. Here's what I came up, and as always, feel free to rip apart the code and write it better. I'll warn folks that I only wrote the code to support RSS2, not ATOM, but in theory, it should be possible without too much additional work. (You would simply look at the metadata, note it, and change how you get data.)
I began by creating a new PhoneGap project. I strongly recommend reading my entry from earlier today about the nice Eclipse PhoneGap plugin to make it quicker to setup your projects. I began by adding code to handle getting the RSS code. First, I setup two simple variables people could tweak:
1//EDIT THESE LINES
2//Title of the blog
3var TITLE = "ColdFusion Jedi";
4//RSS url
5var RSS = "http://feedproxy.google.com/RaymondCamdensColdfusionBlog";
My code listens for my initial page to load. When this happens, I want to get the XML from the feed and work with it. Here's that snippet.
1$.get(RSS, {}, function(res, code) {
2var xml = $(res);
3var items = xml.find("item");
4$.each(items, function(i, v) {
5entry = {
6title:$(v).find("title").text(),
7link:$(v).find("link").text(),
8description:$.trim($(v).find("description").text())
9};
10entries.push(entry);
11});
As a reminder, AJAX code in PhoneGap applications are not restricted by normal remote domain rules. I can easily open up the remote XML and parse it. Where did entries come from? Well this is where things get slightly complex. I'm going to store the parsed RSS in a global array called entries (hence the push to add things to the end). This will allow me to dynamically display the pages. But first, let's render out the list. My home page already has a blank list just for this purpose:
1<div data-role="content">
2 <ul id="linksList" data-role="listview" data-inset="true"></ul>
3</div>
So my handler can simply append to it....
1//now draw the list
2var s = '';
3$.each(entries, function(i, v) {
4s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
5});
6$("#linksList").append(s);
7$("#linksList").listview("refresh");
Note two things here. First, every single link will be going to a new jQuery Mobile page, contentPage. But I store the ID of the item in a data attribute. Also note the use listview("refresh"). This tells jQuery Mobile to add unicorn magic prettiness to HTML I've added in the list. Serious - Unicorn Magic Prettiness is the official term.
Ok, so what's going on with the content page? I created it as a blank page, like so:
1<div data-role="page" id="contentPage">
2
3 <div data-role="header">
4 <a href="#mainPage" data-rel="back">Home</a>
5 <h1></h1>
6 </div>
7
8 <div data-role="content" id="entryText">
9 </div>
10
11</div>
And I've got a JavaScript click handler that notices the clicks and populates the data. First, the event listener for the link:
1//listen for detail links
2$(".contentLink").live("click", function() {
3selectedEntry = $(this).data("entryid");
4});
And then the page displayer...
1//Listen for the content page to load
2$("#contentPage").live("pageshow", function(prepage) {
3//Set the title
4$("h1", this).text(entries[selectedEntry].title);
5var contentHTML = "";
6contentHTML += entries[selectedEntry].description;
7contentHTML += '<p/><a href="'+entries[selectedEntry].link + '">Read Entry on Site</a>';
8$("#entryText",this).html(contentHTML);
9});
Pretty simple, right? (I should point out jQuery Mobile does support completely virtualized pages too. ) Here's a quick screen shot...
And another one...
And finally, the complete code. If anyone wants the actual APK for this, just ask. The home page first:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <title></title>
6 <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
7 <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
8 <script src="main.js"></script>
9 <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
10</head>
11<body>
12
13<div data-role="page" id="mainPage">
14
15 <div data-role="header">
16 <h1></h1>
17 </div>
18
19 <div data-role="content">
20 <ul id="linksList" data-role="listview" data-inset="true"></ul>
21 </div>
22
23 <div data-role="footer">
24 <h4>SimpleBlog by Raymond Camden</h4>
25 </div>
26
27
28</div>
29
30<div data-role="page" id="contentPage">
31
32 <div data-role="header">
33 <a href="#mainPage" data-rel="back">Home</a>
34 <h1></h1>
35 </div>
36
37 <div data-role="content" id="entryText">
38 </div>
39
40</div>
41
42</body>
43</html>
And the main.js file:
1$(document).ready(function() {
2
3//EDIT THESE LINES
4//Title of the blog
5var TITLE = "ColdFusion Jedi";
6//RSS url
7var RSS = "http://feedproxy.google.com/RaymondCamdensColdfusionBlog";
8//Stores entries
9var entries = [];
10var selectedEntry = "";
11
12//listen for detail links
13$(".contentLink").live("click", function() {
14selectedEntry = $(this).data("entryid");
15});
16
17//Listen for main page
18$("#mainPage").live("pageinit", function() {
19
20//Set the title
21$("h1", this).text(TITLE);
22
23$.get(RSS, {}, function(res, code) {
24var xml = $(res);
25var items = xml.find("item");
26$.each(items, function(i, v) {
27entry = {
28title:$(v).find("title").text(),
29link:$(v).find("link").text(),
30description:$.trim($(v).find("description").text())
31};
32entries.push(entry);
33});
34
35//now draw the list
36var s = '';
37$.each(entries, function(i, v) {
38s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
39});
40$("#linksList").append(s);
41$("#linksList").listview("refresh");
42});
43
44});
45
46//Listen for the content page to load
47$("#contentPage").live("pageshow", function(prepage) {
48//Set the title
49$("h1", this).text(entries[selectedEntry].title);
50var contentHTML = "";
51contentHTML += entries[selectedEntry].description;
52contentHTML += '<p/><a href="'+entries[selectedEntry].link + '">Read Entry on Site</a>';
53$("#entryText",this).html(contentHTML);
54});
55
56});
PhoneGap RSS Reader - Part 2
Two months ago I wrote a blog entry on how to build a simple PhoneGapp application. This application just read in an RSS feed and used jQuery Mobile to display the results. I think this was helpful, but a few readers pointed out some issues with the code that caused me to come back to it this weekend and work on some updates. The issues were...
Error Handling
I admit it. I do not do a good job of error handling in most of my AJAX based applications. While this may be acceptable in some applications, in a mobile application where the entire functionality depends on things working right, there is no excuse for lacking proper error handling. My application really just did one main thing - fetch an RSS feed. Everything after that was display. But as with server side apps, any network call is a point of failure. My first change was to add in a simple error handler. In jQuery, this is rather simple. Since the application can't do much of anything without an RSS feed (or can it - see my PS below), for now we just display a simple error message.
1$.ajaxSetup({
2 error:function(x,e,errorThrown) {
3 console.log(x.getStatusCode());
4 $("#status").prepend("Error!");
5 }
6});
That's it. jQuery makes it simple to add global handlers and since we only have one network operation anyway, I can use this just fine. As I said, we don't really need to provide a lot of detail in this case, but we can at least let the user know something went wrong. To be fair, in a real application I'd probably add a bit more text. I'd let the user know the data couldn't be loaded and to please try again.
Page load issues
This one was a bonehead mistake. If you look at the code in the original blog entry, I do my network call and render results using the pageshow event. This means thatevery time the page is shown, it will fire, including times when the user hits back from an entry view. As I said - bonehead. Luckily it's simple enough to change to pageinit. Another change I made was to not make use of jQuery's document.ready logic. Instead, I simply load everything up at once. Here is my updated JavaScript file in it's entirety.
1$.ajaxSetup({
2 error:function(x,e,errorThrown) {
3 console.log(x.getStatusCode());
4 $("#status").prepend("Error!");
5 }
6});
7
8//EDIT THESE LINES
9//Title of the blog
10var TITLE = "ColdFusion Jedi";
11//RSS url
12var RSS = "http://feedproxy.google.com/RaymondCamdensColdfusionBlog";
13//Stores entries
14var entries = [];
15var selectedEntry = "";
16
17//listen for detail links
18$(".contentLink").live("click", function() {
19 selectedEntry = $(this).data("entryid");
20});
21
22//Listen for main page
23$("#mainPage").live("pageinit", function() {
24 //Set the title
25 $("h1", this).text(TITLE);
26
27 $.get(RSS, {}, function(res, code) {
28 entries = [];
29 var xml = $(res);
30 var items = xml.find("item");
31 $.each(items, function(i, v) {
32 entry = {
33 title:$(v).find("title").text(),
34 link:$(v).find("link").text(),
35 description:$.trim($(v).find("description").text())
36 };
37 entries.push(entry);
38 });
39
40 //now draw the list
41 var s = '';
42 $.each(entries, function(i, v) {
43 s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
44 });
45 $("#linksList").html(s);
46 $("#linksList").listview("refresh");
47 });
48
49});
50
51//Listen for the content page to load
52$("#contentPage").live("pageshow", function(prepage) {
53 //Set the title
54 $("h1", this).text(entries[selectedEntry].title);
55 var contentHTML = "";
56 contentHTML += entries[selectedEntry].description;
57 contentHTML += '<p/><a href="'+entries[selectedEntry].link + '">Read Entry on Site</a>';
58 $("#entryText",this).html(contentHTML);
59});
And here is the front end HTML. The only change here was the addition of the status div used by error handling.
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<title></title>
6<link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />
7 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
8 <script src="js/jquery.mobile-1.0.min.js"></script>
9<script src="js/main.js"></script>
10</head>
11<body>
12
13<div data-role="page" id="mainPage">
14
15<div data-role="header">
16<h1></h1>
17</div>
18
19<div data-role="content">
20 <div id="status"></div>
21<ul id="linksList" data-role="listview" data-inset="true"></ul>
22</div>
23
24<div data-role="footer">
25<h4>SimpleBlog by Raymond Camden</h4>
26</div>
27
28
29</div>
30
31<div data-role="page" id="contentPage">
32
33<div data-role="header">
34<a href="#mainPage" data-rel="back">Home</a>
35<h1></h1>
36</div>
37
38<div data-role="content" id="entryText">
39</div>
40
41</div>
42
43</body>
44</html>
There you go! I've wrapped up the entire Eclipse project into a zip. It also includes a debug APK you can install to your device if you want to try it out.
p.s. Technically, we could try to handle network issues better. I'm not just talking about the RSS feed being down, but what if the user is offline? I've decided to follow this up with a third version that will try storing the RSS feed in local storage. If the user is offline, we can at least resort to the older data.
Download attached file
PhoneGap RSS Reader - Part 3
Welcome to my third entry for my (what was at first) simple PhoneGap RSS reader. If you haven't yet, please be sure to read part 1 and part 2 so you have some context about how this application works. In this part, I'm going to tackle two enhancements suggested to me by my readers:
- First - support rendering the entries if the user is offline.
- Second - clean up the UX a bit so that when a user views an entry, leaves, and then comes back to another entry, they don't see the old text there for a split second.
Let's tackle the offline question first. I spent some time thinking about this and tried a few things that didn't quite work out the way I wanted. The first thing I tried was checking navigator.onLine. (See this Stackoverflow entry for details.) This did not work well for me. When I switched my device to airplane mode it still reported me as online. I then looked into PhoneGap's Connection API. This kinda worked. It didn't seem to grok my Airplane mode at all. It certainly didn't report it as online (it returned a null actually) and I could have handled it, but I then had the issue of how I was going to handle coordinating the deviceready event along with the jQuery Mobile pageinit method.
Then I realized something. I already had an Ajax error handler. And it worked. That's obvious of course, but it occurred to me. Why not use this error handler? It would not only support offline mode, but any error on the remote server as well. At the end of the day, if I can't get the RSS feed, who cares if I'm offline or if the server is down. I couldsee caring, and if so, you would obviously want to use the PhoneGap Connection value, but I figured, why not go with the simple route.
As for storage - that turned out to be trivial - LocalStorage. Have you guys figured out yet that I really love HTML5 LocalStorage?
So, I decided to get rid of AjaxSetup. I only have one Ajax call in the entire application, so why not tie it to that call. So I switched from a $.get to a $.ajax:
1$.ajax({
2 url:RSS,
3 success:function(res,code) {
4 entries = [];
5 var xml = $(res);
6 var items = xml.find("item");
7 $.each(items, function(i, v) {
8 entry = {
9 title:$(v).find("title").text(),
10 link:$(v).find("link").text(),
11 description:$.trim($(v).find("description").text())
12 };
13 entries.push(entry);
14 });
15 //store entries
16 localStorage["entries"] = JSON.stringify(entries);
17 renderEntries(entries);
18 },
19 error:function(jqXHR,status,error) {
20 //try to use cache
21 if(localStorage["entries"]) {
22 $("#status").html("Using cached version...");
23 entries = JSON.parse(localStorage["entries"])
24 renderEntries(entries);
25 } else {
26 $("#status").html("Sorry, we are unable to get the RSS and there is no cache.");
27 }
28 }
29})
This is - for the most part, the same code as before, just using the core $.ajax method. You can see where the error function will look into LocalStorage for the cached copy, and where the success function always stores a copy. The renderEntries function is simply an abstracted out version of the display code:
1function renderEntries(entries) {
2var s = '';
3$.each(entries, function(i, v) {
4s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
5});
6$("#linksList").html(s);
7$("#linksList").listview("refresh");
8}
Woot. That works. Now for the next request. We want to ensure that users don't see the old content when loading in the RSS entry detail page. This turned out to be a bit weird. jQuery Mobile has logic to say, "Do this when a page is hiding, or before it hides", but for the life of me (and please correct me if I'm wrong) there doesn't seem to be a good way to get the page that is leaving. You get passed the page you are going to, but not the current page. I really feel like I'm missing something here, so please note this may get corrected later. For me though I simply added an event listener to the main page. It now sees if a previous page exists, and if so, clears out the text:
1$("#mainPage").live("pagebeforeshow", function(event,data) {
2 if(data.prevPage.length) {
3 $("h1", data.prevPage).text("");
4 $("#entryText", data.prevPage).html("");
5 };
6});
And that's it. I've included the entire JavaScript file below (the HTML hasn't changed from the previous entry) and a zip of the entire project may be downloaded for the low cost of free.
1//EDIT THESE LINES
2//Title of the blog
3var TITLE = "ColdFusion Jedi";
4//RSS url
5var RSS = "http://feedproxy.google.com/RaymondCamdensColdfusionBlog";
6//Stores entries
7var entries = [];
8var selectedEntry = "";
9
10//listen for detail links
11$(".contentLink").live("click", function() {
12 selectedEntry = $(this).data("entryid");
13});
14
15function renderEntries(entries) {
16var s = '';
17$.each(entries, function(i, v) {
18s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
19});
20$("#linksList").html(s);
21$("#linksList").listview("refresh");
22}
23
24//Listen for main page
25$("#mainPage").live("pageinit", function() {
26 //Set the title
27 $("h1", this).text(TITLE);
28
29 $.ajax({
30 url:RSS,
31 success:function(res,code) {
32 entries = [];
33 var xml = $(res);
34 var items = xml.find("item");
35 $.each(items, function(i, v) {
36 entry = {
37 title:$(v).find("title").text(),
38 link:$(v).find("link").text(),
39 description:$.trim($(v).find("description").text())
40 };
41 entries.push(entry);
42 });
43 //store entries
44 localStorage["entries"] = JSON.stringify(entries);
45 renderEntries(entries);
46 },
47 error:function(jqXHR,status,error) {
48 //try to use cache
49 if(localStorage["entries"]) {
50 $("#status").html("Using cached version...");
51 entries = JSON.parse(localStorage["entries"])
52 renderEntries(entries);
53 } else {
54 $("#status").html("Sorry, we are unable to get the RSS and there is no cache.");
55 }
56 }
57 });
58
59});
60
61$("#mainPage").live("pagebeforeshow", function(event,data) {
62 if(data.prevPage.length) {
63 $("h1", data.prevPage).text("");
64 $("#entryText", data.prevPage).html("");
65 };
66});
67
68//Listen for the content page to load
69$("#contentPage").live("pageshow", function(prepage) {
70 //Set the title
71 $("h1", this).text(entries[selectedEntry].title);
72 var contentHTML = "";
73 contentHTML += entries[selectedEntry].description;
74 contentHTML += '<p/><a href="'+entries[selectedEntry].link + '">Read Entry on Site</a>';
75 $("#entryText",this).html(contentHTML);
76});
Download attached file
PhoneGap RSS Reader - Part 4
Edited on August 4, 2012: Readers noted that this version didn't correctly handle trying to load the cache when offline. I confirmed that and posted a fix in the comments.
For whatever reason, my articles on PhoneGap and RSS (see related entries below) have been incredibly popular. The last entry currently has 163 comments. Some of the comments deal with the fact that RSS, while a standard, does have a bit of variation to it. My code made some assumptions that didn't always work for other feeds. I thought this was a great opportunity to look at ways I could make the code more applicable to other types of feeds, especially Atom. Luckily, there is an awesome service for this - the Google Feed API.
As you can probably guess, the Google Feed API allows you to parse RSS feeds into simple to use data. It takes any valid RSS or Atom feed and parses it into a simple,standard data model. While the previous code I used wasn't too difficult, it was also very tied to one particular flavor of RSS. I could have continued to add in support for multiple styles of RSS feeds but this seemed far easier to me.
To begin, I added a script tag to load in the Google Loader. This is service Google provides that allows you to dynamically include in JavaScript support for various Google APIs.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
To load in support for the Feed API, I modified my mainPage pageinit event handler to ask Google Load to go grab the bits. It is very important that you provide the callback option to this API. If you do not, Google Load will blow away the jQuery Mobile DOM completely.
Now let's look at initialize. Previously, this is the portion that would have done the Ajax call, used XML parsing on the results, and stored the entries. Because Google's Feed API is doing this for me the code is now somewhat simpler. (I also added support for jQuery Mobile's "showPageLoadingMsg" API to make it obvious to the user that something is happening.)
And that's pretty much it. My previous code stored the content of the RSS item in a key named content. Google uses a key named description so I modified my display code.
As a final enhancement, I decided to make use of PhoneGap Build to create my mobile application. This allowed me to define a simple config.xml file to help define how the executables are generated. For example, I was able to provide simple icon support. (The icons I used were provided by Fast Icon.)
You can see my application at the bottom here in the screen shot. And yes - I have a Selena Gomez app. Don't hate me for downloading apps my daughter loves.
Want to download the app yourself? Try the public Build page for every platform but iOS. You can also download all of the bits below.
Download attached file
PhoneGap RSS Reader相关推荐
- 好用的RSS阅读器-My RSS Reader
我对好用的RSS阅读器定义是 必须是免费的 必须可以自定义订阅源 必须是简洁的,不要华而不实 必须有夜间模式,毕竟保护眼睛是头等大事 基于以上几点,开发了 My RSS Reader . 目前已经发布 ...
- RSS Reader for MAC Code
RSS Reader for MAC Code 该项目代码来自于王志刚 <软件创富密码:iPhone应用程序开发攻略之深入浅出Objective-C 2.0>一书,这是一个图例很丰富的书, ...
- Sharepoint 2019 RSS Reader
1.激活网站集功能和网站功能的SharePoint Server 标准版网站集功能 2.貌似开通匿名才能进行RSS订阅 3.在库中开通rss订阅,点击库 即可看到rss 4.添加rss reader ...
- Blog RSS Reader 资料整理
打算在空闲的时候做一个个人使用的Blog RSS Reader,今天开始收集资料 dim objHTTP,objXML,objXSL Set objXSL = Server.CreateObject( ...
- RSS Reader实例开发之系统设计
系统设计 基于OPhone的RSS Reader将以Google Reader的功能为参考,并充分考虑到手机屏幕的限制.RSS Reader将实现以下几个Activity: 1. Ma ...
- RSS Reader实例开发之使用Service组件
原文地址::http://www.ophonesdn.com/article/show/122 到目前为止,我们已经实现了RSS Reader的基本功能,在这个OPhone应用程序中,我们使用Acti ...
- RSS Reader实例开发之联网开发
在OPhone应用程序中,如果我们要做一些费时的操作,例如,从网络获取数据,就不能将这些操作放在普通的处理UI的逻辑中,否则,主线程一旦执行耗时任务,将无法响应用户的任何操作,OPhone系统会判定该 ...
- Native Rss Reader 的资料
转:http://hi.baidu.com/mikyliang/blog/item/11d420d3135832013af3cf19.html RSS文档的构成 2007-05-04 14:58 RS ...
- RSS Reader
不經不觉已經marked低咗好多blog网地址,前幾日就回顧一下...點知就認真頭痛~ 實在太多嘞:多到非常嘥時間咁逐一去游覧睇有乜新随筆.所以就嗱嗱聲上网揾下有乜RSS reader.一揾就揾到好幾 ...
最新文章
- C#.net技术内幕04-集合
- ppt android sdk,《0.AndroidSDK概述.ppt
- win7开机提示服务器正在运行,科技常识：win7电脑启动ie浏览器提示服务器正在运行的处理方法...
- Quartz Scheduler插件–隐藏的宝藏
- 【LeetCode笔记】剑指 Offer 47. 礼物的最大价值（Java、动态规划）
- html怎么设置锯齿边框样式,CSS3实现边框锯齿效果
- 基于JAVA+SpringMVC+Mybatis+MYSQL的软件办公管理系统
- 动态路由接收前台传值
- cms查询系统（二）json形式参数的设计与解析
- 【CS229】多变量线性回归
- SpringBoot注册组件之@Configuration@Bean注解作用及注意点
- 学用 ASP.Net 之 System.Collections.Specialized.StringDictionary 类
- linux内核中task_struct与thread_info及stack三者的关系
- AVR单片机（ATmega128）单片机运算乘除法大约所需时间
- delphi mysql 删除_Delphi如何清空日志文件
- 解决jsp页面引入百度编辑器，出现xss漏洞
- JS网页特效实例：动态关闭页面
- 书籍推荐：国内第一本ASP.NET 3.5 MVC技术专著
- 起步 —— 种一棵树最好的时间是十年前
- 跳跳棋（国家集训队，LCA，洛谷P1852，BZOJ[2144]）