Compiling MXML application

In this tutorial you will be provided two ways to compile you flex source file. First one is very easy and in this you all have to just put or directly save your .mxml file in the bin directory of your flex folder. Here the bin directory is the place where the flex compiler is located.
Now open the command prompt switch to the flex bin directory and type mxmlc file-name.mxml. The output swf file will be generated in the same bin folder, where the flex compiler and your flex source file is located. Below i have described all these steps through the screen shots.

Here the name of my flex file is newbie.mxml.

Locating Flex newbie.mxml file

Console command for compiling

Locating Flex newbie.swf file

Executing Flex newbie.swf file

Now there is another way to do the above compiling job. This is done by apache's ant technology, with which a build.xml file is created and is used to call the flex compiler and compile the flex .mxml file.
For beginners to Apache's Ant and Flex, I've prepared an example of ant build.xml file as below -
You can download file in the end of this tutorila by clicking at the download link.
In this tutorial page you will be taught to deploy flex applications, along with this you will also get a brief introduction regarding flex components.
Here you just copy the code and save it with build.xml at place where you saved your .mxml file. In this case it is not necessary to save your file in flex bin directory, the place could be any other directory too.

build.xml


<project name = "build file" default = 'compile'>

  

  <target name = "folder">

  <delete dir = "${basedir}/bin"/>

  <mkdir dir = "${basedir}/bin"/>

  </target>

  

  

  <target name = 'compile' depends = 'folder'>

  <property name = 'compiler' 

 location = 'C:\flexsdk3.0.0.477\bin\mxmlc.exe'/>

  <exec executable = '${compiler}' failonerror = 'true'> 

  <arg line = "-output '${basedir}/bin/Tia.swf'"/>

  <arg line = "Tia.mxml"/>

  </exec>

  </target>



</project>

Inside ' location' attribute, relative path of Flex compiler is passed. From this path the 'ant' utility calls Flex compiler to compile the flex file. Flex file possess .mxml as its extension.
For calling the compiler code provided below is required.


<property name = 'compiler' location = 

  'C:\Program Files\flexsdk3.0.0.477\bin\mxmlc.exe'/>

The table below shows that in your ant build.xml file you have to mention the file_name of your flex file that you want to compile. Here file name used is Tia.mxml.
Note :- A Flex developer has to update its flex file_name in the ant build.xml file every time with the new one with which the file has been saved.
Below table shows that the file .mxml when compiled into .swf is generated inside the 'bin folder' of our base directory. Base directory is the location where our build.xml and Tia.mxml file exist.


<arg line = "-output '${basedir}/bin/Tia.swf'"/>

  <arg line = "Tia.mxml"/>

Below in the table is the code of Tia.mxml file shows an alert box whenever MOUSE_OVER event occurs.

Tia.mxml


<?xml version = "1.0" encoding = "ISO-8859-1"?>

<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" 

  initialize = 'createListener(event);'>



  <mx:Script>

  import mx.controls.Alert;

  

  private function createListener(e:Event):void{

  b1.addEventListener(

  MouseEvent.MOUSE_OVER, myEventHandler);

  b1.addEventListener(

 MouseEvent.CLICK, myClickHandler);

  }



  private function myEventHandler(e:Event):void{

  var result:Boolean = b1.dispatchEvent(

 new MouseEvent(MouseEvent.CLICK,true,false));

  }



  private function myClickHandler(e:Event):void {

  Alert.show(

  "The event dispatched by the MOUSE_OVER was of type '"

  + e.type + "' .");

  }



  </mx:Script>

  <mx:Button id = "b1" label = "Click Me"/>



</mx:Application>

Before running the ant file, the ant file build.xml and the flex file Tia.mxml should be placed in same location, here both have been saved in C:\baadshah directory. Now for compiling file Tia.mxml, open Command Prompt and type ant command as shown in image below.

BUILD SUCCESSFUL means our file Tia.mxml has been successfully compiled in to Tia.swf and is generated inside the bin folder. Now for running this Tia.swf file follow the steps as demonstrated below.

This should be your base directory:
Now open the bin folder.

Inside the bin folder, open Tia.swf with Firefox.
or you can rather drag and drop the file directly into an already opened browser
that has flash player plugin installed.

Executed shock wave file on Mozilla Firefox browser.

Sometimes these shock wave files do not run on browsers due to absence of Adobe Flash Player. But in these cases, the browser itself detect the plugin and asks you for download. You can download the flash player from adobe's official website download page.

Here is the download link : http://get.adobe.com/flashplayer/?promoid=BUIGP
The download is an binary file with name install_flash_player.exe. You all have to do is just double click on the icon, and the flash player plugin will get installed on your default browser.

Flex Hello World example

The example shown below is a simple flex code that writes text ' Hello World'. Flex applications are based on XML extended coding. So an xml declaration is needed that specifies the xml version. <mx:Application> tag is the root tag used in building the coding structure of Flex. Tags constructed under the root tag are called child tags. Here a single child tag <mx:Label> of root tag <mx:Application> is taken in which the Label control prints the mentioned data inside its 'text' attribute in to the application background.

HelloWorld.mxml


<?xml version = '1.0' encoding = 'ISO-8859-1'?>

<mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml'>

  

  <mx:Panel title = 'roseindia.net' color = 'green' 

  paddingLeft = '30' paddingRight = '30' 

  paddingTop = '30' paddingBottom = '30'>

  

  <mx:Label text = 'Hello World'/>

  </mx:Panel>

