digitaldogbyte.com http://www.digitaldogbyte.com powered by kilobits n' bytes Sat, 16 Jul 2011 03:01:33 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 PhoneGap-webOS newCard API tricks http://www.digitaldogbyte.com/2011/07/15/phonegap-webos-newcard-api-tricks/ http://www.digitaldogbyte.com/2011/07/15/phonegap-webos-newcard-api-tricks/#comments Sat, 16 Jul 2011 03:00:45 +0000 Herm Wong http://www.digitaldogbyte.com/?p=261 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.

]]> http://www.digitaldogbyte.com/2011/07/15/phonegap-webos-newcard-api-tricks/feed/ 1 PhoneGap-webOS 1.0.0rc1 now with Touch Events http://www.digitaldogbyte.com/2011/07/12/phonegap-webos-1-0-0rc1-now-with-touch-events-2/ http://www.digitaldogbyte.com/2011/07/12/phonegap-webos-1-0-0rc1-now-with-touch-events-2/#comments Wed, 13 Jul 2011 05:37:21 +0000 Herm Wong http://www.digitaldogbyte.com/?p=256 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.

PhoneGap webOS touchstart event example

Full source code with examples of all touch & mouse events can be found here.

]]> http://www.digitaldogbyte.com/2011/07/12/phonegap-webos-1-0-0rc1-now-with-touch-events-2/feed/ 0 Getting Started with PhoneGap-webOS 0.9.6 http://www.digitaldogbyte.com/2011/07/04/getting-started-with-phonegap-webos-0-9-6/ http://www.digitaldogbyte.com/2011/07/04/getting-started-with-phonegap-webos-0-9-6/#comments Mon, 04 Jul 2011 17:32:15 +0000 Herm Wong http://www.digitaldogbyte.com/?p=225 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.

  1. The list of necessary software & tools listed in step 3 on the PhoneGap webOS page.
  2. 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.

  1. Create a new index.html file in the framework folder.
  2. Include the phonegap.js library in the <head> of your index.html
  3. Add the text “Hello World” within the <body> tags
  4. 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.

PhoneGap webOS Hello World Example

Source can be found here.

]]> http://www.digitaldogbyte.com/2011/07/04/getting-started-with-phonegap-webos-0-9-6/feed/ 0 PhoneGap-0.9.5 webOS newCard API http://www.digitaldogbyte.com/2011/05/13/phonegap-0-9-5-webos-newcard-api/ http://www.digitaldogbyte.com/2011/05/13/phonegap-0-9-5-webos-newcard-api/#comments Fri, 13 May 2011 18:32:42 +0000 Herm Wong http://www.digitaldogbyte.com/?p=212 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.

]]> http://www.digitaldogbyte.com/2011/05/13/phonegap-0-9-5-webos-newcard-api/feed/ 0 Using SQLite with PhoneGap-0.9.5 webOS http://www.digitaldogbyte.com/2011/05/12/using-sqlite-with-phonegap-0-9-5-webos/ http://www.digitaldogbyte.com/2011/05/12/using-sqlite-with-phonegap-0-9-5-webos/#comments Thu, 12 May 2011 22:33:23 +0000 Herm Wong http://www.digitaldogbyte.com/?p=191 PhoneGap-0.9.5 webOS no longer includes the Mojo framework, so you will not be able to use the Depot APIs to create & manipulate local storage. If your webOS app needs a database, you will need to use HTML5′s storage functionality.

If you’re already familiar with HTML5 storage and just want to reference the storage APIs supported in PhoneGap, you can take a look at the PhoneGap Storage API docs.

This post will provide a step by step walkthrough on how to:

  • set up an HTML5 SQLite database
  • insert data into the database
  • retrieve data from the database

First step is to set up your PhoneGap webOS project by following these steps.

Create / Open a database connection

To create a new database or to open a connection to an existing database you need to use the window.openDatabase method.

1

var db = window.openDatabase(name, version, displayName, size);

The parameters used by the openDatabase method:

  • name – name of the database instance
  • version (optional) – version of the database
  • displayName (optional) – database’s display name
  • size (optional) – size of the database in bytes

