• getHours()
• getMinutes()
• getSeconds()

So, in order to take advantage of these useful methods, all we have to do is initialize a “fake” date using the amount of seconds we want to “split” into hours, minutes and seconds. The Date class has several OPTIONAL arguments that can be specified during its initializations, these are:

• year
• month
• date (day number)
• hours
• minutes
• seconds
• milliseconds

Because theme all are optional, we can create a date object by specifying only the know arguments (in our case seconds) and by assigning null or zero to the others:

Then by calling getHours, getMinutes and getSeconds we will obtain what we expect:

Not sure about the result? Let’s test it:

60 * 60 * 2 = 7200; (seconds contained in 2 hours)
32 * 60 = 1920; (seconds contained in 32 minutes)
7200 + 1920 + 17 = 9137; (original seconds!)

Problem:

You want to generate documentation for your package(s), but when you type asdoc command in the terminal you get a lot of errors such:

Type was not found or was not a compile-time constant: File.
Type was not found or was not a compile-time constant: Vector

…and so on

Solution:

You have to use -external-library-path option to include AIR swc, because AIR classes are located into external swc apart from Flex framework.
These files are under /sdks/{yourSDKVersion}/frameworks/libs/air/ (where “{yourSDKVersion}” is the version of Flex SDK you are using to deploy your applications) and are the following five:

• airframework.swc
• airglobal.swc
• applicationupdater_ui.swc
• applicationupdater.swc
• servicemonitor.swc

The first 2 should be imported with -external-library-path option anytime you use AIR classes, the others are necessary only if you are using the update framework and/or serivicemonitor.

The following is an example of how to use the asdoc command with the option discussed:

./asdoc -source-path=/Users/davidezanotti/Documents/workspace/myproject/src/ -external-library-path=/Applications/Adobe\ Flex\ Builder\ 3\ Plug-in/sdks/3.3.0.4589/frameworks/libs/air/airframework.swc,/Applications/Adobe\ Flex\ Builder\ 3\ Plug-in/sdks/3.3.0.4589/frameworks/libs/air/airglobal.swc -doc-sources=/Users/davidezanotti/Documents/workspace/myproject/src/ -output=/Users/davidezanotti/Desktop/doc

The code above will succesfull generate documentation for all classes under the folder “/Users/davidezanotti/Documents/workspace/myproject/src/” to the “doc” folder on the desktop.

Vector class is a powerful class introduced with flash player 10. It is fundamentally a special typed array into which all elements must be the same type and it is faster than a normal Array.

What you maybe don’t know:

It’s possible to initialize a Vector with an Array or another Vector as a source but you must use the Vector function not the class constructor. The class constructor in fact has the following signature:

Vector function instead has this:

So, rather than using such approach:

We can do the following (Notice the absence of “this” keyword):

The classes diagram of this pattern is composed by an interface or an abstract class which will define the supertype of the class that will be extended (decorated) by one or more classes implementing the same interface and extending an abstract class which identify these as decorator classes.

A real scenario into which apply this pattern can be a cars store. A car is the base class and the accessories such dvd player, gps, air conditioning and so on, can be thought as decorators. Once decorated, the car (which has a method getPrice() which returns its cost) will get updated by accessories, so calling the getPrice() method will include the price of the “naked” car plus the price of the various accessories installed.

Let’s take a look to the classes…

The interface above will be implemented by all the classes and we will treat the car as an IVehicle not a concrete Car class.
This is our simple Car class:

Now is time to see the decorators (in our scenario the accessories). This is the abstract Accessory class, all accessories will extend it:

In Accessory we can notice that the class encapsulate an object of IVehicle which is passed to the constructor (of course since this class is abstract the object will be passed to the constructor of Accessory’s subclasses). This is the key concept of decorator pattern, all decorators keep a reference of the interface they are going to decorate and this reference is used as the base for methods business logic. Let’s see how:

DVDPlayer is a concrete decorator and it uses the encapsulated IVehicle object in order to provide an extended version of the interface methods (getPrice() and getDescription()). Basically it uses first the reference methods and then it adds some other values.

