webOShelp.net

Get the latest on:webOS Developers' RSS FeedwebOS Facebook page webOS Twitter Feed

Home Getting Started with webOS Add snooze functionality to the webOS Clock: Sprint DevCon tutorial

Add snooze functionality to the webOS Clock: Sprint DevCon tutorial

Today at the Sprint Developer Conference, Palm's Matt Hornyak, the lead engineer responsible for the webOS phone app and Clock that ship with the Pre, gave a tutorial on how to change the length of a snooze alarm in the Clock app. This was done in just five minutes in front of a live audience of about 500, and was running on the device by the end of his presentation.

The PDN Blog posted a "sneak preview" of the code used to add the snooze feature to the clock, with Hornyak's annotations in boldface. Definitely worth a look for JavaScript and Mojo gurus who have a hard time getting out of bed.

According to the conference schedule there's an upcoming Palm Keynote from developer relations tomorrow, so we should have more webOS news soon. Palm promises an article later with detailed instructions on how to add this feature, but for now here's the code to play around with (after the break):

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());
}
},

 

 

0 Comments

Add Comment


    • >:o
    • :-[
    • :'(
    • :-(
    • :-D
    • :-*
    • :-)
    • :P
    • :\
    • 8-)
    • ;-)

     

     

    What's your primary background?