Modify your index.html file’s source so that it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<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">
                var db; 		
 		function onLoad() {
	    	     navigator.device.deviceReady();
		} 
 
		// create the db instance
		function createDB() {  
			// creates or opens a new db connection
			db = window.openDatabase("test", "1.0", "Test DB");
		}		
	</script>
</head>
<body onload="onLoad();">
	<input type="button" onclick="createDB();" value="Test SQLite DB">
</body>
</html>

When “Test SQLite DB” button is pressed it will create a database named “test” (or open a connection to the “test” database if it already exists) by calling the createDB() method which in turn calls the window.openDatabase method. The app will appear to do nothing if you run it and press the button since we have not added any notifications to indicate the result of the database creation.

In the next section, we will insert some test data into the database and display a notification that will indication if the database creation & data insertion was successful.

Inserting data into the database

To perform any CRUD (Create/Read/Update/Delete) operaton on the database you will need to use the database’s transaction method.

1

db.transaction(methodName, errorCallback, successCallback);

The transaction method accepts the following parameters:

  • methodName – name of the method that contains the SQL statements you want to execute
  • errorCallback (optional) – name of the method that gets called if an error occurs when executing the instructions in methodName
  • successCallback (optional) – name of the method that gets called when the instructions in methodName are executed successfully

The transaction object which gets passed into the methodName method as a parameter has an executeSql method which is used to execute SQL statements. In our example below, our methodName is the populateDB method.

1

tx.executeSql(sqlStatement, argumentArray, successCallback, errorCallback);

The executeSql method accepts the following parameters:

  • sqlStatement – SQL statement that needs to be performed on the database
  • argumentArray (optional) – values that can be mapped to SQL arguments represented by ‘?’ in the sqlStatement
  • successCallback (optional) – method to be called if the executeSql method successfully executes
  • errorCallback (optional) – method to be called if the executeSql method isn’t successful

Update your index.html so that the source matches the following:

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
42
43
44
45

<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();
		} 
 
		// create the db instance
		function createDB() {  
			// creates or opens a new db connection
			var db = window.openDatabase("test", "1.0", "Test DB");
			// call populateDB
			db.transaction(populateDB, errorCB, successCB);			
		}
 
		// inserts test data into db
		function populateDB(tx) {
			// drop the DEMO table if it exists
			tx.executeSql('DROP TABLE IF EXISTS DEMO');  
			// create DEMO table with columns id and data
			tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
			// insert test data into DEMO table
			tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
			tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
		} 
 
		// generic error handler
		function errorCB(tx, err) {
			navigator.notification.alert("error: " + err);
		}
 
		// success handler for db creation & population
		function successCB() {
			navigator.notification.alert('successfully created & populated');  
		}		   			
	</script>
</head>
<body onload="onLoad();">
	<input type="button" onclick="createDB();" value="Test SQLite DB">
</body>
</html>

If you run your app now & press on the “Test SQLite DB” button, you will get an alert that indicates that the database was successfully created and that data was successfully inserted into your database.

Database creation & insertion success

Now that we’re able to insert data into the database, we’ll want to be able to retrieve the data from the database.

Retrieving data from the database

These last updates will add a method to retrieve all of the test data we have entered into the database. There will be notifications that display the total number of rows added to the database and the contents of each row.

We will be adding a method called ‘queryDB’ that will retrieve all of the data from the database and a method named ‘querySuccess’ which will display the notifications when if the data retrieval is successful.