To use the pattern we will first instantiate a Car object, than we will wrap it with one or more decorators:

The output will be:

Price: 50000 - description: Base car
Price: 50550 - description: Base car, DVD Player
Price: 50875 - description: Base car, DVD Player, GPS System

The order into which we wrap the concrete component (Car) is indifferent (we can add GPSSystem before or after DVDPlayer) and of course despite its readability, we can wrap the Car in a single statement:

In this example I used very simple classes, however in a real implementation we can create more sophisticated decorators which will accept extra arguments beyond the IVehicle reference.

Example:

var myString = "000123";
alert(parseInt(myString));

The code above will alert 83 instead of 123 (because the default base guessed by Javascript isn’t 10 like in Actionscript), to get 123 the code must be:

var myString = "000123";
alert(parseInt(myString, 10));

In conclusion Actionscript and Java have a  lot of stuff in common, the syntax and structure is quite the same, except for some issues like abstract classes and methods, multiple methods and constructors declaration (override). The main difference is that Java provides an huge number of Classes that Actionscript doesn’t, however it seems not so hard to translate Java code and implement Java functionality in Actionscript.

I hope I won’t have to deny my words :)

Alert.show("Alert message", "Alert title", Alert.OK | Alert.NO | Alert.CANCEL);

The code above generates an alert with 3 buttons (ok, no and cancel), but how it works exactly? Well, I don’t want to rewrite the article I read, but I would like to synthesize it and focus on an Actionscript usage, in order to give the basic information required to create custom classes which will accept multiple parameters an unique argument. So… what Alert.OK, Alert.NO and so on are? They are basically numbers (uint), and the result of the bitwise or operator still returns an integer, so the Alert class will receives a number as the third argument. The | operator, in practice produces a “binary sum” of the given numbers. A good way I figured out to understand what is going on when using that operator is to trace the binary representation of every number passed and then the result after the bitwise operation. To convert a “normal number” (base 10) into a binary one (base 2… only 1 or 0 sequence), we can use the toString() method by passing 2 as the radix argument:

var myNumber:uint = 3560;
trace(myNumber.toString(2));

The code above will trace: 110111101000.

So, let’s create a dummy class to do some tests:

package {

    public class BitwiseTest {

        public static const FLAG_1:uint = 1;
        public static const FLAG_2:uint = 2;
        public static const FLAG_3:uint = 4;
        public static const FLAG_4:uint = 8;
        public static const FLAG_5:uint = 16;
        public static const FLAG_6:uint = 32;

        public function BitwiseTest() {

            trace("BitwiseTest.FLAG_1: " + BitwiseTest.FLAG_1.toString(2));
            trace("BitwiseTest.FLAG_3: " + BitwiseTest.FLAG_3.toString(2));
            trace("BitwiseTest.FLAG_5: " + BitwiseTest.FLAG_5.toString(2));
            trace("BitwiseTest.FLAG_6: " + BitwiseTest.FLAG_6.toString(2));

            this.test(BitwiseTest.FLAG_1 | BitwiseTest.FLAG_3 | BitwiseTest.FLAG_5 | BitwiseTest.FLAG_6);

        }

        private function test(flags:uint):void {

            trace("flags: " + flags.toString(2));

        }

    }

}

The trace output will be:

BitwiseTest.FLAG_1: 1
BitwiseTest.FLAG_3: 100
BitwiseTest.FLAG_5: 10000
BitwiseTest.FLAG_6: 100000
flags: 110101

To check for a specific flag’s presence inside flags argument, we can use the bitwise “and” operator (&):

if ((flags & BitwiseTest.FLAG_1) > 0) {

    trace("BitwiseTest.FLAG_1 passed - (" + String(flags & BitwiseTest.FLAG_1) + ")");

}

By using the & operator on flags it will returns the flag’s value if passed to the method and 0 otherwise. By updating the test method in this manner:

