Help with a simple app, button interaction

Former Member over 10 years ago

Hi All,

From the documentation available I'm struggling to understand what the best way to implement a simple speed/time application.

The application is simple, imagine a screen with three fields

[FONT=Courier New]
| Distance: x |
| Speed: y |
| Time: z |
[/FONT]

I want to be able to have the user move between these fields and increment one, as they increment it the others change accordingly.

A simple app of course, nothing special about it other than hopefully helping me to learn more about writing code for the Fenix 3.

travis.vitek over 10 years ago

If I were to implement this, I'd do it the simplest way possible. I'd create a class that inherits from Ui.View. I'd use a layout to place three labels, and I'd give id values to each of those labels. One would be called Distance, one Time and the other Speed. I'd load that layout from the resource system, and I'd get references to each of the labels and store them as members for quick access. I'd add functions to allow getting and setting the distance and time. The set function would set the specified value and request update of the Ui... Something like this...

function setTime(time) {
    mTimeValue = time;
    Ui.requestUpdate();
}

function setDistance(distance) {
    mDistanceValue = distance;
    Ui.requestUpdate();
}

function onUpdate(dc) {
    mDistanceField.setText("Distance: " + mDistanceValue);
    mTimeField.setText("Time: " + mTimeValue);

    // calculate the speed based on distance and time
    var speed = mDistanceValue / mTimeValue;
    mSpeedField.setText("Speed: " + speed);

    Ui.View.onUpdate(dc);
}

I'd implement a simple event handler. Pressing the menu key would create a menu. and push that menu and a menu event handler. The menu would have two entries in it; Distance and Time. When the user picked one of these menu items, I'd push a number picker and a number picker delegate that allowed them to modify the current value of that field. When the number picker delegate is notified of a new value, it would update the value of the field by calling the function on the view mentioned above.

If you want to see the values of each field change as you adjust another, I'd switch it up just a little. Instead of using a menu and a number picker, I'd create an event handler that had some state. When the application/widget loaded it would be in the initial state (just display data). If the user pressed the Enter key, it would enter the second state (select field to modify). I'd create a variable that is the index of the selected label in the layout. The selected label would need to be drawn differently, so you'd need to create some drawing code. The initial value of the selected label would be 0, and pressing the up/down arrows would change the selection. Pressing Enter would enter the third state (modify field value). In this state, pressing the up/down keys would modify the value of the field.

Travis