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. The

Overview

This 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.

...

FlexJS solves these problems by allowing developers to add just the features they need when they need them. So instead 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.

FlexJS Components

A “component” 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 one an instance of those componentsTextInput, you would add the password capability, in the form of a bead, to one of the TextInput components.

...

The FlexJS framework is designed to work well with ActionScript and JavaScript. The philosophy is that if it works in ActionScript, it should work in JavaScript, too, and vice-versa. You create a component (or bead) in one language and then port that functionality to the other language. Note that you port the functionality and not the code. You want to make things as efficient as possible in both environments. For instance, the TextInput component in ActionScript is comprised of view and model beads. The JavaScript TextInput has neither : since HTML has a view and model already (the DOM), the FlexJS TextInput component is just a thin wrapper for the HTML control. As components become more complex, such as with the Slider component, more of the ActionScript style is present in JavaScript.

...

With the TextInputView, the next thing to do is get its underlying textField and set it to display as a password. CSSTextField is a FlexJS class that extends the ActionScript TextField to make it easier to apply styles to it using CSS. You can also have used the TextField type directly.

Use the Bead

Updating the Manifest and Library

If your bead is to become part of the FlexJS framework library, you will need to modify additional files. If your bead is solely for your application use, you can skip this part.

Your bead must be compiled and place into the FlexJS SWC library. To do, find the FlexJSUIClasses.as file and add your bead. For example:

import org.apache.flex.html.staticControls.beads.PasswordInputBead; PasswordInputBead;

To allow your bead to use the FlexJS namespace, it must be present in the FlexJS manifest file. Find the basic-manifest.xml file and add the bead, such as:

<component id="PasswordInputBead" class="org.apache.flex.html.staticControls.beads.PasswordInputBead" />

MXML

To make use of the bead, go to your application or initial view MXML file and create a TextInput and add the PasswordInputBead to it:

...