Enrico Foschi’s official blog

Agglom was used to display an invitation to download the Firefox Add-on Agglomerator in the main pages to all the users.

Unfortunately, the invitation was displayed by users that already installed the Add-on too. The challenge was to check with JS if the user already had the add-on installed and, if he had it, to hide the invitation.

Surfing the web I stumbled upon this page:
http://ha.ckers.org/weird/firefox-extentions.html

Thanks to ha.ckers.org, the feature has been pretty easy to develop. What we did was to include the invitation inside a DIV with a specified id (firefoxExtension). Right after the closing tag of the DIV we appended this image:

<img src=”chrome://agglomerator/skin/icon24.png”
class=”displayNone”
onload=”if(document.getElementById(‘firefoxExtension’))
document.getElementById(‘firefoxExtension’).style.display=’none’;” />

The IMG tag loads an image that is included in Agglomerator (the icon displayed in the toolbar to save and share the current browser session). If the extension has been installed correctly, the icon will be loaded and the onload event will be fired. This is then hiding the DIV with id=firefoxExtension. If the extension is not installed, the onload event won’t be fired.

This is a quick and dirty method and should work with all almost any add-on.

Hope it helps.

Well, this is a funny thing that happened today.

While writing Actionscript 3 code, I wrote this line:

return (SpokeRotation + FinalRotation) / 2 * Math.PI / 180;

Well, after pressing the inliner (I really don’t know exactly the name of the feature, but is that button very useful that just inline the code), the line was changed in this:

return SpokeRotation + FinalRotation / 2 * Math.PI / 180;

Whoa!! Isn’t it funny? No parentheses, no party!

[ENGLISH]

Today i was working on a simple, stupid stylesheet setup: I wanted my FormItem instance labels to align to the left side.

Unluckely, writing this code:

<mx:FormItem textAlign="left" label="looooooooongLabel">
    <mx:TextInput id="my_txt1" />
</mx:FormItem>
<mx:FormItem textAlign="left" label="shortLabel">
    <mx:TextInput id="my_txt2" />
</mx:FormItem>

the output was this (the label was always right aligned even if I used textAlign css set to “left”):

So, i tryed to change my CSS, to create my stylenames, but everything was useless.

Googoling around the web, I found a solution to label alignment in FormItem in this page:

http://skovalyov.blogspot.com/2007/01/left-aligned-label-in-formitem.html

So, i created my component (an instance of Skovalyov extended component) with text aligned in the left side.
Unluckily RMGConnecter (the Flex application we are developing) became crazy… something disappeared, something lamped, etc…

The final solution was to write my own extended FormItem component (Extended Form Item). This is the simple code:

package RMGConnect.Form {

    import flash.display.DisplayObject;
    import mx.containers.FormItem;
    import mx.controls.Label;

    public class ExtendedFormItem extends FormItem {

        public var align_left:Boolean = false;

        override protected function updateDisplayList(w : Number, h : Number) : void {
            super.updateDisplayList(w, h);
            if(align_left) {
                var index_label:int = -1;
                var current_label:Label = null;
                if (label.length > 0) {
                    for(var i:Number = 0; i < rawChildren.numChildren; i++) {
                        if(rawChildren.getChildAt(i) is Label) {
                            index_label = i;
                            current_label = Label(rawChildren.getChildAt(i));
                            current_label.x = 0;
                            break;
                        }
                    }
                }
                if (required && current_label) {
                    for(var k:Number = rawChildren.numChildren-1; k >= 0; k--) {
                        if(k != index_label && rawChildren.getChildAt(k) is DisplayObject) {
                            var indicator : DisplayObject = rawChildren.getChildAt(k);
                            indicator.x = current_label.width + ((getStyle("indicatorGap")-indicator.width) / 2);
                            break;
                        }
                    }
                }
            }
        }
    }
}

and, including the container package in the component first tag (it is an .as file in RMGConnectForm directory):

xmlns:rmgext="RMGConnect.Form.*"

i created my left aligned component

<rmgext:ExtendedFormItem align_left="true" label="looooooooongLabel">
    <mx:TextInput id="my_txt1" />
</rmgext:ExtendedFormItem>
<rmgext:ExtendedFormItem align_left="true" label="shortLabel">
    <mx:TextInput id="my_txt2" />
</rmgext:ExtendedFormItem>

obtaining the requested output:

[ITALIANO]

Oggi mi sono trovato ad affrontare un problema di allineamento delle etichette (label) del componente FormItem.

Sfortunatamente, usando il seguente codice

<mx:FormItem textAlign="left" label="looooooooongLabel">
    <mx:TextInput id="my_txt1" />
</mx:FormItem>
<mx:FormItem textAlign="left" label="shortLabel">
    <mx:TextInput id="my_txt2" />
</mx:FormItem>

l’output era il seguente (le label risultavano sempre allineate a destra nonostante l’attributo di stile textAlign fosse impostato a left):

Provai così a cambiare i CSS, a creare nuovi styleName, ma tutto risultò inutile.

Googolando nel web, trovai una soluzione proposta dal mitico Skovalyov:

http://skovalyov.blogspot.com/2007/01/left-aligned-label-in-formitem.html

Utilizzando questa classe (che altro non era che un’estensione della classe FormItem), creai il mio componente con la label allineata a sinistra.
Sfortunatamente, RMGConnecter (l’applicativo Flex che stiamo sviluppando) cominciò a comportarsi in maniera alquanto strana… ogni tanto scomparivano scritte, ogni tanto lampeggiavano componenti, etc….

La nuova classe non era proprio la soluzione adatta.

La soluzione finale è stata la ri-scrittura da zero di una nuova estensione del componente FormItem (ExtendedFormItem). Questa soluzione si rivelò più che soddisfacente.

Di seguito vi riporto il codice:

package RMGConnect.Form {

    import flash.display.DisplayObject;
    import mx.containers.FormItem;
    import mx.controls.Label;

    public class ExtendedFormItem extends FormItem {

        public var align_left:Boolean = false;

        override protected function updateDisplayList(w : Number, h : Number) : void {
            super.updateDisplayList(w, h);
            if(align_left) {
                var index_label:int = -1;
                var current_label:Label = null;
                if (label.length > 0) {
                    for(var i:Number = 0; i < rawChildren.numChildren; i++) {
                        if(rawChildren.getChildAt(i) is Label) {
                            index_label = i;
                            current_label = Label(rawChildren.getChildAt(i));
                            current_label.x = 0;
                            break;
                        }
                    }
                }
                if (required && current_label) {
                    for(var k:Number = rawChildren.numChildren-1; k >= 0; k--) {
                        if(k != index_label && rawChildren.getChildAt(k) is DisplayObject) {
                            var indicator : DisplayObject = rawChildren.getChildAt(k);
                            indicator.x = current_label.width + ((getStyle("indicatorGap")-indicator.width) / 2);
                            break;
                        }
                    }
                }
            }
        }
    }
}

Includendo il package contenitore nel primo tag (il componente è un file .as salvato nella directory RMGConnectForm directory):

xmlns:rmgext="RMGConnect.Form.*"

…ho posizionato il mio componente FormItem personalizzato con la label allineata a sinistra

<rmgext:ExtendedFormItem align_left="true" label="looooooooongLabel">
    <mx:TextInput id="my_txt1" />
</rmgext:ExtendedFormItem>
<rmgext:ExtendedFormItem align_left="true" label="shortLabel">
    <mx:TextInput id="my_txt2" />
</rmgext:ExtendedFormItem>

ottenendo l’effetto desiderato inizialmente: