ActionScript Developement Once we save this, the Flex Builder will automatically compile the code, and pack into a nice little SWF. It will also generate an html and the JavaScript to load the SWF into it. Let’s double-click on the SWF to see the small application running. Once the application is running and we click on the button, we get the alert. One of the functionalities of this alert is that it blurs everything else and you can’t click or interact with the rest of the application until you click on the buttons of the Alert. This can be helpful whenever you need to acknowledge certain actions from the user. In a future article we will discuss different kinds of alerts. This modified version of the universally known Hello World program gives us an idea of how simple it is to code in Flex with the use of Flex Builder. Unfortunately, the Flex Builder is not free (except for Educational use). You can check the price tag on the Flex Builder at http://www.adobe.com/products/flex/features/ flex_builder/. Fortunately, for those of us who don’t have a boss who will readily buy a Flex Builder license for us, there is another option. The Adobe Flex SDK (Software Development Kit) comes with a command line compiler (mxmlc.exe); all we have to do is execute it along with the name of our mxml file, and it will do the rest. Let’s try a small example to understand all this (Figure 6). The first thing we need to do is find the mxmlc.exe. I found it in: C:\Program Files\Adobe\ Flex Builder 3 Plug-in\sdks\3.0.0\bin, but beware that the location could be different for you, since the one I found on my computer is the one that comes with the Eclipse Plug-in. Also you can have different versions of the compiler since you’ll have one for Flex 2, another for Flex 3, Listing 1. Building a simple app with an Alert
and yet another one for Flex 4. Once we have the version of the compiler that we want to use, we create our source file. We can use notepad, vi, or any other editor we like. For this example I used Notepad (Figure 7). Let’s copy the code from the previous example, paste it on an empty Notepad and save it as C:\Documents and Settings\ber\My Documents\Flex\command_line_test.mxml. Let’s open a command line box in order to compile it see (Figure 8). Since we know where the mxmlc.exe is, let’s just type its location, along with the compiler’s name, and the name of the source file. C:\Program Files\Adobe\Flex Builder 3
Plug-in\sdks\3.0.0\bin\mxmlc.exe command_line_test.mxml see (Figure 9).
With this, the compiler should have generated a SWF file. Just double click it and the outcome will be the same as the previous example see (Figure 10). The Flex Builder does the same thing as we just did, but it does it in a transparent way, since it already has the locations of the compiler and the source file. One disadvantage of using the Flex Builder is that it consumes a lot of memory since it has to run on Java. One disadvantage of not using the Flex Builder is that every time you make a change on the source code, you’ll have to compile it
Figure 9. Sample app command line 2
1. <?xml version="1.0" encoding="utf2. <mx:Application
8"?>
3. xmlns:mx="http://www.adobe.com/ 4.
2006/mxml"
layout="absolute">
5. <mx:Script> 6. 7.
<![CDATA[
8.
private function
9.
{
11.
}
10.
12.
Figure 10. Command line text
import mx.controls.Alert;
]]>
showAlert():void
Alert.show("You
clicked!");
13. </mx:Script>
14. <mx:Button x="50" y="69"
label="Button"
click="{showAlert()}"/ >
15. </mx:Application>
20
Figure 11. Flex builder new project
and reload it to view the changes you made. Personally, I prefer using the Flex Builder because of the ease of use, but if it ever stopped working, it’s good to know you have other options so you don’t stay stranded. Now that we know we don’t depend on any tool to make Flex applications (except for the SDK), let’s also make a small application in which we shall see how to make a simple animation for an image. We shall create a new flex project on the Flex Builder (File>New>Flex Project), and we shall name it Simple Animation see (Figure 11). As you can see in the image above, we could make this application an AIR application, but we’ll do that on a future article. Once we click the Finish button, the Flex Builder automatically creates a main.mxml file, which is the main application and in which we will type (or paste) the following code (Listing 2). Now, let’s explain what we’re doing. We added a button to the canvas, and an image. The button will have the label Show Image and will execute the ActionScript function showImage(). The image will be embedded into the SWF, with the advantage that the image is part of the code itself, and the disadvantage that the SWF will be larger in size. The image is initially not visible. For that we have the void function showImage() on line 8, which takes the id of the image, and calls the attribute visible and changes its value to true. On line 15 we start defining the effect that we are going to apply to the image. In this case, we are going to use a Fade effect. For other available effects, refer to Flex Effects. We also have a showEffect attribute (line 30) on the image, which takes the id of the effect that it’s going to be used when the component is made visible. We could also use the hideEffect attribute and add it as a Fade out effect so if the image was to be hidden, it would also do it with the same effect that it was shown with (Fade out). After saving it, we view the SWF and we will see that when we click on the button, the image starts fading in, until the image is totally visible. So, as I mentioned before, with just a few lines of code, we animated an image. We can apply this type of animation to other Flex components, such as Canvas, TabNavigator, ViewStack, etc. It’s just a matter of playing around with the components and the effects. Now that we have a general idea of what Flex is, we can focus on what’s new, the new version of Flex, code named Gumbo. The main improvement in Flex 4 is GUI design. According to Adobe’s Ely Greenfield, the general purpose of the new SDK will be to give the designer complete control of the lookand-feel of a Flex application. Flex 4 will have, among other things, a new namespace MXML 2009 that will provide some enhancements, a new file format for vector graphics in xml, a new architecture for components and skinning, and improvements to existing features such as states, effects, transitions and layouts. 01/2009 (3)