10 Steps Tutorial

1. Download flest-(version).swc file from here.

2. Create google-flest-sample Flex Project in Adobe Flex Builder 3.

3. Open project Properties->Flex Build Path->Library Path->Add SWC... and add flest-(version).swc file.

4. Modify the header of your main.mxml file, add methods to handle input values and errors and create an input fields with a submit button:

<?xml version="1.0" encoding="utf-8"?>
<app:FlestApplication
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:app="org.flest.application.*" 
    layout="vertical"
    error="{goToErrorPage()}"
    errorStateName="genericErrorState"
    initialize="{init()}"
    currentStateChange="{reset()}">
    
    <mx:Script>		
        <![CDATA[
            import org.flest.model.ModelLocator;
            import sample.data.User;
            import org.flest.factory.CmdFactory;
            import sample.command.SubmitCmd;
            import org.flest.controller.FlestController;			
            import mx.core.UIComponent;
									
            private function goToErrorPage():void			
            {
            	/**
            	 * <genericErrorState> is a Flex3 application State
            	 * where FlestController will redirect the User in
            	 * case if any error caught during a Command
            	 * execution.
            	 */
                //this.currentState = "genericErrorState";
            }
            
            private function submitName(event:Event):void
            {
            	/**
            	 * CmdFactory is a Singleton, it makes sure that there is 
            	 * only one Command instance created for each command type.
            	 */
            	var cmd:SubmitCmd = CmdFactory.getCmd(SubmitCmd) as SubmitCmd;
            	
            	/**
            	 * FlestController is a Singleton, it runs the Command as a 
            	 * closure in its own context. Command parameters are sent 
            	 * in an array in a sequence that corresponds to the sequence 
            	 * of parameters in Command function.
            	 */
            	FlestController.getInstance().exec(cmd.submitCmd, [this.inputName.text, this.inputSurname.text]);
            }
            
            private function reset():void
            {
            	this.inputName.text = "";
            	this.inputSurname.text = "";
            }
        ]]>
    </mx:Script>
    
    <mx:Label text="Enter you name" id="label1"/>
    <mx:TextInput id="inputName"/>
    <mx:TextInput id="inputSurname"/>
    <mx:Button label="Submit" id="submit" click="submitName(event)"/>
	
</app:FlestApplication>

5. Add to the project a new folder, name it 'sample/data' and create in there your data class User.as:

package sample.data
{
    public class User
    {
        public var name:String;
        public var surname:String;
    }
}

6. Add to the project a new folder, name it 'sample/command' and create in there your command class SubmitCmd.as:

package sample.command
{
    import org.flest.command.ICommand;
    import org.flest.model.ModelLocator;
    import sample.data.User;

    /**
     * A Flest command implements org.flest.command.ICommand
     * interface. This would allow to create the command instance
     * using org.flest.factory.CmdFactory that keeps a reference to
     * a single command instance for every command type.
     */
    public class SubmitCmd implements ICommand
    {
        /**
         * Flest command can have any number of parameters and 
         * return back any desirable object reference. The command
         * is a closure, it will run in FlestController context. 
         * FlestController has a reference to the application itself 
         * named 'app', therefore it is safe and legal to call the 
         * application from the command like this: 
         * 
         *         this.getApp().currentState = "newState";
         * 
         * A Command may contain as many methods/functions as required.
         */		
            
        public var submitCmd:Function = function(newName:String, newSurname:String):void
        {
            var user:User = new User();
            user.name = newName;
            user.surname = newSurname;
            
            /**
             * ModelLocator is a Singleton, it provides an access to 
             * an enhanced associative array that keeps key-value 
             * references to all application data objects. This is 
             * a single repository of all data objects.
             */
            ModelLocator.getInstance().addValue("user", user);

            /**
             * Switch to new view State
             */
            this.getApp().currentState = "helloState";
        }
		
        public var backCmd:Function = function():void
        {
            /**
             * Clean up the data repository.
             */
            ModelLocator.getInstance().removeValue("user");

            /**
             * Switch back to original view State.
             */
            this.getApp().currentState = "";
        }
    }
}

7. Add to the project a new folder, name it 'sample/component' and put in there your new MXML component helloComp.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="center"
    verticalAlign="top"
    added="{this.updateUserName()}">

    <mx:Script>
        <![CDATA[
            import org.flest.controller.FlestController;
            import org.flest.factory.CmdFactory;
            import sample.command.SubmitCmd;
            import sample.data.User;
            import org.flest.model.ModelLocator;

            [Bindable]
            private var userName:String;

            private function updateUserName():void
            {
                /**
                 * Retrieve the User instance for the data repository and
                 * use its field values for rendering contents in this
                 * view State.
                 */
                var user:User = ModelLocator.getInstance().getValue("user") as User;
                this.userName = "Hello " + user.name + " " + user.surname;
            }

            private function goBack():void
            {
                /**
                 * Invoke a command to redirect the user back to home page.
                 * NOTE: although the command type is the same, it uses a
                 * different function/method.
                 */
                var cmd:SubmitCmd = CmdFactory.getCmd(SubmitCmd) as SubmitCmd;
                FlestController.getInstance().exec(cmd.backCmd);
            }
        ]]>
    </mx:Script>

    <mx:Label id="helloLabel" text="{userName}"/>
    <mx:Button label="Back" id="backButton" click="{this.goBack()}"/>
	
</mx:VBox>

8. Create helloState into your main.mxml file:

<?xml version="1.0" encoding="utf-8"?>
<app:FlestApplication
    ...
    xmlns:comp="sample.component.*"
    ...>

    <app:states>
        <mx:State name="helloState">
            <mx:RemoveChild target="{label1}"/>
            <mx:RemoveChild target="{inputName}"/>
            <mx:RemoveChild target="{inputSurname}"/>
            <mx:RemoveChild target="{submit}"/>
            <mx:AddChild position="lastChild">
                <comp:helloComp>
                </comp:helloComp>
            </mx:AddChild>
        </mx:State>
    </app:states>

...

</app:FlestApplication>

9. Save all files and run the application.

10. Read more about Flest best practices here.

If there are any problems, download a ready to use Flex Builder 3 tutorial project here.