webOS Code Snippets

0 BY devrel

The awesome webos101 crew have a code snippets area that you should know about. What kind of cases will you see up there?

UI Appearance

There are a lot of tweaks at your disposal via CSS styling. Whether it be a simple #palm-app-menu style to change the app menu, using the dark theme (“theme”:”dark” in appinfo.json) or changing the look of your submenus:

// menu grouping at bottom of scene
this.cmdMenuModel = { label: $L('Menu Demo'),
    items: [
      { label: $L('Resources'), icon: "increase", submenu:'resources-menu'},{},{},{},
]};

this.resourcesMenuModel = { label: $L('Resources'), items: [
    {icon: "reminder",  secondaryIcon: "reminder", label: $L('Set Reminder'),
     command: "doCalendar"},
    {label: $L('Armortization Table'),secondaryIcon:'table', command: "amortButtonPress"},
    {label: $L('Increase Amount'),  secondaryIcon: "increase", command: "incrButtonPress"},
    {label: $L('Email'), secondaryIcon: "send", command:'email' }
]}

this.controller.setupWidget(Mojo.Menu.commandMenu,  {spacerHeight: 0, menuClass: 'no-fade'},
                            this.cmdMenuModel);
this.controller.setupWidget('resources-menu', undefined, this.resourcesMenuModel);

… you are covered.

Behavior

What little things do you find yourself doing? In this section we see things like using the clipboard:

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

or launching the app catalog:

new Mojo.Service.Request('palm://com.palm.applicationManager', {
   method: "open",
   parameters: {
     target: 'http://developer.palm.com/appredirect/?packageid=your.app.id'
   }
});

to sensing that the user is holding a digit on the gesture area:

// You can also use just 'document' as the target is you have a single stage application.
// Otherwise you must set it to the correct stage's document as shown here
// You can also get the StageController like this:
//   Mojo.Controller.getAppController().getStageController('NameOfStage');
Mojo.Event.listen(this.controller.stageController.document, 'keydown',
                  MyFunction.bindAsEventListener(this));

function myFunction (event) {
  // You can also check the keyCode instead. Ex: event.keyCode === Mojo.Char.metaKey
  if (event.metaKey === true) {
    // Do stuff when the meta key (gesture area) is tapped or held
  }
}

There is much much more. And the best thing? It is a Wiki, so go add your good stuff!

Thanks to everyone that contributed. Our contribution?

Our Facebook application lets you update status via a launch param:

this.controller.serviceRequest("palm://com.palm.applicationManager", {
    method:      'launch',
    parameters:  {
        id: 'com.palm.app.facebook',
        params: { status: "Check this out: " + this.storyFeed.stories[this.storyIndex].title +
                                 " - " + this.storyFeed.stories[this.storyIndex].url }
    }
});

Comments are closed.