Application Model

Consider the sample application Counter, listed below. This application displays a count, with buttons to increment, decrement, and reset the count. The decrement and reset buttons are only enabled if the count is greater than zero. The count value is displayed in green with a normal font weight unless the count is greater than or equal to 10, in which case the count is displayed in red and bold.

// Counter page
//
var maaas = require('../maaas');

var fontStyle = 
{
    normal: { color: "Green", isBold: false },
    highlighted: { color: "Red", isBold: true }
}

exports.View =
{
    title: "Click Counter",
    onBack: "exit",
    elements: 
    [
        { control: "text", value: "Count: {count}", foreground: "{font.color}", font: { size: 24, bold: "{font.isBold}" } },
        { control: "button", caption: "Increment Count", binding: { command: "vary", amount: 1 } },
        { control: "button", caption: "Decrement Count", binding: { command: "vary", amount: -1 }, enabled: "{count}" },
        { control: "button", caption: "Reset Count", binding: "reset", enabled: "{count}" },
    ]
}

exports.InitializeViewModel = function(context, session)
{
    var viewModel =
    {
        count: 0,
        font: fontStyle.normal,
    }
    return viewModel;
}

exports.OnChange = function(context, session, viewModel, source, changes)
{
    viewModel.font = (viewModel.count < 10) ? fontStyle.normal : fontStyle.highlighted; 
}

exports.Commands = 
{
    vary: function(context, session, viewModel, params)
    {
        viewModel.count += params.amount;
    },
    reset: function(context, session, viewModel)
    {
        viewModel.count = 0;
    },
    exit: function(context)
    {
        return maaas.navigateToView(context, "menu");
    },
}