0

custom background image on buttons on over state

hi all -

i'm very new to this platform, and want to do some different over states for buttons (rather than the blue highlight). This is what I have tried so far:

                        button = new KONtx.control.TextButton({ 
id: idName,
label: "Hello World", 
styles: $merge({vOffset: 10}, Bravo.styles.main.menuButton), 
textStyles: App.styles.main.menuButtonText,
events: {
onSelect: function(event) {
    KONtx.application.loadView( destinationId, data ); 
},
onFocus: function(event){
this.styles = App.styles.main.menuButtonOver
}
}
}).appendTo(this); 

so the style menuButtonOver has a different background image. Sadly, this isn't working. Is this possible? Thanks

by
1 Reply
  • Hey Julie,

    What you've described is a common snag for beginners to the Connect! platform.  It may be possible to do custom backgrounds in the way you've described, but I'm not failiar with that method.  What I typically do is used stacked controls:

    createView: function() {
            //self reference for object level manipulation
            self=this;
            //The button holds the rest of the elements.  NOTE that this is .element.Button and not control.Button or control.TextButton!
            //element.button does not have any of the typical styles associated with it
            this.controls.btn=new KONtx.element.Button({
                events : {                           
                    onBlur : function(){
                        //use self to reference the object and set the src of the image accordingly.
                        self.controls.img.src='Images/btnbg.png';       
                    },
                    onFocus : function(){
                        self.controls.img.src='Images/btnbgOver.png';
                    },
                    onSelect : function(){
                        print('OOOOOOOOOOOOO');
                    }
                },
                styles:{
                    height:KONtx.utility.scale(88),
                    vOffset:0,
                    width:KONtx.utility.scale(97),
                }   
            }).appendTo(this);
            //The image is attached to the button.  It will display your background
            this.controls.img = new KONtx.element.Image({
                src:'Images/btnbg.png'
            }).appendTo(this.controls.btn)
            //The label for your text box.
            this.controls.label = new KONtx.element.Text({
                label:'Text!!'
            }).appendTo(this.controls.btn)
        },

    Using this "stack" of controls, you can have buttons with a custom background.  Of course, if you're doing this a lot, you could make your own class based on this structure or by extending KONtx.control.TextButton

    QUOTE(Julie @ 29 Sep 2011 2:11 PM)
    hi all -

    i'm very new to this platform, and want to do some different over states for buttons (rather than the blue highlight). This is what I have tried so far:

                            button = new KONtx.control.TextButton({ 
    id: idName,
    label: "Hello World", 
    styles: $merge({vOffset: 10}, Bravo.styles.main.menuButton), 
    textStyles: App.styles.main.menuButtonText,
    events: {
    onSelect: function(event) {
        KONtx.application.loadView( destinationId, data ); 
    },
    onFocus: function(event){
    this.styles = App.styles.main.menuButtonOver
    }
    }
    }).appendTo(this); 

    so the style menuButtonOver has a different background image. Sadly, this isn't working. Is this possible? Thanks
    0

Recent Posts

in Design / Interaction - Yahoo! TV Widgets