La digitale, Développement multimédia

Recherche

Calendrier

Février 2012
Lu Ma Me Je Ve Sa Di
<< >>
12345
6789101112
13141516171819
20212223242526
272829

Accès spécifiques

Langues

Snippet AS3 : intégrer les lib JS de son choix dans un SWF

Dernière mise à jour Dec 19 2010
by Julien Beaufils

Par exemple avec la version minifiée de jQuery 

/*
* Dans cet exemple le fichier jquery.js est enregistré 
* au même endroit que la source
*/
[Embed(source='jquery.js',mimeType="application/octet-stream")]
var jqClass:Class;
try 
{ 
    ExternalInterface.call
    (
        "function(){" +(new jqClass() as ByteArray).toString() + ";}"
    );
}
catch(e){trace("as3/js error : "+e.toString())}

Exactement de la même manière, pour l'execution de n'importe quelle expression JS sous forme de chaine à la volée, on peut utiliser cette fonction : 

private function runJS(expr:String):void
 {
    try { ExternalInterface.call("function(){" + expr + "}") }
    catch(e){trace("as3/js error : "+e.toString())}
}

tip : Le JS peut être écrit "inline" dans le code en l'enveloppant dans un XML avec des CDATA.
De cette manière il peut être mis en forme correctement et la colorisation syntaxique s'exprime (sous flashDevelop)

Avantages :

  • emporter une lib JS sur tous les sites ou le SWF est partagé (attentions au param "allowScriptAccess")
  • compression/décompression des JS automatisée et réduction du nombre de requêtes
  • projet réellement orienté flash (peux de HTML) mais devant utiliser des outils js.
    je pense aux SWFAdress, à SWFFit, à quelques nouveautés HTML5 sur lesquels les développeurs Flash louchent parfois comme les webWorkers
  • Lib's passées de manière "presque" transparente de projet en projet lorsqu'elles sont déjà compilées dans un SWC, ou un autre type de module (ça peut-être un inconvénient : on oublie ce qu'il y a dans les petites boites qui ici ont une dépendance avec le contexte d'utilisation).
    * réutiliser des comportements prévus dans un HTML alternatif (en le parsant et en réutilisant les attributs onclick par exemple)

Inconvénients:

  • pour des SWF partagés, on a pas forcément la mains sur "allowScriptAccess" (par exemple filtres auto de certains CMS)
  • toujours pour des SWF partagés balancer un JQuery ou un motools dans la nature peut-être intrusif et redondant. (mettre un id unique dans le nom des objets globaux créés par la lib utilisé, developper en mode ninja)
  • problèmes de sécurité liées au XSS
  • toute modif du JS doit être re-compilée bien sur.

2 Commentaires

  • Fred
    Jan 22, 2011 at 23:27

    hé hé, c'est quoi développer en mode ninja ?

    a+ man

  • Julien Beaufils
    Jan 24, 2011 at 01:10

    C'est une notion que je trouve très poétique :
    La principale qualité d'un ninjà est d'être furtif et de ne pas laisser de trace après son passage.

    J'imagine le ninja javascript comme suis :

        /*
        Mock de fonction globale type déclarée 
        par des lib comme JQuery, MooTools, Prototype...
        On ne contrôle pas si/quand une telle fonction
        est déclarée sur la page cible
    */

    var $=function()
    {
        alert("je suis la fonction globale $ d'une lib connue");
    }
    
    /*
        Mock de lib personnel 
        destinée à être utilisée 
        dans différent contextes, 
        différent projets
        Notamment intégrée dans un SWF 
        partagé sur plusieurs sites
    */
    var laDigitale_MyLib = 
    {
        $:function()
        {
            alert("je suis la fonction globale $ d'une lib personalisée");
        },
        ninja:function(fn)
        {
            this.previous$ = $;//enregistrement de la fonction dollar dans une variable
            $ = this.$;//remplacement par la fonction de myLib
            fn();
            $ = this.previous$;
        }
    }
    
    /*
        code "lourd" spécifique à un projet
    */
    laDigitale_MyProject = 
    {
        runSomeCode:function()
        {
            alert("le developpement ''lourd'' doit être mis ici");
            $();
        }        
    }
    

   //Exemple concret, appels spécifiques à différents instants :
   //à t : fonctionnement normal issue d'une lib standart 
    $();
   /*
        à t+n : Au moment voulu on utilise du code de "MyProject" avec 
        les fonctions globales déclarées par MyLib
    */
    laDigitale_MyLib.ninja(laDigitale_MyProject.runSomeCode);
   //à t +m : $ est égale à lui même
    $();

    Des liens du monde réel,(il faut que je regarde les sources pour voir comment il font) :
    Raphael.js : aller à "Ninja Mode"
    jQuery.noConflict
    Ninja mode de la lib VXJS

Nom : E-mail : Site web : Message :
Merci bien haXe