Adobe Flex Tutorials

Hello,

Lets start learning flex...

I am here to share my knowledge on flex.

I will be starting with some hands-on examples so that you can be familiar using Flash Builder -

You can download Flash Builder(trial version for 60 days) from adobe website.

Lets start with Flex Basics --

I am using Flash Builder 4, Flex SDK 4.1.

In this post will see -

1. How to create a Flex Project
2. How to create and use custom components
3. Data Request and data binding

1. How to create a Flex Project –

Open Flash Builder 4

File->New->Flex Project

Select the options as in above screenshot and click Next.

Let the output folder be: bin-debug click Next.

Don’t make any changes click Finish.

You will see FlexBasics project created as below -

Now will see FlexBasics.mxml(View Code) –

• XML namespace identify sets of related tags
• A namespace in Flex identifies a set of MXML tags by prefix and three primary Flex framework namespace are –

1. fx: groups core functionality
2. mx: Flex 3 MX components
3. s:  New Flex 4 Spark components

• Namespace in MXML file relates to a specific manifest in flex-config.xml which in turn relates to Actions Script Classes.
• You can find flex-config.xml file in frameworks directory under Flex sdks.

As you can see in Editor there are two views Source and Design.

Let’s switch to Design Mode -

In design mode will configured some controls as below –

Now will see this in detail –

• Select application layer, under properties view, open layout branch and select Layout: spark.layout.HorizontalLayout.
• In design mode you get components view, open layout branch and drag an HGroup container into the application.
• From Controls branch, drag an Image control into HGroup.
• Open layout branch and drag a VGroup container into HGroup.
• From Controls branch, drag five Label controls into VGroup.
• Rename labels as Name, Emp Id, Jod Id, Skill and Exp respectively.

You get properties panel for each controls we used above i.e. HGroup, VGroup and Label, just play around to get a fair idea.

Let’s switch back to Source view(View Code) –

Right click on FlexBasics.mxml Run As->Web Application
Review the output.

2. How to create and use custom components - 

Right click on FlexBasics->src and navigate to New->Package

Create a Package name it as components.

Now Right click on package components and create New->MXML Component and name it as custComp.

Will add code to custComp.mxml file.
Open FlexBasics.mxml file cut the code between the tags s:HGroup and paste in below the fx:Declarations tags in custComp.mxml file. Your code should look like below screenshot in custComp.mxml.(View Code)

Right click on FlexBasics.mxml Run As->Web Application

Review the output, its nothing.

Will have to call the custComp.mxml from FlexBasics.mxml, since we have moved the code.

Open FlexBasics.mxml, within the application tag add the following code which includes components package(View Code).

Now will call custComp.mxml component from FlexBasics.mxml as(View Code).

Right click on FlexBasics.mxml Run As->Web Application

Review the output.

Now will discuss about adding data to Image and Label fields.

3. Data Request and data binding - 

Create a Package name it as images.

Add any four images and name it as -

img1.jpg, img2.jpg, img3.jpg and img4.jpg respectively.

Create a Package name it as data.

Right click on data package, create new File and name it as data.xml and add the following lines to data.xml(View Code).

Your FlexBasics project view -

Open FlexBasics.mxml, will get data from data.xml file by making a HTTP request.
Type the following code within declarations tag, do not copy paste(View Code).

As you type result you will get an option to generate result handler click on it to generate function -

protected function getData_resultHandler(event:ResultEvent):void

{

// TODO Auto-generated method stub

}

Declare a variable within the Script tag:

[Bindable]
public var empData:ArrayCollection;


Assign value to empData variable -
empData = getData.lastResult.data.details;
Your code should look like (View Code) -

Right click on FlexBasics.mxml Run As->Web Application

Review the output.There is no change in output.

We have to assign values to Image and Label fields in custComp.mxml.

Open custComp.mxml, declare a variable of type ArrayCollection within Script block so that we can pass empData from FlexBasics.mxml(View Code).

Open FlexBasics.mxml, pass empData to custComp component.

<comp:customComp dataProvider="{empData}">

Open custComp.mxml, assign values to Image and Label fields(View Code).

Right click on FlexBasics.mxml Run As->Web Application

Review the output, now you see data.

Now we will access other data using Next and Previous buttons -

Open custComp.mxml, switch to design mode add two buttons below Label and name them as Next and Previous and also assign id to these two buttons as "next" and "prev" respectively.

Now switch to Source mode and review your code with the code below. I added "click" event to both the buttons and also generated click event handler functions for both buttons.

Verify the logic for Next and Previous button in 

function next_clickHandler(event:MouseEvent):void and 

function prev_clickHandler(event:MouseEvent):void.

Right click on FlexBasics.mxml Run As->Web Application

Review the output.

Enjoy Flex !!!