IntegerPicker

From WebOS101

Contents 1 Introduction 2 Setup 2.1 Mojo 2.2 Ares 3 Usage 3.1 Mojo/Ares

Introduction

For the Enyo kind, please see enyo.IntegerPicker.

The IntegerPicker widget allows the user to choose from a scrolling wheel of integers.

Coding "manually" in Eclipse et al requires some setup, whereas Ares handles most of this for you. Below are usage examples for both.

The Palm developer documentation[1] for the IntegerPicker is somewhat generic and this will serve to supplement it. Please refer to it for any implicit details (not)mentioned here.

Setup

The IntegerPicker widget is setup in the typical webOS style through the use of a setup function which passes the ID, the Attributes, and the Model as it's parameters with the latter two often in the form of JSON. These parameters can be specified inline with the function, or as part of a variable. Using a variable allows you to reference the values later in your code.

Mojo

In your scene's html file, declare the widget:

<div x-mojo-element="IntegerPicker" id="integerPickerNumOfPies"></div>

In your assistant's setup function, setup the widget:

Example 1: For clarity...

SceneAssistant.prototype.setup = function() {
    var integerPickerNumOfPiesAttributes = {
	label: "Number of Pies",
	min: 0,
	max: 10
    };
 
    var integerPickerNumOfPiesModel = {
    	value: 0
    };
 
    this.controller.setupWidget(            // Widget setup function
        "integerPickerNumOfPies",           // First parameter, widget ID, (matches id="" in <div>)
        integerPickerNumOfPiesAttributes,   // Second parameter, attributes (referencing variable)
        integerPickerNumOfPiesModel         // Third parameter, model (referencing variable)
    );
};

Here you can see we have created two variables, one for the attributes and one for the model. Unless you intend to reuse the attributes variable, or if you just like to lay out your code this way, there is no need to declare a variable for it and you may save some memory by not doing so. As for the model, it is practically required if you intend to access the data in the future.

Example 2: For practicality...

SceneAssistant.prototype.setup = function () {
    this.controller.setupWidget(                        // Widget setup function
        "integerPickerNumOfPies",                       // First parameter, widget ID, (matches id="" in <div>)
        { label: "Number of Pies", min: 0, max: 10 },   // Second parameter, attributes (JSON)
        this.integerPickerNumOfPiesModel =              // Third parameter, model (declaring, initializing & referncing variable)
            {});
};

In this example, we do not declare a variable for the attributes, but we do for the model, just in a different place. This code is a bit more compact than the previous example.

Ares

Setup in Ares is much quicker. Simply drag the widget onto the screen, enter some text for the various properties on the right, and save your changes. You will notice that these properties match up to those found in the Attributes and Model properties in the above code. In order to assign an identifier to the model variable, type its name in the modelName field of the Ares editor.

Usage

To access the data using the model variable that was created, use the following code example which works in both Mojo & Ares.

Mojo/Ares

someVariable = this.integerPickerNumOfPiesModel.value;

By referencing the model variable, we can then access the various properties of the model directly as in the case of the value property.