From WebOS101

Introduction

These snippets of code provide some useful functionality that you can copy directly into your applications. When adding snippets please group them by functional area. If relevant to a Palm API, Service or Widget feel free to add a link from the page that discusses it. Try to make sure snippets are general in nature and replace any application specific naming with generic naming (e.g. MatchemMenu -> AppMenu). For instructions on using the <code> tag visit Help:Editing.

Snippets

Style the app menu (In this case, remove capitalization):

#palm-app-menu {
    text-transform: none;
}

Focus a TextField from a Button press:

MyAssistant.prototype.buttonClickHandler = function (event) {
    this.controller.get("TextField").focus();
    Event.stop(event);
}

Get the actual screen dimensions (width and height) to adjust positions for Pré or Pixi:

var width = this.controller.window.innerWidth;
var height = this.controller.window.innerHeight;

Make your scene full-screen (clock, service, app menu go away, notifications do not):

MyViewAssistant.prototype = {
    setup: function {},
    activate: function(event) {
        // this is the important bit:
        this.controller.enableFullScreenMode(true);
    }
 
    // ... rest of your prototype methods follow
};

Note: Do not place enableFullScreenMode in your setup function as it can cause a gap to be left at the bottom of the screen that displays parts of index.html!

Set initial focused element or prevent any element from getting focus:

this.controller.setInitialFocusedElement(null);

setInitialFocusedElement accepts null, an element ID or an element.

Show all properties of an object:

Object.toJSON(error);

Copying Text to the Clipboard

this.controller.stageController.setClipboard('hello webos',true);

Change Text of class="palm-group-title" by adding a div id="id-name"

<div class="palm-group-title" x-mojo-loc='' id="id-name">enter search text</div>

this.controller.get('id-name').innerHTML = 'hello webos';

Disable default scroll behavior of a scene

this.controller.stageController.pushScene({name:"YourDiv", disableSceneScroller: true});

Send Device Information to a Web Service

Send Device Unique ID and Application Version

this.controller.serviceRequest('palm://com.palm.preferences/systemProperties', {
        method:"Get",
        parameters:{"key": "com.palm.properties.nduid" },
        onSuccess: function(response){
            var request = new Ajax.Request("http://www.yourserver.com/your-page.php?DeviceID="+response
['com.palm.properties.nduid']+"&Version="+Mojo.Controller.appInfo.version, {
                method: 'get',
                onSuccess: function(){},
                onFailure: function(){}
            });
        }.bind(this)
    });

Change an application's icon based on today's date

To change application's icon based on today's date, you'll need 31 different icons. A call to the applicationManager serviceRequest will update your applications icon.

MyAssistant.prototype.updateIcon = function() {
	var myDate = new Date();   //get today's date and extract the day (1-31)
	var iconString = myDate.getDate() + '-64x64.png'; //requires 31 icons named 1-64x64 thru 31-64x4.png
	var params =
	{
		method: 'updateLaunchPointIcon',
		parameters:
		{
			launchPointId: 'com.my.app_default', //changes default icon for com.my.app
			icon: 'icons/' + iconString  //icons are stored in app/icon directory
		}
	};
	new Mojo.Service.Request( 'palm://com.palm.applicationManager', params );
}

Restricting a TextField to only numbers

During setupWidget() you can set a function to determine which characters are allowed in a TextField. In the example below, the TextField is also set to have the numLock turned on.

this.controller.setupWidget( 'myTextField', 
		{
			hintText: $L('Enter a number'),
			modifierState: Mojo.Widget.numLock,
			autoFocus: true,
			charsAllow: this.onlyNum.bind(this)
		}, 
		this.myTextFieldModel = {
			value: ''
		}
	);

This function will allow only the '.' and characters '0-9' to be entered into the TextField.

MyAssistant.prototype.onlyNum = function(charCode) {
	if (charCode == 46 || (charCode > 47 && charCode < 58)) return true;
	return false;
}

Creating a Dark Themed App

Here is the sure-fire way to make your app palm-dark. First, edit appinfo.json:

// File: appinfo.json
{
  ...,
  "theme":"dark",
  ...
}

Alternatively you can just remove the theme line altogether.

Next, change index.html:

<!-- File: index.html -->
<html>
  ...
  <body class="palm-dark"></body>
</html>

Alternatively, you can add this to your stage assistant setup method.

$$('body')[0].addClassName('palm-dark');

That's all there is to it. One quirk that I know of so far (there may be others) is that in order to get palm-page-header to show up dark you must set it to multi-line using:

<div class="palm-page-header multi-line">
  <div class="palm-page-header-wrapper">
    <div class="title left">
      My Dark App
    </div>
  </div>
</div>

Open up the App Catalog directly to your app:

This is how Paratrooper Mini links to the "premium" version of Paratrooper with the Upgrade menu button:

StageAssistant.prototype.buyGame = function (callback) {
 
    var currentScene = Mojo.Controller.stageController.activeScene();
 
    var launchParams = {
        id: "com.palm.app.findapps",
        params: {'target': "http://developer.palm.com/appredirect/?packageid=com.185vfx.paratrooper&applicationid=765"}
    };
 
    currentScene.serviceRequest('palm://com.palm.applicationManager',
    {
        method: 'open',
        parameters: launchParams
    });
 
    if (callback) {
        callback();
    }
};

Adding a custom splash screen

With 1.4 you will see a instant opening of the application card in the background which might have a splash screen and a separate icon on it. How is it done? Add these 2 lines to your appinfo.json:

"splashicon": "icon-256×256.png",
"splashBackground":"images/splash-screenshot-default.png",

source: [1]

Adding a custom background

It's easy to add a custom background image to your app. And, you can even override the background on a scene-by-scene basis. The code below uses 'background.jpeg' for all scenes except the 'splash' scene.

body.palm-default {
    background: url('../images/background.jpeg') top left no-repeat;
    z-index: -1;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 320px;
    height: 480px;
}
 
#mojo-scene-splash-scene-scroller {
    background: url('../images/splash.jpeg') top left no-repeat;
}

Code Snippets