Update your index.html so that the source matches the following:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<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();
		} 
 
		// create the db instance
		function createDB() {  
			// creates or opens a new db connection
			var db = window.openDatabase("test", "1.0", "Test DB");
			// call populateDB
			db.transaction(populateDB, errorCB, successCB);			
		}
 
		// inserts test data into db
		function populateDB(tx) {
			// drop the DEMO table if it exists
			tx.executeSql('DROP TABLE IF EXISTS DEMO');  
			// create DEMO table with columns id and data
			tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
			// insert test data into DEMO table
			tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
			tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
		} 
 
		// generic error handler
		function errorCB(tx, err) {
			navigator.notification.alert("error: " + err);
		}
 
		// success handler for db creation & population
		function successCB() {
			navigator.notification.alert('successfully created & populated'); 
			// call queryDB
			db.transaction(queryDB, errorCB); 
		}
 
		// query db for all values in the DEMO table
		function queryDB(tx) {
			tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
		}
 
		// display results of a success db query
		function querySuccess(tx, results) {     
			var len = results.rows.length;
			// display alert with number of rows inserted into the db
			navigator.notification.alert('rows inserted: ' + len);
 
			// display each item in the recordset in its own alert
			if (len > 0) {
				for (var i=0;i<len;i++) {
					navigator.notification.alert('id: ' + results.rows.item(i).id + ' data: ' + results.rows.item(i).data);
				}
			}
		}		   			
	</script>
</head>
<body onload="onLoad();">
	<input type="button" onclick="createDB();" value="Test SQLite DB">
</body>
</html>

The source code for this demo can be found here.

]]> http://www.digitaldogbyte.com/2011/05/12/using-sqlite-with-phonegap-0-9-5-webos/feed/ 7 Notifications & Dashboard in PhoneGap-0.9.5 WebOS http://www.digitaldogbyte.com/2011/05/11/notifications-dashboard-in-phonegap-0-9-5-webos/ http://www.digitaldogbyte.com/2011/05/11/notifications-dashboard-in-phonegap-0-9-5-webos/#comments Wed, 11 May 2011 22:10:39 +0000 Herm Wong http://www.digitaldogbyte.com/?p=167 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:

Alert / Banner example

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.

Dashboard icon

Once the dashboard icon has been pressed, the app will display the dashboard content.

Dashboard icon

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.

]]> http://www.digitaldogbyte.com/2011/05/11/notifications-dashboard-in-phonegap-0-9-5-webos/feed/ 2 setOrientation & setFullScreen in PhoneGap-0.9.5 WebOS http://www.digitaldogbyte.com/2011/05/10/setorientation-setfullscreen-in-phonegap-0-9-5-webos/ http://www.digitaldogbyte.com/2011/05/10/setorientation-setfullscreen-in-phonegap-0-9-5-webos/#comments Tue, 10 May 2011 23:11:56 +0000 Herm Wong http://www.digitaldogbyte.com/?p=158 If you’ve never worked with PhoneGap WebOS; I would strongly recommend that you follow through my previous post.

This demonstration applies to the recently released PhoneGap-0.9.5 implementation of WebOS.

In this post, I’ll demonstrate how to PhoneGap WebOS’ APIs for screen orientation and window sizing.

Setting the screen orientation:

To set the screen orientation of your WebOS app you will need to call the navigator.orientation.setOrientation(orientation) method.

The setOrientation method will accept the follow 5 values as valid orientations:

  • up
  • down
  • left
  • right
  • free

To set your app to use the device’s full screen size you need to call the navigator.window.setFullScreen(boolean) method, which takes a true or false parameter.

If you use the following code in the index.html file of your app, you will be able see how the setOrientation and setFullScreen methods work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
<head>
	<script type="text/javascript" src="phonegap.js"></script>   
	<script type="text/javascript">
 		function onLoad() {
	    	     navigator.device.deviceReady();
		}
	</script>
</head>
<body onload="onLoad();">
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="up" name="orientation" checked>up
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="down" name="orientation">down
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="left" name="orientation">left
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="right" name="orientation">right
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="free" name="orientation">free 
 
        <p><input type="checkbox" onchange="navigator.window.setFullScreen(this.checked);">toggle full screen</p>      
</body>
</html>

Screen capture of the example app with the “left” orientation selected.

Left orientation selected

