Results 1 to 6 of 6
  1.    #1  
    Hi folks, this is driving me a little nuts.. I've got a list (for pocket sportscenter) in an add dialog with checkboxes next to the list items.

    The list items are dynamic based on what you already have on your "current" list.

    I've got my "addList" List widget set up and the checkbox widget. I can't seem to equate the checkbox state (checked/unchecked) per row with the corresponding list item, heck I'm not sure even how to reference each of the checkboxes (tried this.addSportBox[0].checked for example but it's undefined).

    I've searched a few places that discuss using widgets within a list like:
    List - WebOS101 and
    Using Lists in webOS - Mastering the Oldest Mobile Profession | Linux Magazine

    and of course here for some ideas on how to get this to work but haven't been successful

    Expected Behavior: If I check the box next to a list item(s) and click OK, the checked item(s) get added to my "current" list.

    In one case, it talks about instantiating child widgets (the checkbox inside the list) and also discusses not providing a model for the checkbox as it should have the same model as the list widget. I've also had/have my modelProperty of the checkbox widget be the same as one of the attributes of my list

    Any samples or ideas you have are most appreciated... my add list "sort of" works now but I'm not sure exactly why


    Row Template setup:

    Code:
      <div x-mojo-element="CheckBox" class="checkboxClass" name="addSportBox"></div>
                <div id="addList"><img src="#{icon}" align="middle"></img>&nbsp;#{title}</div>
    Here's the widget setup (have the checkbox's model commented out currently)

    Code:
    AddDialogAssistant.prototype.setup = function(widget) {
            
    this.widget = widget;
            
            // Set the dialog title to either Edit or Add Feed
            var addFeedTitleElement = this.sceneAssistant.controller.get("add-feed-title");
            addFeedTitleElement.update(this.dialogTitle);
    
      this.addSportScrollerModel = {
            scrollbars: false,
            mode: "vertical"
            };
        
        this.sceneAssistant.controller.setupWidget("addSportScroller", this.addSportScroller);
    
        //Setup the sports you want to add
            this.sceneAssistant.controller.setupWidget("addListWgt",
             {
                itemTemplate:"feedList/addRowTemplate", 
                listTemplate:"feedList/feedListTemplate", 
                swipeToDelete:false, 
                renderLimit: 40,
                reorderable:false
            },
            this.addWgtModel = {items: this.feeds.testAddList});
              
    
    //Setup Checkboxes
       this.sceneAssistant.controller.setupWidget("addSportBox",
              this.attributes = {
                  modelProperty: 'checked',
                  trueValue: 'On',
                  falseValue: 'Off' 
              }
            /*  this.addSportBoxModel = {
                  checked: false,
                  disabled: false
              }
            */
    
              );
    Attached Images Attached Images
    Palm III > HS Visor > Treo 600 > Treo 650 > Treo 750 > Treo Pro > PrePlus GSM

    "95% of all software issues are due to USER ERROR."
  2. #2  
    Quote Originally Posted by scottymomo View Post
    I've got my "addList" List widget set up and the checkbox widget. I can't seem to equate the checkbox state (checked/unchecked) per row with the corresponding list item, heck I'm not sure even how to reference each of the checkboxes (tried this.addSportBox[0].checked for example but it's undefined).
    Not 100% sure what you're asking but here's a snippet of the code I use. Feel free to ask me specifics.

    Code:
    // setup checkbox widget
    	this.checkAttributes = {
    		property: "value",
    		trueValue: "ON",
    		falseValue: "OFF"
    	};
    	this.checkModel = {
    		value: "ON",
    		disabled: false
    	};
    	this.controller.setupWidget("complete", this.checkAttributes, this.checkModel);
    .
    .
    .
    // setup results list widget
    	this.model = {
    		items: [],
    		listTitle: [$L('Names)]
    	};
    	
    	listAttributes = {
    		itemTemplate: 'main/search-result',
    		listTemplate: 'main/result-list',
    		formatters: {
    			myData: this.setMyData.bind(this)
    		}
    	};
    	this.controller.setupWidget('results-list', listAttributes, this.model);
    	this.checkboxCallback = this.checkboxCallback.bindAsEventListener(this);
    	Mojo.Event.listen(this.controller.get('results-list'),Mojo.Event.propertyChange,this.checkboxCallback);
    .
    .
    .
    MainAssistant.prototype.checkboxCallback = function(event){
    	this.showDialogBox("Checkbox value changed", "The value of the checkbox is now: " + event.value);
    .
    .
    .
    	this.model.value = "OFF";	// error so un-check box
    	this.controller.modelChanged(this.model, this);
    Last edited by djpushplay; 01/28/2010 at 08:15 AM. Reason: typo
    mobigamedepot.com
  3.    #3  
    Thanks djpushplay. I can get the value of the checkbox (on or off), but trying to figure out how to know which list item(s) corresponds to the boxes that are checked since the list items are dynamically populated.

    So let's say when I click my Add button I get four list items with check boxes next to them:

    List Item A
    List Item B
    List Item C
    List Item D

    When I check the checkbox next to list item B for example, how could I bring up a dialog or even a Mojo.Log.info item that would say "Item B is now checked".

    As part of my list items, I currently have an attribute called "checked" which is set by default to false/Off. When I check the box next to a list item, I want to update that list item's checked attribute to On or True so I can then act upon that list item.

    Clear as mud? Thanks again
    Palm III > HS Visor > Treo 600 > Treo 650 > Treo 750 > Treo Pro > PrePlus GSM

    "95% of all software issues are due to USER ERROR."
  4. #4  
    Quote Originally Posted by scottymomo View Post
    Thanks djpushplay. I can get the value of the checkbox (on or off), but trying to figure out how to know which list item(s) corresponds to the boxes that are checked since the list items are dynamically populated.

    So let's say when I click my Add button I get four list items with check boxes next to them:

    List Item A
    List Item B
    List Item C
    List Item D

    When I check the checkbox next to list item B for example, how could I bring up a dialog or even a Mojo.Log.info item that would say "Item B is now checked".

    As part of my list items, I currently have an attribute called "checked" which is set by default to false/Off. When I check the box next to a list item, I want to update that list item's checked attribute to On or True so I can then act upon that list item.

    Clear as mud? Thanks again
    I see what you're trying to do. What you need to do is keep your array updated when the user touches the checkbox so that later, when you press "Save", you can get a list of all the ones that have been checked.

    There's probably a more elegant solution to this problem but one solution is to have the index stored in the array so that when you get the checkbox call back event, you can get the index and update your array to match the checkbox. So first, add a "recnum" field to your template.

    I coded the entire thing for you as follows:

    MAIN -
    Code:
    MainAssistant.prototype.setup = function() {
    	// setup checkbox widget
    	this.checkAttributes = {
    		property: "value",
    		trueValue: true,
    		falseValue: false
    	};
    	this.checkModel = {
    		value: true,
    		disabled: false
    	};
    	this.controller.setupWidget("complete", this.checkAttributes, this.checkModel);
    	
    	// setup results list widget
    	this.model = {
    		items: [
    			{isHappy: false, recnum: '1', myString: "Susan"},
    			{isHappy: true, recnum: '2', myString: "John"},
    			{isHappy: false, recnum: '3', myString: "Bill"},
    		],
    		listTitle: [$L('Names')]
    	};
    	
    	listAttributes = {
    		itemTemplate: 'main/search-result',
    		listTemplate: 'main/result-list',
    		formatters: {
    			myData: this.setMyData.bind(this)
    		}
    	};
    	this.controller.setupWidget('results-list', listAttributes, this.model);
    	this.checkboxCallback = this.checkboxCallback.bindAsEventListener(this);
    	Mojo.Event.listen(this.controller.get('results-list'),Mojo.Event.propertyChange,this.checkboxCallback);
    	
    	// setup save button
    	this.controller.setupWidget('get_value_button', 
    		this.buttonatts = {
    			type: Mojo.Widget.activityButton
    		}, 
    		this.buttonmodel = {
    			buttonLabel: 'Save',
    			disabled: false
    		}
    	);
    	this.handleClicked = this.handleClicked.bind(this);
    	Mojo.Event.listen(this.controller.get('get_value_button'), Mojo.Event.tap, this.handleClicked);
    }
    
    MainAssistant.prototype.setMyData = function(propertyValue, model) {
    	if(model.isHappy === true) {
    		model.value = true;
    	}
    	else {
    		model.value = false;
    	}
    }
    
    MainAssistant.prototype.checkboxCallback = function(event){
    	this.model.items[event.model.recnum - 1].isHappy = event.value;
    }
    
    MainAssistant.prototype.handleClicked = function(event){
    	try{
    	var len = this.model.items.length;
    	for (var i = 0; i < len; i++) {
    		if (this.model.items[i].isHappy) {
    			$("status").insert(this.model.items[i].myString + "<br />");
    		}
    	}
    	// turn off spinner
    	this.buttonWidget = this.controller.get('get_value_button');
    	this.buttonWidget.mojo.deactivate();
    	} catch (e) {Mojo.Controller.errorDialog(e);}
    }
    Main Template -
    Code:
    <div id="main" class="palm-page-header">
    	<div class='palm-page-header-wrapper' id="wplistheader">
    	    <div id="appIcon" class="icon"></div> 
    		<div class="title" id="maintitle">Checkbox Test</div>
    	</div>
    </div>
    <div id="results-list" x-mojo-element="List" ></div>
    <div x-mojo-element="Button" id="get_value_button"></div>
    
    <div id="status" class="palm-body-text"></div>
    Results Template -
    Code:
    <div class="palm-row first">
    	<div class="palm-row-wrapper">
    		<div x-mojo-element="CheckBox" id="complete"></div>
    		<div class="title left">#{-recnum}. #{-myString}</div>
    	</div>
    </div>
    I actually tested it so the code does work. If you don't want to add a "recnum", you could just search the array for the myString that matched and get the index number that way (assuming there are no duplicates).

    I'm sure there's somebody out there that knows how to get the index the proper way, or some other way. If so, please post here so we can all learn.
    mobigamedepot.com
  5.    #5  
    I figured out a way to do it..looks somewhat similar to above.. two keys I think:

    1. The checkbox widget doesn't have a model, it apparently uses the same model as the list widget

    2. The propertychange event passes the model (which I didn't realize), which in this case is the list item's model.

    So when the checkbox is checked I can do event.model.X and it will give me the value for that list item (whatever X happens to be). for the box that's checked. For example, event.model.title gives me "NCAA Football" if the checkbox next to NCAA Football is checked. Event.model.checked returns "On" as well.

    What I couldn't figure out however was how to save that change to the original list item's "checked" property (when I queries it's value it still came back as false/Off).

    So what I tried and worked was essentially copy the current changed list with the updated values to the original list:


    Code:
    this.feeds.testAddList = this.addWgtModel.items.slice(0);
    It seemed to do the trick and the items checked now show on the main scene once the ok button is hit.. it probably could be cleaner but for now it looks like it's working..

    Thanks for the tips!
    Palm III > HS Visor > Treo 600 > Treo 650 > Treo 750 > Treo Pro > PrePlus GSM

    "95% of all software issues are due to USER ERROR."
  6. #6  
    Quote Originally Posted by scottymomo View Post
    So what I tried and worked was essentially copy the current changed list with the updated values to the original list:

    Code:
    this.feeds.testAddList = this.addWgtModel.items.slice(0);
    It seemed to do the trick and the items checked now show on the main scene once the ok button is hit.. it probably could be cleaner but for now it looks like it's working..

    Thanks for the tips!
    Great! If that works, that's cleaner than my version. Nice work.
    mobigamedepot.com

Posting Permissions