Angular is one of the most popular open-source front-end web application framework. This framework is written in TypeScript(Superset of JavaScript) and currently maintained...
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.
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.
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.
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.
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.
<link href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
<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.
<!--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.
$(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');
}
}
<!--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.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment