Back to Design / Interaction - Yahoo! TV Widgets Forum
0

Cannot not set selected item's text color to black on SelectButton

I have a SelectButton with an image as content. I want the text of the selected item to be black, so I can read it over my image, but cannot find a way.

Image of the issue: http://ajaxmashup.googlepages.com/WidgetChannelTest2.png

I have uploaded my test case here: http://ajaxmashup.googlepages.com/TendrilTest.widget.zip

1. Extract zip into your widgets directory
2. Launch widget
3. Click on Test 2 button on the main view
4. Select the SelectButton and press enter.
5. Choose one of the 4 options, press enter.
6. Notice how the selected item's text is written onto the control, but hardly visible because it is white.

I am running versions TV = 0.1 Konf = 5.3.0 and Dev Guide = .99 I don't know which are meaningful, but hopefully those numbers make sense.

Relevant code - I tried setting the text to black in a number of ways, none worked:

this.controls.selectButton = new KONtx.control.SelectButton({
id: 'programButton',
guid: 'tendril-programButton',
label: '',
content: new KONtx.element.Image({
src: $tendril.styles.images.control.programmode_image,
}),
valueOnSubline: false,
optionGridRows: 8,
options: [
{value:'4', label:"Vacation"},
{value:'3', label:"Weekend"},
{value:'2', label:"Saver Mode"},
{value:'1', label:"Normal"}
],
events: {
onValueChanged: function (event) {
log("You selected: " + event.payload.value);
}
},
styles: {
'vOffset' : 450,
'width' : 380,
'height' : 76,
'color' : 'black',
},
textStyles: {
'color' : 'black',
'fontSize' : '24px',
'fontWeight' : 'bold',
},
fontStyle: {
'color' : 'black',
'fontSize' : '24px',
'fontWeight' : 'bold',
}
}).appendTo(this);

by
Report Abuse
2 Replies
  • Classes in the KONtx.control namespace may not always support having individual visual guts replaced or restyled without serious implementation headaches (and a high degree of code fragility, should the control change out from underneath you in a future Framework revision).

    We have tried to ease this by using easily overridable content creation methods in many of the control classes - the SelectButton is a great example of this. It does not have its own _createContent method, but instead just relies on the base InputButton for theme information, including position and styling of button label and value display.

    Your custom SelectButton class extension can simply provide its own _createContent method and create whatever it needs inside the base Button. The SelectButton's _createContent also calls a second _createValueDisplay method that hooks up a listener to the button's onValueInitialized and onValueChanged event - you would hook up a similar listener to change your custom value display text object.

    Choosing a new ClassName will keep the control from applying any theme appearance over your custom visuals. The rest of the methods in the SelectButton class to not rely directly on a particular content element.

    CODE
    var MySelectButton = new KONtx.Class({

      ClassName: "MySelectButton",

      Extends: KONtx.control.SelectButton,

      _createContent: function () {

        //
        // custom button content goes here
        //
       this.customLabel = new KONtx.element.Text({
         styles: $myApp.styles.MySelectButtonLabel
       }).appendTo(this);
       
       this.customValue = new KONtx.element.Text({
         styles: $myApp.styles.MySelectButtonValue
       }).appendTo(this);
       
       this.customValue._updateContent = (function(event){
           this.customValue.setText( event.payload.value );
       }).subscribeTo(this, ['onValueInitialized','onValueChanged'], this);
       
      }

    });


    The Framework's SelectButton might have further enhancements in the future that do not break app code compatibility but, say, animate the value display when a new option is selected. The Text element that is currently created as the control's .valueDisplay might then be gone or replaced with a more robust class, and any one-off code in your app that was setting the color to black would stop working. An extension to the class would already be overriding the changed method and shielding your code from the difference.
    Report Abuse
    0
  • Thanks - this worked. I will hopefully post the full source code to this shortly for others interested.
    Report Abuse
    0
Ask a Question

Recent Posts

in Design / Interaction - Yahoo! TV Widgets