private function test(flags:uint):void {

    trace("flags: " + flags.toString(2));

    if ((flags & BitwiseTest.FLAG_1) > 0) {

        trace("BitwiseTest.FLAG_1 passed - (" + String(flags & BitwiseTest.FLAG_1) + ")");

    }

    if ((flags & BitwiseTest.FLAG_2) > 0) {

        trace("BitwiseTest.FLAG_2 passed - (" + String(flags & BitwiseTest.FLAG_2) + ")");

    }

    if ((flags & BitwiseTest.FLAG_3) > 0) {

        trace("BitwiseTest.FLAG_3 passed - (" + String(flags & BitwiseTest.FLAG_3) + ")");

    }

    if ((flags & BitwiseTest.FLAG_4) > 0) {

        trace("BitwiseTest.FLAG_4 passed - (" + String(flags & BitwiseTest.FLAG_4) + ")");

    }

    if ((flags & BitwiseTest.FLAG_5) > 0) {

        trace("BitwiseTest.FLAG_5 passed - (" + String(flags & BitwiseTest.FLAG_5) + ")");

    }

    if ((flags & BitwiseTest.FLAG_6) > 0) {

        trace("BitwiseTest.FLAG_6 passed - (" + String(flags & BitwiseTest.FLAG_6) + ")");

    }		

}

We will obtain this output:

BitwiseTest.FLAG_1: 1
BitwiseTest.FLAG_3: 100
BitwiseTest.FLAG_5: 10000
BitwiseTest.FLAG_6: 100000
flags: 110101
BitwiseTest.FLAG_1 passed - (1)
BitwiseTest.FLAG_3 passed - (4)
BitwiseTest.FLAG_5 passed - (16)
BitwiseTest.FLAG_6 passed - (32)

We have successfully “intercepted” what flags has been passed to the method.
Is important to know that flag’s values can’t be progressive numbers, but they must be multiples of 2, otherwise when using the bitwise “or” operator we will obtain a “ones overlap” resulting in an entity we won’t be able to properly manage. If we replace the flags values used in the previous example in this way:

public static const FLAG_1:uint = 1;
public static const FLAG_2:uint = 2;
public static const FLAG_3:uint = 3;
public static const FLAG_4:uint = 4;
public static const FLAG_5:uint = 5;
public static const FLAG_6:uint = 6;

We will get the following output:

BitwiseTest.FLAG_1: 1
BitwiseTest.FLAG_3: 11
BitwiseTest.FLAG_5: 101
BitwiseTest.FLAG_6: 110
flags: 111
BitwiseTest.FLAG_1 passed - (1)
BitwiseTest.FLAG_2 passed - (2)
BitwiseTest.FLAG_3 passed - (3)
BitwiseTest.FLAG_4 passed - (4)
BitwiseTest.FLAG_5 passed - (5)
BitwiseTest.FLAG_6 passed - (6)

As we can see our test method is unable to understand what flags it has received due to “ones overlap” (looks at te first 5 lines).

In conclusion… using bitwise operators for flags are pretty simple, however bitwise operators can do much more but understanding the real power of these operators and how to properly use them is not so easy (at least to me :-))

Fundamentally there are two ways to realize custom Flex’s components: one (and the easiest) is to create an MXML file, the second is to create an Actionscript class.

MXML component

