Here's a neat trick to whet your PhoneGappetites. As I've said before, Herm Wong's excellent tutorial series on using PhoneGap with webOS is a great place to get started with development. I'm going to concentrate on a particular post of his, how to use the New Card API in PhoneGap.
To launch a new card, just use the form of "navigator.window.newCard(url, html);". While this invocation is both simple and powerful, it's also somewhat lacking. If you open a new card using the url parameter, it just calls that page statically. Using the optional html field to pass code gives you some options of interacting with the new card, but isn't a reusable method and your code becomes needlessly messy. The most successful apps live and breathe on passing dynamic data. What can you do to get there?
The solution came from this post on the HTML Forums. Simply pass parameters via the URL, the same way that you would for other web languages like PHP. It takes the form of file.html?firstname=Keanu&lastname=Reeves.
No SEO trickery going on here. Nope.
Here's a PhoneGap-ready example of the code. Put these two files in your webos/framework directory.
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PhoneGap WebOS</title>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
function onLoad() {
navigator.device.deviceReady();
}
</script>
</head>
<body onload="onLoad();">
<p><input type="button" value="Launch a new card" onclick="navigator.window.newCard('passing.html?firstname=Keanu&lastname=Reeves');"></p>
</body>
</html>
passing.html
<html>
<head>
<title>Page 2</title>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
var query = location.href.substring((location.href.indexOf('?')+1), location.href.length);
if(location.href.indexOf('?') < 0) query = '';
querysplit = query.split('&');
query = new Array();
for(var i = 0; i < querysplit.length; i++){
var namevalue = querysplit[i].split('=');
namevalue[1] = namevalue[1].replace(/\+/g, ' ');
query[namevalue[0]] = unescape(namevalue[1]);
}
window.onload = function(){
document.getElementById('firstname').innerHTML = query['firstname'];
document.getElementById('lastname').innerHTML = query['lastname'];
}
</script>
</head>
<body>
<h1>Who are you?</h1>
<p>Your name is <span id="firstname"></span> <span id="lastname"></span></p>
</body>
</html>
Voilà! For added fun, try to modify the example to use input from two text fields to pass data to the new card. Not sure how? Here's a hint: Use "document.getElementById('element').value" to access the contents of the form fields. More on that in a coming post.
No comments:
Post a Comment