webOScapades: July 2011

Tuesday, July 26, 2011

This is Why You RTFM

A more accurate title might be RTFF (Read the ****ing Framework), but that doesn't have quite the same ring to it.

For a while now, I've been idly wondering how to make webOS PhoneGap apps rotate with the device orientation. I knew that there was a way to set orientation via a PhoneGap function, but I didn't bother investigating since it wasn't needed at the time. Until today. I started wondering about possible solutions, perhaps by adding event listeners to detect the orientation and set the corresponding direction.

It turns out that the answer is in the framework, underneath the orientation class.

/*
* Manually sets the orientation of the application window.
* 'up', 'down', 'left' or 'right' used to specify fixed window orientation
* 'free' WebOS will change the window orientation to match the device orientation
* @param {String} orientation
* Example:
* navigator.orientation.setOrientation('up');
*/

Yes, it really is as easy as including "navigator.orientation.setOrientation('free');".

Yes, I felt twice as dumb after realizing that the reference was part of Herm's example code.

Yes, I will RTFM from now on.

Sunday, July 17, 2011

Tips from the Twitterverse

I haven't forgotten about webOScapades. Oh, not at all. I have a few new posts coming soon. Today, I'll dip into the lovely mess of Twitter for some PhoneGap tips.

The first tip comes from Herm Wong at Nitobi, the gentleman responsible for the updates to PG-webOS. It stems from two questions that posed to him: how do you programmatically close the card that you're currently in, and how do you close the parent of the card that you've opened? He's compiled the answers into a comprehensive post on his blog, which also includes the parameter passing tricks. Window.close() and other functions are part of the Javascript Window object, so if you find other window functions that work well with PhoneGap/webOS, please post about it in the comments!

The second tip is from Markus Leutwyler at HP. If you've gotten your hands on one of those shiny new HP Touchpads, the inertial scrolling examples that I posted about work very well. Just add "uiRevision" : "2" to your appinfo.json file. The end result is a full-screen app with code that works on webOS 1.x, 2.x, and 3.x at the same time. In my opinion, that's a pretty good answer to the Mojo/Enyo debate.

One final bit of news: PhoneGap 1.0.0 is on its way. Woohoo! It includes support for touch events, which has been documented by Herm on his blog.

Saturday, July 2, 2011

Passing Parameters to a New Card in PhoneGap

Here's a neat trick to whet your PhoneGappetites. As I've said before, Herm Wong's excellent tutorial series on using PhoneGap with webOS is a great place to get started with development. I'm going to concentrate on a particular post of his, how to use the New Card API in PhoneGap.

To launch a new card, just use the form of "navigator.window.newCard(url, html);". While this invocation is both simple and powerful, it's also somewhat lacking. If you open a new card using the url parameter, it just calls that page statically. Using the optional html field to pass code gives you some options of interacting with the new card, but isn't a reusable method and your code becomes needlessly messy. The most successful apps live and breathe on passing dynamic data. What can you do to get there?

The solution came from this post on the HTML Forums. Simply pass parameters via the URL, the same way that you would for other web languages like PHP. It takes the form of file.html?firstname=Keanu&lastname=Reeves.

No SEO trickery going on here. Nope.

Here's a PhoneGap-ready example of the code. Put these two files in your webos/framework directory.

index.html

<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="Launch a new card" onclick="navigator.window.newCard('passing.html?firstname=Keanu&lastname=Reeves');"></p>
</body>
</html>

passing.html

<html>
<head>
<title>Page 2</title>
<script type="text/javascript" src="phonegap.js"></script>
<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>
</body>
</html>

Voilà! For added fun, try to modify the example to use input from two text fields to pass data to the new card. Not sure how? Here's a hint: Use "document.getElementById('element').value" to access the contents of the form fields. More on that in a coming post.