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.
This demonstration applies to the recently released PhoneGap-0.9.5 implementation of WebOS.
In this post, I’ll demonstrate how to use PhoneGap WebOS’ APIs for notifications and dashboard.
Notifications
PhoneGap WebOS uses an alert or a banner for notifications:
- alerts – alerts can be called with the following method:
1
navigator.notification.alert('this is an alert'); - banners – banners can be called with the following method:
1
navigator.notification.showBanner('this is a banner');
The alert is an API that wraps the showBanner method so the effect of calling either type of notification will have the same result on the app’s interface.
When calling the alert or showBanner API, you’ll see the following result:
Dashboard
Here are the 2 ways that the dashboard can be invoked from PhoneGap-WebOS:
- dashboard with local content -
1
navigator.notification.newDashboard('dashboard.html'); - dashboard with online content -
1
navigator.notification.newDashboard('http://www.phonegap.com','dashboard.html');
The dashboard.html file is a simple html file where you place your dashboard content.
When calling the dashboard, you’ll see the dashboard icon along the bottom of the app.
Once the dashboard icon has been pressed, the app will display the dashboard content.
Sample App
Create a PhoneGap-WebOS app using the following source in your index.html file. This sample app will demonstrate how to use the alert & showBanner notifications and the dashboard.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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.js"></script>
<script type="text/javascript">
function onLoad() {
navigator.device.deviceReady();
}
</script>
</head>
<body onload="onLoad();">
<p>Notification examples</p>
<p><input type="button" value="show alert" onclick="navigator.notification.alert('this is an alert');"></p>
<p><input type="button" value="show banner" onclick="navigator.notification.showBanner('this is a banner');"></p>
<p>Dashboard examples</p>
<p><input type="button" value="dashboard with local content" onclick="navigator.notification.newDashboard('dashboard.html');"></p>
<p><input type="button" value="dashboard with online content" onclick="navigator.notification.newDashboard('http://www.phonegap.com', 'dashboard.html');"></p>
</body>
</html> |
Source for the sample app can be downloaded here.