Hello World in Flex 4

In this example you can see how we can make a HelloWorld in Flex4.


Share on Google+Share on Google+

Hello World in Flex 4


In this example you can see how we can make a HelloWorld in Flex4.

Hello World In Flex 4:-

First you will install a Flash Builder 4 in your system for creating a Flex application in Flex 4. Now the question will arise How we will make a flex project in Flex 4. The process are following:

Step 1: Click File->New->Flex Project. The following image shows the structure.

Step 2: When you click on Flex project, a New Flex Project window opens. There are so many fields in this window for creating a Flex application.

1. Project Location: Set the path of the flex project or choose default location for the flex project.
2. Project Name: Write the name of the project in this field( like HelloWorld).
3. Application type: There are two categories first web and second one is Desktop application. Here we will choose web application.
4. Flex SDK version: It has two fields, first is Use Default SDK(currently "Flex4.0") and second is Use specific SDK. Here we will choose first field.
5. Server technology: It has two fields, first is Application server type and second is Use Remote Object access services. You can choose one technology from in this field which will be used for server interaction here we will choose None/Other. The following image shows the New Flex Project window.

Step 3: Now click on Finish button, it opens a new window. You will see the project directory structure in the left side named Package Explorer and HelloWorld.mxml file will be shown in the right side. It has two buttons Source and Design. When you click on Source button, the source code of the mxml file will be shown here and if you click the Design button the design part will be shown here. In the design part, the component will be shown in left down corner. You can simply drag and drop the component in design sheet.

The Source part image is following:

The Design part image is following:

Step 4: Now click the source button for writing a program for HelloWorld in Flex 4. The example is given below:

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"



minWidth="955" minHeight="600">


<!-- Place non-visual elements (e.g., services, value objects) here -->


<s:Label text="Hello World in Flex 4"

x="72" y="74" color="#FFFFFF"

fontSize="20" backgroundColor="#000000"

height="44" width="240"

textAlign="center" verticalAlign="middle"

fontWeight="bold" fontFamily="verdana"/>


In the above example Label is a spark component and it used the following attributes.

1. text: It will show the Label text "Hello World in Flex4".
2. x, y: These are used for change the x and y position of the Label.
3. color: to set the Label color.
4. backgroundColor: to set the background color.
5. height: to set the height of the Label.
6. width: to set the width of the Label.
7. textAlign: to set the text alignment center.
8. verticalAlign: to set the vertical alignment of the text in middle.
9. fontWeight: to set the font weight bold.
10. fontFamily: to set the font Family verdana.

Step 5: Now click on Design button to see the design and look and feel of "Hello World in Flex 4" label.

Step 6: Now save the project using Ctrl+S and run the application by using Ctrl+F11 or click on Run which is above of the screen and click on Run HelloWorld. The Output will be shown on the web browser. The output will be shown as following:

Running Application:

Download this code



Posted on: August 30, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles