WebOSDev - Programming has just evolved

Move FilterField from top of scene

Posted by codesos Monday, April 5, 2010 2 comments

Tried to use FilterList widget with a view menu or a normal header? this is a problem because they collided with the filter field once a letter is typed, because the filter field does not honor the height setting.

to over come it , add a class to your FilterListWidget and in the CSS do that:

.[Filter List Class] .filter-field-container {
    top: 0px;
    left: 0px;
    position: fixed;
    width: 100%;
    height: 100px;
    z-index: 0;
}

This will fix this issue.

Nice Ah?

Full Story

How to Make SwipeToDelete Dynamic

Posted by codesos Saturday, April 3, 2010 0 comments

You have to declare in th attributes of the list swipeToDelete: true to allow the list to delete items , but add this preventDeleteProperty:'noDelete' also if you want the list to be able to determine which items can be deleted or not.

so for example:

var attributes =
{
    itemTemplate: 'food-filter-list/entry',
    swipeToDelete: true,
    preventDeleteProperty:'noDelete',
    reorderable: false,
    filterFunction: this.FilterList.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.filterlist = this.controller.get('filterlistID');

the default implementation allows delete of all the items.

Now if you want to allow an item not to be deleted :

entry = {Food_Item: $L(row.Portion + ConnectionWord + row.Food_Item), Points: row.Points,ItemObj:row,'noDelete':true};

this.FoodList[i] = entry;

this way you can dynamically determine which item can be deleted or not

cool , no?

Full Story

Using scrollable log text box

Posted by codesos Sunday, February 21, 2010 0 comments

Want scrollable log trace or text edit? here's how:

HTML:

<div class="palm-group unlabeled" id="scrollID" x-mojo-element="Scroller">
<div id="scrolling_contents">
</div>
</div>

JS:

SETUP

this.modesModel = {scrollbars: true, mode: "vertical"},
    this.controller.setupWidget('scrollID', {}, this.modesModel);
    this.scroller = this.controller.get('scrollID');
    this.scrollStarting = this.scrollStarting.bind(this);
    this.controller.listen(this.scroller, Mojo.Event.scrollStarting, this.scrollStarting);

MyAssistant.prototype.scrollStarting = function(event) {
        event.scroller.addListener(this);
        Mojo.Log.info(new Date(), "scroll starting");
    }

MyAssistant.prototype.AddLog= function(str,bClear)
{

   if(bClear==undefined){
        if(this.controller.get('scrolling_contents').innerHTML.length>0)
            this.controller.get('scrolling_contents').innerHTML+="<br />";
        this.controller.get('scrolling_contents').innerHTML+=str;
    }
    else if(bClear==true)
    {
        this.controller.get('scrolling_contents').innerHTML=str;
    }

}

Magic , Isn't it?

Full Story

AdMob.com integration

Posted by codesos 0 comments

Want to add professional advertisements to your palm pre applicatio?

It's as simple as 1,2,3

1 . go to http://code.google.com/p/admob-webos/

download admob.js and place it in your application

2. HTML File:

<div id="admob_ad"></div>

Initialize:

    AdMob.ad.initialize({
                      pub_id: '*********', // your publisher id get it from admob.com
                      bg_color: '#ccc', // optional background color, defaults to #fff
                      text_color: '#333'
                      });

and for each time you want to display ad:

AdMob.ad.request({
                        onSuccess: (function (ad)
                        {
                        Mojo.Log.info("**************** AdMob OK ");
                           // successful ad call, parameter 'ad' is the html markup for the ad
                            this.controller.get('admob_ad').insert(ad); // place mark up in the the previously declared div
                               }).bind(this),
                      onFailure: (function ()
                    { // no ad was returned or call was unsuccessful
                        Mojo.Log.info("**************** AdMob ERROr ");
                       }).bind(this),
             });

That is all , Now start earning Money!!

Full Story

WebOSDev - Programming has just evolved