Shaikh Sonny Aman’s Blog

previously www.mailtoaman.com

Learning Flex3 Task1: IDE and basic application

Posted on | June 7, 2008 |

You know xhtml? Or have some knowledge on html or xml syntax with some javascript concepts? Yes? Cool, you will find flex3 with ActionScript is almost nothing more than developing a html page with javascript. As you know there are some built in libraries in javascript like Math, ActionScript with Flex has some extra libs present. That’s all.

Now, let’s get going.

Windows users can get the FlashDevelop software from www.flashdevelop.org/. It is a nice actionscript development environment. Linux users can Eclipse and get the instructions from http://www.communitymx.com/content/article.cfm?cid=F3ECF or can use SE|PY from sourceforge.net/projects/sepy/.

I am using FlashDevelop at present while writing this.

Here is a simple typical hello world application code:

<?xml version=”1.0″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Label text=”Hello world”/>

</mx:Application>

Code Break Down:

First line the xml header. The flex files are saved as msxml format which is nothing but an xml file. So, this header must be present

Then comes mx:Application. This starts the application. Anyone who is not familiar in xmlns or the Xml Name Space can think it as a prefix to the component. This prefix helps to distinguish the components. Say, you have made a custom label component of you own and named it too Label. Now how the compiler come to know that which one is your label or application label. So to meet this problem you can use your own namespace like xmlns:smarty=”xxxx”. Now on you can use your Label like smarty:Label.

Lastly, <mx:Label text=”Hello world”/>. This self explanatory statement adds a label in the application and sets the text “Hello world”. It is very similar to html tags, right?

Generally, we use Panel as container of all elements. It not only looks little better but also help organizing the UI elements.

<?xml version=”1.0″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Panel title=”App 1″>

<mx:Label text=”Hello world”/>

</mx:Panel>

</mx:Application>

Here is how it looks now:

FlashDevelop instructions:

1. Create a new flex3 project.

2. Save the code in the Main.msxml file.

3. Press F5. simple hah?

Download file Main.mxml

Next: Learning FLex3 Task2 : First action and accessing component property

Category: Flex

Comments

Leave a Reply