Understanding states

We often use the word "focus" when we speak about layout objects. Which object has the focus?

When styles are involved, various states of an object are possible and therefore stylable. Some states seem easier to understand than others. I can tell how to achieve them and what the conditions are.

For instance: hovered over. It is only achievable with a mouse and requires the mouse to be located above the object with a certain span. It isn't triggered when the object is already selected or active(?)

Pressed (Clicked): It can only be done with a mouse, and occurs only while the mouse button is pressed. It can be done on buttons that are In Focus (selected) as well as on buttons that are not.

Where I loose my wits is with the Active, Inactive and In Focus (selected).

I created a very simple file for testing.

When you open the file, the button bar is all in Inactive state. You can move the selection on all 3 buttons and observe the selected state. Typing Enter sends the button's command and make the button appear with the Active Format. From then on, there will always be 1 button with that "Active state" format on the button bar.

Hovering over the button with that state will not give the hover feedback but clicking is possible and the command will be sent. The format will remain the "active" state format.

However, if one select that same button again but via the keyboard, then one can observe that the resulting visual is a combination of the Active state and the In Focus state. How do I know that? Because it keeps the green (only present in Active) and it adds a contour and a shadow which are part of the In Focus style.

I have seen in some solutions the state controlled via script at the end of the script the state is restored to inactive (I think). Clicking again will not launch the action (example: go to slider panel#2 if you already are there) but will give the "Active" state format, giving the impression that you can select the panel independently from the action.

I have been wondering what does warrant the distinction between the two states: in focus and active. Active seems to mean the last button clicked on from a group.

How do you leverage states in your solutions? Do you make distinctions between InFocus and Active?

1 Like

I interpret that "in focus" means the object has the cursor (either text cursor or button selector cursor if buttons are part of the tab order and you use the keyboard to get to them). You cannot have multiple objects in that state on the layout. Only a single one.

Active is different in that it is more like a radio button. You can have many radio button sets and each one can have one value selected (or a segment active, since we see it used for button bars a lot). I think active also exists for portal rows and other objects. I'm no expert, but if I have to compare Active with In Focus, this is what I can come up with.

3 Likes