Here are few neat tricks that you can use when messing around with PhoneGap-webOS’s newCard API:
- have the new card close the parent card
- close the new card
- pass data to a the new card
NOTE: passing data to a new card was a trick discovered by Ken Schreihofer, he has a blog post that explains it in detail.
I’ve included his example along with the examples for closing parent card & new card in this example PhoneGap-webOS 1.0.0rc1 app.
In the index.html of the example app, you will need to open up a new card – which will use “child.html” as the source of the new card in this example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PhoneGap WebOS</title>
<script type="text/javascript" src="phonegap-1.0.0.js"></script>
</head>
<body>
<button onclick="navigator.window.newCard('child.html?firstName=herm&lastName=wong');">create new card & pass data to it</button>
<script>
document.addEventListener('deviceready', function () {
// PhoneGap is ready, do all your stuf here
}, false);
</script>
</body>
</html> |
Next create the child.html file in the same directory as your index.html file. Make sure that the source matches the code below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Child Window</title>
<!--
the data passing example is credited to: Ken Schreihofer
http://weboscapades.blogspot.com/2011/07/passing-parameters-to-new-card-in.html
-->
<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>
<p><button onClick="window.opener.close();">close the parent card</button></p>
<p><button onClick="window.close();">close current card</button></p>
</body>
</html> |
Run the make script and you should be able to try out these tricks to the newCard API.
Example app & source can be downloaded here.