Learning design patterns with Actionscript 3: episode 1 – Singleton pattern

In these Christmas holidays I bought some new books, among them I purchased “Actionscript 3 design patterns” (written by William Sanders and Chandima Cumaranatunge) and I’m actually studying this one. I never faced before the world of design patterns (which is, for those that never heard about, a way to write code and solve problems by implementing tested strategies that will guarantee flexibility and extensibility), or better I knew what a design pattern is, but I’m trying to learn to use them for the first time.
Unfortunately the first thing I learned about implementing design patterns in Actionscript 3 is that for some stuff we have to use workarounds, because actually as3 doesn’t provides 2 little useful things: abstract classes (on which most of the patterns are based) and not public constructor (in Java we can declare a class constructor as private, in as3 we must declare it as public), anyway with some little efforts, we can do everything :-)

Continue reading

Centralizing event handling in Actionscript 3: a good method to handle events for multiple objects with a single listener

One of the first cool things I learned about Actionscript 3, is how to handle events. Actionscript 3 is heavily tied with events, so the use and a deep understanding of events and listener should be one of the most important subject to face for an Actionscript developer. Although I’m far away to be considered an experienced Actionscript developer, I’ve just realized the power and the benefits of a centralized event handling architecture and I want to share my new knowledge by writing this post.  So… what means to “centralize events handling”?
Continue reading

Detecting display’s orientation change on mobile devices with accelerometer: a platform indipendent approach (n95, i900, iPhone…) with javascript

As I wrote, I bought a Samsung i900 Omnia (which as Nokia n95, iPhone and other modern cool mobile phones, has an accelerometer), as a web developer one of the first things that I had in mind was “how can I detect the orientation change (landscape or portrait mode) with javascript or actionscript?”. The first things I thought was:

  1. If the display changes its orientation mode, then the screen width and height must will updated with the new size
  2. If the screen width is smaller than screen height, the device must be in “portrait” mode
  3. Vice versa, if the screen width is bigger than screen height, the device must be in “landscape” mode
  4. The only thing I need is to check the value of screen size and define the orientation mode according to the point 2 and 3

And, as I can see, my deductions was right! I realized a small javascript script, which by using setInterval() function and controlling screen.width and screen.heigth deduces the device orientation mode. Anyway it works actually only with Opera mobile 9.5 (tested only on Samsung Omnia), Internet Explorer Mobile seems unable to interpreting some javascript functions.

This is a piece of my code (the main logic behind):

if (screen.width != width && screen.height != height) {
    width = screen.width;
    height = screen.height;
    mode = width > height ? "landscape" : "portrait";

If you would like to test my script go to http://daveoncode.site90.net

Let me know, thanks ;-)

ps. as soon I will understand about flash capability on my device I will try to implement a custom Actionscript event for the orientation… something like DisplayEvent.DISPLAY_MODE_CHANGE

UPDATE: if you are unable to load  http://daveoncode.site90.net try http://andreacfm.com/dave/ (I have to thanks my friend Andrea Campolonghi for the space)

UPDATE 2: the script works even on Blackberry’s browser (as someone told me) :)

UPDATE 3: it works even on HTC devices (at this point the only problem is internet explorer mobile… I will investigate!)

Using getAttribute() to retrieve the label’s "for" attribute returns NULL on internet explorer!

Damned Internet Explorer!!! I’ve just faced another browser issue by using the javascript function getAttribute() in order to retrieve the “for” value of a form’s label, ie:


(where “myLabel” is a reference to a <label> node)
The function always returns NULL, even if the “for” attribute is manually specified into HTML code, ie:

<label for="my_field_id">my label</label>

Fortunately, after a brief search on Google, I’ve found a post on quirksmode.org, which contains a comment by Tino Zijdel, that show an easy and crossbrowser solution to get the “for” attribute (that can be used both to set a value or to get it):


Thank you Tino!

In my search I’d even discovered that on Internet Explorer getAttribute() is different from other browsers, because it offers an extra argument called “iFlags” that is a number that can be 0, 1 or 2 (genial!) and means (I’m reporting the official microsoft documentation):

0 -> Default. Performs a property search that is not case-sensitive, and returns an interpolated value if the property is found
1 -> Performs a case-sensitive property search. To find a match, the uppercase and lowercase letters in AttributeName must exactly match those in the attribute name. If the iFlags parameter for getAttribute is set to 1 and this option is set to 0 (default), the specified property name might not be found.
2 -> Returns the value exactly as it was set in script or in the source document

It would be a better world without Internet Explorer!

Javascript string concatenation performance on modern browsers: array.join("") is now slower!

Well… as many Javascript developers know, a common practice to handle big string concatenation, is to implement a sort of  “stringBuffer” by using an array as data container and then convert it to a string by using the method join(). Ie:

var buffer = [];
var target = document.getElementById("box");

for (var i=0; i<10000; i++) {
    buffer .push(['<p id="node_', i, '" id="node_', i, '">Content ', i, '</p>'].join(""));

target.innerHTML = buffer.join("");

This is theoretically the fastest way to manage huge strings and to speed up the building of dynamic content.

Continue reading