UI Elements

The behave3d library contains controllers that transform an element and its DOM children into a new kind of entity - a component with special visual appearance and/or with special behavior.

Example of components that change only the visual appearance of an element are the controllers box() and carousel(). While the carousel constructed by the latter receives messages telling it to change its state (like change the currently-focused item), it does not implement any behavior (react to events) and expects the external scripts to command it.

On the other hand, the menu() controller does not change the visual appearance of its element - it only attaches event listeners on the element (and its children) and realizes the behavior of a cascading tree menu, firing events which can be handled by other controllers, that perform some visual effects.

Side 1
Side 2
Side 3
Side 4
Side 5
Side 6

Since many UI-component controllers will work with a set of items (elements) and will perform the same operations on the list (add/remove items, update the list from the DOM tree, etc.), this common functionality is implemented in a special controller, list(), whose purpose is to manage a list of items, supply the list to other controllers and perform actions on the list upon messages from other controllers. This way many controllers can work on a single list of items, some controllers visualising the list in different ways (like the carousel() controller does), and others - commanding actions on the list (like the listButton() controller does).

Here is an example of a full working set of controllers: a list(), a carousel() which visualizes the list, and buttons with listButton() controllers that send messages to the list.

Here is an example of the menu() controller coupled with some move() and rotate() controllers which perform the animations of the menu items: