Flex - How to do calculation in Flash Builder - actionscript-3

Question

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="BMI Calculator">
<fx:Script>
<![CDATA[
protected function calculate_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:actionContent>
<s:Button label="Back" click="navigator.pushView(MainHomeView)" styleName="back"/>
</s:actionContent>
<s:Label x="33" y="61" fontSize="30" text="Weight(kg) :"/>
<s:Label x="34" y="140" fontSize="30" text="Height(cm) :"/>
<s:TextInput id="mywieght" x="216" y="40" width="228" prompt="0.0kg" textAlign="right"/>
<s:TextInput id="myheight" x="216" y="119" width="228" prompt="0.0cm" textAlign="right"/>
<s:Button id="calculation" x="31" y="260" width="413" label="Calculate" fontSize="36"
fontStyle="italic"/>
<s:Label id="myresult" left="31" right="36" height="146" fontSize="72" fontStyle="normal"
fontWeight="bold" text="0.0" textAlign="center" verticalAlign="middle"
verticalCenter="99"/>
</s:View>
this is the gui for a BMI calculator. i dont really have the basic of using flash builder. can anyone teach me how to use the data input by user inside the textinput and then use it for calculation and display it? thanks

Answer 1

First you assign a click handler to your button so your calculate_clickHandler method will be called on button click:
<s:Button id="calculation" x="31" y="260" width="413" label="Calculate" fontSize="36" fontStyle="italic" click="calculate_clickHandler(event)"/>
Then you do your calculations and pass your result to the myresult Label:
protected function calculate_clickHandler(event:MouseEvent):void
{
var height:Number = Number(myheight.text);
var weight:Number = Number(mywieght.text); // you have a typo here, wiegth instead of weight ;)
myresult.text = height * weight;
}
And you probably want a popView() on back button click. This will remove the current view and go back to your last view. push() will add another view:
<s:Button label="Back" click="navigator.popView()" styleName="back"/>

Answer 2

Try this:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
protected function calculate_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
const myWeightInKG:Number = Number(myWeight.text);
const myHeightInMeter:Number = Number(myHeight.text) * 0.01;
const BMI:Number = myWeightInKG / (myHeightInMeter * myHeightInMeter);
const BMI_withOneDecimalPlace:Number = int(BMI * 10)/10;
myResult.text = BMI_withOneDecimalPlace.toString();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label x="33" y="61" fontSize="30" text="Weight(kg) :"/>
<s:Label x="34" y="140" fontSize="30" text="Height(cm) :"/>
<s:TextInput id="myWeight" x="216" y="40" width="228" prompt="Weight in Kg(e.g. 56)" textAlign="right"/>
<s:TextInput id="myHeight" x="216" y="119" width="228" prompt="Weight in cm(e.g. 157)" textAlign="right"/>
<s:Button id="calculation" x="31" y="260" width="413" label="Calculate" fontSize="36"
fontStyle="italic" click="calculate_clickHandler(event)"/>
<s:Label id="myResult" left="31" right="36" height="146" fontSize="72" fontStyle="normal"
fontWeight="bold" text="0.0" textAlign="center" verticalAlign="middle"
verticalCenter="99"/>
</s:Application>