Versions Compared

Old Version 9

changes.mady.by.user Olaf Krüger

Saved on

compared with

New Version Current

changes.mady.by.user Olaf Krüger

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Your application will probably also have its own data model and even controller (not shown here) 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.

Code Block
<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>

...

Code Block
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;
        }        
    }
}

...

Code Block
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
        {
            var dummy:String;
            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:

 

 

Image Added

 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.

...