Macromedia Flex Production Calculator source code and production steps _flex

This calculator is made up of two parts: a mxml file with a foreground interface, a background controller as file. The Mxml file is responsible for displaying the calculator interface, which handles the information sent by the user and calculates the results. In this tutorial we mainly study:
[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 an interface ====================
Create a blank mxml file, save as Calculator.mxml, a standard flex file must join MX's 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 the main panel ====================
All the buttons in the calculator are focused on the Panelelement, so we first want to create a panel pane,
and set its Tittle property to: Calculator
Add in application area:

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

==================== Create calculator display ====================
The display is actually a Labelelement, it can display a line of text, the label element has many attributes, and here we use the Set attribute:
[List]id:label logo, similar to instance Name in Flash
Width:label width, Unit: pixel
The content of Text:label
TextAlign: alignment: Left | Right | Center [/list]
Add the following code to the Panel area:

<mx:label id= "Calcdisplay" width= "textalign=" "right"/>

Note: Here we do not set the Text property of the label, because we will be able to dynamically display the label label content through the background program

==================== Create a Grid ====================
GridLike the Flex typesetting tool, similar to the table in HTML, only grid is determined, we can position the various elements in the entire Flex program
The grid label consists of three elements:
[List] Grid: <table> tags similar to HTML
Gridrow: <tr> tags similar to HTML
GridItem: <td> tags similar to HTML [/list]
Here we add a grid of 5 rows and 4 columns, where the first row and the last act are three columns, the code is as follows:

<mx:Grid> <mx:GridRow> <mx:griditem colspan= "2" ></mx:GridItem> <mx:griditem>& lt;/mx:griditem> <mx:GridItem></mx:GridItem> </mx:GridRow> <mx:GridRow> <m X:griditem></mx:griditem> <mx:GridItem></mx:GridItem> <mx:griditem></mx:griditem > <mx:GridItem></mx:GridItem> </mx:GridRow> <mx:GridRow> <mx:griditem>& Lt;/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 &GT;&LT;/MX:Griditem> <mx:griditem colspan= "2" ></mx:GridItem> </mx:GridRow> </mx:Grid> 

The effect of Grid added is:
document.body.clientwidth-300) {this.height= (document.body.clientwidth-300) *this.height/this.width;this.width= DOCUMENT.BODY.CLIENTWIDTH-300} "border=0>

==================== Add Calculator button ====================
Flex's ButtonControl is also similar to the HTML button, where we will use the three properties of the button:
[List]label: Text displayed on a button
Width: Button widths
Click: event to respond when button is pressed [/list]
Each button control in flex has the same format:
<mx:button label= "[Something]" width= "[number]" click= "[some handler method]"/>
In the 18 GridItem we made above we added 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 、.、 + 、-、 *,/, =, clear, c/e these buttons, as follows:
Row1

	Width= "Label=" "Clear 
	" 
	click= "Calccontroller.clearall ()" Width=
 
	""
	label= "c/e" click= " 
	Calccontroller.clearentry () "

	width=" "
	label=" + " 
	click=" calccontroller.setoperation (' Add ') "

Row2

	Width= "label=" 
	1 "click=" 
	calccontroller.addnumber (' 1 ') "
	
	width=" " 
	label=" 2 "
	click = "Calccontroller.addnumber (' 2 ')"
	
	width= "label=" 
	3 " 
	click=" Calccontroller.addnumber (' 3 ') "
	
	width= "label=" 
	-" 
	click=" calccontroller.setoperation (' subtract ')

Row3

	Width= "label=" 
	4 "click=" 
	calccontroller.addnumber (' 4 ') "
	
	width=" label= "5" 
	click= " Calccontroller.addnumber (' 5 ') "
	
	width=" 
	label= "6" 
	click= "Calccontroller.addnumber (' 6 ')
	
	" Width= "label=" 
	* " 
	click=" calccontroller.setoperation (' multiply ') "

Row4

	Width= "label=" 
	7 "click=" 
	calccontroller.addnumber (' 7 ') "
	
	width=" " 
	label=" 8 " 
	click = "Calccontroller.addnumber (' 8 ')"
	
	width= "label=" 
	9 " 
	click=" Calccontroller.addnumber (' 9 ') "
	
	width= "label=" 
	/" 
	click=" calccontroller.setoperation (' divide ') "

Row5

	Width= "label=" 
	0 "click=" 
	calccontroller.addnumber (' 0 ') "
	
	width=" 
	label= ". 
	" click= "Calccontroller.addnumber ('. ')"
	
	Width= "label=" 
	= " 
	click=" calccontroller.dooperation () "

