Guasax Flex Framework

After the first Guasax HelloWorld example, we are going into a little more complex example in which we will show other ways to call the framework to execute an action, passing a view object to update it when the BO execution has finished.

Also, we will see how to work with a ModelLocator class, and how to pass objects of type Value Object to a Guasax action.

At the end of this article you will be able to find all the required links to download the source code, see it online (with ViewSource option enabled) and get the current guasax documentation.

In the same way as last example, we have recorded a 5 minutes lenght videotutorial (in Spanish) explaining the example.

Changes in guasax

We have carried out some changes in guasax to be able to declare multiple xml configuration files and we have changed the framework initialization code in a more easy way.This changes are already available in the SVN code repository.Also we will compile it into a new guasax library, v0.9.2a, to download it apart from source code

Guasax configuration file

In the configuration file for this application we declare the actions we want to invoke. This is the configuration file structure:

1
2
3
4
5
6
7

    <guasax version="0.9.2a" description="Framework MVC para Flex 2">
        <component id="calculator" 
                   className="es.guasax.samples.calculator.bo.CalculatorBO" 
                   enabled="true">
            <action id="calculate"      method="calculate" />
        </component>
    </guasax>

We have a single component calculator, with a single action, calculate

Application initialization. Loading the configuration

When the creationComplete event happens the application configuration is loaded through the init method. In this method we call the parseConfFile("./conf/guasax-conf.xml",onLoadComplete); method passing the configuration file path and a callBack function which will be invoked after the load of the configuration file. From this function we will be able to do the first calls for actions execution

1
2
3
4
5

    private var classForCompile:Array = [CalculatorBO,CalculatorWindow];
 
    public function init():void{
	GuasaxContainer.getInstance().parseConfFile("./conf/guasax-conf.xml",onLoadComplete);
    }

In this case in our onLoadComplete function we don’t have to execute any action

Executing an operation in the calculator

We have prepared different situations where we can invoke it. First of all, we will invoke it in the main interface.

1
2
3
4
5
6
7
8
9
10
11

  /**
   * Launch 'operar' operation with a OperacionVO object as param
   */
 
    public function operar():void{
        var operationVO:OperationVO = new OperationVO();
        operationVO.operando1 = Number(op1Txt.text);
        operationVO.operando2 = Number(op2Txt.text);
        operationVO.operador = "+";
        var response:ResponseActionVO  = guasaxContainer.executeAction(Constants.CALCULATE_ACTION,[operationVO]);
    }

With this call we execute the calculate action, receiving the VO filled with the operation data in the BO. When the operation is done the result is kept in the ModelLocator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    public class CalculatorBO {
	public var model:ModelLocator = ModelLocator.getInstance();
	public function calculate(operationVO:OperationVO):OperationVO {
	       try{
		    var result: Number;
		    if(operationVO.operador == "+"){
			    result = operationVO.operando1 + operationVO.operando2;
		    }else if(operationVO.operador == "-"){				
			    result = operationVO.operando1 - operationVO.operando2;
		    }else if(operationVO.operador == "*"){
			    result = operationVO.operando1 * operationVO.operando2;
	  	    }else if(operationVO.operador == "/"){
			    result = operationVO.operando1 / operationVO.operando2;
		    } 
		    operationVO.result = result;
		    // update the model
		    model.operationVO = operationVO;
	    }catch(error:CalculatorError){
		    Alert.show("An error has ocurred:"+error.message);
	    }
	    return operationVO;
       }
    }

As in the main GUI we have the model variable binded with a control in which we show the result, it appears immediately in the main interface.

Reusing the BO between several calculador views

Other way to invoke an action in this example is to call the operation from a calculator window, and in turn the result of an action is showed in this window. To that end we are going to create a calculator window and from its button calculateHere we wil make the next call:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    /**
     * We calculate the operation and the result is showed in this view 
     * through the update method
     */											 
    public function calculateHere():void{
        var operationVO :OperationVO = new OperationVO();
	operationVO.operador = operadorCmb.selectedLabel;
	operationVO.operando1 = Number(operando1Txt.text);
	operationVO.operando2 = Number(operando2Txt.text);
	// -----------------------------
	var response:ResponseActionVO  = 
            guasaxContainer.executeActionWithView(										                                                                  
                    Constants.CALCULATE_ACTION,
                    [operationVO],
		    [this],
		    Constants.UPDATE_VIEW,
		    [null]);// We pass the view and the method of the view 
                             // what we want to invoke (in this case with no params)
 
    }

In the action call we pass the action to be executed and also the params, a view array (in this case this, in other words the current) the method of that view to be called and the params for that method in the view if needed.

With this call we achieve that once the BO method is executed a method of that view/s is called. These methods are where we can continue with the results visualization, transitions, effects, etc.

In the method showed below, we receive our application model data to be displayed, update the GUI and do an effect.

1
2
3
4
5

       public function updateView():void {
             resultadoTxt.text = model.operationVO.result.toString();
	     glowcombo.target = resultadoTxt;
	     glowcombo.play();
       }

As we can see in this example, the same BO method can be executed from different environments. Depending on how we call to an action through the container we will get one behaviour or another.

Working together with the BO concept, the ModelLocator as our data model keeper and the ViewLocator, we can decouple the business tier from the presentation tier.

Videotutorial

As in the last example, we have created a 5 minutes lenght videotutorial (in Spanish) where you can see the example in action or download it to your computer

Links, resources and code

• Link to the live Guasax Calculator example with viewSource option enabled

• Download the project source code here, it´s ready to be imported in Flex Builder
  
• Link to googlecode, SVN, wiki, etc...
• Link to guasax blog

We hope you have enjoyed reading this article, in next examples we will see what functions are provided by guasax to use Flex Data Services, and there is still a long way to explore guasax, interceptors, roles, reusable components.... the best is still coming

Greetings