The MXML file will contains a components like a Canvas (which is an excellent class to start to build on) as the root node, instead of the classic Application and it will be filled by others several small components already available in Flex (Label, TextField, Button…), realizing a new complex object which can will be used inside MXML Applications by simply writing a tag with the same name of the MXML file. Another step required is to create an XML name space for the custom component created, this can be accomplished simply by insert an xmlns attribute inside the Application node, similarly to the default mx name space from adobe (xmlns:mx=”http://www.adobe.com/2006/mxml“), it must report a name after the colons and a path to the package containing the component. This is an example of a name space declaration for my own custom tag:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:dz="com.daveoncode.controls.*" layout="vertical">

It creates a name space called “dz” for all the classes (the “*” wildcard means “all”) inside the package “com/daveoncode/controls”. This is instead how a simple MXML based component could be (this is only a basic example, a such component is pretty useless):

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="Login" width="400" height="300">
    <mx:Form>

        <mx:FormItem label="UserName:">
            <mx:TextInput width="200" />
        </mx:FormItem>

        <mx:FormItem label="Password:">
            <mx:TextInput width="200" displayAsPassword="true" />
        </mx:FormItem>

        <mx:FormItem>
            <mx:Button label="Login" />
        </mx:FormItem>

    </mx:Form>
</mx:Panel>

Now, supposing that we save the example above as LoginPanel.mxml, under “com/oursite/components”, we can use it in a mxml Application in this way:

<mx:Application xmlns:cc="com.oursite.components.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <cc:LoginPanel />
...

This is pretty cool, because lets us separate defined areas of a GUI (like a login panel) and reuse them everywhere with no efforts… although this is an useful thing, is not so much exciting as creating a real custom component (something that is not made of other existent Flex components), whit its own properties, methods and style support!
To create such object, we should write it entirely in Actionscript.

Actionscript component

We can start from extending an existent Flex class, in order to inherit all the necessary methods to interact properly with the framework. The most important thing to know, is how to handle our class configuration, in fact in Flex we can’t put configuration logic inside constructor, because it will be automatically called by Flex every time a tag with the components name is encountered and there is no way to pass arguments to the constructor from the MXML tag, so such approach:

public function MyCustomComponent(param1:String, param2:Number) {

    this.param1 = param1;
    this.param2 = param2;

}

cant’ be used! We have instead to write getter and setter which will be automatically called by Flex when required. This kind of getter/setter must use Actionscript’s get and set keywords, in order to get/set a property. So, we have to forget classic getter/setter methods like:

public function setMyParam(value:String):void {
    myParam = value;
}

public function getMyParam():String {
    return myParam;
}

and adopt these:

public function set myParam(value:String):void {
    myParam = value;
}

public function get myParam():String {
    return myParam;
}

The get/set key is a really cool feature of Actionscript language, because it lets to set an object property in a declarative manner (myObject.property = X), without renunce to encapsulation. In this way when in MXML file we will declare tag’s attributes:

<cc:MyCustomComponent myParam="Hello!" /> 

Those setters will be used… but when exactly? Good question, another thing to understand, in order to realize custom and good components, is in fact the creational procedure adopted by the framework, which is divisible in these steps (in execution order):

1. Construction: in this step the component is instantiated and code inside the constructor is executed (typically the code will consist of a calling to super() and optionally event listeners configuration and few more)
2. Configuration: getters methods are invoked by Flex to configure class’ instance
3. Attachment: this step occours only when the component is added to the display list. This is an automatic task if the component is called from an MXML (with the relative tag) and occours through Actionscript when addChild() or addChildAt() are invoked
4. Initialization: this is the most intense phase, because during initialization a lot of tasks are performed and several methods invoked. The first thing that happens is the dispatching of preinitialize event (FlexEvent.PREINITIALIZE), then the protected method createChildren() is called (we have to override this method in order to populate our custom components with desired content), after its execution another event is dispatched, this time is the initialize (FlexEvent.INITIALIZE). After these, a series of invalidations and validations operations occours and finally creationcomplete is dispatched (FlexEvent.CREATION_COMPLETE)

I realized a custom component called StarPicker, it is a control which can be used to rate objects (songs,  movies, books…) by selecting (with a click) among N stars (N is one of the several parameters that can be configurated by the user, such color, size, space between stars and so on),  it is bindable (we can bind another control to StarPicker’s value) and finally it support CSS styles… yes, with Flex we can create extreme custom components that will support custom user-defined properties (such “power”, “coolness”…). Although I’m quite embarrassed (because I’m not already so confident with Flex), I’m going to show you how I realized my first Flex component.

My first step was create an Actionscript class (under my package “com.daveoncode.controls”) which extends Canvas, then I defined several public constants for default settings, by using the Flex naming convenction “DEFAULT_MY_SETTING_NAME”, several private variable to handle settings values and as many private variables to track settings changes. So, before the constructor I’ve such stuff (every prameter has 3 types of variables/constants related to it):

public static const DEFAULT_STARS:uint = 5;
// ...more constants

private var _stars:uint;
// ...more vars

private var starsDefined:Boolean;
// ...more booleans

The constructor contains a call to super and some listeners creation (and I enable the doubleclick over the component):

public function StarPicker() {

    super();

    // This component allows double click in order to deselect stars
    this.doubleClickEnabled = true;

    // Listens for preinitialize event
    this.addEventListener(FlexEvent.PREINITIALIZE, this.preInitializeHandler);

    // Listens for the click event over the stars
    this.addEventListener(MouseEvent.CLICK, this.clickHandler);

    // Listens for the double click event over the stars
    this.addEventListener(MouseEvent.DOUBLE_CLICK, this.doubleClickHandler);

}

The only thing I want to analize in the code above is the listener for FlexEvent.PREINITIALIZE… why I used this listener? The answer is: I use it to set default values if they are not provided by the user (with user I mean who use the component in the MXML file, not the Application’s user), because I want to handle default settings only after all the setters are called by Flex in order to set properly the boolean flags “myparamDefined”, which I use to grant the right precedence between style and inline tag’s attribute. If a flag is setted (myparamDefined == true) then when CSS assign a value to the same parameter this is not used, because inline attribute have the precedence and win. So the handler has several ternary operators like:

this._stars = this._stars == 0 ? StarPicker.DEFAULT_STARS : this._stars;

In order to populate the picker with stars I override  createChildren() method, into which I use addChild() to insert N Star object (which is a Class in the same package, which basically draws a star shape and has methods to change colors and size), I also override  measure() method which is used by Flex to know the exact size of the components (typycally when it must calculates clipping and resizing):

override protected function measure():void {

    super.measure();

    // StarPicker's height will be the same as the stars
    this.measuredHeight = this.measuredMinHeight = this._starSize + this._starBorderSize;

    // StarPicker's width will be the same as the sum of the stars width + space
    this.measuredWidth = this.measuredMinWidth = (this._starSize + this._starSpace) * this._stars;

}

In practice I’m telling Flex that my component should be never clipped and is larger as the sum of the stars width it contains. Oh… I also override the styleChanged() method, which is called by Flex every time a component’s style parameter changes:

override public function styleChanged(styleProp:String):void {

    super.styleChanged(styleProp);

    this._stars = this.stars;
    // ... other (re)settings

}

And style metatags? Yes, I putted them before class declaration:

[Style(name="stars", type="uint", inherit="no")]
// ... more styles

With style metatag we can declare the name of styles properties that our components will suport, so with the previous declaration will be possible to create CSS like:

.myCustomComponent {
    stars: 4;
}

Ok, I wrote too much, this is an example of the custom component that I realized (you can download, use and view source code by selecting “Flex components” on blog’s menu):

The example above is not a screenshot… you can test it ;-)

