FlexJS Applications

This page is under construction

This page describes how to build a FlexJS Application.

Unlike Flex, the Application class in FlexJS is not a user-interface component. To build an application, you use the Application class (rather, your sub-class of it) to set up basic items and to load your first "view".

Your user interface is placed into views and they can, in theory, be switched. It is "theory" at the moment because it has not been tried, but that is the goal.

Application

Here is a typical Application:

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:local="*"
                xmlns:js="library://ns.apache.org/flexjs/basic" 
                xmlns:models="models.*" 
                xmlns:controllers="controllers.*">
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:initialView>
        <local:MyInitialView />
    </js:initialView>
    <js:model>
        <models:MyModel />
    </js:model>
    <js:controller>
        <controllers:MyController />
    </js:controller>
</js:Application>

A FlexJS application should have the follow parts:

  • initialView: This is the first UI component that will be loaded and presented.
  • valuesImpl: This property provides the mapping between objects and keys. FlexJS comes with a values mapper that uses CSS to associate classes with properties.

Your application will probably also have its own data model and even controller which you can also include.

MyInitialView

The view classes extend ViewBase and provides the space to display the user interface. In the example above, a Panel component is the only child of the view and the Panel contains an assortment of other components.

<js:View xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:js="library://ns.apache.org/flexjs/basic"
         xmlns:flat="library://ns.apache.org/flexjs/flat">
    <fx:Script>
        <![CDATA[
            import models.MyModel;
            
            import org.apache.flex.events.CustomEvent;
            
            public static const BUTTON_CLICKED:String = "buttonClicked";
        ]]>
    </fx:Script>

    <js:beads>
        <js:ViewDataBinding />
    </js:beads>
    <flat:Panel title="Hello from FlexJS" width="350" height="200">
        <js:beads>
            <js:VerticalLayout/>
        </js:beads>
        <js:Container>
            <js:beads>
                <js:HorizontalLayout />
            </js:beads>
            <js:Label width="100" text="Text area" />
            <js:TextArea id="ta" width="200" height="100" text="Some text" />
        </js:Container>    
        <js:Container>
            <js:beads>
                <js:HorizontalLayout />
            </js:beads>
            <js:Label width="100" text="Drop down list" />
            <js:DropDownList id="list" width="100" dataProvider="{MyModel(applicationModel).items}" />
        </js:Container>
        <js:Container>
            <js:beads>
                <js:HorizontalLayout />
            </js:beads>
            <js:Label width="100" text="Button" />
            <js:TextButton id="myButton" width="200" text="{'Clicked ' + MyModel(applicationModel).counter + ' times'}"
                           click="dispatchEvent(new CustomEvent(BUTTON_CLICKED))" />
        </js:Container>        
    </flat:Panel>
</js:View>

MyModel

package models
{
    public class MyModel
    {
        public function MyModel()
        {
        }

	 	private var _items:Array = ["One", "Two", "Three", "Four", "Five"];
        [Bindable]
        public function get items():Array
        {
            return _items;
        }
        
        private var _counter:int = 0;
        public function count():void {
            _counter++;
        }
        [Bindable]
        public function get counter():int {
            return _counter;
        }        
    }
}

 

MyController

package controllers
{
    import models.MyModel;
    
    import org.apache.flex.core.Application;
    import org.apache.flex.core.IDocument;
    import org.apache.flex.events.Event;
    import org.apache.flex.html.TextButton;
    
    public class MyController implements IDocument
    {
        private var app:Application;
        private var model:MyModel;
        private var initialView:Object;
        
        public function MyController(app:Application = null)
        {
        }

		private function viewChangeHandler(event:Event):void
        {
            var app:Application = event.target as Application;
            app.initialView.addEventListener(MyInitialView.BUTTON_CLICKED, buttonClickHandler);
            initialView = app.initialView;
            model = app.model as MyModel;
        }
        
        private function buttonClickHandler(event:Event):void
        {
            model.count();
            TextButton(initialView.myButton).text = "Clicked " + model.counter + " times"; 
        }
        public function setDocument(document:Object, id:String = null):void
        {
            var app:Application = document as Application;
            app.addEventListener("viewChanged", viewChangeHandler);
        }
    }
}


Screenshot:

 

Once you have composed your application and initial view, you can build either a Flash SWF or generate JavaScript and an HTML index page.

  • In Flash Builder, the normal project build will generate the Flash SWF.
  • In Flash Builder, choose from the menus, Run->External Tools->FlexJS (FalconJX Debug and Release Build) to generate the JavaScript and HTML page.

Open the appropriate executable to run your FlexJS application.

  • No labels