0

SelectButton Problems

I'm having problems getting the KONtx.control.SelectButton working correctly. If I follow the documentation in v0.96 pg.111 the 'onValueChanged' event is never fired, and it doesn't seem to save and display the value selected. My code is below and is only slightly modified (different string values) from the example given in the docs.

var selectButton = new KONtx.control.SelectButton({
id: 'movieSelectionBtn',
label: "Movie:",
optionGridRows: 8,
options: [{
value: '3',
label: "Two Lovers"
}, {
value: '2',
label: "Up"
}, {
value: '1',
label: "Australia"
}],
events: {
onValueChanged: function(event){
log("You selected: " + event.payload.value);
}
},
styles: {
vOffset: button1.height
}
}).appendTo(this);



However if I take a look at the example in the Toolbox Widget (below) it utilizes a different event 'onChangeValue', and "KONtx.utility.Preference". I believe this is the older v0.93 of creating a SelectButton, which is no longer compatible since the removal of KONtx.utility.Preference.

var selectButton = new KONtx.control.SelectButton({
id: 'select-button',
label: 'Select Button',
value: 0,
options: new KONtx.utility.Preference({
'Apples': 0,
'Oranges': 1,
'Pears': 2,
'Grapes': 3,
'Watermelons': 4
}),
events: {
onChangeValue: function(type, args, obj) {
this.log("swapping values for select button");
}
},
styles: {
vOffset: val_button_header.outerHeight
}
}).appendTo(panel);



has anyone else experienced 'onValueChanged' event not getting fired? Is there a work around?

by
9 Replies
  • You have two issues, which admittedly aren't very obvious (took me a few minutes to notice).

    1.) You must save the reference in this.controls. Select Buttons are multi-view controls and for the "automated" value return to be picked up properly, you have to follow this pattern:

    this.controls.my_select_button = KONtx.controls.SelectButton({ ...

    inside your view class instead of var my_select_button = ...

    2.) You must provide a guid in the config. This can be any string and doesn't need to truly be globally unique, just needs to be unique to that view. There is a lot of low level details on why this is required which I am happy to explain if you like, but suffice to say it's our "key" to identify the control when coming back from the value selection page.

    -Jeremy
    0
  • QUOTE (Jeremy Johnstone @ Apr 24 2009, 03:14 PM) <{POST_SNAPBACK}>
    You have two issues, which admittedly aren't very obvious (took me a few minutes to notice).

    1.) You must save the reference in this.controls. Select Buttons are multi-view controls and for the "automated" value return to be picked up properly, you have to follow this pattern:

    this.controls.my_select_button = KONtx.controls.SelectButton({ ...

    inside your view class instead of var my_select_button = ...

    2.) You must provide a guid in the config. This can be any string and doesn't need to truly be globally unique, just needs to be unique to that view. There is a lot of low level details on why this is required which I am happy to explain if you like, but suffice to say it's our "key" to identify the control when coming back from the value selection page.

    -Jeremy


    Thanks Jeremy, I'll make sure the updated documentation highlights these issues.

    Thank you,
    Kelly
    0
  • Thanks for your help Jeremy,

    can't believe i forgot a guid, doh!
    I updated my test code with your notes however it's still behaving the same, onValueChanged event is still not being called and the value not saved. Everything else is rendering correctly. Any other ideas? I can copy the log if you like.

    this.controls.selectButton = new KONtx.control.SelectButton({
    id: 'AwesomeButton',
    guid: 'Awesome-Button',
    label: "How awesome is the framework?",
    optionGridRows: 8,
    options: [{
    value: '4',
    label: "Sliced Bread ain't got nuthin on it"
    }, {
    value: '3',
    label: "Pretty freakin' awesome"
    }, {
    value: '2',
    label: "Better than a cold Red Bull"
    }, {
    value: '1',
    label: "I'd rather have a punch in the face"
    }],
    events: {
    onValueChanged: function(event){
    log("You selected: " + event.payload.value);
    }
    }
    }).appendTo(this);
    0
  • Can you please email me the entire code for that view class so I can see in better detail and also test here locally?

    -Jeremy
    0
  • here's the whole view I cleaned it up to just the bare minimum

    var MainView = new KONtx.Class({
    ClassName: 'MainView',
    Extends: KONtx.system.SidebarView,
    guid: 'Main-View',
    createView: function(){

    this.controls.selectButton = new KONtx.control.SelectButton({
    id: 'AwesomeButton',
    guid: 'Awesome-Button',
    //analyzeKey: 'setting-awesome',
    label: "How awesome is the framework?",
    optionGridRows: 8,
    options: [
    { value: '4', label: "Sliced Bread ain't got nuthin on it"},
    { value: '3', label: "Pretty freakin' awesome"},
    { value: '2', label: "Better than a cold Red Bull"},
    { value: '1', label: "I'd rather have a punch in the face"}],

    events: {
    onValueChanged: function(event){
    this.log("You selected: " + event.payload.value);
    }

    }
    }).appendTo(this);

    }


    });
    0
  • I have the similar problem with SelectButton, is there any workaround or solution for this problem?
    0
  • I have forwarded this over to the two engineers who would be best able to help you. Hopefully one of them will respond shortly.

    -Jeremy
    0
  • QUOTE (Jeremy Johnstone @ May 21 2009, 08:04 PM) <{POST_SNAPBACK}>
    I have forwarded this over to the two engineers who would be best able to help you. Hopefully one of them will respond shortly.

    -Jeremy


    Still haven't got any reply..., hopefully it will be addressed soon.. :)Thanks,
    0
  • QUOTE (Sanny M @ May 26 2009, 01:06 PM) <{POST_SNAPBACK}>
    Still haven't got any reply..., hopefully it will be addressed soon.. :)-Jeremy
    0
  • can somebody please explain how I can save the value user chosen and then use it (and display it in the button)?
    I've tried to play with preferences by adding the following code to my widget.xml:
    CODE
    <preference name="defaultCity" hidden="true" value="1"/>

    and then using it in the code like:
    CODE
    this.controls.selectButton.value = preferences.defaultCity;

    ...
    events: {
    onOptionSelected: function (event) {
    preferences.defaultCity = event.payload.value;
    }
    },


    but it doesn't work. What am I doing wrong?
    0
  • ok. I've change it to the following:
    CODE
    this.controls.sidebarSelectButton = new KONtx.control.SelectButton({
    ...
    events: {
    onOptionSelected: function (event) {

    currentAppData.set("City", event.payload.value);
    // this.parent.updateView();
    }
    },
    }).appendTo(this);
    ...
    var CityValue = currentAppData.get("City");
    if (CityValue == null) {
    // first time launch, choose default City
    this.controls.sidebarSelectButton.setValue('1');
    } else
    {
    // take value from the application settings
    this.controls.sidebarSelectButton.setValue(CityValue);
    }


    it works well.
    But how should I access updateView() function from that createView/controls.sidebarSelectButton?
    0

Recent Posts

in General - Yahoo! TV Widgets