HP webOS Developer Blog

Until now, we’ve been pretty nontechie here, but what Palm Engineer Matt Hornyak did during his talk at the Sprint Developer Conference today was so cool that we have to get really technical here, at least for today.

Matt is the lead engineer on the webOS phone app. He also wrote Clock, which ships with Pre. In front of the gathered masses at the Sprint conference – somewhere around 500 of them – he went deep inside Clock. Matt explained his motivation in writing it and then described the design and coding of it.

All great stuff, but he saved the best for last. Wanting a way to change the length of the snooze alarm in the Clock app, Matt cooked up the code, added it to the app, and – voila – Clock had snooze control, running on the device I might add. And all this in about five minutes, in front of a live audience.

Here is the code he used for the control, with Matt’s annotations (in boldface) about what each section does. You might want to take a look at Clock and try adding this yourself, although if you’re not really experienced with JavaScript and Mojo yet, you might not want to make this the first thing you try.

If this is over your head, hang in there. We’re collaborating with Matt on an article about Clock that will include more detailed instructions on how to add the snooze feature. Consider this a sneak preview.

More from the Sprint conference later this week. Check back, ok? Out for now.

Listing 1. Adds the new widget, and the borders around it.

Index: app/views/settings/settings-scene.html
===================================================================
— app/views/settings/settings-scene.html    trunk)
+++ app/views/settings/settings-scene.html    (demo)    @@ -33,5 +33,16 @@
</div>
</div>
</div>
+
+    <div class=”palm-group”>
+        <div class=”palm-group-title”>
+            <span x-mojo-loc=”>snooze</span>
+        </div>
+        <div class=”palm-list”>
+             <div class=”palm-row single”>
+                <div id=”snoozeduration” x-mojo-element=”ListSelector”></div>
+            </div>
+        </div>
+    </div>

Listing 2. Changes settings assistant to set up new widget, and respond to events from it.

Index: app/controllers/settings-assistant.js
===================================================================

— app/controllers/settings-assistant.js    trunk)
+++ app/controllers/settings-assistant.js    demo
@@ -1,6 +1,26 @@
/* Copyright 2009 Palm, Inc.  All rights reserved. */

var SettingsAssistant = Class.create({
+    // values for snooze duration listselector
+    snoozeDurationChoices: [
+        {
+            label: $L("5 min."),
+            value: 5
+        },
+        {
+            label: $L("10 min."),
+            value: 10
+        },
+        {
+            label: $L("15 min."),
+            value: 15
+        },
+        {
+            label: $L("8 hrs."),
+            value: 480
+        },
+    ],
+
initialize: function(settings, themes, onThemeChange) {
this.appController = Mojo.Controller.getAppController();

@@ -14,6 +34,7 @@
this.initializeSettings();

this.onKeyPress = this.onKeyPress.bind(this);
+        this.onSnoozeDurationChange = this.onSnoozeDurationChange.bind(this); // event handler for snooze duration list handler

this.easterString = “”;

@@ -22,8 +43,12 @@
// VERY IMPORTANT: UI for ringer switch has OPPOSITE MEANING of variable
// it’s reversed here for display and must be reversed back when saving
initializeSettings: function() {
-        this.settingsModel = { };
-        this.settingsModel.ringerSwitchObeyed = !(this.settings.ringerSwitchObeyedGet());
+        this.settingsModel = {
+            ringerSwitchObeyed: !(this.settings.ringerSwitchObeyedGet()),
+            snoozeDuration: this.settings.snoozeDurationGet() // load setting for snooze duration into scene’s model
+        }
+
+
},

setup: function() {
@@ -50,6 +75,15 @@

this.controller.get(‘theme_set’).observe(Mojo.Event.tap, this.onThemeSelect);

+        this.controller.setupWidget(‘snoozeduration’, { // setup snooze duration’s listselector widget
+            label: $L(‘length’),
+            choices: this.snoozeDurationChoices,
+            modelProperty: ‘snoozeDuration’,
+            labelPlacement: Mojo.Widget.labelPlacementLeft
+        }, this.settingsModel);
+
+        this.controller.listen(‘snoozeduration’, Mojo.Event.propertyChange, this.onSnoozeDurationChange);
+
this.controller.listen(this.controller.sceneElement, Mojo.Event.keypress, this.onKeyPress);

},
@@ -74,6 +108,10 @@
this.settings.ringerSwitchObeyedSet(!(this.settingsModel.ringerSwitchObeyed));
},

+    onSnoozeDurationChange: function() { // respond to events on list selector widget
+        this.settings.snoozeDurationSet(this.settingsModel.snoozeDuration);
+    },
+
themeUpdate: function() {
var theme = this.themes.getCurrentTheme();
this.controller.get(‘theme_name’).textContent = this.themes.getNicename(theme.name);

****end of framework-specific code; the rest is app-specific

Listing 3. Changes settings model to get/save snooze length.
Index: app/models/settings.js
===================================================================
— app/models/settings.js    (trunk)
+++ app/models/settings.js    (demo)
@@ -36,7 +36,8 @@
timePickerInterval: 5,
dashboardHide: false,
ringerSwitchObeyed: false,
-            initialized: true
+            initialized: true,
+            snoozeDuration: 5
};

this.save();
@@ -72,9 +73,18 @@

ringerSwitchObeyedGet: function() {
return this.values.ringerSwitchObeyed;
-    }
+    },

+    snoozeDurationGet: function() {
+        return this.values.snoozeDuration || 5
+    },
+
+    snoozeDurationSet: function(value) {
+        this.values.snoozeDuration = value;
+        this.save();
+    },
+
});

