Page History

...

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

SliderView (view bead)

If you open the SliderView.as file and look at the strand setter function, you can see how the track and thumb beads are identified and added.

_track = new Button();
Button(_track).addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);

_thumb = new Button();
Button(_thumb).addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);

Both the track and thumb parts of the Slider are Buttons. Since Buttons are also FlexJS components and follow the same pattern, they too have beads. The look of the track and slider are encapsulated in Button-compatible beads so they are fetched from the style definition by the ValuesManager and added to the Button's strand.

Once the pieces of the view are created, event listeners are set up so the view knows what's happening to the strand, especially the size and the value. Changes to the size cause the view to layout out its children. Changes to the value position the thumb over the track.

...

The Slide extends UIBase, which on the SWF side will be DisplayObject and on the JavaScript side will be a <div> element. That is fine for Slider, but in case you want to use a different HTML element, you can override the createElement() function which is present only for the JavaScript side:

/**
 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
 */
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
    element = document.createElement('div') as WrappedHTMLElement;
    element.style.width = '200px';
    element.style.height = 30px';
    // set anything else here
    return element;
}

Notice the use of flexjsignorecoercion doc tag in the comment. This tells the cross-compiler not to generate JavaScript for the "as" construct involving WrappedHTMLElement.

SliderView (view bead)

If you open the RangeModelSliderView.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 dispatched from the model, not its strand. Beads that need to listen for changes 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);

...

file and look at the strand setter function, you can see how the track and thumb beads are identified and added.

_track = new Button();
Button(_track).addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);

_thumb = new Button();
Button(_thumb).addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);

Both the track and thumb parts of the Slider are Buttons. Since Buttons are also FlexJS components and follow the same pattern, they too have beads. The look of the track and slider are encapsulated in Button-compatible beads so they are fetched from the style definition by the ValuesManager and added to the Button's strand.

Once the pieces of the view are created, event listeners are set up so the view knows what's happening to the strand, especially the size and the value. Changes to the size cause the view to layout out its children. Changes to the value position the thumb over the track.

RangeModel (model bead)

If you open the SliderMouseController.as file you will see that it uses the strand setter to get the model and view. The controller's job is to coordinate the actions of the user with the model and view. A controller sets up the input event handlers (e.g., mouse events, keyboard events, touch events) to do that. The SliderMouseController sets up mouse events such that when the track is clicked, the controller catches that event, derives the value using the model and the x position of the click. The controller then updates the model with a new value. Because the model dispatches an event when the value changes, the view, listening for this event, changes the position of the thumb.

When you write your own controllers you can follow the same pattern: translate events to model values and update the model. The view bead(s) should be listening for those changes.

Slider (strand)

If you open Slider.js and look at the set_element() function, you'll see that it creates its base element (a <div>) and then creates the track and thumb beads (corresponding SliderTrackView and SliderThumbView JavaScript classes).

// javascript
  this.element = document.createElement('div');
  this.element.style.width = '200px';
  this.element.style.height = '30px';

  this.track = new org.apache.flex.html.staticControls.beads.SliderTrackView();
  this.addBead(this.track);

  this.thumb = new org.apache.flex.html.staticControls.beads.SliderThumbView();
  this.addBead(this.thumb);

All FlexJS JavaScript components have an element property that refers to the HTML element that is the parent of any other elements that make up the component. Most of the time this will be a <div> element, but it can also be an <input>, <button>, or whatever you feel is best for your component.

The JavaScript component is also has its size coded; once a the JavaScript version of ValuesManager has been implemented, this can be removed and components can have their sizes set using styles.

For the Slider, the track and thumb are actual beads (SliderTrackView and SliderThumbView, respectively). Compare this to Spinner (see Spinner.js) which uses two FlexJS TextButton components for the increment and decrement buttons.

Once the track and thumb beads are created, the mouse controller bead is created and added to the strand.

 this.controller = new org.apache.flex.html.staticControls.beads.controllers.
                    SliderMouseController();
  this.addBead(this.controller);

To complete a FlexJS JavaScript component, make sure to set or create the positioned member and the flexjs_wrapper. FlexJS relies on the positioner to be set and uses it to size and position the component.

  this.positioner = this.element;
  this.element.flexjs_wrapper = this;

SliderTrackView and SliderThumbView (view beads)

If you open SliderThumbView.js or SliderTrack.js, you'll see that these beads use their set_strand() functions in a way that's similar to Slider.js: an element is created, options or styles set, the element and is added to the HTML DOM.

SliderMouseController (controller bead)

If you open SliderMouseController.js, you see that its set_strand() function gets the track and thumb beads from its strand, via getBeadByType() and adds event listeners to them.