var arr2:Array = [];

while (arr.length > 0) {
    arr2.push(arr.splice(Math.round(Math.random() * (arr.length - 1)), 1)[0]);
}

How it works?

First we have to create a new array (arr2) which will contains the elements from the base ordered array (arr), then we use a while loop, which can be translated into english as: “do this until base array is not empty”. Inside the loop, we push into the second array a random element from the first array and, at the same time, we remove that element from its array. Array’s method splice() in fact, removes one or more elements from an array and returns an array containing the deleted elements, that in our case is only one (as specified in the second argument). The first argument of the method represent the starting index from which to start to delete, this is dynamically calculated by using the Math.random() method (which returns a number between 0 and 1), then multiplied by the length of the base array minus 1, because array length is always 1 greater than elements array contains (cause array indexing starts from zero), finally this number is rounded to the nearest integer by Math.round(), in order to access an exact index.

I think this is the best and shorter way to implement a shuffle functionality :)

package {

    public class MyClass {

        private var myVar:uint;

        public function MyClass(myVar:uint) {

            this.myVar = myVar;

        }

    }

}

However there are 3 valid reasons to (always) use  the “this” keyword:

1. Is an excellent way to visually differentiate between static and dynamic variable (static variables can’t use the “this” keyword, otherwise you get a compile error)
2. When invoking methods is immediately evident which is the class owner/target of the method itself
3. Faster typing and developing thanks to Flex Builder hints (after typing “this.”, I can select all the applicable methods, which is faster and error free than type the entire method name)