WebOSDev - Programming has just evolved

Activating one app menu for all the scenes

Posted by codesos Tuesday, November 3, 2009 0 comments

Want to define one app menu , Handle it once but acrivate it from all scenes?

Here is the way

1. Define the menue modal and att as globals in the stage scene

glob = {};

glob.MenuAttr = {omitDefaultItems: true};

glob.appMenuModel = {

               visible: true,

               items: [

                           Mojo.Menu.editItem, //must

                            {label: $L("Preferences..."), command: "do-Prefs"},

                            {label: $L("Help"), command: "do-about"}

                          ]

                    };

define the handle command in the same stage scene :

StageAssistant.prototype.handleCommand = function(event)
{
                      var currentScene = Mojo.Controller.stageController.activeScene();

                      if (event.type == Mojo.Event.commandEnable) {

                                  if ((event.command == "do-Update")) {

                                            event.preventDefault();
                                   }

                       }

else {

           if(event.type == Mojo.Event.command) {

               switch(event.command) {

                     case "do-about":

                         Mojo.Controller.stageController.pushScene('support');

                     break;

                     case "do-Prefs":

                          Mojo.Log.info("do-Prefs");

                         Mojo.Controller.stageController.pushScene("preferences");

                     break;

                  case "do-Update":

                  break;

           }

     }

}

}

now in every scene's setup function do this:

this.controller.setupWidget(Mojo.Menu.appMenu, glob.MenuAttr, glob.appMenuModel);

Done!!

Full Story

How to capture click on itemTemplate on FilterList

Posted by codesos Thursday, October 15, 2009 0 comments

Here are some tips regurding capturing "tap" events on itemTemplate on FilterList.

1. Define HTML Mojo object

<div x-mojo-element="FilterList" class="filterlistClass" id="filterlistID" x-mojo-focus-highlight="true"></div>

2. Difine the "filterlistID" in the .js file.

var attributes =

{

itemTemplate: 'food-filter-list/entry',

swipeToDelete: bSwipeToDelete,

reorderable: false,

filterFunction: this.list.bind(this),

formatters:{Food_Item:this.formatName.bind(this),Points:this.formatNumber.bind(this)},

delay: 500, //1 second delay before filter string is used

disabledProperty: 'disabled'

};

this.model = {

disabled: false

};

this.controller.setupWidget('filterlistID', attributes, this.model);

this.tapped = this.tapped.bindAsEventListener(this);

Mojo.Event.listen(this.controller.get('filterlistID'), Mojo.Event.listTap, this.tapped);

3. Int the entry.html file defined for the itemTemplate define

<div class="palm-row" x-mojo-tap-highlight="momentary">

<div class="palm-row-wrapper">

<table width="100%">

<tr>

<td width="90%"><div class="title"><font face="Comic Sans MS, Arial, Impact" size="3">

#{Food_Item} has the value of #{Points} DC Points

</font></div></td>

<td width="10%">

<div class="palm-button InfoBtnCL" id="InfoBtnID"></div>

</td>

</tr>

<tr>

<div id='AdditionalInfoID'>

</div>

</tr>

</table>

</div>

now we want to capture the click event of the InfoBtnID button right?

4. in the .js file tapped function

FoodFilterListAssistant.prototype.tapped = function(event)

{

Mojo.Log.info("*************** Tapped " + event.originalEvent.target.id );

if(event.originalEvent.target.alt!=undefined && event.originalEvent.target. id == "InfoBtnID")

{

//code for clicking on the InfoBtnID button

}

else

{

//code for tapping the list item

}

Full Story

The FloatPicker

Posted by codesos 13 comments

Ever thought about why the mojo SDK doesn't contain a floatPicker?

So did I.

With a little code changes and some thought i present to you:

The Float Picker

Usage:

HTML :

<div id="FloatPickerID" x-mojo-element="FloatPicker"></div>

JS :

****.prototype.setup = function() {
    attributes = {
            label:    'Float', // the label next to the control
            min: 0, // minimum value
            max: 10, // maximum value
            modelProperty:    'value',
                Interval:0.1 //the "jumps" of the value , use integers to display as integerPicker
            };
        this.model = {
            value : 0.1, // current value

disabled : false // use this to set enable/disable of the control

}

this.controller.setupWidget('FloatPickerID', attributes, this.model);
}

This FloatPicker is a subclass of IntegerPicker so it uses the same attributes and model , with the addition of Interval attribute which determain the value "jumps" of the control.

to change the control's enable disable state use:

this.pickerModelNewPoints.disabled = true; // or false

this.controller.modelChanged(this.model);

Enjoy

Full Story

Did you now that DatePicker's label is not shown in dialogs?

Posted by codesos Sunday, October 11, 2009 0 comments

v 1.2 comes with

.palm-dialog-box .label.left.mv-picker-label {
display: none;
}

in global-widget-mvpicker.css

to overcome this changed in your css:

.palm-dialog-box .label.left.mv-picker-label {
display: block;
}

Full Story

WebOSDev - Programming has just evolved