The Open Coder » Flex

instanceof is bad in ActionScript

Chris McDonald — Fri, 15 Apr 2011 12:25:41 +0000

This is a quick post to let everyone aware that instanceof should be avoided like the plague in your Flex/ActionScript 3 projects. Coming from a Java development background I was quite familiar with using instanceof to test if a class is of a certain type, in Java this also matches interfaces, not so in ActionScript.

To illustrate the problem, here are some simple classes and an interface:

publicclass Vehicle {
privatevar_name:String;
    public function Vehicle(name:String)

    {

        _name = name;

    }
    public function get name():String

    {

        return _name;

    }
    public function drive():void

    {

        trace("Vehicle named "+_name+" drove.");

    }

}
public interface IManualGears {
    function changeGear(gear:int):void;
}
public class ManualCar extends Vehicle implements IManualGears {
    public function ManualCar(name:String)

    {

        super(name);

    }
    public function changeGear(gear:int):void

    {

        trace("Vehicle named "+_name+" changed gear to "+gear);

    }
}

If I were to create a new instance of ManualCar and tested for the interface IManualGears using instanceof it would fail, as shown below;

var car:ManualCar = new ManualCar("Ford Escort");
var isVehicle:Boolean = (car instanceof Vehicle);  //isVehicle would be true
var isManualCar:Booelan = (car instanceof ManualCar);  //isManualCar would be true
var hasGears:Boolean = (car instanceof IManualGears);  //hasGears would be false
hasGears:Boolean = (car is IManualGears);  //hasGears would be true;

To be fair this is stated in the flex documentation, but it did catch me out. So the moral of the story is to always use is instead of instanceof.

URL regular expression

Chris McDonald — Wed, 05 Jan 2011 13:30:26 +0000

This is just a quick post to share a regular expression for a URL I had to come up with when needing to validate a URL in a Flex app. The code below is for Flex, but would only require a few minor changes for another language, the double backslash before the ? appears to be required for Flex, using a single backslash does not work, read more about that in this older post. This also contains what would be capturing brackets in other languages, I could have used non-capturing brackets but that would have made this already complicated example even more difficult to read.

linkValidator = new RegExpValidator();

linkValidator.expression = "(http(s)?:\/\/)?(([a-z]+[a-z0-9\-]*[.])?([a-z0-9]+[a-z0-9\-]*[.])+[a-z]{2,3}|localhost)(\/[a-z0-9_-]+[a-z0-9_ -]*)*\/?(\\?[a-z0-9_-]+=[a-z0-9 ',.-]*(&[a-z0-9_-]+=[a-z0-9 ',.-]*)*)?(#[a-z0-9/_-]*)?$";

linkValidator.noMatchError = resourceManager.getString("lang", "invalidURL");

linkValidator.flags = "i";

linkValidator.source = linkTextArea;

linkValidator.property = "text";

linkValidator.trigger = linkTextArea;

linkValidator.triggerEvent = Event.CHANGE;

I’ll break it down to the individual sections with a brief explaination.

