Results 1 to 11 of 11
  1.    #1  
    Hi,

    I'm trying to understand how filterlist works. I've copied the scene & assistant from the UIWidget sample, but it doesn't works on my testing app (without any modifications!!!), but, of course, works perfectly on the sample app.

    I'm assuming I'm forgetting something, but I can't figure it.

    Any help, please?
  2. #2  
    Can you post your code?
  3.    #3  
    Hi,

    Here is my code:

    First-Assistant
    Code:
    
    
    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.setup = function() { this.setupData(); console.log("setting up filterfield"); var attributes = { itemTemplate: 'entry', swipeToDelete: false, reorderable: false, filterFunction: this.list.bind(this), formatters:{name:this.formatName.bind(this),number:this.formatNumber.bind(this)}, delay: 1000, //1 second delay before filter string is used
    disabledProperty:
    'disabled'
    };
    this.model = { disabled: false
    };
    this.controller.setupWidget('filterlist', attributes, this.model); this.controller.listen('filterlist', Mojo.Event.listTap, this.tapped.bindAsEventListener(this)); this.controller.listen('filterlist', Mojo.Event.filter, this.gotFilter.bind(this), true); }   FirstAssistant.prototype.gotFilter = function(event) { console.log("GOT FILTER EVENT IN CLIENT, str=" + event.filterString); } FirstAssistant.prototype.tapped = function(event) { console.info("TAPPED ELEMENT " + event.item.name); } FirstAssistant.prototype.formatNumber = function(n, model){ //Adding the first letter of name to the associated number
    return n + String(model.name)[0]; } FirstAssistant.prototype.formatName = function(n, model){ //Capitalizing the first letter of the name
    return String(n).capitalize(); } FirstAssistant.prototype.list = function(filterString, listWidget, offset, count){ var subset = []; var totalSubsetSize = 0; //loop through the original data set & get the subset of items that have the filterstring
    var i = 0; while (i < this.data.length) { if (this.data[i].name.include(filterString) || this.data[i].number.include(filterString)) { if (subset.length < count && totalSubsetSize >= offset) { subset.push(this.data[i]); } totalSubsetSize++; } i++; } //update the items in the list with the subset
    listWidget.mojo.noticeUpdatedItems(offset, subset);
    //set the list's lenght & count if we're not repeating the same filter string from an earlier pass
    if (this.filter !== filterString) { listWidget.mojo.setLength(totalSubsetSize); listWidget.mojo.setCount(totalSubsetSize); } this.filter = filterString; } FirstAssistant.prototype.setupData = function() { this.data = []; //Set up a list of names & numbers
    this.data = [{'name': 'adam', 'number':'1'}, {'name': 'andrew', 'number':'2'}, {'name': 'ben', 'number':'3'}, {'name': 'betsy', 'number':'4'}, {'name': 'betty', 'number':'5'}, {'name': 'bob', 'number':'6'}, {'name': 'bobby', 'number':'7'}, {'name': 'elvis', 'number':'8'}, {'name': 'enda', 'number':'9'}, {'name': 'eric', 'number':'10'}, {'name': 'dak', 'number':'11'}, {'name': 'drew', 'number':'12'}, {'name': 'graham', 'number':'13'}, {'name': 'gus', 'number':'14'}, {'name': 'ingram', 'number':'15'}, {'name': 'jack', 'number':'16'}, {'name': 'jill', 'number':'17'}, {'name': 'joe', 'number':'18'}, {'name': 'john', 'number':'19'}, {'name': 'johnson', 'number':'20'}, {'name': 'jules', 'number':'21'}, {'name': 'katie', 'number':'22'}, {'name': 'katrina', 'number':'23'}, {'name': 'kelly', 'number':'24'}, {'name': 'mark', 'number':'25'}, {'name': 'marky', 'number':'26'}, {'name': 'matt', 'number':'27'}, {'name': 'nadar', 'number':'28'}, {'name': 'nate', 'number':'29'}, {'name': 'nathan', 'number':'30'}, {'name': 'noah', 'number':'31'}, {'name': 'patti', 'number':'32'}, {'name': 'phil', 'number':'33'}, {'name': 'phillip', 'number':'34'}, {'name': 'phillis', 'number':'35'}, {'name': 'robert', 'number':'36'}, {'name': 'rose', 'number':'37'}, {'name': 'sadie', 'number':'38'}, {'name': 'sally', 'number':'39'}, {'name': 'sean', 'number':'40'}, {'name': 'stan', 'number':'41'}, {'name': 'stephen', 'number':'42'}, {'name': 'steve', 'number':'43'}, {'name': 'steven', 'number':'44'}, {'name': 'tao', 'number':'45'}, {'name': 'willard', 'number':'46'}, {'name': 'willy', 'number':'47'}, {'name': 'yip', 'number':'48'}, {'name': 'yvonne', 'number':'49'}, {'name': 'xaomao', 'number':'50'}, {'name': 'zevin', 'number':'51'}]; } 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 */
    }
    First-Scene:
    Code:
    
    
    <div
    id="main"class="palm-hasheader">
    <divclass="palm-header left"id="main-hdr">
    Puntos Fabricantes
    </div> </div>
    <divx-mojo-element="FilterList"id="filterlist"></div>
    I have a entry.html file in "views/first":
    Code:
    
    <div>Name: #{nameFormatted} <br> Number: #{numberFormatted} <br><br></div>
    
    This code is exactly the same shown on UIWidgets sample, but it doesn't work. I don't know why it doesn't works.

    Looks like data isn't stored properly, because playing with search field doesn't show any result.
    Last edited by deCorvett; 07/13/2009 at 04:55 AM.
  4. #4  
    Hi deCorvett, after plugging in your code and making a few small changes it worked.



    Where you set itemTemplate in the filter list's attributes you need to show what folder to look in. So it should be:

    Code:
    itemTemplate: 'first/entry',
    Right now you just have the name of the html page, "entry".

    Other than that, make sure your first-scene.html has no typos, things like:
    Code:
    <divclass="palm-header left"id="main-hdr">
    <divx-mojo-element="FilterList"id="filterlist"></div>
    There needs to be a space after "div" but that might have been just from copy and pasting??

    You basically had it, I know how annoying something like this can be! I've had a these types of things happen too...

    Let me know if it works for you.
  5.    #5  
    Quote Originally Posted by schoksi View Post
    Hi deCorvett, after plugging in your code and making a few small changes it worked.



    Where you set itemTemplate in the filter list's attributes you need to show what folder to look in. So it should be:

    Code:
    itemTemplate: 'first/entry',
    Right now you just have the name of the html page, "entry".

    Other than that, make sure your first-scene.html has no typos, things like:
    Code:
    <divclass="palm-header left"id="main-hdr">
    <divx-mojo-element="FilterList"id="filterlist"></div>
    There needs to be a space after "div" but that might have been just from copy and pasting??

    You basically had it, I know how annoying something like this can be! I've had a these types of things happen too...

    Let me know if it works for you.
    It doesn't work in my emulator . I've corrected the template path, and there are no typos on the scene file (copy-paste problem), but it doesn't work anyway.

    I figured your clue with the template path was the key, but it seems I'm forgeting something. The template file is automatically included on the package?
  6.    #6  
    I don't know why, but after redo the app skeleton, it works flawlessly. Maybe a typo, but I'm assuming is a problem with the app folder name: it's the only change. Thanks again schoksy.
  7.    #7  
    another question... why the filter lets that ugly blank space between the filter field and the list? it isn't supposed to be there the palm header?
  8. #8  
    Not sure either. I kinda thought the same thing about the blank space but haven't looked into it yet. If you figure out how to make it look better please post! Thanks.
  9.    #9  
    Quote Originally Posted by schoksi View Post
    Not sure either. I kinda thought the same thing about the blank space but haven't looked into it yet. If you figure out how to make it look better please post! Thanks.
    Code:
    
    
    if
    (filterString !== "") { $("[HEADER_DIV_NAME]").hide(); } else { $("[HEADER_DIV_NAME]").show(); }
    Put this on filter function, and it will hide the header (I think it would be better to put this on keypress event, because on filter function it is delayed until first filtering is done): problem (almost) solved.
  10.    #10  
    Another solution is to use the gray header instead of th black pill header:

    Code:
    
    
    <div
    class="palm-page-header">
    <divclass="palm-page-header-wrapper">
    <divclass="title">
    INSERT YOUR TITLE HERE
    </div>
    </div>
    </div>
    This type of header has the behaviour as expected: the Header moves to the blank space.
  11.    #11  
    Hi again,

    I need some help with this... I want to show tabbed (or columns?) in my filterlist, with different formatting and so on. I'll tell you: I'm trying to create an Formula 1 championship info app, and I want to show the Driver's Championship classification with a format like this:



    How could I get this done? I'm very bad with CSS and so on...

    Thanks!

Posting Permissions