Using component events

Each component you add to your design supports some level of interactivity. The simplest form of interactivity is the mouse click event. This event happens when the user clicks on the component.

To each event a component supports, you can attach one or more actions that will be executed when that event occurs. For instance, you can add a link to another page to a mouse click on a button. You can view the set of events supported by a component in the sidebar panel that shows up when you select a component. You can add interactivity to only one component at a time. When selecting multiple components, only the styling toolbar will be visible.

Adding an action to a component event

Each event has it's own row in the interactions panel. You can click that event row/title and popup will show with all interactions supported by FlairBuilder. Select one and it will be added to the respective event. Depending on the type of action you've selected, several options will be available.

If you add multiple actions to an event, you can select, reorder, or remove any of them. When an action is selected, the ones preceding it will be 'pre-played', meaning that their effects will be automatically visible to you. This one, actions can build one on top of the others, and makes it easy for you to see the final result of the interactivity you attach to your prototype.

Working with conditional events

Some components support conditional events. For instance, a button bar or a menu bar, allows the user to click on one item of several available. You can attach different actions to different items/buttons, using 'cases'. What you need to do is to first add a 'case' to an event, which you will then edit to match the item in the component. You can add as many cases as you need, and you can also reorder and reshuffle the actions and cases afterwards.

Conditional cases can be also removed and renamed to fit the content of the component to which the containing event is attached. Selecting an action under a conditional case, will only 'preview' the actions in that case and the ones that are not under any case, if they are at the begining of the actions set. There is also a special case name, called '$ANY$', which tells FlairBuilder to execute the actions beneath no matter what.

Reversable and sequential events

The execution of an event's actions can be made reversable by selecting this option in the event's row. Click on the 'reload/refresh' icon to toggle it on or off. When an event is set as reversable, the actions attached to it will first be executed in their proper order, but on the subsequent execution, they will ran in the reversed order and will also be reversed themselves. For instance, if an action moves a component from point A to point B, in reverse mode, it will move the component back from point B to point A.

The set of actions attached to an event can also be executed both in a parallel manner (default), or sequentially. This is useful when you want to switch pages and THEN animated some components on the target page. The possibilities are plenty.