Jul 15

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.

One Response to “PhoneGap-webOS newCard API tricks”

  1. gonzalez Says:

    hey, nice newCard tricks.
    i am wondering, are there any ways to use pushScene and popScene with phonegap?
    keep up writing about phonegap and webos..
    regards gonzalez

Leave a Reply