Save the file after completion, add the button after the effect is as follows:
document.body.clientwidth-300) {this.height= (document.body.clientwidth-300) *this.height/this.width;this.width= DOCUMENT.BODY.CLIENTWIDTH-300} "border=0>

==================== Create a background program ====================
Create a new as file, save As calculatorcontroller.as
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 functional modules:

"equals" feature 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
		}
	}

the function of entering a number addnumber ()

	Public Function Addnumber (n:string): Void
	{
		if (operation== "None" && currentregister== "REG2")
		{
			reg1= "";
			Setcurrentregister ();
		}
		This[currentregister]+=n;
		Setdisplay (Currentregister);
	}

function of "c/e" Clearentry ()

	Public Function Clearentry (): Void
	{
		this[currentregister]= "";
		Setdisplay (Currentregister);
	}

function ClearAll of "clear" ()

	Public Function ClearAll (): Void
	{
		reg1= "";
		Reg2= "";
		Setcurrentregister ();
		Setoperation ("none");
		Setdisplay (Currentregister);
	}

"Add, subtract, multiply, divide" function setoperation ()

	Public Function Setoperation (operation:string): Void
	{
		this.operation=operation;
		Setcurrentregister ();
	}

function of the display screen (Setdisplay)

	Private Function Setdisplay (register:string): Void
	{
		calcView.calcDisplay.text = 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 ====================
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 = "textalign=" "right"/> <!--calculator controls--> <mx:Grid> <mx:GridRow> <mx:grid Item colspan= "2" > Width= "<mx:button" label= "clear" click= "Calccontroller.clearall ()"/> </mx:gridit em> <mx:GridItem> <mx:button width= "label= c/e" click= "calccontroller.clearentry ()"/> < /mx:griditem> <mx:GridItem> <mx:button width= "label=" + "click=" calccontroller.setoperation (' Add ') "/> </mx:GridItem> </mx:GridRow> <mx:GridRow> <mx:GridItem> <mx:button wi Dth= "label=" 1 "click=" CalcconTroller.addnumber (' 1 ') "/> </mx:GridItem> <mx:GridItem> <mx:button width=" label= "2" clic k= "Calccontroller.addnumber (' 2 ')"/> </mx:GridItem> <mx:GridItem> <mx:button width= "Labe" L= "3" click= "Calccontroller.addnumber (' 3 ')"/> </mx:GridItem> <mx:GridItem> <mx:button width = "Label="-"click=" calccontroller.setoperation (' Subtract ') "/> </mx:GridItem> </mx:GridRow> &L t;mx:gridrow> <mx:GridItem> <mx:button width= "label=" 4 "click=" Calccontroller.addnumber (' 4 ')/&gt
    ; </mx:GridItem> <mx:GridItem> <mx:button width= "label=" 5 "click=" Calccontroller.addnumber (' 5 ') /> </mx:GridItem> <mx:GridItem> <mx:button width= "label=" 6 "click=" Calccontroller.addnu Mber (' 6 ') "/> </mx:GridItem> <mx:GridItem> <mx:button width=" label= "*" click= "Calccontro Ller.setoperation (' Multiply ') '/> </mx:GridItem> </mx:GridRow> <mx:GridRow> <mx:GridItem> <m
     X:button width= "label=" 7 "click=" Calccontroller.addnumber (' 7 ') "/> </mx:GridItem> <mx:GridItem> <mx:button width= "label=" 8 "click=" Calccontroller.addnumber (' 8 ') "/> </mx:GridItem> <mx:gri
    ditem> <mx:button width= "label=" 9 "click=" Calccontroller.addnumber (' 9 ') "/> </mx:GridItem> <mx:GridItem> <mx:button width= "label="/"click=" calccontroller.setoperation (' divide ') "/> </mx  :griditem> </mx:GridRow> <mx:GridRow> <mx:GridItem> <mx:button width= "0" label= " 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> &l T;/mx:panel> </mx:Application>

calculatorcontroller.as

/* 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 is 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 registe
		RS Public Function dooperation (): Void {//cast of 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 {this.operation=operation;
	Setcurrentregister (); }//Set the value shown in the display private functIon Setdisplay (register:string): Void {calcView.calcDisplay.text = This[register]; }//Set which register is current private function setcurrentregister (): Void {if (reg1== "") {currentregister=
		"REG1";
		else {currentregister= "REG2";
		}//Reset values after a operation private function Resetafterop (): Void {reg1=string (result);
		Reg2= "";
		Setdisplay ("REG1");
	Setoperation ("none"); }
}

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