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.