this.track = this.strand_.getBeadByType(
        org.apache.flex.html.staticControls.beads.SliderTrackView);
this.thumb = this.strand_.getBeadByType(
        org.apache.flex.html.staticControls.beads.SliderThumbView);

goog.events.listen(this.track.element, goog.events.EventType.CLICK,
                     this.handleTrackClick, false, this);

goog.events.listen(this.thumb.element, goog.events.EventType.MOUSEDOWN,
                     this.handleThumbDown, false, this);

The purpose of the controller is to coordinate the input from the mouse with values from the model which are then reflected in the views. Here is the handleTrackClick function:

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 dispatched from the model, not its strand. Beads that need to listen for changes 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)

If you open the SliderMouseController.as file you will see that it uses the strand setter to get the model and view. The controller's job is to coordinate the actions of the user with the model and view. A controller sets up the input event handlers (e.g., mouse events, keyboard events, touch events) to do that. The SliderMouseController sets up mouse events such that when the track is clicked, the controller catches that event, derives the value using the model and the x position of the click. The controller then updates the model with a new value. Because the model dispatches an event when the value changes, the view, listening for this event, changes the position of the thumb.

When you write your own controllers you can follow the same pattern: translate events to model values and update the model. The view bead(s) should be listening for those changes.

If you open SliderMouseController.as, you see that its strand setter function gets the track and thumb beads from its strand, via getBeadByType() and adds event listeners to them. Notice that there are differences between the ActionScript and JavaScript platforms, so these are coded accordingly.

COMPILE::AS3 {
    var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView;
    sliderView.thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDownHandler);
    sliderView.track.addEventListener(MouseEvent.CLICK, trackClickHandler, false, 99999); 
}
COMPILE::JS {
    track = value.getBeadByType(
        org.apache.flex.html.staticControls.beads.SliderTrackView);
    thumb = value.getBeadByType(
        org.apache.flex.html.staticControls.beads.SliderThumbView);

    goog.events.listen(track.element, goog.events.EventType.CLICK,
                     handleTrackClick, false, this);

    goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN,
                     handleThumbDown, false, this);

}

The purpose of the controller is to coordinate the input from the mouse with values from the model which are then reflected in the views. Here are the click handlers for the track:

COMPILE::AS3
private function trackClickHandler( event:MouseEvent ) : void
{
	event.stopImmediatePropagation();

   var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView;

	var xloc:Number = event.localX;
	var p:Number = xloc/UIBase(_strand).width;
	var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum;


	rangeModel.value = n;

	IEventDispatcher(_strand).dispatchEvent(new Event("valueChange"));
}
 
COMPILE::JS
private function handleTrackClick(event:BrowserEvent):void
{
    var host:Slider = _strand as Slider;
    var xloc = event.clientX;
    

var xloc = event.clientX;
var p = Math.min(1, xloc / parseInt(this.track.element.style.width, 10));
    var n = p * (thishost.strand_.get_maximum() - thishost.strand_.get_minimum()) +
          thishost.strand_.get_minimum();
 
this.strand_.set_value(n)    host.value = n;
 
this.    origin = parseInt(this.thumb.element.style.left, 10);
this.    position = parseInt(this.thumb.element.style.left, 10);
 
this.    calcValFromMousePosition(event, true);
 
this.strand_.    host.dispatchEvent(new org.apache.flex.events.Event('valueChanged'));
}

Using JavaScript Component

...

Libraries with FlexJS

Many web applications now use JavaScript component sets, such as jQuery, and it is possible to use those frameworks with FlexJS; it is just a matter of changing how the components are built. The FlexJS package comes with a handful of jQuery-compatible and CreateJS-compatible components to get you started.

jQuery for FlexJS

The biggest trick is to pull in the component set definition files. At this time, FlexJS does not have an easy way to do this. It is a manual process at this point:

1. Compile your Flex application using Falcon JX.
2. Open the index.html file that was generated.

3. Insert the following lines into the <head> portion of the file.

   Code Block
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

   In the FlexJS directories you will find a small set of components in the org/apache/flex/html/jquery folder. If you compare these to the standard components in the html package, you will see there are few differences, the most obvious being the inclusion of jQuery function calls to modify the components.

Open the TextButton.as file and look for the createElement() and addedToParent functions in the COMPILE::JS block:

/**
 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
 */
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
	element = document.createElement('button') as WrappedHTMLElement;
	element.setAttribute('type', 'button');
	
	positioner = element;
	positioner.style.position = 'relative';
	element.flexjs_wrapper = this;
	return element;
}
 