</mx:Application>

Generating a shock wave file.

Compilation of flex file is done by the flex compiler that comes along with the flex software kit. You can download the latest Flex 3.2 SDK from this mentioned link. http://www.adobe.com/products/flex/flexdownloads/
Flex compiler is located inside the flex bin folder with name mxmlc.exe. For compiling our Flex file we need to do two things, first is setting the flex-sdk path up to its bin 'folder', i.e., C:\Program Files\flexsdk3.0.0.477\bin in the 'Path' variable of System Variables under Environment Variables. Second is to locate the relative path of the compiler, i.e., C:\Program Files\flexsdk3.0.0.477\bin\mxmlc.exe correctly in your ant build file. Now after these measures taken, your compiler will be detected by the Ant Utility and will be called to compile the MXML file in to SWF file.

Your final .swf file will be executed in browser that has Flash Player plugin installed.

Flex User Interface Component Example

In Flex two types of user interface components: Controls and Containers are used. 0

Controls are generally located inside the Containers. Controls consist of Customizable features like fonts and styles. For a Control declaration API of MXML language is used. Table below lists the Control elements used in Flex programming.

? Button
? CheckBox
? ColorPicker
? ComboBox
? DataGrid
? DateChooser
? DateField
? HSlider
? HorizontalList
? Image
? Label
? LinkButton
? List

? NumericStepper
? PopUpButton
? PopUpMenuButton
? ProgressBar
? RadioButton
? RichTextEditor
? Text
? TextArea
? TextInput
? TileList
? Tree
? VSlider
? VideoDisplay

Containers maintain the positioning of its components. It also provides a structure platform for laying out its child Components. It handles navigation among child components. Components here refer to other Controls and Containers placed inside a single Container. In Flex we have two types of Containers: Layout and Navigator Containers respectively. Table below lists the Container elements used in Flex programming.

Layout Containers

Navigator Containers

? Canvas
? ControlBar
? Form
? FormHeading
? Grid
? Hbox
? HDividedBox
? HRule

? ModuleLoader
? Panel
? Spacer
? Tile
? TitleWindow
? Vbox
? VDividedBox
? VRule

? Accordian
? ButtonBar
? LinkBar
? MenuBar
? TabBar
? TabNavigator
? ToggleButtonBar
? ViewStack

Standard way to build Flex code 1

Here 'id' property is used for having access to the 'text' feature of Control named 'Label'.

Eve.mxml


<?xml version = '1.0' encoding = 'ISO-8859-1'?>

  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">



  <mx:Label id = "eve"/>

  <mx:TextInput text = 'Click me to label eve' 

  click = 'eve.text = String("Rachel Weisz")'/>



</mx:Application>

Eve.swf 2

In the program, an id property inside the Control and Container tags are used to establish interactivity in them. This Flex code has XML declaration statement that defines the XML version. The code contains a root tag <mx:Application>. Now a 'Panel' layout Container maintains the positioning of its components like ViewStack container and Canvas container and also of Label and Button Controls. Canvas Containers are placed inside the ViewStack Container and so they are called as child components of the ViewStack Container. Canvas Containers with their 'id' property are switched with the specific Button Controls in which they are called. Here in switching Canvas Containers, the ViewStack 'id' is used because these Canvas Containers are inside the ViewStack Container and are said to be its child Components.

Whenever any Canvas gets switched through a Button click, the 'text' attribute value under the Label Control of Canvas Container is demonstrated. 3

Scarab.mxml


<?xml version = "1.0" encoding = "utf-8"?>

  <mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml">



  <mx:Panel title = 'My Flex Window' width = "30%" 

  height = "30%">

  <mx:ViewStack id = 'RachelWeisz' width = '100%' 

  height = '100%'> 

  

  <mx:Canvas id = 'Rath' backgroundColor = '#FFFCCC'>

  <mx:Label text = 'Welcome to future' 

  color = 'green'/>

  </mx:Canvas>



  <mx:Canvas id = 'Armon' backgroundColor = '#CCCCFF'>

  <mx:Label text = 'well! some body is angry' 

  color = 'red'/>

  </mx:Canvas>

  

  </mx:ViewStack> 

  </mx:Panel>



  <mx:HBox>

  <mx:Button label = 'Button 1' click = 

  "RachelWeisz.selectedChild = Rath"/>

  <mx:Button label = 'Button 2' click = 

  "RachelWeisz.selectedChild = Armon"/>

  </mx:HBox>



</mx:Application>

Scarab.swf run on browser

Action Script in Flex

Example below shows the use of Action Script inside the MXML code. Action Script coding is done inside <mx:Script> tags.

Morpheus.mxml 5


<?xml version = '1.0' encoding = 'utf-8'?>

  <mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml'>

  <mx:Script>

  <![CDATA[

  

  public function Trinity():void{

  Niobe.text = String('Neo - Why am I here'); 

  Bane.label = String('GhostGhostn'); 

  }

  

  ]]>

  </mx:Script>

  

 <mx:Label id = 'Niobe'/>

 <mx:Button id = 'Bane' click = 'Trinity()'/> 

  

</mx:Application>

Morpheus.swf

Download the code

Flex Example

Flex Example

Compiling MXML application

Tutorials