For beginners to Apache's Ant and Flex, I've prepared an example of 'build file'.For beginners to Apache's Ant and Flex, I've prepared an example of 'build file'.
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.
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.
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.
Below in the table is the code of Tia.mxml file shows
box whenever MOUSE_OVER event occurs.
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
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
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\flexsdk188.8.131.527\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\flexsdk184.108.40.2067\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.
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.
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|
Standard way to build Flex code
Here 'id' property is used for having access to the 'text' feature of Control named 'Label'.
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.
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.