Page History

...

The NumericAdjustment component class, org.apache.flex.html.staticControls.NumericAdjustment, has very little content of its own:

/**
 * The event dispatched whenever the value of the component changes.
 */
[Event("change")]

/**
 * The NumericAdjustment component displays a value with increment and decrement buttons.
 *
 * @langversion 3.0
 * @playerversion Flash 10.2
 * @playerversion AIR 2.6
 * @productversion FlexJS 0.0
 */ 

public class NumericAdjustment extends UIBase {
 /**
 * The current value of the component
 *
 * @langversion 3.0
 * @playerversion Flash 10.2
 * @playerversion AIR 2.6
 * @productversion FlexJS 0.0
 */
 public function get value():Number {
      return NumericAdjustmentModel(model).value;
   }
   public function set value(oldValue:Number):void {
      NumericAdjustmentModel(model).value = oldValue;
   }
}

The component class has [Event] metadata to indicate that the component can dispatch change events and declares a value property. Notice that the property is not stored in the component itself but in the component's model. The model property is part of the base class, UIBase.

...

The NumericAdjustmentModel bead has a single property, value, which holds the value for the component:

/**
 * The NumericAdjustmentModel class holds the data model for the NumericAdjustment component.
 *
 * @langversion 3.0
 * @playerversion Flash 10.2
 * @playerversion AIR 2.6
 * @productversion FlexJS 0.0
 */
public class NumericAdjustmentModel implements IBeadModel {

 private var _strand:IStrand;

/**
 *  @copy org.apache.flex.core.IBead#strand
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10.2
 *  @playerversion AIR 2.6
 *  @productversion FlexJS 0.0
 */
 public function set strand(value:IStrand):void {

   _strand = value;
 }
 
 private var _value:Number;

/**
 * The current value of the component
 *
 * @langversion 3.0
 * @playerversion Flash 10.2
 * @playerversion AIR 2.6
 * @productversion FlexJS 0.0
 */
 public function get value():Number {

   return _value;
 }
 public function set value(newValue:Number):void {
   if( _value != newValue) {
      _value = newValue;
      IEventDispatcher(_strand).dispatchEvent(new Event("change"));
   }
 }
}

Whenever the value in model changes, the model dispatches a change event using the strand (cast to IEventDispatcher).

The NumericAdjustmentView bead has a little more work to do. Most of the set up is done when the bead has been assigned its strand:

/**
 * The NumericAdjustmentView class is a bead that creates the elements of the NumericAdjustment component.
 *
 * @langversion 3.0
 * @playerversion Flash 10.2
 * @playerversion AIR 2.6
 * @productversion FlexJS 0.0
 */
 public class NumericAdjustmentView implements IBeadView {

 private var _strand:IStrand;

/**
 *  @copy org.apache.flex.core.IBead#strand
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10.2
 *  @playerversion AIR 2.6
 *  @productversion FlexJS 0.0
 */
 public function set strand(value:IStrand):void {

   _strand = value;
 
   _leftButton = new Button();
   _leftButton.text = "-";
   _strand.addElement(_leftButton);
 _leftButton.addEventListener("click",handleDecrement);
   
   _label = new UILabel();
   _label.text = "";
   _strand.addElement(_label);
 
   _rightButton = new Button();
   _rightButton.text = "+";
   _strand.addElement(_rightButton);
   _rightButton.addEventListener("click",handleIncrement);
 
   IEventDispatcher(_strand).addEventListener("change",handleChange);
 
   sizeAndPosition(null);
 }
 
 /**
 * @private
 */
 private function sizeAndPosition(event:Event):void
 {
   //TODO: put the components in order: incr button, label, decr button
 }
 
 /**
 * @private
 */
 private function handleChange(event:Event):void {

   var model:NumericAdjustmentModel = _strand.getBeadByType(IBeadModel) as NumericAdjustmentModel;
   _label.text = String(model.value);
 }
 
 /**
 * @private
 */
 private function handleDecrement(event:Event):void {
   var model:NumericAdjustmentModel = _strand.getBeadByType(IBeadModel) as NumericAdjustmentModel;
   model.value -= 1;
 }
 
 /**
 * @private
 */
 private function handleIncrement(event:Event):void {
   var model:NumericAdjustmentModel = _strand.getBeadByType(IBeadModel) as NumericAdjustmentModel;
   model.value += 1;
 }
};

The view bead creates the component elements (buttons and label). It also listens for a change event that the model will dispatch when the value changes. Doing it this way, rather than from the code that changes the model (the handleDecrement and handleIncrement functions), allows  the component to updated by anything that changes its model - which could be some other component.

...

After you have it working in ActionScript, you can quickly test it in JavaScript by cross-compiling it. The FalconJX compiler will build JavaScript versions of all of your component pieces. You can find them in the bin/js-debug (and bin/js-release) directory in the same directory/package path. Opening the bin/js-debug/index.html file in a browser should result in an HTML page that works  exactly like the Flash SWF version.

Do not forget to include asdoc tags in your component as shown in the example code above. 

When your component is ready to become part of the framework, it can go into the FlexJSJX project if the component can be  100% cross-compiled into JavaScript. If you had to create any part of it in JavaScript, or modify any of the generated JavaScript files to get the component to work, then the ActionScript code must be placed into the FlexJSUI project.

...