As shown in Figure 5-6, a date picker allows selection of month, day, and year values. The Date picker’s model has a single property, named date by default, which should be assigned a JavaScript Date object. You can change the model property’s name through the attributes modelProperty, and can assign an optional label that’s displayed to the left of the picker. You can use the JavaScript functions GetMonth(), GetDate(), or GetYear() to extract those parts of the Date object that you need.

A Time picker is similar to a date picker, focusing on the time fields of the Date object and with an optional attributes property, minuteInterval, which defaults to the integer 5. As shown in Figure 5-7, a time picker allows selection of hours, minutes, and either A.M. or P.M. for time selection. The picker will suppress the AM/PM capsule if the 24-hour time format is selected in the user preferences or by the locale.

Figure 5-7. A Time picker widget example

You can use the JavaScript functions GetHours(), GetMinutes(), and GetSeconds() to extract what you need from the Date object.

A simple number picker is included as the integer picker. Shown in Figure 5-8, the integer picker offers a selection between minimum and maximum integer values, both of which are specified by required min and max widget properties.

Figure 5-8. An Integer picker widget example

The integer picker is similar to the date and time pickers in all ways, except that its default model property is named value.

News doesn’t have many opportunities to use a picker, but we can add a picker to the Preferences scene to set the feed rotation period. There are arguably better options for handling this UI, so this isn’t intended as a good UI design example, but as a way of demonstrating the coding for a Picker widget. By default, the interval is set to 5 seconds, but with this picker, the user can customize to any period between 1 and 60 seconds.

The Integer picker declaration is added to preferences-scene.html in front of the list selector widget for the update interval. Wrap it in a couple of divs with palm-group and palm-list styles:

<div class="palm-group">
    <div class="palm-group-title"><span>Feature Feed</span></div>
        <div class="palm-list">
            <div x-mojo-element="IntegerPicker" id="featureFeedDelay">
            </div>
        </div>
    </div>
</div>

The widget setup is included in the setup method of preferences-assistant.js, as shown next. The widget is set up with a range from 1 to 20 seconds and initialized to the current global interval, News.featureStoryInterval, which is in milliseconds. A listener is added for Mojo.Event.propertyChange events:

// Setup Integer Picker to pick feature feed rotation interval
this.controller.setupWidget("featureFeedDelay",
    {
        label:    "Rotation (in seconds)",
        modelProperty:    "value",
        min: 1,
        max: 20
    },
    this.featureDelayModel = {
        value : News.featureStoryInterval/1000
    });

this.changeFeatureDelayHandler = this.changeFeatureDelay.bindAsEventListener(this);
this.controller.listen("featureFeedDelay", Mojo.Event.propertyChange,
    this.changeFeatureDelayHandler)

The handler is added to the bottom of the preferences assistant, updating the global interval with the selected value, in milliseconds, and restarts the interval timer with the new value. The interval timer would be set by the FeedListAssistant upon activation or when the feed list is first updated:

//    changeFeatureDelay - Handle changes to the feature feed interval
PreferencesAssistant.prototype.changeFeatureDelay = function(event) {
    Mojo.Log.info("Preferences Feature Delay Handler; value = ",
        this.featureDelayModel.value);

    //  Interval is in milliseconds
    News.featureStoryInterval = this.featureDelayModel.value*1000;

    // If timer is active, restart with new value
    if(News.featureStoryTimer !== null) {
        this.controller.window.clearInterval(News.featureStoryTimer);
        News.featureStoryTimer = null;
    }
};

Figure 5-9 shows the new Preferences scene with the integer picker in place.

Figure 5-9. News with an integer picker