Part 1: Adding More Buttons

First, I'd make a copy of the project you've already created. Just as a precaution, so you can go back to the original 'Hello World' app, if you need to. (If you haven't created the 'Hello World' application, complete the tutorial here.)

We already have one button that increments a counter, so let's add 2 more buttons: 1 to subtract the counter and 1 to clear the counter.

First, modify the first-scene.htm file, so it looks like the following:  (Bold text is new)

<div id="main" class="palm-hasheader">
<div class="palm-header">Add/Subtract</div>
&nbsp;&nbsp;The number is currently:
<div id="count" class="palm-body-text">count</div>
<div id="MyButton" name="MyButton1" x-mojo-element="Button"></div>
<div id="ButtonSubtract" name="ButtonSubtract" x-mojo-element="Button"></div>
<div id="ButtonClear" name="ButtonClear" x-mojo-element="Button"></div>

</div>

 

Let's examine what this code does:

Of course, as you've probably figured out by now, we aren't done yet. We need to modify the first-assistant.js file to add functionality to this application. Modify it so it looks like the following: (Bold text is new)

function FirstAssistant() {
/* this is the creator function for your scene assistant object. It will be passed all the
additional parameters (after the scene name) that were passed to pushScene. The reference
to the scene controller (this.controller) has not be established yet, so any initialization
that needs the scene controller should be done in the setup function below. */


}
FirstAssistant.prototype.handleButtonPress = function(event){
//increment the total and update the display
this.total++;
this.controller.get('count').update(this.total);
}

FirstAssistant.prototype.handleA = function(event){

//subtract the total and update the display

this.total--;
this.controller.get('count').update(this.total);

}

FirstAssistant.prototype.handleC = function(event){

//clear the total and update the display

this.total=0;
this.controller.get('count').update(this.total);
}

FirstAssistant.prototype.setup = function() {
/* this function is for setup tasks that have to happen when the scene is first created */

/* use Mojo.View.render to render view templates and add them to the scene, if needed. */

/* setup widgets here */

/* add event handlers to listen to events from widgets */
// set the initial total and display it
this.total=0;
this.controller.get('count').update(this.total);

// Setup Application Menu - Remove the comment below in the 2nd tutorial
//this.controller.setupWidget(Mojo.Menu.appMenu, AddSubMenuAttr, AddSubMenuModel);


// a local object for button attributes
this.buttonAttributes = {};

// a local object for button model
this.buttonModel = {
buttonLabel : 'Add 1',
buttonClass : 'affirmative',
disabled : false
};

// set up the buttons
this.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);

this.controller.setupWidget("ButtonSubtract", this.buttonAttributes, this.Model = {buttonLabel : 'Subtract', buttonClass : 'negative', disabled : false});

this.controller.setupWidget("ButtonClear", this.buttonAttributes, this.Model = {buttonLabel : 'Clear', buttonClass : '', disabled : false});

// bind the button to its handler
Mojo.Event.listen(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));

//Bind event handler for Subtract button
Mojo.Event.listen(this.controller.get('ButtonSubtract'), Mojo.Event.tap,this.handleA.bind(this));

//Bind event handler for Clear button
Mojo.Event.listen(this.controller.get('ButtonClear'), Mojo.Event.tap,this.handleC.bind(this));
}

FirstAssistant.prototype.activate = function(event) {
/* put in event handlers here that should only be in effect when this scene is active. For
example, key handlers that are observing the document */
}


FirstAssistant.prototype.deactivate = function(event) {
/* remove any event handlers you added in activate and do any other cleanup that should happen before
this scene is popped or another scene is pushed on top */
}

FirstAssistant.prototype.cleanup = function(event) {
/* this function should do any cleanup needed before the scene is destroyed as
a result of being popped off the scene stack */
this.controller.stopListening(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));

//Cleanup Subtraction button
this.controller.stopListening(this.controller.get('ButtonSubtract'), Mojo.Event.tap,this.handleA.bind(this))

//Cleanup Clear button
this.controller.stopListening(this.controller.get('ButtonClear'), Mojo.Event.tap,this.handleC.bind(this))
}

Let's examine what this code does:

From here, we need to use the palm-package and palm-install commands to create an .ipk and install it on either the emulator or the actual device. So, open a Command Prompt. Then type the palm-package (your app name) and palm-install (the .ipk file that is created in the previous command)

Hint: Leave the Command Prompt open. Then, after you make changes, simply hit the up arrow twice for the palm-package command, then repeat via a down arrow for the palm-install command. The Command Prompt saves a copy of previous commands that can be accessed via the up/down arrows as long as the window stays open.

If everything worked well, you should have an application that looks similar to the following:

Add/Subtract App

I hope this information was useful! If you have problems or still need help, I'd recommend asking in the following forums:

Back to Home | Download the Source (.zip) | Download the IPK


© 2009 Richard Neff