Blend for HTML Behaviors and Actions
To make the HTML markup more legible, the product team decided to attach each Behavior via a W3C-compliant data-vs-interactivity attribute. Arguments are passed via a human-readable JSON object in a separate referenced file. All Behaviors on the page are initialized when the application loads and WinJS.UI.processAll() executes.
To create their own Behaviors, developers can use the same schema used for WinJS controls. OAM (Open Ajax Metadata) describes reusable functional components and is very legible to anyone familiar with extensible markup languages. Once added to the Blend installation directory, this allows your custom Behavior to appear in the Asset panel.
How Behaviors Work
To fully understand Behaviors, you must also understand Actions. Behaviors describe an event while Actions describe the consequence of an event. A good way to think about it is this:
“When [Behavior] happens, do [action]”
Behaviors are attached to individual page elements in the HTML Properties panel, using the controls in the Behaviors category:
The controls in the Behaviors category can be used to: 1) Add new Behaviors, 2) Add or removes Behaviors and Actions and 3) Configure the selected Action or Behavior. When a Behavior is added to an element, a data-vs-interactivity attribute is added to it which contains the name of the Behavior that is attached.
Behaviors act as triggers, defining what criteria need to be met in order to cause one or more of its associated Actions to fire. One example is the EventTriggerBehavior, which can be set to trigger on different events, e.g. the OnClick event of an element. In this case, whenever that element is clicked, all the actions associated with that Behavior will be run.
By default, the element to which the Behavior is attached will be the source and target elements for the behavior. Being able to retarget the source of your behavior or the target of your action will be a very common task. To allow a behavior to listen to elements other than what it is attached to or have actions target other elements, you can make use of the sourceSelector and targetSelector properties.
Behaviors and Actions can be combined in a variety of ways to affect page elements, either directly or indirectly by using the targetSource and srouceSelector to target or attach Behaviors to other elements on the page.Behaviors and Actions are attached to page elements and can be configured in Blend using the HTML Attribute panel.