subtly simple words about …

As i have been doing more webos app development, i thought i would just keep little snippets of things i learned as i was developing. One thing that i really wanted to do was to have a spinner in as a button in the command menu (aka the button bar at the bottom). First you need the code to setup the commandMenu. This is called in the setup method of your assistant. In this case, i have a menu with a new button on the left and 2 buttons on the right and a spinner in the last spot (aka the dynamic content).

this.cmdMenuModel = { items: [
	{
		items: [{label: $L('New'), icon: 'new', command: 'new'}]
	},
	{},
	{
		items: [
		{label: $L('undo'), icon: 'refresh', command: 'undo'},
		{label: $L('search'), icon: 'search', command: 'search'},
		{example: 'A', template: 'common/spinner'}]
	}]
};
this.controller.setupWidget(Mojo.Menu.commandMenu, undefined, this.cmdMenuModel);

this.controller.setupWidget('spinner', {
		spinnerSize: Mojo.Widget.spinnerSmall,
	},
	sceneAssistant.spinnerModel = {
		spinning: true
	});
this.spinnerWidget = this.controller.get('spinner');

The template for something to show up in the button bar looks like this. This makes it still look like a button but you can show your content. The main thing to notice is that the item from the command model above is passed to the template for variable expansion.

        #{example}

Now you should have something that looks like:

Also, you can now enable and disable the spinner with:

	this.spinnerModel.spinning = false;
	this.controller.modelChanged(this.spinnerModel);