COMPILE::JS
override public function addedToParent():void
{
	super.addedToParent();
	$(element).button();
}

The only difference between the jQuery version of the TextButton and the basic Text button is the jQuery button-making function, $(element).button(). Your jQuery components may differ greatly from their non-jQuery

Once you've created or converted the components to use jQuery, the JavaScript side of FlexJS can use jQuery functions to manipulate the components and their beads. For example, might want to create a bead that manipulates the styles and provides effects such as fades. Rather than modifying every component to have the ability to fade in and out, you can just add the "FadeBead" to a component strand.

CreateJS for FlexJS

CreateJS is an altogether different way of making components from jQuery. CreateJS is more like ActionScript in that you build things rather manipulate them. As with jQuery, the big trick is to bring in the CreateJS package:

1. Compile your Flex application with the Falcon JX compiler.
2. Open the JavaScript file that was generated from your main Flex application (e.g., if your Flex application's main file is Main.mxml, open Main.js).

3. Insert the following lines before the goog.provide() statements:

   Code Block
   var mainjs = document.createElement('script'); mainjs.src = './createjs/easeljs-0.6.0.min.js'; document.head.appendChild(mainjs);

4. Be sure to put a copy of the CreateJS component files in a sub-directory called, createjs, next to the other source directories.

If you open the TextButton.js file in the CreateJS package, you will find two definitions for the TextButton class. One in a COMPILE::AS3 block and another in a COMPILE::JS block. This was done because the two versions have enough differences that it would be awkward to mingle the compiler directive blocks; it was cleaner to define the classes separately.

In this example, CreateJS functions construct a button-like object rather than use HTML elements. While the basic, jQuery, and CreateJS TextButtons diff in implementation, they are expressed exactly the same in MXML.

Using FlexJS jQuery and CreateJS Components in MXML

Once you've created your jQuery or CreateJS (or other component library) beads and components, you can add them to your Flex application MXML using namespaces. This is the root tag for a version of MyInitialView.mxml:

<basic:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:basic="library://ns.apache.org/flexjs/basic"
		xmlns:jquery="library://ns.apache.org/flexjs/jquery"
                xmlns:createjs="library://ns.apache.org/flexjs/createjs"
	>

Once you have declared the namespaces, you use the namespaces to identify the components:

<!-- the basic tex button component -->
<basic:TextButton label="Basic" />

<!-- the jQuery text button component -->
<jquery:TextButton label="jQuery" />

<!-- the CreateJS text button component -->
<createjs:TextButton label="CreateJS" />

Cross-Compiling

The ability to generate JavaScript code and components from ActionScript sources is built into the FlexJS development patterns. You guide the compilation process through the use of COMPILE::AS3 (exclude from cross-compilation, SWF only) and COMPILE::JS (exclude from SWF, cross-compile to JavaScript) directives; any code not in these blocks is cross-compiled to JavaScript and winds up in the SWF. 

Building the JavaScript component follows the pattern of the ActionScript component: base or strand piece then beads to provide the view, model, and control. Not all FlexJS JavaScript components will have these parts - it really depends on the component and how much the underlying HTML elements do (and how they work); you might not achieve a complete 1:1 (ActionScript:JavaScript) balance.

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.

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

Using JavaScript Component Libraries with FlexJS

Many web applications now use JavaScript component sets, such as jQuery, and it is possible to use those frameworks with FlexJS; it is just a matter of changing how the components are built. The FlexJS package comes with a handful of jQuery-compatible and CreateJS-compatible components to get you started.

jQuery for FlexJS

The biggest trick is to pull in the component set definition files. At this time, FlexJS does not have an easy way to do this. It is a manual process at this point:

1. Compile your Flex application using Falcon JX.
2. Open the index.html file that was generated.

3. Insert the following lines into the <head> portion of the file.

   Code Block
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

   In the FlexJS directories you will find a small set of components in the org/apache/flex/html/jquery folder. If you compare these to the standard components in the basic package, you will see there are few differences, the most obvious being the inclusion of jQuery function calls to modify the components.

Open the TextButton.js file and look for the createElement() function:

org.apache.flex.jquery.staticControls.TextButton.prototype.createElement =
    function() {
  this.element = document.createElement('button');
  this.element.setAttribute('type', 'button');
  $(this.element).button();

  this.positioner = this.element;
  this.element.flexjs_wrapper = this;
};

The only difference between the jQuery version of the TextButton and the basic Text button is the jQuery button-making function, $(this.element).button(). Your jQuery components may differ greatly from their non-jQuery

Once you've created or converted the components to use jQuery, the JavaScript side of FlexJS can use jQuery functions to manipulate the components and their beads. For example, might want to create a bead that manipulates the styles and provides effects such as fades. Rather than modifying every component to have the ability to fade in and out, you can just add the "FadeBead" to a component strand.

CreateJS for FlexJS

CreateJS is an altogether different way of making components from jQuery. CreateJS is more like ActionScript in that you build things rather manipulate them. As with jQuery, the big trick is to bring in the CreateJS package:

1. Compile your Flex application with the Falcon JX compiler.
2. Open the JavaScript file that was generated from your main Flex application (e.g., if your Flex application's main file is Main.mxml, open Main.js).

3. Insert the following lines before the goog.provide() statements:

   Code Block
   var mainjs = document.createElement('script'); mainjs.src = './createjs/easeljs-0.6.0.min.js'; document.head.appendChild(mainjs);

4. Be sure to put a copy of the CreateJS component files in a sub-directory called, createjs, next to the other source directories.

If you open the TextButton.js file in the CreateJS package, you will find that the createElement() function is rather different from either the basic TextButton or jQuery version of the TextButton:

org.apache.flex.createjs.staticControls.TextButton.prototype.createElement =
function(p) {

    this.buttonBackground = new createjs.Shape();
    this.buttonBackground.name = 'background';
    this.buttonBackground.graphics.beginFill('red').
      drawRoundRect(0, 0, 200, 60, 10);

    this.buttonLabel = new createjs.Text('button', 'bold 24px Arial',
      '#FFFFFF');
    this.buttonLabel.name = 'label';
    this.buttonLabel.textAlign = 'center';
    this.buttonLabel.textBaseline = 'middle';
    this.buttonLabel.x = 200 / 2;
    this.buttonLabel.y = 60 / 2;

    this.element = new createjs.Container();
    this.element.name = 'button';
    this.element.x = 50;
    this.element.y = 25;
    this.element.addChild(this.buttonBackground, this.buttonLabel);
    p.addChild(this.element);

    this.positioner = this.element;
    this.element.flexjs_wrapper = this;
};

In this example, CreateJS functions construct a button-like object rather than use HTML elements. While the basic, jQuery, and CreateJS TextButtons diff in implementation, they are expressed exactly the same in MXML.

Using FlexJS jQuery and CreateJS Components in MXML

Once you've created your jQuery or CreateJS (or other component library) beads and components, you can add them to your Flex application MXML using namespaces. This is the root tag for a version of MyInitialView.mxml:

<basic:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:basic="library://ns.apache.org/flexjs/basic"
		xmlns:jquery="library://ns.apache.org/flexjs/jquery"
                xmlns:createjs="library://ns.apache.org/flexjs/createjs"
	>

Once you have declared the namespaces, you use the namespaces to identify the components:

<!-- the basic tex button component -->
<basic:TextButton label="Basic" />

<!-- the jQuery text button component -->
<jquery:TextButton label="jQuery" />

<!-- the CreateJS text button component -->
<createjs:TextButton label="CreateJS" />

Cross-Compiling

Another intriguing option for building the JavaScript side of a component is to use cross-compilation. That is, build your component in ActionScript and let the FalconJX compiler create the JavaScript version. There is catch, however.

1. Your component must be composition of existing components.
2. Your component must not use any Flash libraries (unless you have a JavaScript equivalent).
3. Your component should not need any custom work on the JavaScript side.

The last issue can be waived if all you want to do is use cross compilation once (or until you are happy enough with the JavaScript result) just to get a head start.

Take the DataGrid component as an example. This component is built from Container, ButtonBar, and List. There isn't anything Flash-specific about it nor does it need customization on the JavaScript side. All of the DataGrid beads (models, views, itemRenderer) are purely ActionScript.

Another good example is the BarChart. This component was developed in a project in its own package (org.apache.flex.charts). Everything but the bars in the chart translated to JavaScript easily. When it came time to draw the bars, a component was created in ActionScript, FilledRectangle, that used the Flash Shape class. This does not have a JavaScript counterpart, so a FilledRectangle.js class was hand-crafted in the JavaScript portion of the SDK (using the same package name, of course). This allowed the BarChart component classes to be cross-compiled to JavaScript. When run in a browser, the FilledRectangle.js used a <div> element for each bar vs. the FilledRectangle.as class that used a Shape.

There is nothing special about the process: create a Flex project the usual way and develop your component in ActionScript. Any framework elements you use will already have JavaScript equivalents. If you know you will need to refine the JavaScript result, then develop as much as possible in ActionScript and then do the cross-compile; the result will be well worth it as it will save you a lot of time making the JavaScript version.