Flex tutorial – Build a calculator

With Flex you can create applications. So, why not start creating a very simple application, like a calculator?

How does a calculator work, in my opinion? Simple: it just evaluates a string. But how can we evaluate a simple string like “1+1″ in AS3? I think we can’t, because eval() isn’t supported in actionscript 3. So I search on google, and found some solutions for it. But nothing really satisfied me. I don’t want to use PHP or another serverside script for evaluating strings, do you? So why not using a client side script, like javascript?

I want to share how I did this to you, and also the process of creating a calculator.

Setup a new project
I use FlashDevelop for Flex applications. Create a new project ( Menu > Project > Flex 3 project). Open the main.mxml file in the src-folder. Make shure it is set to ‘always compile’ (the green icon). Let’s add some data:






What did we just created? Check out the code and press ctrl-enter to run the application. We have a container panel, an input field and an output field. Press the button and the text from the input will be shown in the output textfield. Great, isn’t it?

To be real; if you never ever used Flex, this ÍS great. How much time did we spend to create a simple interface like this? We just used 5 tags, and it already is an application.

Create a html document
We need html, because we need to communicate between the swf and javascript.
[html]

[/html]No, nothing special, just another html file. It’s better to use swfObject for embedding flashfiles, but that’s not what this tutorial is about. Save the html document in the same directory as the .swf file (in my case: in the bin folder)

Let’s calculate
We need our flex application to calculate! Let’s add some script (actionscript) to the application. Put this somewhere between the mx:Application tag:


private function eval( str:String ):String
{
return ExternalInterface.call ( “eval”, str );
};
With externalinterface we can communicate between flash and javascript. We have just created an internal function named ‘eval’. This is going to be the function for the calculator. This function uses a string. Externalinterface calls the javascript function “eval” with the parameter from the function and returns that string. This is the magical trick in this tutorial, so make shure you get this point 😉 You have created an actionscript function called eval, that uses the eval function from javascript. I think this is a really global function, so you can use it in other AS3 projects too.

Alright, let’s edit the calculate-button like this:Now build the project and open the html document we have created earlier. Note: from now on just build your project en hit refresh on your browser. You can’t calculate within the FlashPlayer, because javascript calculates for us, remember?

Now we have a very simple calculator.

Let’s make it better. We don’t need two textfields (input / output), but we need one uneditable field. I choose to use a mx:Label, please don’t ask me why. We also need buttons, just like the windows calculator. The button need to add text to our label-field. For that, let’s add a new AS3-function to the mx:Script tag:private function addText( str:String ):void
{
input.text += str;
}This is straight forward. When we call the function, the input field adds text that is passed by the function. I used a function for this, because we are going to use it more than 1 time. You could use this inline in the buttons, but we need a lot of buttons. Maybe later we would edit this, so then we only have to edit the function, instead of copy/paste this multiple times.
Make a button to test it. Add somewhere a button like this:Test the movie. It works! You can delete the button.

Now, let’s add the other buttons. I used a mx:Panel with an absolute layout, so we can use x and y positions. I changed the layout a bit, and created something this: (this also is the the full code)





private function eval( str:String ):String
{
if ( ExternalInterface.available )
{
return ExternalInterface.call ( “eval”, str );
}
else
{
return “Unavailable”
}
}
private function addText( str:String ):void
{
input.text += str;
}



What are you waiting for? Run the application 😀

Well, that looks different! Take a look at the code. We have created buttons like 0-9, and some math signs. This buttons don’t calculate, they just add text. We have changed the ‘calculate’-button’ to an ‘=’ sign, and we have a clear button.

I think this is a start of using Flex and building a calculator. I’m learning Flex too, so correct me if i’m doing something wrong.