Preamble

You read regulary random rants about the Flash Media Server or the Flash Player of Adobe from me. So, most of you know, that I’m working for a company which does a lot of Flex programing and dealing with installation and administration of Adobes Flash Media Server.
To prevent some problems with Adobes Flash Media Server I promised my colleagues, that I will test the open source Red5 Flash Media Server over the weekend. To make it short, Red5 rocks, at least in some areas it is much better then Adobes FMS, but in other ways (server side applications) it is totally different.
Anyways, I decided to start with a little workshop, to show you how easy it is to develop Flex applications on Ubuntu/Linux and how you deal with the Red5 Flash Media Server.
As time goes by, this workshop will evolve more and more, because what I have to show you, I have/had to learn by myself, without any books and without any help from the outside (not even from my colleagues at my company).
 

So, let us start.

What do we need?

1. Adobe Flex 3 SDK
2. Red5 Flash Media Server

Installation of Adobe Flex 3 SDK

• sudo apt-get install java-package sun-java6-jdk ant
• Download Adobes Flex 3 SDK and save it somewhere in your home.
• Create a directory under /opt for the Flex SDK (sudo mkdir -p /opt/flex)
• Change to /opt/flex and sudo unzip -x <your homedir>/<path where your stored the flex sdk zip>/flex_sdk_<flex sdk version>.zip
• Add /opt/flex/bin to your path, e.g. add "export PATH=/opt/flex/bin:$PATH" to your $HOME/.bashrc and relogin

You should now be able to call "mxmlc -help" and you should get the following:

user@host:~$ mxmlc -help
Adobe Flex Compiler (mxmlc)
Version 3.2.0 build 3958
Copyright (c) 2004-2007 Adobe Systems, Inc. All rights reserved.

-help [keyword] [...]
    For information on command line syntax and descriptions of
    configuration variables, specify a search string, or one of the
    following special keywords:
       syntax   - describe the general syntax of the command line
       list     - show a list of all basic configuration variables
       advanced - also match advanced configuration variables
       aliases  - sort using the short alias for the variable
       details  - always display the full details for each item
    Any other help keyword provided is used to match a full or partial
    configuration variable, alias, or text to search for in the
    description of the configuration variable.

    For example, '-help advanced aliases foo' would show all
    configuration options (both basic and advanced) containing the text
    'foo', sorted by alias name.

    In the description of individual configuration variables, required
    values are marked with angle brackets, and optional values are marked
    with square brackets.  The notation [...] is used to indicate that
    the values are a list of arbitrary length.

Testing the Flex SDK

Now our first application, the usual Hello World application. We will create two files, one for the UI and one for the logic. Let us start with the UI:

Our "HelloWorld" application will look like this:

As you can see (or not see :)), we use at least 4 different controls.

1. Panel Layout Container
2. VBox Layout Container (this is the one thing you don’t see in the picture)
3. Button Control
4. TextArea Control

The Source

We are creating our source with vim or emacs (depending on your taste). To start with our HelloWorld application we should create a directory for our workshop:

mkdir -p ~/flex_workshop/HelloWorld/
cd ~/flex_workshop/HelloWorld/
vi HelloWorld.mxml

Now we are editing our first file. As you can guess from the file extention it will be a type of XML formated file. You will find the whole source as attachement to this article, so I will only explain the special Flex Tags in this file.

The first tag we need is the <mx:Application></mx:Application> tag. This will give us the Application Context of our "HelloWorld" Application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="640" height="480">
</mx:Application>

You can read, that it uses a special namespace declaration and the parameters as layout, width and height. Those parameters are declaring the general "design" of our application. It just reads: Use an absolute layout of 640 width and 480 height.
Now we need the panel. As this is XML notation, we are guessing that from now on everything belongs between the mx:Application tag.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="640" height="480">\
   <mx:Panel x="34" y="20" width="498" height="274" layout="absolute" title="The most common application">
   </mx:Panel>
</mx:Application>

You see, that the syntax of this markup is straight forward, the only thing you have to know are the tags, parameters and what they mean. All this you can read at Adobe LiveDocs of Flex 3. Anyways, our final UI looks like this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="640" height="480">
   <mx:Panel x="34" y="20" width="498" height="274" layout="absolute" title="The most common application">
       <mx:VBox y="10" height="214" width="458" horizontalCenter="0" verticalAlign="top" horizontalAlign="center">
            <mx:Button label="Click Me!" id="btnClickMe"/>
            <mx:TextArea height="145" width="390" id="output" editable="false"/>
        </mx:VBox>
   </mx:Panel>
</mx:Application>

Just save this file as you normally do. You should now have a file named "HelloWorld.mxml" in your directory. What we need to do is to compile it into an SWF file. Now our Flex 3 SDK comes into the game. Let us try this:

user@home:~/flex_workshop/HelloWorld/ > mxmlc --strict HelloWorld.mxml
Loading configuration file /opt/flex/frameworks/flex-config.xml

If everything went ok, you should have a HelloWorld.swf file now. Just load this file directly in your Mozilla Firefox and check if it is working. It works, right? But right now, this application just does nothing, only showing some controls and pressing the "Click Me" button control does give you nothing. Let’s change that now.

The Logic

The first thing we need to know is when is our HelloWorld application fully loaded. Actually this is not cruical for us now, but in the future you will want to know when your application is fully loaded inside the flash players sandbox, especially when your application grows. So we will add a new parameter to <mx:Application> tag.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="640" height="480"
    applicationComplete="applicationComplete(event)">

This will add our first event handler callback for our application. This event will be triggered, when the sandbox thinks that our application is fully loaded. Now we need to implement this event handler. For this to happen we will add a <mx:Script> section to our MXML file.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="640" height="480"
    applicationComplete="applicationComplete(event)">
    <mx:Script>
        <![CDATA[
        ]]>
    </mx:Script>

Between the <mx:Script> tag there is a the standard xml CDATA notation for text which should not been parsed by the xml parser. Therefore, we will add our program logic between those tags:

<mx:Script>
        <![CDATA[
        import mx.events.FlexEvent;

        public function applicationComplete(event:FlexEvent):void
        {
        }
        ]]>
</mx:Script>

 Now we created the applicationComplete Handler, and this handler will really be executed after the application is loaded into the flash sandbox. To see it in action let us just add more code to our application.

import mx.events.FlexEvent;
        public function applicationComplete(event:FlexEvent):void
        {
            output.text+="Application Fully Loaded\n";
            btnClickMe.addEventListener(MouseEvent.CLICK,onBtnClickMe);
        }
       
        private function onBtnClickMe(event:MouseEvent):void
        {
            output.text+="Hello World !\n";
        }

What have we here? In our "applicationComplete" event handler we told our TextArea control with the name "output" to add a string to its text property. So when our application is fully loaded, applicationComplete event will be triggered, and we can see in our textarea the message "Application Fully Loaded".
The next thing we did is to add an event listener for the Button control. The "addEventListener" method takes an event type and a callback function reference as parameters, so we want to react on a click of our mouse button (MouseEvent.CLICK) and if the event is triggered we want to have the method "onBtnClickMe" executed.
The method "onBtnClickMe" just adds another piece of text to the TextArea control, everytime you click on the Button control.

Now let’s compile the complete source again via

user@home:~/flex_workshop/HelloWorld/ > mxmlc --strict HelloWorld.mxml

And when you now reload the resulting SWF file in your browser you will get this application:

(Click here if you can not see the flash application)

Next Steps

The next steps are to install the Red5 Flash Media Server and to explain how to connect via Flex to those server services.

Stay tuned for the second part of this workshop.