May 10
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:
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.
Source for the above example can be found here.
May 10
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.
- 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 of your index.html
- Add an onLoad method which triggers the navigator.device.deviceReady() method in the right after the reference to phonegap.js
- In the tag’s onload event call the onLoad() method
- 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.
Source can be found here.
Aug 29
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.