Hi all, in this example I will show you how to use
PhoneGap with
jQuery Mobile Architecture.
Well to use jQuery Mobile Architecture you need to embed following css file and js file. And remember one thing you have maintain the order.
<![CDATA[
<link href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
]]>
<![CDATA[
<script charset="utf-8" type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script charset="utf-8" type="text/javascript" src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
]]>
Now create a file called index.html and paste the following code inside that file. Hare I have used the concept of jQuery Mobile Architecture, a single html page with multiple div element.
<![CDATA[
<!--DOCTYPE html-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Connected</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" data-theme="a">
<div data-role="header">
<h1>Connected</h1>
</div>
<div data-role="content" data-theme="a">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Top Stories</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-top-stories"><h2>CNN</h2><p class="ui-li-aside">CNN</p></a></li>
<li><a href="#" class="news-chanel" id="bbc-top-stories"><h2>BBC</h2><p class="ui-li-aside">BBC</p></a></li>
<li><a href="#" class="news-chanel" id="ibn-top-stories"><h2>IBN</h2><p class="ui-li-aside">IBN</p></a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>World</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-world"><h2>CNN</h2><p class="ui-li-aside">CNN</p></a></li>
<li><a href="#" class="news-chanel" id="bbc-world"><h2>BBC</h2><p class="ui-li-aside">BBC</p></a></li>
<li><a href="#" class="news-chanel" id="ibn-world"><h2>IBN</h2><p class="ui-li-aside">IBN</p></a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>World Business</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-world-business"><h2>CNN</h2><p class="ui-li-aside">CNN</p></a></li>
<li><a href="#" class="news-chanel" id="bbc-world-business"><h2>BBC</h2><p class="ui-li-aside">BBC</p></a></li>
<li><a href="#" class="news-chanel" id="ibn-world-business"><h2>IBN</h2><p class="ui-li-aside">IBN</p></a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>Technology</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-technology"><h2>CNN</h2><p class="ui-li-aside">CNN</p></a></li>
<li><a href="#" class="news-chanel" id="bbc-technology"><h2>BBC</h2><p class="ui-li-aside">BBC</p></a></li>
<li><a href="#" class="news-chanel" id="ibn-technology"><h2>IBN</h2><p class="ui-li-aside">IBN</p></a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>World Sport</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-world-soprts"><h2>CNN</h2><p class="ui-li-aside">CNN</p></a></li>
<li><a href="#" class="news-chanel" id="bbc-world-soprts"><h2>BBC</h2><p class="ui-li-aside">BBC</p></a></li>
<li><a href="#" class="news-chanel" id="ibn-world-soprts"><h2>IBN</h2><p class="ui-li-aside">IBN</p></a></li>
</ul>
</div>
<p> </p>
</div>
</div>
<div data-role="footer" class="bottom">
<h4>Page Footer</h4>
</div>
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header">
<h1 id="pgtitle"></h1>
<a href="#one" class="ui-btn-left">Back</a>
</div>
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-filter="true" id="newsdata">
</ul>
</div>
<div data-role="footer" class="bottom">
<a href="#one" class="ui-btn-left">Back</a>
</div>
</div><!-- /page two -->
</body>
</html>
]]>
Now add the following script in side your index.html file.
Well in this script I have used a google api i.e. "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q= " this api is used to convert the xml output to JSON output.
<![CDATA[
$(document).on('pagebeforeshow', '#one', function() {
$('.news-chanel').on('click', function(e, data) {
rss_url_map = {
'cnn-top-stories': 'https://rss.cnn.com/rss/edition.rss',
'bbc-top-stories': 'https://feeds.bbci.co.uk/news/rss.xml',
'ibn-top-stories': 'https://ibnlive.in.com/ibnrss/top.xml',
'cnn-world': 'https://rss.cnn.com/rss/edition_world.rss',
'bbc-world': 'https://feeds.bbci.co.uk/news/world/rss.xml',
'ibn-world': 'https://ibnlive.in.com/ibnrss/rss/world/world.xml',
'cnn-world-business': 'https://rss.cnn.com/rss/edition_business.rss',
'bbc-world-business': 'https://feeds.bbci.co.uk/news/business/rss.xml',
'ibn-world-business': 'https://ibnlive.in.com/ibnrss/rss/business/business.xml',
'cnn-technology': 'https://rss.cnn.com/rss/edition_technology.rss',
'bbc-technology': 'https://feeds.bbci.co.uk/news/technology/rss.xml',
'ibn-technology': 'https://ibnlive.in.com/ibnrss/rss/tech/tech.xml',
'cnn-world-soprts': 'https://rss.cnn.com/rss/edition_sport.rss',
'bbc-world-soprts': 'https://news.bbc.co.uk/sport1/hi/help/rss/default.stm',
'ibn-world-soprts': 'https://ibnlive.in.com/ibnrss/rss/sports/sports.xml',
};
url = rss_url_map[this.id];
$.ajax({
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
dataType: "jsonp",
jsonpCallback: 'successCallback',
async: true,
beforeSend: function() {
$.mobile.showPageLoadingMsg(true);
},
complete: function() {
$.mobile.hidePageLoadingMsg();
},
success: function(result) {
ajax.jsonResult = result;
$.mobile.changePage("#two");
},
error: function(request, error) {}
});
});
});
$(document).on('pagebeforeshow', '#two', function() {
ajax.parseJSONP(ajax.jsonResult);
});
var ajax = {
jsonResult: null,
parseJSONP: function(result) {
feedUrl = result.responseData.feed.feedUrl;
pgtitle = result.responseData.feed.title;
$("#pgtitle").text(pgtitle).trigger('create');
htmlData = '';
entriesList = result.responseData.feed.entries;
$.each(entriesList, function(index, value) {
title = value.title;
link = value.link;
publishedDate = value.publishedDate;
contentSnippet = value.contentSnippet;
content = value.content;
htmlData += '<li><a href="' + link + '" data-rel="external" data-ajax="false"><h2>' + title + '</h2><p>' + contentSnippet + '</p></a></li>';
});
$('#newsdata').empty();
$("#newsdata").html(htmlData);
$('#newsdata').listview('refresh');
}
}
]]>
And you final code will be like following.
<![CDATA[
<!--DOCTYPE html-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Connected</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on('pagebeforeshow', '#one', function() {
$('.news-chanel').on('click', function(e, data) {
rss_url_map = {
'cnn-top-stories': 'https://rss.cnn.com/rss/edition.rss',
'bbc-top-stories': 'https://feeds.bbci.co.uk/news/rss.xml',
'ibn-top-stories': 'https://ibnlive.in.com/ibnrss/top.xml',
'cnn-world': 'https://rss.cnn.com/rss/edition_world.rss',
'bbc-world': 'https://feeds.bbci.co.uk/news/world/rss.xml',
'ibn-world': 'https://ibnlive.in.com/ibnrss/rss/world/world.xml',
'cnn-world-business': 'https://rss.cnn.com/rss/edition_business.rss',
'bbc-world-business': 'https://feeds.bbci.co.uk/news/business/rss.xml',
'ibn-world-business': 'https://ibnlive.in.com/ibnrss/rss/business/business.xml',
'cnn-technology': 'https://rss.cnn.com/rss/edition_technology.rss',
'bbc-technology': 'https://feeds.bbci.co.uk/news/technology/rss.xml',
'ibn-technology': 'https://ibnlive.in.com/ibnrss/rss/tech/tech.xml',
'cnn-world-soprts': 'https://rss.cnn.com/rss/edition_sport.rss',
'bbc-world-soprts': 'https://news.bbc.co.uk/sport1/hi/help/rss/default.stm',
'ibn-world-soprts': 'https://ibnlive.in.com/ibnrss/rss/sports/sports.xml',
}
url = rss_url_map[this.id];
$.ajax({
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
dataType: "jsonp",
jsonpCallback: 'successCallback',
async: true,
beforeSend: function() {
$.mobile.showPageLoadingMsg(true);
},
complete: function() {
$.mobile.hidePageLoadingMsg();
},
success: function(result) {
ajax.jsonResult = result;
$.mobile.changePage("#two");
},
error: function(request, error) {}
});
});
});
$(document).on('pagebeforeshow', '#two', function() {
ajax.parseJSONP(ajax.jsonResult);
});
var ajax = {
jsonResult: null,
parseJSONP: function(result) {
feedUrl = result.responseData.feed.feedUrl;
pgtitle = result.responseData.feed.title;
$("#pgtitle").text(pgtitle).trigger('create');
htmlData = '';
entriesList = result.responseData.feed.entries;
$.each(entriesList, function(index, value) {
title = value.title;
link = value.link;
publishedDate = value.publishedDate;
contentSnippet = value.contentSnippet;
content = value.content;
htmlData += '<li><a href="' + link + '" data-rel="external" data-ajax="false"><h2>' + title + '</h2><p>' + contentSnippet + '</p></a></li>';
});
$('#newsdata').empty();
$("#newsdata").html(htmlData);
$('#newsdata').listview('refresh');
}
}
</script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" data-theme="a">
<div data-role="header">
<h1>Connected</h1>
</div>
<div data-role="content" data-theme="a">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Top Stories</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-top-stories">
<h2>CNN</h2>
<p class="ui-li-aside">CNN</p>
</a></li>
<li><a href="#" class="news-chanel" id="bbc-top-stories">
<h2>BBC</h2>
<p class="ui-li-aside">BBC</p>
</a></li>
<li><a href="#" class="news-chanel" id="ibn-top-stories">
<h2>IBN</h2>
<p class="ui-li-aside">IBN</p>
</a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>World</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-world">
<h2>CNN</h2>
<p class="ui-li-aside">CNN</p>
</a></li>
<li><a href="#" class="news-chanel" id="bbc-world">
<h2>BBC</h2>
<p class="ui-li-aside">BBC</p>
</a></li>
<li><a href="#" class="news-chanel" id="ibn-world">
<h2>IBN</h2>
<p class="ui-li-aside">IBN</p>
</a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>World Business</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-world-business">
<h2>CNN</h2>
<p class="ui-li-aside">CNN</p>
</a></li>
<li><a href="#" class="news-chanel" id="bbc-world-business">
<h2>BBC</h2>
<p class="ui-li-aside">BBC</p>
</a></li>
<li><a href="#" class="news-chanel" id="ibn-world-business">
<h2>IBN</h2>
<p class="ui-li-aside">IBN</p>
</a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>Technology</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-technology">
<h2>CNN</h2>
<p class="ui-li-aside">CNN</p>
</a></li>
<li><a href="#" class="news-chanel" id="bbc-technology">
<h2>BBC</h2>
<p class="ui-li-aside">BBC</p>
</a></li>
<li><a href="#" class="news-chanel" id="ibn-technology">
<h2>IBN</h2>
<p class="ui-li-aside">IBN</p>
</a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>World Sport</h3>
<ul data-role="listview" data-theme="c">
<li><a href="#" class="news-chanel" id="cnn-world-soprts">
<h2>CNN</h2>
<p class="ui-li-aside">CNN</p>
</a></li>
<li><a href="#" class="news-chanel" id="bbc-world-soprts">
<h2>BBC</h2>
<p class="ui-li-aside">BBC</p>
</a></li>
<li><a href="#" class="news-chanel" id="ibn-world-soprts">
<h2>IBN</h2>
<p class="ui-li-aside">IBN</p>
</a></li>
</ul>
</div>
<p> </p>
</div>
</div>
<div data-role="footer" class="bottom">
<h4>Page Footer</h4>
</div>
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header">
<h1 id="pgtitle"></h1>
<a href="#one" class="ui-btn-left">Back</a>
</div>
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-filter="true" id="newsdata">
</ul>
</div>
<div data-role="footer" class="bottom">
<a href="#one" class="ui-btn-left">Back</a>
</div>
</div><!-- /page two -->
</body>
</html>
]]>
Now create an android project as I explained in my previous post and put this index.html file over there and run your project and after that you will get the output like following.
No comments:
Post a Comment