Flex Tutorials 1-Create a new project and Debug the Flex application

Steps to create a New Flex Project(Application Type:Web Application, and Application Server:ASP.NET) in adobe Flex
Go to Start ->Program Files/All Programs->Adobe->
Click on Adobe Flex Builder 3
You will get the following window

Click on Filw->New->Flex Project

In the New Flex Projet ,write the Project Name "MyTraining" and keep the other setting as it is .You can change the location by modifing "Project Location".

Click on Next

Click Next


Click on Finish
Now you will get the following Window

My am using MyTraining.mxml for coding ,that file was created by default and same as Project Name.If you want to create another application ,Right click on the src->New->MXML Application

And put File Name in the "New MXML Application" Dialog box and put it in src Folder.

Write the following code in MyTraining.mxml/or your newly created File.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
private function initApp():void
{
var myVar:Number=10;
trace("This is a trace statement");
}
private function clickHandler():void
{
trace("button clicked");
var newVar:Number=12.34;
}
]]>
</mx:Script>
<mx:Label text="Something has displayed"/>
<mx:Button label="Try the debugger" click="clickHandler()"/>
</mx:Application>

Now run your application by clicking on the Run button in the toolbar or press Ctrl+F11


Click ok in the Save and Lunch Dialog

Now you will get the following output


Debug the Flex Application

Close the browser where your Flex application is running
Go to MyTraining.mxml in Source Mode.

Click on Debug Button

Click on Yes.

A light green background will come at the line where you set your breakpoint.
Click on Window->Expressions

Right Click on the Expressions->Click on Add Watch Expressions....

Type myVar and click on OK

Now click on F6 or Step Over Button

At this stage ,you can see that the variable value myVar is changed to 10

Press F8 or "Resume" button to resume the program


If you want to debug the "newVar" ,similarly put a debug point against that line and click on the "Try the debugger" button on the web page.Put the newVar in the Expressions Tab.Click F6 to see the change value and Press F8 to Resume.You can also see the variable value when you mouse over on the variable.
This way you can easily debug your flex application.