Page History

...

As components become more complex, such as with the Slider component, more of the ActionScript style is present in the JavaScript component.

Getting Started

If you plan on using Flash Builder, this article about setting up FlexJS for use with Flash Builder is a good place to start.

Creating a Bead

The first example shows how to make the password bead. You will see how to compose the bead and how to add it to an existing component's strand. Since FlexJS is available in ActionScript and JavaScript, the example shows how to make the bead using both languages simultaneously.

...

• Most beads use their strand for their UI parent. Beads can make or use other components or visual parts, then they add them to their strand’s display list.
• Try to use interfaces whenever possible. This keeps implementation code separate and lets modules work better.
• Use the paradigm of separation of control as much as possible. That is, do not have beads do more than necessary and separate functions into multiple beads. Very often a component will have one bead for the visual display (a view bead), one bead to hold its data (a model bead), and one bead to handle user interactions (a control bead). This allows a developer to swap out beads as necessary (e. g.For example, a mouse control bead for a touch control bead)mobile developer might want to replace the Slider's mouse controller bead with a touch controller bead: the component's other parts (track, thumb, model, etc.) remain the same.

Making a Component - ActionScript

...

If you open Slider.as, you'll see that it implements the setters and getters, but all they do is call upon the model's corresponding setters and getters. Because Slider extends UIBase, the display list is provided as well as common functionality that all FlexJS components need (such as setting size and position).

Your strand really need needs to provide the public interface and that's about it. The strand should not create any views or manipulate any values. There are probably going to be exceptions, but this should be the rule: keep functionality as separate as possible and join it together with events.

...

If you open the RangeModel.as (or any of the other model files) you'll see they are a collection of property setters and getters (and their backing variables, of course). Every property has an event dispatched when it changes. Note that the event is not dispatched on from the model, but on the not its strand. This helps other components Beads that need to listen for changes (they need only the component/strand) and allows the beads of the component to communicate. For example, the Slider's mouse controller bead can update the model value which will be picked up the Slider's view bead and the thumb will change position.to the model should fetch the strand's model and set up listeners for those properties it is interested in. For example, the Slider's mouse controller bead can update the model value which will be picked up the Slider's view bead and the thumb will change position.

This is the typical pattern for getting the strand's model and setting up the listener. Note the use of interfaces instead of concrete classes.

// actionscript
var model:IBeadModel = _strand.getBeadByType(IBeadModel) as IBeadModel;
IEventDispatcher(model).addEventListener("valueChanged",modelListener);

SliderMouseController (control bead)

...

Set the positioner property with the element of your component you want used to size and place your component. Functions from UIBase, such as set_x() and set_width(), modify the corresponding styles on the component's positioner.

FlexJS uses the Google Closure Library At this point, FlexJS is intended to be compatible with IE8 and as such, implicit getters and setters do may not work with every implementation of JavaScript. For example, doing slider.value = 4, will not trigger the Slider's set_value() function. You must should use the setter (and getter) functions explicitly: slider.set_value(4).