starting with flex - please let me know if the direction is right (ActionScript vs MXML separation)
- by Piotr
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">
<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.
