Overriding default navigation behavior

I'm trying to create KONtx.element.Container descendant, that will be used as a kind of pop-up. It will have some controls added by a programmer (but there are no more assumptions about them).

Problem I am facing right now is that default navigation mixes objects from those in container and ones that lay beneath, and are currently covered with my pop-up.

What I found in KONtx framework code is that it uses getFocusable on this.body object to determine what objects should be considered when navigating, but setting this.body (to itself or auxiliary inner Core object) on a container did not yield any results.

Can someone point me at right direction? I believe it is correlated with event propagation mechanism, but wasn't able to find more informations in provided docs.

5 Replies
  • Further investigation showed, that getFocusable is only called on active view, but setting view's body to my container didn't work either.
  • We have done some stuff with this in the past in custom overlays.

    Try this:
    1) Put all your content in one container like it seems you are doing
    2) in the main view subscribe to the onNavigate event
    3)Move your focus to the overlay buttons with focus() when it is visible
    4) check the event for the payload values and match them to your overlay buttons
    5) if they match, manually control the focus and move it to the next button with focus()
    6) make sure if the event checks out to be from your overlay that your call event.preventDefault() to stop it from moving the focus in the area below the overlay.

    Hope this helps.

    Post up some code and we will take a look.
  • QUOTE (WidgetRealm @ Nov 3 2010, 07:07 PM) <{POST_SNAPBACK}>
    5) if they match, manually control the focus and move it to the next button with focus()

    That's the problem. There are absolutely no assumptions on how programmer will layout buttons (or other controls) in overlay container. That's why I'm trying to leave navigation to built-in mechanism.

    I have already used approach you described while created grid-like element, but then I had knowledge about how cells are laid out, so I could handle navigation myself.
  • You have to be able to tell what is being put into the overlay - # of buttons etc. just put in a count and store the button references.
  • Well, as I said -- there are no assumptions about objects stored in overlay. Number of buttons could be determined, if overlay knew that elements stored in it are buttons. If I have no Idea if controls are laid vertically, horizontally (or even in more complicated way) how can I know which one to focus if user press left or right arrow?

    It is already implemented in framework, and it's kind of complicated. That's why I wanted to reuse it's capabilities.

    For now I was able to accomplish this task by remembering state of direct view descendants, and setting their allowNavigation and wantsFocus to false. When overlay loses focus it re-sets the state of other objects and passes focus to them. This solution is a bit crippled, but works for now :-)

Recent Posts

in Design / Interaction - Yahoo! TV Widgets