//protocol and subdomain
(http(s)?:\/\/)?(([a-z]+[a-z0-9\-]*[.])?

The first part includes the protocol (http:// or https://), I am only dealing with web http urls here and it is optional in my app hence the ? at the end of the first group, the rest includes an optional subdomain which should start with one or more letters followed by zero or more letters/numbers/hyphens and a dot. This first subdomain and dot is also optional. So far this would match: [empty string] http:// https//www. https://ww2 etc.

//server hostname
([a-z0-9]+[a-z0-9\-]*[.])+[a-z]{2,3}|localhost)

This next part includes the rest of the web host, the first grouping (first enclosing brackets) specifies the start of the hostname or a further subdomain which must start with a letter or number followed by a dot (the dot as a character set is how to represent the dot in Flex, you might be able to just use \.). This can be repeated many times, but then should be followed by 2 or three characters. Alternatively the hostname localhost can be used instead, the extra closing bracket matches the additional opening one after the protocol. This section should match: www.example.com localhost example.com example.co.uk co.uk etc.

//web path
(\/[a-z0-9_-]+[a-z0-9_ -]*)*\/?

This next part consists of the optional path (directory from the web root), it starts with a forward slash and can be any number of letters, numbers, underscores, spaces or hyphens, but can not start with a space (you might need to backslash escape your hypen in a different language. The trailing backslash is also optional as is the entire path. This part should match: [empty string] / /directory /a/b/ etc.

//query string
(\\?[a-z0-9_-]+=[a-z0-9 ',.-]*(&[a-z0-9_-]+=[a-z0-9 ',.-]*)*)?

This part contains the optional query string part of the URL. Starting with a ? (may require only a single backslash in a different language), followed by the first parameter made up of one or more letters/numbers/underscores/hyphens the equals sign, followed by an optional parameter value made up of letters/numbers/spaces/apostrophes/commas/dots/hypens. This parameter=value part of the query string can be repeated several times after that but each extra parameter should be preceded with the ampersand (you would normally use just the & for this, but flex requires the encoded version). This section could match: [empty string] ?a= ?a=bc ?a=b&c=d&e=f etc.

//fragment
(#[a-z0-9/_-]*)?$

Finally the last part of the expression contains the optional url fragment (the part with a #). In my case I specified zero or more letters/numbers/forward slashes/underscores/hypens (flex does not require escaping the forward slash when it is included in a character set). Then the dollar sign specifies that there should not be anything else after this. This could match: [empty string] # #value #a/b/c etc.

I hope this is useful to those struggling to create their own URL regular expression matchers. Flex devs remember to double escape the ? for the query string part of the URL.

RegExpValidator issues

Chris McDonald — Fri, 26 Mar 2010 13:32:46 +0000

Today I came across an annoying problem involving the RegExpValidator class in Flex. In flex app for one of our projects StickyWorld, we allow users to upload images, pdfs, 3d models and most recently, reference YouTube movies inside a virtual room where people can comment on them, adding sticky notes in context. In our upload window, users can choose what type of media they want to add to the room, in the case of a YouTube video only the video id is required. To make it a bit more flexible we decided to allow the users to specify a url to a video as well as just the video id. The app needed to handle urls in several different formats, e.g.

http://www.youtube.com/watch?v=[videoid]
http://www.youtube.com/v/[videoid]
http://www.youtube.com/[userchannel]/[somepath]/[videoid]

Sounds like a job for a regular expression right? Since we also wanted to do some validation on the field to make sure we were given a valid YouTube video url or video id, it seemed that the RegExpValidator class was perfect for the job. However after adding the RegExpValidator in MXML I had a problem that took a good while to figure out what was wrong.

Below is the snippet of code containing the regular expression string, its use in the validator and a validation handler function, apologies for the wrapping of the regular expression, I have split it below where the main formats are separated by pipes.

[Bindable]
privatevar youtubeRegExp:String = 
"^(?:http:\/\/(?:www\.)?youtube\.com\/watch(?:\?|#!)v=(.\{11\})(?:&.*)?

|(.\{11\})

|http:\/\/(?:www\.)?youtube\.com\/(?:v|[A-Za-z0-9#\/_\-]*)\/(.\{11\}))$";
private function youtubeValid(ev:ValidationResultEvent):void

{

    if (ev.type == ValidationResultEvent.VALID) {

        for (var i:int = 0; 

                i < ev.results[0].matchedSubstrings.length; 

                i++

        ) {

             if (ev.results[0].matchedSubstrings[i] != null)

                  youtubeVidId = ev.results[0].matchedSubstrings[i];

        }

        txtName.text = youtubeVidId;

        btnSubmit.enabled = txtYouTube.text.length>0;

    } else {

         btnSubmit.enabled = false;

    }

}
<mx :RegExpValidator id="youtubeValidator" 

    source="{txtYouTube}" property="text" 

    expression="{youtubeRegExp}" valid="youtubeValid(event)"

    invalid="youtubeValid(event)" 

    noMatchError="YouTube video url/id invalid"

    trigger="{txtYouTube}"/>

The problem was, nothing was coming out as valid, not even the videoid just by itself. So wrote a test using the regular expression, creating a RegExp object using the expression and testing some urls using the exec function and it appeared to be working fine, so why not with the validator? In the end it turned out to be that the problem was down to several characters needing to be escaped. The correct expression that worked is below:

youtubeRegExp = 

"^(?:http:\/\/(?:www\.)?youtube\.com\/watch(?:\\?|#!)v=(.\{11\})(?:&;.*)?

|(.\{11\})

|http:\/\/(?:www\.)?youtube\.com\/(?:v|[A-Za-z0-9#\/_\-]*)\/(.\{11\}))$";

Since the regular expression used in RegExpValidator needs to be a String and the String is used as a bound property in MXML the curly brackets need to be be preceded with a backslash, because without them in MXML it means a data binding. That didn’t make much sense to me, since I was binding a String variable which contained the expression, but ok, I can kind of see the problem. What made even less sense was that I needed to double escape the ? when I actually wanted to include a literal ? in the expression. So I suppose since it is a string and I want to include the backslash character before the question mark I need to escape the backslash itself, leaving \\?, but then shouldn’t I have to do that for all the other times I need to include a backslash in the expression? Well it turns out the answer is no, I do not really understand it and only figured this out after a lot of debugging.

Another pitfall to avoid, if you are binding on a condition in MXML and you need to use logical operators, you will need to encode the logical AND && should be &&, the less than < should be < or greater than signs > should be >, logical OR || works fine. However in those cases you should really be binding to a function which returns the boolean result you are looking for.

Working with MXML is cool because you can create data-bindable UI components quickly and easily, but it really isn’t when you have to worry about silly issues like wondering why your regular expressions are not working.

Bug in Flash Player FileReference browse affecting Macs

Chris McDonald — Wed, 23 Sep 2009 12:36:40 +0000

After updating my debugger version of Adobe Flash Player to 10.0.32.18 I noticed that Mouse Events were no longer working correctly.

There appears to be a bug in the more recent flash player which appears to break the mouse events. It only appears to affect Macs, I am having the problem on both Safari 4.0.3 and FireFox 3.5.3. I made a test app below which adds a few mouse event listeners to the white box and informs you of the events being received. Try it out below and comment on your results.

If you do not have a problem, do not upgrade your flash player or you will. This has been reported as a bug to Adobe here and here, more people are starting to notice it, hopefully Adobe will fix it soon.

Update 25/09/09

So far the results of people trying out the above test on a mac have been varied. The problem seems to be occuring in Snow Leopard 1.6, with most people FireFox being the only browser experiencing the bug. I have witnessed someone running Leopard with the same versions of FireFox and Safari as myself with no problems at all. Most people who are running Snow Leopard appear to only experience the bug in FireFox with safari working fine. However, as I mentioned above, I am having the bug appear both in Safari and FireFox. I don’t know what is so different about my set up, apart from that I have installed the latest debugger version of the Flash Player and that my system is 32-bit only.

If you do try out the test above and want to report your results, please provide as much information as you can, what versions of browser you are using, what is your flash player version, what OS version, 32 or 64-bit etc? Some people think the problem is with FireFox but I am not so sure.

Update 06/10/09

Ok, I am pretty sure now that this problem is not to do with a flash player upgrade, it is to do with Snow Leopard!

Recently my hard disk died, I reinstalled Snow Leopard and then restored my files from a time machine backup, I did not restore my applications.

Upon reinstalling Flex Builder I noticed that my flash player was now at version 9, which gave me an opportunity to test if this bug was still happening and it is, both in Safari and FireFox for Flash Player 9,0,124,0 as well. This almost definitely means the problem is down to the operating system, either Apple needs to fix it or Adobe need to come up with a fix in Flash Player. I can not run my demo test app above using flash 9 as the demo is set to require 10, but in other test apps I am getting the same broken behaviour with mouse events being lost after loading the FileReference browser. Looks like we will need to put a warning for Snow Leopard users on our flash apps.

Update 22/11/09

Adobe Labs have recently released Flash Player 10.1, which has fixed the issue detailed above. I have tried out the new player, but while the problems above have been fixed, many others new problems are present. For example, it appears that key events are duplicated, every keystroke entered appears twice and filtering by file type does not appear to work with FileReference. I realise this is a pre-release version constantly being improved, so hopefully these will be fixed soon. Unfortunately there is no debugger version of the new player, which is quite strange since the people who are going most likely to try out a pre-release are developers who would require the debugging features.

So far it appears I am the only one that has experienced these problems with the latest player, I think this is somehow related to my system being 32 bit only. It appears that most of the development efforts into Flash on the Mac are on 64 bit support, which makes sense since Apple is shifting eveything to 64 bit. If you too try out the new beta flash player and experience other bugs please report them here and on the adobe bug reporting site. This new flash player update proves that an active Flash community can get flash bugs fixed quicker and help improve the flash platform for all. Thanks to all who commented on their issues experienced with the demo.

You can try out the new 10.1 player at the Adobe Labs site.