Focus

Role#

In computing, the focus indicates the component of the graphical user interface which is selected to receive input. A focused view:

• is a view of interest, where the attention of the user should be attracted
• is eligible to receive inputs
• is withdrawn automatically when giving another view the focus.

Expected use#

How it works ?#

The focus is hierarchical, meaning that if a view is focused its parent is focused. It means that multiple views can be focused at the same time, but only one view is focused at a time at the same level of the hierarchy. Find below a visual representation:

Focus management rules#

The hierarchy focus management is based on the following rules:

• when a screen is shown, the screen is automatically focused,
• focus is screen scoped:
  • within the same screen, two views can not be focused at the same time if they are not part of the same focused-hierarchy,
  • two views that belongs to different screens can be focused at the same time (ie by default the screen remember the view that were focused),
• focusing a view does not focus children by default,
• focusing a view focus its parent,
• view can choose to focus one of its child on focus (using _getChildToFocus),
• view remembers its child that were focused, by default
• a view is always focusable (it has the MFocus feature on it),
• when a focused child is added dynamically, it will lose its focus, unless its parent is focused

focus API usage example#

import $View from "@View";
import $ListView from "@ListView";

var Rails = $View.declare("Rails", {
    children: {
        "rail1": {class: $ListView},
        "rail2": {class: $ListView}
    }
});

var MyView = $View.declare("MyView", {
    children: {
        "menu": {class: $ListView},
        "rails": {class: Rails}
    }
});

var myView = new MyView();
myView.menu.focus();   // myView, menu
myView.rails.focus();  // myView, rails
myView.rails.rail2.focus();  // myView, rails, rail2
myView.menu.focus();   // myView, menu
myView.rails.focus();  // myView, rails, rail2

Advanced use#

ListView#

The focus management on a ListView is based on the following rules:

• when the list is focused, the associated child to the current item is focused,
• when a child of the list is focused, the item that is tied to the child becomes the current item

Below a diagram of how it should look: