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.
Jul 12
The release of PhoneGap-webOS 1.0.0rc1 adds built-in support for touch events. The touch events use the thumbs.js library which has been rolled into PhoneGap-webOS.
To use the touch events in PhoneGap-webOS add the following lines of code to your HTML file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<script type="text/javascript" src="phonegap.js"></script>
</head>
<body>
<button id="btnTouchStart">Touch Start</button>
<script>
document.addEventListener('deviceready', function () {
// PhoneGap is ready, do all your stuf here
}, false);
document.querySelector('#btnTouchStart').addEventListener('touchstart', onTouchEvent, false);
function onTouchEvent(event) {
navigator.notification.alert(event.type);
}
</script>
</body>
</html> |
This will create a button and attach an event listener for a ‘touchstart’ event being triggered from the button. The onTouchEvent method will simple display a notification with the event type being handled.
Full source code with examples of all touch & mouse events can be found here.
Jul 04
With the release of PhoneGap 0.9.6 last week (week of June 27, 2011), there was some minor code clean up done to the way PhoneGap-webOS initializes.
This blog post will quickly run through an example of how to set up a simple “Hello World” example using PhoneGap-webOS 0.9.6.
If you would like to see an example app that demonstrates the various PhoneGap-webOS API calls & features you can refer to the example app that was made available in my Getting Started with PhoneGap-webOS 0.9.5 tutorial.
The first couple steps are to make sure you have all the tools and to set up your project.
- The list of necessary software & tools listed in step 3 on the PhoneGap webOS page.
- Set up your project by following step 4 on the PhoneGap webOS page, be sure to leave your terminal/cygwin window open as you will need it later.
From here you can delete or rename the index.html file (if you want to keep it as a reference) in the framework folder, we will be working on creating an app from the beginning.
- Create a new index.html file in the framework folder.
- Include the phonegap.js library in the <head> of your index.html
- Add the text “Hello World” within the <body> tags
- Add an event listener for the ‘deviceready’ event to the document – see the code sample below
The source of your index.html should look like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<script type="text/javascript" src="phonegap.js"></script>
</head>
<body>
Hello World
<script>
document.addEventListener('deviceready', function () {
// PhoneGap is ready, do all your stuf here
}, false);
</script>
</body>
</html> |
To view your work, you’ll want to either:
- open the Palm emulator
- set your Palm device to developer mode and plug it in
Go back to terminal/cygwin and type “make” (without the quotes).
You should see your hello world example app in the emulator or device.
Source can be found here.