Compiling MXML files with FlexBuilder

On this page, you will be guided, to code and compile a flex application on adobe Flex Builder.

Compiling MXML files with FlexBuilder

Compiling MXML files with FlexBuilder

     

On this page, you will be guided, to code and compile a flex application on adobe Flex Builder. This adobe product is eclipse based therefore many of eclipse features can be seen inside the flex builder.
I have the evaluation copy of flex builder and using this only, i am going to guide you. So before starting you too have this adobe ide installed in your system, if not then first visit the link below and get Flex Builder.

http://www.roseindia.net/flex/flex_builder_ide.shtml

Now i after getting flex builder i know you are ready for learning the coding and compiling process of flex on adobe flex builder.
So lets start, first trigger the binary file of flex builder.

 

After the launcher file is triggered, flex builder opens.

  

When flex builder ide main page opens close the OutLine tab, Problems tab and Flex Start Page tab. This will provide more coding space.

  

 

 Now after closing the above three window tabs, you will get the ide main page view as below shown.

 

 

Now for coding a flex application first we have to create a flex project, like we create for Java and C/C++ in eclipse. For this click File -> New -> Flex Project.

After this a New Flex Project window opens. In the Project name: column type the name of your project , here i have written neo as project name. After that click on Finish button.

  

 

 

 

After this a project with name neo comes in your Flex Navigator window and by default a neo.mxml file is opened.

 

Now if you want you can start coding with neo.mxml file or you can open another mxml file too. For this click on 
File -> New -> MXML Application

 

or right click on your flex project neo and click on File -> New -> MXML Application.

   

After this a New MXML Application window opens. On this, type your file name in Filename: column and click Finish. Here i have written my file name as rachel, so a MXML application with name rachel.mxml will be created and opened.

0

 

After this you can start coding on the new file rachel.mxml.

1

For getting maximum coding space minimize the Flex Navigator window.

  2

After this i coded an application in which i have added wipe effect in four flex control buttons. You all have to just copy code from here or download at the end of the page and paste the code in your mxml application.

rachel.mxml 3

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   layout="absolute">

  <mx:WipeDown id = 'wipe_down' />
  <mx:WipeLeft id = 'wipe_Left' />
  <mx:WipeRight id = 'wipe_Right' />
  <mx:WipeUp id = 'wipe_Up' />

  <mx:Style>
  .baadshah {color : #00FF00}
  Panel{font-size : 18pt}
  Button{font-size : 10pt}
  </mx:Style>
  
  <mx:Panel title = 'Baadshah Khan' titleStyleName="baadshah">
  

  <mx:ControlBar horizontalAlign = 'center'>
  
  <mx:Button label = 'Rachel Weisz' rollOverEffect = 
  'wipe_down' color="#990033" />
  <mx:Button label = 'Angelina Jolie ' rollOverEffect = 
  'wipe_Left' color="#6600FF" />
  <mx:Button label = 'Halle Berry' rollOverEffect = 
  'wipe_Right' color="#336600" />
  <mx:Button label = 'Roseindia.net' rollOverEffect = 
   'wipe_Up' color="#000099" />
  
  </mx:ControlBar>

  
  </mx:Panel>
</mx:Application>

 

For compiling press F11 or click on Run -> Run Rachel or Run -> Debug Rachel. 

  4

 

After this on your default browser, following out is displayed. 
This output is your swf file which is executed. The output swf is generated inside your project bin-debug folder.

rachel.swf 5

   .

 

So like this a flex application is coded, compiled and at last is executed inside the Flex Builder. Flex Builder contains Adobe Flash Player inside Player\10\win folder, you can switch here and execute the FlashPlayer.exe. After this a window shown below opens. 6

 

You can drag-drop your swf file from the neo\bin-debug  folder into the Flash Player and the rachel.swf file will be executed. 7

 

  8

 

Now you know how to code, compile an flex application and also to execute the swf file with browser as well as with the flash player, congrats. 9

 

Download the code

Tutorials

  1. Action Script custom components
  2. Flex Tutorials
  3. Login.mxml
  4. Performing Object Introspection
  5. For..in loop
  6. How to display on textbox using ObjectUtil class
  7. Introducing Flex
  8. Downloading and Installing Flex
  9. Flex Example
  10. Flex Combo Box example
  11. Flex wipe behavior example
  12. Flex Validator example
  13. Flex Tab Navigator example
  14. Flex Cascading Style Sheets example
  15. Flex Alert Box example
  16. Flex Remove Event Listener example
  17. Flex dispatch event example
  18. Flex Custom mxml tags example
  19. Flex current target property example
  20. Flex Circle drawing example
  21. Flex adding single event on varied components Example
  22. Flex Add Event Listener example
  23. Action Script 'source' attribute example
  24. Action Script 'include' statement example
  25. Flex combobox selecteditem
  26. Flex data binding example
  27. Compiling MXML files with FlexBuilder
  28. Flex Handling KeyboardEvents
  29. Flex checkbox control example
  30. Flex event phase detection example
  31. Explore key & mouse with Flex
  32. Flex KeyboardEvent Listener
  33. Flex KeyboardEvent properties
  34. Flex target property example
  35. Flex terminating event flow example
  36. Downloading and Installing Flex Builder
  37. Eclipse flex ant coding example
  38. Flex Container
  39. Flex Introduction
  40. What are Flex Containers