Page History

FlexJS Components

The FlexJS component framework follows the model-view-controller (MVC) architecture very closely where a component will have distinct model, view, and a controller parts called "beads". A FlexJS component can be thought of as having strands onto which beads (the functional parts) are added or strung. Components in the FlexJS framework are bundles of functionality formed by composition, rather than by inheritance. The concept of adding functionality (composition) is different from most other UI approaches which tend to extend (inheritance) functionality resulting in more complex components or adding features (overloading) to existing component.

For example, to have a text input field also include password and prompt features, you might use inheritance to create additional classes such as PasswordInput, PromptInput, and then PasswordAndPromptInput. You can see that this can quickly get out of control. Another option is to add these properties to the text input field and overload it with features. Feature overloading makes it convenient for developers but most of the time only a basic set of features are ever used. This means applications can be very large (byte-wise) because every component has code and properties it rarely needs.

FlexJS solves these problems by allowing developers to add just the features they need when they need them. Instead of every text input field having password and prompt capabilities, only a handful have those features and the application remains lighter as a result.

A component is a visual object that is built by combining just the parts needed for the job. For example, entering simple text can be accomplished with the TextInput component. If you have the need to enter a password into an instance of TextInput, you would add the password capability, in the form of a bead, to one of the TextInput components.A component in FlexJS is a composition of a “strand” (the core piece) onto which “beads” (or plug-ins) are addedin FlexJS consists of strands onto which beads are added. A strand is the component wrapper or framework while a bead encapsulates a particular bit of functionality. In the example above, the basic TextInput component consists of the TextInput strand along with beads to capture the data (the TextModel bead) and present it (the TextView bead). When you need a component that has to accept passwords, you add a password bead which is written to intercept the keyboard events and mask the letters.Each component in FlexJS reflects password and prompt features are beads that can be added to a text input component's strand. Further, the actual text input control is provided by a view bead and the data (the text itself) is managed by a model bead. In this way, components in FlexJS embody the model-view-controller (MVC) paradigm, separating function as much as possible. Further, FlexJS encourages composition over inheritance. For example, you might be tempted to create a component that handles passwords by creating a PasswordTextInput component that inherits from TextInput; this is the inheritance model. While that might work for this case, a more re-usable solution would be to create a password bead to add to an existing component; this is the composition model. The benefit of composition is that beads can be often be re-used.Take for example, a bead that formats a numeric string. You could add this to any Label component, but you could also add it to a cell of a table. Instead of building a set of specialized components, you build a set of specialized, re-usable beads.

A Word About ActionScript and JavaScript

...