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

Side by side buttons, over a grid, focus issues

I have a view with a back button, a previous and a next button, and a
grid of data. When I lay out the buttons so that all the buttons are
full width, and from top to bottom the page is back button, previous,
next, grid, then everything works fine.

CODE
 +-------------+
 | back button |
 +-------------+
 |    prev     |
 +-------------+
 |    next     |
 +-------------+
 | grid cell 1 |
 +-------------+
   ...
 +-------------+
 | grid cell N |
 +-------------+

When I make the previous and next buttons be half width, and lay the
page out like

CODE
 +-------------+
 | back button |
 +------+------+
 | prev | next |
 +------+------+
 | grid cell 1 |
 +-------------+
   ...
 +-------------+
 | grid cell N |
 +-------------+

Then I have focus issues.

The first time I enter the view focus is on the previous button.
Hitting down takes me into the grid. Hitting up takes me up from the
grid to the back button, skipping over the previous and next buttons.
Down from the back button takes me into the grid. I have to reinstall
the application on the TV to get back to the prev or next buttons.

What am I doing wrong?

by
Report Abuse
3 Replies
  • I got an answer off the forums. I will provide a better explanation
    later, but the short version is:

    Pretend GUI elements that can be focused have a single (x,y) "focus
    target".

    A navigation event searches from the focus target of the currently
    focused GUI element for the nearest focus target in the given
    direction. The focus target for the back button is in the center of
    the button's bounding box, not the bounding box of the little left
    pointing arrow, the full box including the text label for the back
    button. The focus target for the grid is in the center of it's top
    row of pixels. The focus target for normal buttons is in the center
    of their bounding box.

    So from the center of the back button, the nearest focus target below
    it is not either of the two half width buttons, but is the grid;
    similarly for navigating upwards from the grid, the nearest focus
    target is the back button, not either of the two half width buttons.

    The solution is to do custom navigation code. Subscribe to the on
    navigate event. It includes a direction and a from. I will write
    code to check the (from, direction) and when appropriate I will prevent
    the normal behavior, and manually focus on the 'correct' next item.
    Report Abuse
    0
  • Here you go. As discussed offline, it would look like this demo.
    CODE
    var NavDemo = new KONtx.Class({
     	ClassName: "navdemo",
    	
    	Extends: KONtx.system.SidebarView,
    	
    	createView: function() {
    		// put your code here for creating the elements on the page
    		this.controls.backbutt = new KONtx.control.BackButton({}).appendTo(this);		
    		this.controls.items = new KONtx.element.Grid({}).appendTo(this);

    		this.controls.Nextbutton = new KONtx.control.TextButton({}).appendTo(this);
    		this.controls.Prevbutton = new KONtx.control.TextButton({}).appendTo(this);		

    		// add this listener to the view for navigation redirection
    		this._viewOnNavigate.subscribeTo(this, 'onNavigate', this);
    	},
    	
    	_viewOnNavigate: function (event) {

    		var direction = event.payload.direction,
    			evttarget = event.KFEvent.target.owner,
    			newtarget = null;

    		switch (evttarget) {
    			case this.controls.items:
    				if (direction == 'up') {
    					if (event.KFEvent.eventPhase == DOMEvent.BUBBLING_PHASE) {
    						if (!event.KFEvent.defaultPrevented) {
    							newtarget = this.controls.Nextbutton;
    						}
    					}
    				}
    				break;
    			case this.controls.backbutt:
    					 if (direction == 'down') {newtarget = this.controls.Nextbutton;}
    				break;		
    		}

    		if (newtarget) {
    			event.preventDefault();
    			newtarget.focus();
    		}
    	}

    });
    Report Abuse
    0
  • In my particular situation, it turns out we didn't need or really want two side by side buttons. We wanted a custom scroller for a list. It was enough to hook the onnavigate event of a single full width button, and handle left/right to make the grid scroll. Along with some minor customization to the button to make it look enough like the normal side scroll button to not confuse users, something like this added to the buttons events list/object was enough:

    CODE
        onNavigate: function (event) {
            switch (event.payload.direction) {
            case "right":
                // scroll grid to later entries
                // preventDefault is not needed; the default is
                // to keep focus on the full width button, which is OK
                // event.preventDefault();
                break;
            case "left":
                // scroll grid to earlier entries
                // as above, preventDefault not needed, the default is OK
                // event.preventDefault();
                break;
            }
        }


    Thank you for your code though Widget Realm, I know I will use it soon in another app that is sure to need custom navigation. It will have side-by-side buttons, in full screen mode. Yikes!
    Report Abuse
    0
Ask a Question

Recent Posts

in Design / Interaction - Yahoo! TV Widgets