Macromedia Flex: calculator source code and creation steps

This calculator is composed of two parts: an MXML file on the front-end interface and an AS file of the background controller. The mxml file displays the calculator interface, and the as file processes the information sent by the user and calculates the result. In this tutorial, we will mainly learn:
[List] The Application class
The Panel container
The Label element
The Grid container
The Button element [/list]
Main learning content of ActionScript:
[List] A class definition
Properties
Methods
The if-else and switch-case control structures [/list]

================================ Create a boundary ====
Create a blank mxml file and save it as calculator. mxml. A standard flex file must be added to the MX class library.
Xmlns: mx = "http://www.macromedia.com/2003/mxml
Therefore, write the following code in calculator. mxml:

<?xml version="1.0"><mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"></mx:Application>

================================ Create a main panel ======================== =====
All buttons in the calculator are concentrated in the Panel element. Therefore, we must first create a Panel,
And set its tittle attribute:Calculator
In the Application area, add:

<mx:Panel title="Calculator"></mx:Panel>

=============================== Create a dashboard ==========
The display is actually a Label element that can display a line of text. The Label element has many attributes. Here, we use the centralized attributes:
[List] id: Label id, similar to the Instance Name in Flash
Width: the width of the Label. Unit: pixel.
Text: Label content
TextAlign: Alignment mode: left | right | center [/list]
Add the following code in the Panel area:

<mx:Label id="calcDisplay" width="150" textAlign="right"/>

Note: here we have not set the text attribute of the Label, because we will dynamically display the Label content through the background program.

============================== Create a Grid ===================== ===
Grid is like a Flex typographical tool. Similar to a table in HTML, only after Grid is determined can we locate various elements in the entire flex program.
A Grid tag consists of three elements:
[List] Grid: similar to the <table> label in HTML
GridRow: similar to the <tr> label in HTML
GridItem: similar to the <td> Label [/list] in HTML
Here we add a Grid with five rows and four columns. The first row and the last row are three columns. The Code is as follows:

<mx:Grid>   <mx:GridRow>      <mx:GridItem colSpan="2"></mx:GridItem>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>   </mx:GridRow>   <mx:GridRow>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>   </mx:GridRow>   <mx:GridRow>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>   </mx:GridRow>   <mx:GridRow>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>      <mx:GridItem></mx:GridItem>   </mx:GridRow>   <mx:GridRow>      <mx:GridItem></mx:GridItem>      <mx:GridItem ></mx:GridItem>      <mx:GridItem colSpan="2"></mx:GridItem>   </mx:GridRow>  </mx:Grid>

After the Grid is added, the effect is:

= ========
The Flex Button control is similar to the HTML Button. Here we will use three buttons:
[List] label: Text displayed on the button
Width: button width
Click: Event returned when the button is pressed [/list]
In Flex, each button control has the same format:
<Mx: Button label = "[something]" width = "[number]" click = "[some handler method]"/>
Add 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, to the 18 griditems we created above ,., +,-, *,/, =, Clear, and C/E buttons are as follows:
Row1

width="70" label="Clear" click="calcController.clearAll()" width="30"label="C/E" click="calcController.clearEntry()"width="30"label="+" click="calcController.setOperation('add')"

Row2

width="30" label="1" click="calcController.addNumber('1')"width="30" label="2"click="calcController.addNumber('2')"width="30" label="3" click="calcController.addNumber('3')"width="30" label="-" click="calcController.setOperation('subtract')"

Row3

width="30" label="4" click="calcController.addNumber('4')"width="30" label="5" click="calcController.addNumber('5')"width="30" label="6" click="calcController.addNumber('6')"width="30" label="*" click="calcController.setOperation('multiply')"

Row4

width="30" label="7" click="calcController.addNumber('7')"width="30" label="8" click="calcController.addNumber('8')"width="30" label="9" click="calcController.addNumber('9')"width="30" label="/" click="calcController.setOperation('divide')"

Row5

width="30" label="0" click="calcController.addNumber('0')"width="30" label="." click="calcController.addNumber('.')"width="70" label="=" click="calcController.doOperation()"

After the button is added, save the file as follows:

========================================================= ======
Create an as file and save itCalculatorController.
First, create a CalculatorController class:

class CalculatorController{}

Then create a constructor

public function CalculatorController(){}

Declare the following variables in CalculatorController:

public var calcView:Object;private var reg1:String="";private var reg2:String="";private var result:Number;private var currentRegister:String="reg1";private var operation:String="none";private var r1:Number;private var r2:Number;

Then add the function module:

"Equal" function doOperation ()

