Sunday, June 12, 2011

Creating Your First Flex Application

Today we will create our first "Hello world" Flex application.

Open the project that we've created in FlashDevelop earlier. If you haven't changed anything in the code that was automatically put in the Main.mxml file when you created the project, then the code will look like this:

<?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">

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

</s:Application>

I've already explained the s:Application tag and namespaces in the previous tutorials. The other thing that is added to the script is the fx:Declarations tag. This is, as the comment in the code says, the place where we can put non-visual elements using mxml. We will learn about this in detail later, and it is not essential to have this in our script, so we can remove it for now.

Now, let's actually add something. Let's create a Label component, which is basically a text field. We'll use the spark namespace, and set the text, x, y and id attributes of this component. The text is, obviously, what will be displayed in this Label object. The x and y attributes will be used to define the coordinates of the object. The id attribute is used to set an unique id for this object, this is similar to the id tag attributes in HTML, as well as the instance property of objects in Actionscript.

And we'll have this:

<?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:Label text="Hello world!" x="10" y="10" id="myText" />

</s:Application>

Let's test our application now!

Find the "Test Movie" button on the FlashDevelop toolsbar, it looks like a "play" button:



Or, you could just use the CTRL+Enter combination, like in Flash. If the movie compiled all right - you'll see your text displayed in the result window. If you had any errors occuring, then you most likely didn't configure FlashDevelop correctly. Refer to the official FlashDevelop wiki.

Now let's add a button component. The procedure is similar, the resulting code will be something like this:

<?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:Label text="Hello world!" x="10" y="10" id="myText" />
<s:Button label="Click me!" x="10" y="25" />

</s:Application>

We can join these two objects into a container - a Group component, which is also in the spark namespace. If we do that, and then change the x attribute of the Group to 20, both the Label and the Button will be shifted 20 pixels to the right. Thus, if the Label has x=10, and the Group that contains this label has x=30, then, on a global scale, the resulting x of the Label will be x=30.

<?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:Group x="20">
<s:Label text="Hello world!" x="10" y="10" id="myText" />
<s:Button label="Click me!" x="10" y="25" />
</s:Group>

</s:Application>

And there we go. We have a Label and a Button components on the screen right now, grouped together under a Group container.




Next time we will add some AS3 script to add interactivity to this application.

Thanks for reading!

No comments:

Post a Comment