Source for the above example can be found here.

]]> http://www.digitaldogbyte.com/2011/05/10/setorientation-setfullscreen-in-phonegap-0-9-5-webos/feed/ 0 Getting Started with PhoneGap WebOS 0.9.5 http://www.digitaldogbyte.com/2011/05/10/getting-started-with-phonegap-webos-0-9-5/ http://www.digitaldogbyte.com/2011/05/10/getting-started-with-phonegap-webos-0-9-5/#comments Tue, 10 May 2011 19:49:53 +0000 Herm Wong http://www.digitaldogbyte.com/?p=144 This is a walkthrough of creating a webOS mobile app using PhoneGap 0.9.5. If you’ve previously created webOS apps using older versions of PhoneGap; you will notice that the biggest difference with PhoneGap 0.9.5 is that the Mojo framework is no longer required to author webOS apps.

The first couple steps are to make sure you have all the tools and to set up your project.

  1. The list of necessary software & tools listed in step 3 on the PhoneGap webOS page.
  2. 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.

  1. Create a new index.html file in the framework folder.
  2. Include the phonegap.js library in the of your index.html
  3. Add an onLoad method which triggers the navigator.device.deviceReady() method in the right after the reference to phonegap.js
  4. In the tag’s onload event call the onLoad() method
  5. Add the text “Hello World” within the tags

The source of your index.html should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
    <head>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript">
            function onLoad() {
                navigator.device.deviceReady();
            }
        </script>
    </head>
    <body onload="onLoad();">
        Hello World
    </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).

Presto! You should see your hello world example app in the emulator or device.

PhoneGap webOS Hello World Example

Source can be found here.

]]> http://www.digitaldogbyte.com/2011/05/10/getting-started-with-phonegap-webos-0-9-5/feed/ 2 Robotlegs using a shared eventdispatcher between multiple contexts http://www.digitaldogbyte.com/2010/08/29/robotlegs-using-a-shared-eventdispatcher-between-multiple-contexts/ http://www.digitaldogbyte.com/2010/08/29/robotlegs-using-a-shared-eventdispatcher-between-multiple-contexts/#comments Mon, 30 Aug 2010 02:17:47 +0000 Herm Wong http://www.digitaldogbyte.com/?p=133 My last couple posts discussed two different methods of writing modular applications using the Robotlegs framework. This post will demonstrate yet another method of writing modular applications in Robotlegs using a shared eventDispatcher between the modules.

This approach requires the creation of a getter method for the eventDispatcher from the Application Shell’s context. The eventDispatcher is then injected into the contexts of each module using:

1
2

// injects the application shell's eventDispatcher into the module's context
injector.mapValue(EventDispatcher, Application.application.applicationEventDispatcher, "ApplicationEventDispatcher");

The “ApplicationEventDispatcher” is then used to listen to events and to dispatch events throughout the entire application.

Here is the demo and the source code.

]]> http://www.digitaldogbyte.com/2010/08/29/robotlegs-using-a-shared-eventdispatcher-between-multiple-contexts/feed/ 4 Robotlegs modular application with multiple contexts http://www.digitaldogbyte.com/2010/08/20/robotlegs-modular-application-with-multiple-contexts/ http://www.digitaldogbyte.com/2010/08/20/robotlegs-modular-application-with-multiple-contexts/#comments Fri, 20 Aug 2010 14:16:20 +0000 Herm Wong http://www.digitaldogbyte.com/?p=113 My previous post demonstrated modular programming in the Robotlegs framework using the Robotlegs modular utilities. This post will discuss a workaround that I came up with to handle inter-context communication between modules before the Robotlegs Modular Utilities were released.

The benefits of using this workaround is that you can have modules in their own encapsulated contexts, the disadvantage is that this solution is not very scalable if you have lots of events that need to be mapped between the contexts.

The basic idea is to create a getter for the _eventDispatcher property in the context of each module. Once the root application has fired the creationComplete event, the handler for creationComplete needs to use the getters so that the root application can perform the necessary event mapping which will allow the two modules to communicate.

Here is the demo and the source code.

I’ve added inline comments within the source code explaining how to map the events between the modules.

]]> http://www.digitaldogbyte.com/2010/08/20/robotlegs-modular-application-with-multiple-contexts/feed/ 0