0

Cannot change button style through event listener

Hello,

I want to do following action:
  • select a button
  • when button has the focus, chossing the left arrow on the keyboard will set a new position to the button

I defined the following function:

function handleLightSwitchKeydown(KFEvent){   
                   
    if( KFEvent.eventPhase==3 ){
        switch( KFEvent.keyCode ){   
            case 37: {
                log ("Left arrow pressed!");
                var dialog = new KONtx.dialogs.Alert({
                    title: "Message",
                    message: "Left arrow pressed!",
                    buttons: [
                    { label: "Ok" }
                    ]
                });

                dialog.show();

              light__button.setStyles({
                            vOffset: 25,
                            })
                break;
        }
    }
};

In my customView.js I have the following code for the light button:

     geraete_background = new KONtx.element.Container({
            styles: {
                width: Theme.viewSpecs.FULL_SCREEN.width,
                height: 75,
                vOffset: this.controls.backButton.height + 75,
                hOffset: 0,
                backgroundColor: "red"
            }
    }).appendTo(this);

    light_button = new KONtx.control.TextButton({
    label: 'B3',
    styles: {
        width: 45,
        height: 45,
        vOffset: 0,
        hOffset: 0,
        backgroundColor: '#111111',       
       
        },   
        events: {
            onFocus: function(event){
                widget.addEventListener('keydown', handleLightSwitchKeydown, false);
      
                     log("Light button has Focus");
 
            },
        }
   }).appendTo(geraete_background);


The alert box ist shown but I cannot reposition the button.
My problem: the light_button variable can't be find from the event listener. :( I always get an "var undefined" error. Can you help me?

2 Replies
  • How can insert my code in a formatted way?
    0
  • Try defining the light_button as part of the view object such as :

    this.controls.light_button = ..

    Also, the event handler can be defined with the view as a scope:

    widget.addEventListener('keydown', handleLightSwitchKeydown.bindTo(this.getView()), false);

    Then you will be able to access the variable this.controls.light_button inside the function handleLightSwitchKeydown.

    Thanks,
    Vivek

    QUOTE(Christoph Schindler @ 3 Aug 2011 2:39 PM)
    Hello,

    I want to do following action:
    • select a button
    • when button has the focus, chossing the left arrow on the keyboard will set a new position to the button

    I defined the following function:

    function handleLightSwitchKeydown(KFEvent){   
                       
        if( KFEvent.eventPhase==3 ){
            switch( KFEvent.keyCode ){   
                case 37: {
                    log ("Left arrow pressed!");
                    var dialog = new KONtx.dialogs.Alert({
                        title: "Message",
                        message: "Left arrow pressed!",
                        buttons: [
                        { label: "Ok" }
                        ]
                    });

                    dialog.show();

                  light__button.setStyles({
                                vOffset: 25,
                                })
                    break;
            }
        }
    };

    In my customView.js I have the following code for the light button:

         geraete_background = new KONtx.element.Container({
                styles: {
                    width: Theme.viewSpecs.FULL_SCREEN.width,
                    height: 75,
                    vOffset: this.controls.backButton.height + 75,
                    hOffset: 0,
                    backgroundColor: "red"
                }
        }).appendTo(this);

        light_button = new KONtx.control.TextButton({
        label: 'B3',
        styles: {
            width: 45,
            height: 45,
            vOffset: 0,
            hOffset: 0,
            backgroundColor: '#111111',       
           
            },   
            events: {
                onFocus: function(event){
                    widget.addEventListener('keydown', handleLightSwitchKeydown, false);
          
                         log("Light button has Focus");
     
                },
            }
       }).appendTo(geraete_background);


    The alert box ist shown but I cannot reposition the button.
    My problem: the light_button variable can't be find from the event listener. :( I always get an "var undefined" error. Can you help me?
    0

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets