Learn  >  Model & Process  >  Models
Layout Behavior Model

  The Layout Behavior Model defines the "visual hierarchy" between the different areas on screen. There are two kinds of behaviors that can be defined in this model: transitions and propagations.

In the following example, suppose you have the following Navigation model (partial) and Layout model:


And suppose that, at a given time, the Search Customer query is being presented in One.

What happens if the Search action (the default query action) is selected by the user?
In the Navigation Model, we know that the search action is navigated and the following element is the Customers index, but where should we put it in the user interface?

For this purpose we need area transitions. A Transition occurs when an action is fired in an area, and defines where the target will be located. Simply put, a transition can be seen as an arrow from the source area to the target. In our example, we defined transitions from Top to Left, from One to Target and from Two to Target.


When the Search action is fired, the transition is executed, and the Customers index is located in the Target area.

But, can Target host it? Only Final areas can host navigational elements, and Target is not a Final area but an Abstract one. That means that Target can't present the content, and should propagate it.

Propagation is the assignment of content from one area to one of its children, or its sub-areas. When a Container or an Abstract area receives a navigational element to present, they should propagate it. Container areas propagate to their children, while Abstract areas propagate to the inheriting ones.

In our example, we should define propagations for Left (a Container area) and Target (an Abstract area).



Propagations may have conditions. For instance, you can define that certain propagation is only launched for some specific actions. Suppose that in our example, the condition was satisfied for the second propagation (pointing to one of the HorizontalTarget children). So, after the Search action is fired, the next screen the user will see is composed as follows:


The rule is that an action fires a transition, and the transition target area may fire propagations to their children (sub-areas).

Why it's a good idea to define the layout behavior in this way

Because the Layout is made navigation independent. That is, your entire Layout and Layout Behavior models could be totally independent from the specific user interface being designed. If you have a vast Layout Repository, you can focus on the Navigation model and simply choose the Layout you want from the Repository.

This is just another way to bring patterns to life. You can share your Layout Repository with other users, define guides to be used in your enterprise, and so on.