Here's something I knew wouldn't be a problem but I wanted to confirm. As you know, an HTML page cannot make an Ajax request to a remote server. There are ways around this (a proxy on your server or JSONP), but for the most part, it's a hard and fast rule. But what about for Android apps? Specifically - what if i use Phonegap and jQuery Mobile to build a "real" native application, will the same restrictions hold true? As I expected - they do not - and that's awesome news for folks wanting to make use of remote services. Here is a trivial example I built using Dreamweaver CS 5.5.
First - my HTML page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="phonegap.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#testLink").click(function(e) {
e.preventDefault();
$("#resultBlock").html("Getting the funk - stand by...");
$.get("http://www.raymondcamden.com/demos/may62011/ray.cfc?method=hellofromray&returnFormat=plain", {}, function(data) {
$("#resultBlock").html(data);
})
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<a id="testLink" rel="external">Bring the Funk</a>
<div data-role="collapsible">
<h3>Result from Ray</h3>
<p id="resultBlock"></p>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Most of this is pretty vanilla HTML but make note of the content with the DIV block. I've got a link with an ID and then right below it a collapsible block. This is one of the jQuery Mobile UI widgets you can employ. Now go back to the top.
I've told jQuery to listen for click events on my link. When clicked, I set a quick status message and then fire off my request to a remote ColdFusion server. In this case it's just returning a string but obviously I could request JSON as well. I take the result and drop it in my collapsible div. The CFC returns a random number so I can test multiple clicks just to be sure.
And that's it. For those of you with Droid devices, I've attached the APK generated by the Dreamweaver/Phonegap relationship I'm officially calling Uber Awesome. Remember - if you have a device that doesn't allow for ad hoc installs - like my own HTC Inspire, you can download the APK to your machine and do a manual install. It's as easy as: adb install filename.apk (assuming your device is connected via USB of course).