Results 1 to 7 of 7
  1.    #1  
    I wrote a blog post at the Cardinal Peak blog that I thought might be useful here at precentral. If you are trying to use list formatters for the first time this might help.


    WEBOS LIST FORMATTERS
    August 18th, 2009 by Chad Scates Partner

    Here at Cardinal Peak, we’ve been doing quite a bit of development on webOS, Palm’s new operating system for smartphones. WebOS is based on Linux, and it relies heavily on web standards like HTML, CSS, and JavaScript. It’s a great programming environment, but since it’s also rather new, there’s a lot of tribal knowledge still to be built up around how to optimally develop for it. So this is the first of an occasional series where we will look at issues that arise when developing webOS applications.

    A list formatter is a very powerful feature of webOS. Basically a formatter is a function that is applied to a property name, and it formats each list element for display to the user. Although it’s a great feature, I did not find it to be documented very well. Here’s a quick tutorial on how to use list formatters.
    Let’s start in the HTML. In your scene, add a Mojo element for a List. The following line creates a simple list named ExampleList:

    Code:
    <div x-mojo-element='List'></div>
    Let’s also create a row template for our list and save the file to our views folder (views/ExampleList/rowTemplate.html):

    Code:
    <div>
    
    #{-myData}
    </div>
    The #(-myData} object is what we are going to replace in the HTML. The HTML could have been much more complex and the object itself could have been embedded in the middle of the HTML. This object just represents the portion of the HTML code which will be replaced by the formatter code.
    In the JavaScript you reference your formatter as part of the attributes to the setupWidget call.

    Code:
    listAttributes = {
    
    itemTemplate: 'ExampleList/rowTemplate', formatters:{myData: this.setMyData.bind(this)}
    }; this.controller.setupWidget('ExampleList', listAttributes, this.model);
    The only required element of the listAttributes is the itemTemplate. For our example we are adding the optional formatters and to the myData key we are instructing it to call the setMyData function. The key name that you use here must match the property name in the HTML.
    The last piece to the puzzle is the formatter function itself:

    Code:
    setMyData: function(propertyValue, model) {
    
    if(this.feelingHappy()) {
    model.myData = "Feeling Happy";
    } else {
    model.myData = "Feeling Sad";
    }
    }
    Now, when the myData field in the model is modified, the HTML will replace the #{-myData} property name with one of the strings “Feeling Happy” or “Feeling Sad”. In this case the HTML string was simple text to display. The string could have also been any properly validated HTML string.

    Code:
    model.myData = '<img src="images/happy.jpg" />';
    This combination of list templates and list formatters should allow you to come up with both complex and dynamic lists in webOS.

    Chad Scates
    Cardinal Peak
  2. #2  
    Nice and thank you for not just linking back to your blog (in fact, I don't see a link ANYWHERE in your post!).
  3. #3  
    Actually, he doesn't have enough posts to be able to have a link. I think that's too bad because I did a google search for the original post and found it at:
    cardinalpeak [dot] com/blog/?p=76
    The reason I posted this is because Chad has the entire app in a zip file there and that's what helped me understand his post. There are a couple of key things missing from the post, which is contained in the actual app. I had been scratching my head trying to understand the documentation and the app made it clear. Thanks Chad!
  4. #4  
    Chad:

    Okay, now I am at the point where I have a list displayed as per your example. But how do I update the items in the list and change the display? In the "Palm WebOs" book, they touch on it and mention the following:

    Code:
    // Set the widget to use the new model:
    this.controller.setWidgetModel("my-toggle", this.newToggleModel);
    I tried using modelChanged:
    Code:
    this.controller.modelChanged('results-list');
    That didn't work either. Any help would be appreciated.

    P.S. - When is the Photodialer being released?
  5.    #5  
    It depends if you are changing the length of the list or not. If you change the list length then I do the following:

    this.staticList.mojo.setLength(this.model.items.length);
    this.staticList.mojo.noticeUpdatedItems(0, this.model.items);

    The PhotoDialer was just released today. Please try it out and let me know what you think.
  6. #6  
    I'm having problems with the javascript syntax. I have an ajax function:
    Code:
    	var request = new Ajax.Request(URL, {
    		method: 'get',
    		evalJSON: 'force', //to enforce parsing JSON if there is JSON response
    		onComplete: this.showResults.bind(this),
    		onFailure: this.handleAjaxError.bind(this)
    	});
    The showResults is:
    Code:
    MainAssistant.prototype.showResults = function(transport) {
    	console.info('enter showResults()');
    
    	returnedData = eval(transport.responseText);
    	if (returnedData == null) {
    	    this.controller.get("status").update("<font color='green'>No entries</font>");
    		return;
    	}
    	var n = returnedData.length;
    	listAttributes = {
    		itemTemplate: 'main/search-result',
    		listTemplate: 'main/result-list',
    	};
    	this.model = {
    		items: [
    			{recnum: 1, myString: "Peter"},
    			{recnum: 2, myString: "Frank"},
    			{recnum: 3, myString: "Alexis"},
    			{recnum: 4, myString: "Manager"},
    			{recnum: 5, myString: "Carol"},
    			{recnum: 6, myString: "Wendy"},	
    		]
    	};
    
    try {
    	this.staticList.mojo.setLength(this.model.items.length);
    	this.staticList.mojo.noticeUpdatedItems(0, this.model.items);
    } catch (e) {
    Mojo.Controller.errorDialog(e);
    }
    Sorry to be so dense but what do I put instead of "statusList.mojo"? Do I have to have a global object defined in my setup?
  7. tom_m's Avatar
    Posts
    7 Posts
    Global Posts
    12 Global Posts
    #7  
    The noticeUpdateditems() is a method of the widget.
    So staticList here is that widget.

    Say I did:

    this.controller.setupWidget('results-list', this.listAttributes, this.list);

    I could then say:

    $('results-list').mojo.noticeUpdatedItems(0, this.list.items);

    Hope this helps. I was running into a similar issue and found this. Didn't see your question answered I know it's been forever...But in case and for anyone else searching Google and coming here.

Tags for this Thread

Posting Permissions