Archive for the 'Adobe Flex' Category

Implementing interfaces in mxml

Monday, May 19th, 2008

Most Flex developers are aware that mxml files are essentially declarative representations of ActionScript classes, that is, during compilation the mxmlc compiler generates ActionScript 3.0 classes from mxml files before being converted into bytecode that runs in Flash Player. This can be seen by setting the compiler argument -keep-generated-actionscript to true.

You may be thinking “yeah I know this, and…”, however in the past week I have had two talented Flex developers say to me: “but you can’t implement interfaces in mxml… Can you?”

Now if you think about that statement a bit more you will probably realize that you most certainly can, however it mat not seem so obvious at first as developers tend to think of mxml for what it is, a markup language and not necessarily from a compilation perspective.

So in case you are not aware how interfaces can be implemented in mxml I have provided a few simple examples below which demonstrate how a custom component can implement an interface, in this case mx.rpc.IResponder.

First you define the interface that the component will implement using the implements property of the component.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
         implements="mx.rpc.IResponder" >
</mx:VBox>

Next you simply implement the operations defined by the interface as you normally would in a class:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
         implements="mx.rpc.IResponder" >
    <mx:Script>
        <![CDATA[

            public function result(data:Object) : void
            {
                // implementation
            }
           
            public function fault(info:Object) : void
            {
                // implementation
            }
        ]]>
    </mx:Script>
</mx:VBox>

Now you may be wondering how multiple interfaces are implemented in mxml? This is very easy as well, simply specify the fully qualified class path of each interface as a CSV (Comma-separated values). An example can be seen in the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
          implements="mx.rpc.IResponder,mx.core.IUID" >
    <mx:Script>
        <![CDATA[
                public function result(data:Object) : void
                {
                     // implementation…
                }

                public function fault(info:Object) : void
                {
                     // implementation…
                }

                public function get uid() : String
                {
                     // implementation…
                }

                public function set uid(value:String) : void
                {
                     // implementation…
                }
        ]]>
    </mx:Script>
</mx:VBox>

And that’s all there is to it.

Package-level function closures in ActionScript

Tuesday, May 6th, 2008

Package-level function closures are very useful for creating generalized functionality which does not require a class (static methods) or instance of a class (instance methods).

Unlike static and instance methods package-level function closures are not associated with a class or instance of a class but rather with a package. There are no syntactical differences between package-level functions and static or instance methods.

Package-level functions are for the most part utility functions; for instance the flash.utils package contains a number of package-level functions, the most common of which are describeType(), getDefintionByName(), getTimer() and so forth.

Package-level function closures are created by defining a function directly inside the body of a package (where class and interfaces are defined), as can be seen in the following example:

package com.ericfeminella.display
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.IBitmapDrawable;
import mx.graphics.ImageSnapshot;

/**
 *
 * Creates a snap shot of a <code>Bitmap</code> object
 * from the specified <code>IBitmapDrawable</code>
 * implementation.
 *
 * @param  display object in which to create the snapshot
 * @return <code>Bitmap</code> snapshot of the display object
 *
 */
    
public function createSnapShot(target:IBitmapDrawable) : Bitmap
{
    return new Bitmap(ImageSnapshot.captureBitmapData(target));
}
}

Calling a package level function is straightforward, simply import the function just as you would a class or interface and then invoke the function directly…

// import package function
import com.ericfeminella.display.createSnapShot;

// once imported the function can be invoked
createSnapShot( this );

Typically you will find that most functionality can be grouped to a Class or an instance object, however on occasion you may identify specific functionality which is common to packaged functionality as opposed to a specific object, and in these cases utilizing package-level functions is a great option.

Passing …(rest) parameters between functions

Tuesday, April 22nd, 2008

At some point when developing an application with ActionScript 3 you may need to pass a …(rest) parameter to a subsequent function call, and although at first this may appear to be pretty straightforward, doing so will not produce the results one might expect.

For example, consider the following method doSomething which accepts a single …rest parameter:

public function doSomething(rest) : void
{
    var n:int = rest.length;
    trace( "…rest.length = " + n );

    for (var i:int = 0; i < n; i++)
    {
         trace( rest[i] );
    }
}
doSomething("a","b","c");

// outputs:
// …rest.length = 3
// a
// b
// c

Let’s say we also have another function we need to invoke called doSomethingElse which accepts a …(rest) parameter as well:

public function doSomethingElse(rest) : void
{
    var n:int = rest.length;
    trace( "…rest.length = " + n );

    for (var i:int = 0; i < n; i++)
    {
         trace( rest[i] );
    }
}

Now suppose we need to pass the ...(rest) parameter from the doSomething function to the doSomethingElse function. The result would be as follows:

public function doSomething(rest) : void
{
    var n:int = rest.length;
    trace( "…rest.length = " + n );

    for (var i:int = 0; i < n; i++)
    {
     trace( rest[i] );
    }
    doSomethingElse( rest);
}
// doSomething outputs:
// …rest.length = 3
// a
// b
// c

// doSomethingElse outputs:
// …rest.length = 1
// a,b,c

So what went wrong? What happens is the original …rest parameter (passed to doSomething) is now being passed as a single parameter of type Array to the subsequent function (doSomethingElse), not as an Array of individual arguments as you may have expected.

This can easily be resolved by using Function.apply(); as can be seen in the following:

public function doSomething(rest) : void
{
    var n:int = rest.length;
    trace( "…rest.length = " + n );

    for (var i:int = 0; i < n; i++)
    {
     trace( rest[i] );
    }
    doSomethingElse.apply( null, rest);
}
// doSomething outputs:
// …rest.length = 3
// a
// b
// c

// doSomethingElse outputs:
// …rest.length = 3
// a
// b
// c

What we are doing is applying the call to the doSomethingElse function with the original rest parameter as if we were invoking the function directly. So keep this in mind should you ever need to pass a …rest parameter to a subsequent function.

IExpense Online (IEO)

Wednesday, April 16th, 2008

With Income Tax Returns approaching, now is as good a time as ever for me to blog about IExpense Online (IEO).

IExpense Online is the creation of my friend and co-worker Michal Glowacki. It is one of those Flex apps that really showcases what can be accomplished in Adobe Flex with a little creativity and dedication.

Built entirely in Flex, Cairngorm, PHP and MySQL, IExpense is a Free Tool which allows users to intuitively and intelligently manage their expenses and make sound budgeting decisions. You can try it out by logging in as a guest or creating a free account.

So make the most of your tax returns and check out IExpense Online (IEO).

IExpenseOnline