Creating Flex project in Flash Builder | Adobe Flex Tutorial #2

Creating Flex project in Flash Builder

Creating A Flex project in Flash Builder is not so difficult. The IDE of flash builder is same as Eclipse. Flash builder is built on top of eclipse – the development environment which is strongly associated with java development. Although flash builder, certainly, is not necessary for creating flex applications and as such, provides a lot of features to help you design and develop applications more effectively. For creating flex project in flash builder you can use flash builder either as a standalone application or as a plug in to an installation of Eclipse. The first thing to do as a flex developer is to create a new Flex project.

Now we can see how we can create Flex project in Flash builder.

For creating a flex project in flash builder, first open the flash builder then go to Files -> New -> Flex Project

Creating Flex project in Flash Builder

Then we have to give one name for our project. Here I am giving name as Sample. Then we have to select the type of project either web or desktop. If you are using web then it will use flash player for running your application otherwise if you are using desktop then it will use AIR ( Adobe Integrated Run time ) for running the application. And finally, select the flex SDK version. The default version is recommended.

Creating Flex project in Flash Builder

Next we have to select the type of server, if your application is connecting to a server , and if so, server type is required. if your application is not using any server then just select None/Other . And finally set the output folder. By default, the folder is bin-debug if you want to change then you can.

Creating Flex project in Flash Builder

Next we have to set the path for our new project. Here we are setting the source folder in example src, and the main application file in example Sample.mxml. If you want to add any SWC files to the project, click the library path tab there you can add swc files by clicking on the add swc button. Then you can click on the finish button. Now your project is configured and ready to begin development!

An Adobe SWC file is a package of precompiled Flash symbols and ActionScript code that allows a Flash or Flex developer to distribute classes and assets, or to avoid recompiling symbols and code that will not change. SWC files can be generated by the Flash authoring tool, and by Flex. They are sometimes referred to as class libraries and cannot be directly executed by the Flash player.

Creating Flex project in Flash Builder

Now we got the code window.

Creating Flex project in Flash Builder

Understanding the namespace when Creating Flex project in Flash Builder

For Creating Flex project in Flash Builder you should know what is a namespace in Flex. After opening the Flex IDE  you can find some lines of code. These codes are used for specifying the namespace. Flex 4 provides three packages of components, and each is identified by a unique namespace. The three Flex 4 namespaces are Spark (s:), Halo ( mx:), and the Language ( fx:) namespace. In flex 3 the spark namespace is not available.

What is a namespace? Take a look at the word itself: name + space. Basically, a namespace is a package designation for a prebuilt set of components. You can illustrate this concept in Source mode by typing <s:Bu, and noticing that you have two Button options to choose between.

Here I am putting the default set of code for specifying the namespace  in flex 4.5.

<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"
    xmlns:maps="com.google.maps.*" />

<fx:Declaration>

<fx:Array id="statesArray">

        <fx:Object>Alabama, AL</fx:Object>
        <fx:Object>Alaska, AK</fx:Object>
        <fx:Object>Arizona, AZ</fx:Object>
        <fx:Object>Arkansas, AR</fx:Object>

    </fx:Array>
</fx:devlaration>

</s:Application>

Here specifying the 3 different types of namespaces. Where does the namespace is pointing? Any idea..

If you point your browser to library://ns.adobe.com/flex/spark, you won’t get anything interesting. Although it looks like a path, it’s really just an identifier. Using the web address paradigm helps ensure that you won’t encounter package-naming conflicts. With this convention, you can create your own identifier using your web address, making it unlikely anyone else will use the same identifier.

Each MXML component tag should contain a namespace designation. We can just check it with an example I am using a button component. We can declare it using either mx or s namespace.

using spark

<s:Button/>

using mx

<mx:Button/>

The same synatx is used in the case of fx: I am just putting an array dclaration as an example

<fx:Declarations>
    <fx:Array id="statesArray">
        <fx:Object>Alabama, AL</fx:Object>
        <fx:Object>Alaska, AK</fx:Object>
        <fx:Object>Arizona, AZ</fx:Object>
        <fx:Object>Arkansas, AR</fx:Object>
    </fx:Array>
</fx:Declarations>

Namespace and third party libraries

If you work with a third-party library, code completion will add the library namespace definition for you as you add components from the third-party library. For example, if you download the Google Maps API (it is a SWC) and add it to your libs folder, typing <map is enough for code hinting to lead you to <maps:Map/>, and in turn, Flash Builder will create the Google Maps namespace.

<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"
xmlns:maps="com.google.maps.*" //Third party library

<fx:Declaration>

</fx:devlaration>

</s:Application>

In this post we have seen Creating Flex project in Flash Builder. In the next post we will check how we can set compiler options in Flash builder.

Setting compiler options in Flash Builder | Adobe Flex Tutorial #3