This calculator consists of two parts: a MXML file of the foreground interface and an AS file of the background controller. The mxml file is responsible for displaying the calculator interface, and the as file is responsible for processing the information sent by the user and calculating the results. In this tutorial, we mainly learn:
[list]The Application class
The Panel container
The Label element
The Grid container
The Button element[/list]
The main learning content of ActionScript:
[list]A class definition
Properties
Methods
The if-else and switch-case control structures[/list]
========================== Create interface ==========================
Create a blank mxml file and save it as a flex file that complies with the standard must be added to the MX class library.
xmlns:mx="/2003/mxml
So, write the following code:
========================= Create main panel ===========================
All buttons in the calculator are concentrated inPanelIn the element, so we first need to create a Panel panel,
And set its title property to:Calculator
Add in the Application area:
========================== Create the calculator display ============================
The display is actually aLabelElement, it can display a line of text, and the Label element has many attributes. Here, we use the centralized attributes:
[list]id: Label's logo, similar to Instance Name in Flash
width: Label width, unit: pixel
text: Label's content
textAlign: Align: left | right | center [/list]
Add the following code to the Panel area:
Note: We did not set the text attribute of the Label here, because we will dynamically display the content of the Label tag through the background program.
======================== Create Grid ==========================
GridIt's like Flex's layout tool, similar to tables in HTML. Only when Grid is determined can we locate various elements in the entire flex program.
The Grid tag consists of three elements:
[list]Grid: Similar to the <table> tag in HTML
GridRow: Similar to the <tr> tag in HTML
GridItem: Similar to the <td> tag[/list] in HTML
Here we add a 5 row and 4 column Grid, with the first row and the last row and three columns, the code is as follows:
The effect after adding Grid is:
============================== Add Calculator Button ========================
Flex'sButtonThe control is also similar to HTML buttons, here we will use three properties of the button:
[list]label: Text displayed on the button
width: button width
click: Events that respond 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]"/>
In the 18 GridItems we made above, add 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, ., +, -, *, /, =, Clear, C/E buttons, as follows:
Row1
Row2
Row3
Row4
Row5
After completing, save the file and add the button as follows:
========================== Create backend program ===========================
Create a new as file and save as
First create a CalculatorController class:
Then create a constructor
Declare the following variables in the CalculatorController:
Next add functional modules:
"Equal to" function doOperation()
Function to enter numbers addNumber()
"C/E" function clearEntry()
"Clear" function clearAll()
"Add, subtract, multiplication, and division" function setOperation()
Display function setDisplay()
other
========================= The final complete code =========================
Original address:
/devnet/flex/articles/calculator_print.html
[list]The Application class
The Panel container
The Label element
The Grid container
The Button element[/list]
The main learning content of ActionScript:
[list]A class definition
Properties
Methods
The if-else and switch-case control structures[/list]
========================== Create interface ==========================
Create a blank mxml file and save it as a flex file that complies with the standard must be added to the MX class library.
xmlns:mx="/2003/mxml
So, write the following code:
<?xml version="1.0"> <mx:Application xmlns:mx="/2003/mxml"> </mx:Application>
========================= Create main panel ===========================
All buttons in the calculator are concentrated inPanelIn the element, so we first need to create a Panel panel,
And set its title property to:Calculator
Add in the Application area:
<mx:Panel title="Calculator"> </mx:Panel>
========================== Create the calculator display ============================
The display is actually aLabelElement, it can display a line of text, and the Label element has many attributes. Here, we use the centralized attributes:
[list]id: Label's logo, similar to Instance Name in Flash
width: Label width, unit: pixel
text: Label's content
textAlign: Align: left | right | center [/list]
Add the following code to the Panel area:
<mx:Label width="150" textAlign="right"/>
Note: We did not set the text attribute of the Label here, because we will dynamically display the content of the Label tag through the background program.
======================== Create Grid ==========================
GridIt's like Flex's layout tool, similar to tables in HTML. Only when Grid is determined can we locate various elements in the entire flex program.
The Grid tag consists of three elements:
[list]Grid: Similar to the <table> tag in HTML
GridRow: Similar to the <tr> tag in HTML
GridItem: Similar to the <td> tag[/list] in HTML
Here we add a 5 row and 4 column Grid, with the first row and the last row and 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>
The effect after adding Grid is:
============================== Add Calculator Button ========================
Flex'sButtonThe control is also similar to HTML buttons, here we will use three properties of the button:
[list]label: Text displayed on the button
width: button width
click: Events that respond 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]"/>
In the 18 GridItems we made above, add 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, ., +, -, *, /, =, Clear, C/E buttons, as follows:
Row1
width="70"
label="Clear"
click="()"
width="30"
label="C/E"
click="()"
width="30"
label="+"
click="('add')"
Row2
width="30"
label="1"
click="('1')"
width="30"
label="2"
click="('2')"
width="30"
label="3"
click="('3')"
width="30"
label="-"
click="('subtract')"
Row3
width="30"
label="4"
click="('4')"
width="30"
label="5"
click="('5')"
width="30"
label="6"
click="('6')"
width="30"
label="*"
click="('multiply')"
Row4
width="30"
label="7"
click="('7')"
width="30"
label="8"
click="('8')"
width="30"
label="9"
click="('9')"
width="30"
label="/"
click="('divide')"
Row5
width="30"
label="0"
click="('0')"
width="30"
label="."
click="('.')"
width="70"
label="="
click="()"
After completing, save the file and add the button as follows:
========================== Create backend program ===========================
Create a new as file and save as
First create a CalculatorController class:
class CalculatorController
{}
Then create a constructor
public function CalculatorController(){}
Declare the following variables in the 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;
Next add functional modules:
"Equal to" 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
}
}
Function to enter numbers 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);
}
"Clear" function clearAll()
public function clearAll():Void
{
reg1="";
reg2="";
setCurrentRegister();
setOperation("none");
setDisplay(currentRegister);
}
"Add, subtract, multiplication, and division" function setOperation()
public function setOperation(operation:String):Void
{
=operation;
setCurrentRegister();
}
Display function setDisplay()
private function setDisplay(register:String):Void
{
= this[register];
}
other
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 =========================
<?xml version="1.0"?>
<mx:Application xmlns:mx="/2003/mxml" xmlns="*">
<!-- calculator controller -->
<CalculatorController calcView="{this}"/>
<!-- calculator view -->
<mx:Panel title="Calculator">
<!-- calculator display -->
<mx:Label width="150" textAlign="right"/>
<!-- calculator controls -->
<mx:Grid>
<mx:GridRow>
<mx:GridItem colSpan="2">
<mx:Button width="70" label="Clear" click="()"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="C/E" click="()"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="+" click="('add')"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Button width="30" label="1" click="('1')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="2" click="('2')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="3" click="('3')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="-" click="('subtract')"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Button width="30" label="4" click="('4')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="5" click="('5')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="6" click="('6')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="*" click="('multiply')"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Button width="30" label="7" click="('7')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="8" click="('8')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="9" click="('9')"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button width="30" label="/" click="('divide')"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Button width="30" label="0" click="('0')"/>
</mx:GridItem>
<mx:GridItem >
<mx:Button width="30" label="." click="('.')"/>
</mx:GridItem>
<mx:GridItem colSpan="2">
<mx:Button width="70" label="=" click="()"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Panel>
</mx:Application>
/*
Calculator Controller
*/
class CalculatorController
{
// properties
// object to hold a reference to the view object
public var calcView:Object;
// registers to hold temporary values pending operation
private var reg1:String="";
private var reg2:String="";
// result of an operation
private var result:Number;
// the name of the register currently used
private var currentRegister:String="reg1";
// the name of the next operation to be performed
private var operation:String="none";
// for convenience, holder for numerical equivalents
// of the register string values
private var r1:Number;
private var r2:Number;
// constructor
public function CalculatorController()
{}
// methods
// perform the current operation on the 2 registers
public function doOperation():Void
{
// cast the register values to numbers
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
}
}
// concatenate number to the value of the current register
public function addNumber(n:String):Void
{
if (operation=="none" && currentRegister=="reg2")
{
reg1="";
setCurrentRegister();
}
this[currentRegister]+=n;
setDisplay(currentRegister);
}
// clear the current register
public function clearEntry():Void
{
this[currentRegister]="";
setDisplay(currentRegister);
}
// clear both registers and the current operation
public function clearAll():Void
{
reg1="";
reg2="";
setCurrentRegister();
setOperation("none");
setDisplay(currentRegister);
}
// set the current operation
public function setOperation(operation:String):Void
{
=operation;
setCurrentRegister();
}
// set the value shown in the display
private function setDisplay(register:String):Void
{
= this[register];
}
// set which register is current
private function setCurrentRegister():Void
{
if (reg1=="")
{
currentRegister="reg1";
}
else
{
currentRegister="reg2";
}
}
// reset values after an operation
private function resetAfterOp():Void
{
reg1=String(result);
reg2="";
setDisplay("reg1");
setOperation("none");
}
}
Original address:
/devnet/flex/articles/calculator_print.html