public function doOperation():Void{r1=Number(reg1);r2=Number(reg2);switch (operation){case "add":result=r1+r2;resetAfterOp();break;case "subtract":result=r1-r2;resetAfterOp();break;case "multiply":result=r1*r2;resetAfterOp();break;case "divide":result=r1/r2;resetAfterOp();break;default://do nothing}}

AddNumber ()

public function addNumber(n:String):Void{if (operation=="none" && currentRegister=="reg2"){reg1="";setCurrentRegister();}this[currentRegister]+=n;setDisplay(currentRegister);}

"C/E" function clearEntry ()

public function clearEntry():Void{this[currentRegister]="";setDisplay(currentRegister);}

ClearAll ()

public function clearAll():Void{reg1="";reg2="";setCurrentRegister();setOperation("none");setDisplay(currentRegister);}

SetOperation ()

public function setOperation(operation:String):Void{this.operation=operation;setCurrentRegister();}

Display function setDisplay ()

private function setDisplay(register:String):Void{calcView.calcDisplay.text = this[register];}

Others

private function setCurrentRegister():Void{if (reg1==""){currentRegister="reg1";}else{currentRegister="reg2";}}private function resetAfterOp():Void{reg1=String(result);reg2="";setDisplay("reg1");setOperation("none");}

================================ The final complete code ========
Calculator. mxml

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"> <!-- calculator controller --> <CalculatorController id="calcController" calcView="{this}"/> <!-- calculator view --> <mx:Panel title="Calculator">  <!-- calculator display -->  <mx:Label id="calcDisplay" width="150" textAlign="right"/>  <!-- calculator controls -->  <mx:Grid>   <mx:GridRow>    <mx:GridItem colSpan="2">     <mx:Button width="70" label="Clear" click="calcController.clearAll()"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="C/E" click="calcController.clearEntry()"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="+" click="calcController.setOperation('add')"/>    </mx:GridItem>   </mx:GridRow>   <mx:GridRow>    <mx:GridItem>     <mx:Button width="30" label="1" click="calcController.addNumber('1')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="2" click="calcController.addNumber('2')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="3" click="calcController.addNumber('3')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="-" click="calcController.setOperation('subtract')"/>    </mx:GridItem>   </mx:GridRow>   <mx:GridRow>    <mx:GridItem>     <mx:Button width="30" label="4" click="calcController.addNumber('4')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="5" click="calcController.addNumber('5')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="6" click="calcController.addNumber('6')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="*" click="calcController.setOperation('multiply')"/>    </mx:GridItem>   </mx:GridRow>   <mx:GridRow>    <mx:GridItem>     <mx:Button width="30" label="7" click="calcController.addNumber('7')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="8" click="calcController.addNumber('8')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="9" click="calcController.addNumber('9')"/>    </mx:GridItem>    <mx:GridItem>     <mx:Button width="30" label="/" click="calcController.setOperation('divide')"/>    </mx:GridItem>   </mx:GridRow>   <mx:GridRow>    <mx:GridItem>     <mx:Button width="30" label="0" click="calcController.addNumber('0')"/>    </mx:GridItem>    <mx:GridItem >     <mx:Button width="30" label="." click="calcController.addNumber('.')"/>    </mx:GridItem>    <mx:GridItem colSpan="2">     <mx:Button width="70" label="=" click="calcController.doOperation()"/>    </mx:GridItem>   </mx:GridRow>  </mx:Grid> </mx:Panel></mx:Application>

CalculatorController.

/*Calculator Controller*/class CalculatorController{// properties// object to hold a reference to the view objectpublic var calcView:Object;// registers to hold temporary values pending operationprivate var reg1:String="";private var reg2:String="";// result of an operationprivate var result:Number;// the name of the register currently usedprivate var currentRegister:String="reg1";// the name of the next operation to be performedprivate var operation:String="none";// for convenience, holder for numerical equivalents // of the register string valuesprivate var r1:Number;private var r2:Number;// constructorpublic function CalculatorController(){}// methods// perform the current operation on the 2 registerspublic function doOperation():Void{// cast the register values to numbersr1=Number(reg1);r2=Number(reg2);switch (operation){case "add":result=r1+r2;resetAfterOp();break;case "subtract":result=r1-r2;resetAfterOp();break;case "multiply":result=r1*r2;resetAfterOp();break;case "divide":result=r1/r2;resetAfterOp();break;default:// do nothing}}// concatenate number to the value of the current registerpublic function addNumber(n:String):Void{if (operation=="none" && currentRegister=="reg2"){reg1="";setCurrentRegister();}this[currentRegister]+=n;setDisplay(currentRegister);}// clear the current registerpublic function clearEntry():Void{this[currentRegister]="";setDisplay(currentRegister);}// clear both registers and the current operationpublic function clearAll():Void{reg1="";reg2="";setCurrentRegister();setOperation("none");setDisplay(currentRegister);}// set the current operationpublic function setOperation(operation:String):Void{this.operation=operation;setCurrentRegister();}// set the value shown in the displayprivate function setDisplay(register:String):Void{calcView.calcDisplay.text = this[register];}// set which register is currentprivate function setCurrentRegister():Void{if (reg1==""){currentRegister="reg1";}else{currentRegister="reg2";}}// reset values after an operationprivate function resetAfterOp():Void{reg1=String(result);reg2="";setDisplay("reg1");setOperation("none");}}

Original article address:
Www.macromedia.com/devnet/flex/articles/calculator_print.html