starting with flex - please let me know if the direction is right (ActionScript vs MXML separation)

Question

Hi,

I've just started learning flex using OReilly "Programming Flex 3.0". After completing three chapters and starting fourth (ActionScript), and not having enough patience to wait till completing chapter 22 I started to practice :)

One bit that I have most worries about right now is the the dual coding mode (MXML vs ActionScript)

Please have a look at my code below (it compiles via mxmlc design.mxml, second file 'code.as' should be in same directory) and advise if the separation I used between visual design and code is appropriate.

Also - if some smart guy could show me how to recode same example with *.as being a class file [package?] it would be highly appreciated. I got lost with creating directory structure for package - and did not find it most intuitive, especially for small project that has two files like my example.

---

Code: design.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
 <mx:Script source="code.as"/>
 <mx:VBox>
  <mx:TextInput creationComplete="initializeCalculator()" id="txtScreen"/>
  <mx:HBox>
   <mx:Button click="click('7')" id="btn7" label="7"/>
   <mx:Button click="click('8')" id="btn8" label="8"/>
   <mx:Button click="click('9')" id="btn9" label="9"/>
   <mx:Button click="click('C')" id="btnClear" label="C"/>
  </mx:HBox>
  <mx:HBox>
   <mx:Button click="click('4')" id="btn4" label="4"/>
   <mx:Button click="click('5')" id="btn5" label="5"/>
   <mx:Button click="click('6')" id="btn6" label="6"/>
   <mx:Button click="click('/')" id="btnDivide" label="/"/>
  </mx:HBox>
  <mx:HBox>
   <mx:Button click="click('1')" id="btn1" label="1"/>
   <mx:Button click="click('2')" id="btn2" label="2"/>
   <mx:Button click="click('3')" id="btn3" label="3"/>
   <mx:Button click="click('*')" id="btnMultiply" label="*"/>
  </mx:HBox>
  <mx:HBox>
   <mx:Button click="click('0')" id="btn0" label="0"/>
   <mx:Button click="click('=')" id="btnEqual" label="="/>
   <mx:Button click="click('-')" id="btnMinus" label="-"/>
   <mx:Button click="click('+')" id="btnPlus" label="+"/>
  </mx:HBox>
 </mx:VBox>
</mx:Application>

---

code: code.as

public var res:int = 0;
public var previousOperator:String = "";
public var previousRes:int=0;

public function initializeCalculator():void{
 txtScreen.text = res.toString();
}
public function click(code:String):void{ 
 if (code=="1" || code=="2" || code=="3" || code=="4" || code=="5" ||
   code=="6" || code=="7" || code=="8" || code=="9" || code=="0"){
  res = res*10 + int(code);
  txtScreen.text = res.toString();
 }
 else if (code=="C"){
  res = 0;
  previousOperator ="";
  previousRes = 0;
  txtScreen.text = res.toString();
 }
 else{
  calculate(code);
 }
}
public function calculate(operator:String):void{
 var tmpRes:int;
 if (previousOperator=="+"){
  tmpRes = previousRes + res;
 }
 else if (previousOperator=="-"){
  tmpRes = previousRes - res;
 }
 else if (previousOperator=="/"){
  tmpRes = previousRes / res;
 }
 else if (previousOperator=="*"){
  tmpRes = previousRes * res;
 }
else{
 tmpRes = res;
}
 previousOperator = operator;
 previousRes = tmpRes;
 txtScreen.text = previousRes.toString();
res = 0;
 if (previousOperator=="=")
 {
  res = tmpRes;
  txtScreen.text=res.toString();
 }
}

PS. If you have comments that this calculator does not calculate properly, they are also appreciated, yet most important are comments on best practices in Flex.

Answer 1

This example on using code-behind in a Flex application should be helpful in cleaning up the link between your user interface and the application logic.

Answer 2

I normally write the code in a CDATA block inside the <mx:script/> tag itself.

<mx:Script source="code.as">
  <![CDATA[
    //code here
  ]]>
</mx:Script>

This is the way it is done in most of the tutorials and Adobe code samples out there. An mxml file represents an ActionScript class (the file design.mxml creates a class named design in the root package) and hence I believe it makes sense to put the whole code in one place (file) - this is a matter of choice though.

If user interface parts in a component are minimal, you can create that component using just an AS file. Checkout the code for a panel with a text input and a button in it:

//MyPanel.as inside /your/folder/structure
package your.folder.structure
{
  //import appropriate classes here
  public class MyPanel extends Panel
  {
    [Bindable]
    public var txt:TextInput;
    [Bindable]
    public var btn:Button;
    public function MyPanel(){}
    override protected function createChildren():void
    {
       txt = new TextInput();
       txt.text = "Default text";
       txt.setStyle("color", 0xffff00);
       addChild(txt);
       btn = new Button();
       btn.label = "Click me!"
       btn.addEventListener(MouseEvent.CLICK, handleClick);
       addChild(btn);
    }
    private function handleClick(e:MouseEvent):void
    {
      trace("clicked");
    }
  }
}

And the (almost) equivalent mxml code would be:

<!-- MyPanel.mxml inside /your/folder/structure -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns="your.folder.structure.*">
  <mx:TextInput id="txt" text="Default text" color="#ffff00"/>
  <mx:Button id="btn" label="Click me!" click="handleClick(event);"/>
  <mx:Script source="code.as">
    <![CDATA[
        private function handleClick(e:MouseEvent):void
        {
          trace("clicked");
        }
    ]]>
  </mx:Script>
</mx:Panel>