Developing Flex Applications without Flash Builder. Use Free Adobe Flex SDK, ANT and Text Editor.

Required  Software:

1. Flex SDK  (Click Here to get Adobe Flex SDK . Get Flex4 Release mile stone, 4.0.0.14159 build)
2. Any Text editor to edit the source code (Notepad or Notepad++ on Windows or TextWrangler on mac)
3. Ant version  1.8.1 (Comes default with Mac OS X)

Steps

When you download the Flex SDK, you download a “flex_sdk_4.0.0.14159.zip” file. Unzipping this file will create a folder called “flex_sdk_4.0.0.14159“.  You can place this folder any where you want on your computer and carefully refer to this locations where ever appropriate in the following discussion. This folder contains every thing you need to develop, compile standard flex applications.The path to this folder is  /Users/sukumarvaddi/Library/flex_sdk_4.0.0.14159 on my mac. Windows users can place it any where. I will refer to this location as                                 “{FLEX_HOME}” here after. Replace the exact location of the unzipped directory where ever I refer to “{FLEX_HOME}”.

Set the Class path to  ”{FLEX_HOME}/bin” folder. (Windows users can set the PATH environment variable to “{FLEX_HOME}/bin” directory in order to set the class path. Mac users, inorder to set the class path, open the terminal window. Make sure you are in users home directory.  The home directory on my mac is “/Users/sukumarvaddi”. If you have a “.profile” file under this directory, edit this file using TextEdit. In order to edit  ”.profile” using TextEdit, type “open -a TextEdit .profile” command while you are in your home directory. Copy and paste  export  PATH=”{FLEX_HOME}/bin:$PATH”/ after the last line in the .profile file and save it. Make sure to replace {FLEX_HOME } with exact location of the unzipped Flex SDK. Close the “.profile ” opened in TextEdit after saving it. If you do not have a “.profile” file in user’s home directory, please create one using “vi” and save it. Once you create the “.profile“,  you can edit it  by following the steps mentioned above.)

As Ant comes default with mac, you do not have to do anything special. Windows users  can refer to ANT doc for installing ANT on their machines. It should be a no brainer.

Now that you have setup every thing that is need to develop Flex applications, Lets go ahead and start writing coding. Create a folder by any name any where you want to store the  Flex Source code. I created one and named it “FlexAppWithAnt”. Under this directory, create another directory called “wrapper”. This is the folder where swf file and html wrapper that wraps the swf file are generated after compiling the source code after running build script.

Under “FlexAppWithAnt” , create a file by name  ”HelloWorld.mxml” using text editor of your choice. Copy the following code and paste it in “HelloWorld.mxml”. Save “HelloWorld.mxml” after pasting it. Make sure to get the quotes right in your source code file.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<s:layout>
<s:VerticalLayout horizontalAlign=”center” verticalAlign=”middle” />
</s:layout>
<s:Label text=”Hello, world!” />
</s:Application>

Create another file and name it “build.xml”.  Copy the following the paste it in “build.xml” and save it. Get the quotes right in this file as well.

<?xml version=”1.0″ encoding=”utf-8″?>

<project default=”wrapper” basedir=”.”>

<!– Define your own Flex home directory –>

<property name=”FLEX_HOME” value=”/Users/sukumarvaddi/Library/flex_sdk_4.0.0.14159/” />

<property name=”APP_ROOT” value=”${basedir}/wrapper”/>

<!– Enabling Flex Ant Tasks –>

<taskdef resource=”flexTasks.tasks” classpath=”${FLEX_HOME}/ant/lib/flexTasks.jar” />

<!– A ‘clean’ target which will remove any previously generated files –>

<target name=”clean” description=”Clean previously built binaries”>

<delete file=”HelloWorld.swf” />

</target>

<!– Our main target which compiles our application –>

<target name=”compile” description=”Compile our project” depends=”clean”>

<mxmlc file=”HelloWorld.mxml” output=”${APP_ROOT}/HelloWorld.swf”>

<source-path path-element=”.” />

</mxmlc>

</target>

<target name=”wrapper” depends=”compile”>

<html-wrapper

title=”Welcome to My Flex App”

file=”index.html”

height=”300″

width=”400″

application=”app”

swf=”HelloWorld”

history=”true”

express-install=”true”

version-detection=”true”

output=”${APP_ROOT}”/>

</target>

</project>

 Now traverse to where ever “FlexAppWithAnt” directory is located, if you are some where else in the directory structure,  on terminal and just type “ant”. Thats it!!!!!!. Once the build is successful, go to the “wrapper ” folder under “FlexAppWithAnt” and check out the compiled  swf file and HTML wrapper along with other files. Open the html file using any browser.

 CONGRATULATIONS!!! on successfully developing your first Flex Application. HAPPY CODING!!!!!

MAKE SURE TO GET THE QUOTES RIGHT IN YOUR SOURCE CODE and build.xml

Advertisement