You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

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 (not shown here) which you can also include.

MyInitialView

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

    <fx:Script>
       <!-- functions and data here (TBD) -->
    </fx:Script>

    <js:Panel title="Example" x="300" y="50" className="panel1">
        <js:beads>
            <js:NonVirtualVerticalLayout />
        </js:beads>
        <js:Label text="Displays a SimpleAlert that has an OK button." />
        <js:TextButton text="Show Simple Alert" click="showSimpleAlert()" />
        <js:Label text="Displays an Alert which can have multiple buttons." />
        <js:TextButton text="Push Me" click="onButtonClick()" />
        <js:Label id="spinMe" text="Spinner Value Here" />
        <js:NumericStepper id="stepper" 
            valueChanged="spinnerChanged(stepper)" 
            className="numStepper"
            snapInterval="10"
            stepSize="10"/>
        <js:Label id="slideMe" text="Value goes here" />
        <js:Label text="Filler Piece" />
        <js:controlBar>
            <js:Label text="ControlBar area" />
        </js:controlBar>
    </js:Panel>

</js:View>

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.

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