Settings.kCookieKey = “settings”;

Listing 4. Changes alarm model to have adjustable snooze time.
Index: app/models/alarm.js
===================================================================
— app/models/alarm.js    (trunk)
+++ app/models/alarm.js    (demo)
@@ -341,12 +341,19 @@
},

// snooze this alarm.  pass true to indicate that it was snoozed by another popup opening
-    snooze: function(alarmInterrupted) {
+    snooze: function(alarmInterrupted, duration) {
var newParams = Alarm.kAlarmLaunchParams.evalJSON();
newParams.params.id = this.id;
if (alarmInterrupted) {
newParams.params.alarmInterrupted = true;
}
+
+        if (duration) {
+            duration = “00:” + duration + “:00″
+        } else {
+            duration = Alarm.kAlarmSnoozeDuration;
+        }
+
var newParamsJSON = Object.toJSON(newParams);
this.schedulerSetRequest = new Mojo.Service.Request(Alarm.kAlarmSchedulerUri, {
method: “set”,
@@ -355,7 +362,7 @@
“key”: Alarm.kAlarmSchedulerKeySnooze+this.id,
“uri”: Alarm.kAlarmLaunchUri,
“params”: newParamsJSON,
-                ”in”: (alarmInterrupted ? Alarm.kAlarmSnoozeInterruptedDuration : Alarm.kAlarmSnoozeDuration)
+                ”in”: (alarmInterrupted ? Alarm.kAlarmSnoozeInterruptedDuration : duration)
},
onSuccess: function(payload) {
// Mojo.Log.info(“Alarm: snooze succeeded”);

Listing 5. Changes ring notification to get snooze length.

Index: app/controllers/ring-assistant.js
===================================================================
— app/controllers/ring-assistant.js    (trunk)
+++ app/controllers/ring-assistant.js    (demo)
@@ -5,6 +5,7 @@
initialize: function(params){
this.appControl = Mojo.Controller.getAppController();
this.appAssistant = this.appControl.assistant;
+        this.settings = this.appAssistant.settings;

this.alarmOff = this.alarmOff.bindAsEventListener(this);
this.snooze = this.snooze.bindAsEventListener(this);
@@ -55,7 +58,7 @@
} else if (this.shortSnooze) {
this.alarm.snooze(true /* short snooze */);
} else {
-            this.alarm.snooze();
+            this.alarm.snooze(false /* not short snooze */, this.settings.snoozeDurationGet());
}
},