May 13

WebOS uses the concept of cards as it’s main UI element. Each application exists in a card, applications can even open up multiple cards. For example, if you had the Map app and Browser active on your webOS device, both apps would exist in their own instance of a card.

Cards on the webOS interface.

Cards on the webOS interface

To open a new card in PhoneGap-0.9.5 webOS you will need to call the newCard API.

1
navigator.window.newCard(url, html);

The newCard method takes the following parameters:

  • url – url that should be loaded into the new card
  • html (optional) – html string that the new card should render

The following example will demonstrate a few different ways to create new cards in PhoneGap webOS. If you’ve never worked with PhoneGap-0.9.5 WebOS; I would strongly recommend that you follow through my Getting Started with PhoneGap-0.9.5 WebOS tutorial.

The following example shows how to:

  1. load a local html file into a new card
  2. load an external url into a new card
  3. load inline html into a new card

Set up a new PhoneGap webOS project and modify the index.html so that it matches the code sample provided below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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="new card with local source" onclick="navigator.window.newCard('newcard.html');"></p>                                                                       
	<p><input type="button" value="new card with online source" onclick="navigator.window.newCard('http://www.phonegap.com');"></p>
	<p><input type="button" value="new card with inline html" onclick="navigator.window.newCard('', '<html><body>Hello again!</body></html>');"></p>    
</body>
</html>

Next create a new html file called newcard.html in the same directory as your index.html. Update the source of the newcard.html file so that it matches the following:

1
2
3
4
5
6
7
8
<html>
<head>
	<title>New Card Example</title>
</head>
<body>
New Card content goes here.
</body>
</html>

The source for the example can be downloaded here.

Leave a Reply