Masapi - Dépendance inter-fichiers
Par Cédric Tabin le mercredi 21.05.2008, 18:00 - ActionScript - Lien permanent
Un des principaux avantages de masapi, outre de gérer le Massive Loading, est de permettre d'automatiser tous les chargements d'un site grâce à un seul fichier de configuration XML assez simple. En somme, il suffit de coder le conteneur de SWF et il devient ensuite vraiment facile et rapide d'ajouter un SWF à charger. Cela devrait ravir les équipes de développeurs où chacun travaille sur sa page et où le preloader principal est commun à tous !
L'idée de base est de s'assurer que tous les fichiers relatifs à une page ont été chargés lorsque celle-ci est exécutée. Pour l'exemple, voici une petite application :
Elle se compose des fichiers suivants :
- storm.jpg : l'image que vous voyez en arrière-plan (prise ici)
- text.txt : le texte 'ASTORM' (externalisé dans ce fichier texte)
- font.swf : un SWF contenant la font utilisée par le texte
- astorm.swf : le SWF qui affiche l'image et le texte
- index.swf : le massloading du tout
Compliqué ? Certes ce n'est pas l'exemple le mieux adapté, mais il a le mérite d'être assez simple et de démontrer l'utilié que peut avoir masapi dans ce cas-la ! De plus, c'est beaucoup plus facile à mettre en place que ça en a l'air.
Le déroulement global se passe de la manière suivante :
- chargement de index.swf
- chargement (manuel) du fichier de configuration
- parsing du fichier de configuration dans masapi
- lancement du massive loading du fichier désiré (astorm dans notre cas - voir plus bas)
Avant tout, il faut paramétrer le fichier de configuration qui va être donné à masapi. Celui-ci se décline en deux parties : la liste des fichiers et leur dépendances. Pour l'exemple ci-dessus, il se présente comme suit :
<?xml version="1.0" encoding="utf-8" ?> <application> <files> <file name="astorm" url="astorm.swf" type="swf" /> <file name="font" url="font.swf" type="swf" /> <file name="background" url="storm.jpg" type="swf" /> <file name="text" url="text.txt" type="text" /> </files> <dependencies> <dependency name="astorm"> <file name="font" /> <file name="background" /> <file name="text" /> </dependency> </dependencies> </application>
Pour chacun des fichiers (<file ... />), on donne les paramètres suivants :
- name : le nom du fichier qui sera utilisé dans notre code AS3
- url : le chemin du fichier
- type : le type de fichier (issu des constantes de LoadableFileType)
S'ensuit la liste des dépendances (<dependency ... />). Dans le cas ci-dessus, il n'y en a qu'une seule : le fichier 'astorm' a besoin que les fichiers 'font', 'background' et 'text' soient chargés.
Le code par la suite est vraiment simple. Le chargement du fichier de configuration et son parsing se fait comme ça :
import ch.capi.core.*; //load the configuration file var configLoader:URLLoader = new URLLoader(); configLoader.dataFormat = URLLoaderDataFormat.TEXT; configLoader.addEventListener(Event.COMPLETE, onConfigurationLoaded); configLoader.load(new URLRequest("configuration.xml")); function onConfigurationLoaded(evt:Event):void { //retrieve the XML document var xmlConfig:XMLDocument = new XMLDocument(); xmlConfig.ignoreWhite = true; xmlConfig.parseXML(configLoader.data); //parse the configuration var parser:ApplicationFileParser = new ApplicationFileParser(); parser.parse(xmlConfig.firstChild); }
Le parser ApplicationFileParser va directement créer les instances d'ApplicationFile nécessaires. Cela signifie qu'une fois parsé, il n'y aura plus qu'à passer par la méthode ApplicationFile.getFile("nom") pour récupérer le fichier désiré.
Il est également possible que le fichier de configuration contienne d'autres informations relatives au développement du projet, c'est pourquoi la méthode parse prend en paramètre un XMLNode.
A présent, le fichier de configuration étant parsé, il ne reste plus qu'à charger le fichier désiré :
import ch.capi.core.*; //retrieve the page application file var pageToLoad:ApplicationFile = ApplicationFile.getFile("astorm"); //create the massloader var massLoader:ApplicationMassLoader = new ApplicationMassLoader(); //add the page to load. That's the important line ! massLoader.addApplicationFile(pageToLoad); //launch ! massLoader.start();
Et, une fois chargé, de l'afficher :
import ch.capi.core.*; import ch.capi.net.*; //retrieve the page var astormPage:ApplicationFile = ApplicationFile.getFile("astorm"); var astormData:ILoadableFile = astormPage.loadableFile; var ldr:Loader = astormData.loadManagerObject as Loader; addChild(ldr);
Enfin, une petite passe rapide sur le code qui se trouve dans astorm.swf. Au moment ou le code est exécuté, masapi s'est occupé de charger tous les fichiers dont il a besoin, et donc il ne reste plus qu'a travailler avec nos éléments !
import ch.capi.display.text.*; import ch.capi.core.*; //retrieve the text var titleFile:ApplicationFile = ApplicationFile.getFile("text"); fieldTitle.text = titleFile.loadableFile.getData() as String; //retrieve the font var fnt:AbstractFont = FontsManager.getFont("astormText"); fnt.applyFormat(fieldTitle); //retrieve the picture var pictureFile:ApplicationFile = ApplicationFile.getFile("background"); var pictureLoader:Loader = pictureFile.loadableFile.loadManagerObject as Loader; pictureLoader.width = 400; pictureLoader.height = 300; addChildAt(pictureLoader, 0);
Je me suis également amusé à utiliser la mini-API de Font contenue dans masapi. Il est bien évidemment possible d'affiner tout cela en fonction de l'architecture utilisée. Il y a un exemple un peu plus poussé dans les fichiers que j'ai mis sur googlecode. J'ai également fait un autre tutorial sur les dépendances complexes.
Voila pour ce qui est de ce tutorial En annexe, vous trouverez les sources Flash CS3 (que j'ai du adapter très légèrement pour le blog). Et surtout, n'hésitez pas à me donner un retour !
Commentaires
Vraiment bien ce tutorial !
J'utilisais masapi que pour le préchargement de mon application, mais je me rend compte que tout les chargement de pages peuvent être géré par MASAPI.
Je testerai ça dans la prochaine
Ce tuto tombe a pic... je transpose mon package de classe perso en AS3 et j'implémente masapi, je trouve ca vraiment super pratique.
Merci bcp !
Hello,
où peut-on obtenir toutes les configs possible des fichier application.xml?
Une doc du format quelque part que je n'ai pas vu?
Merci
En fait je viens de trouver ce que je cherchais dans ApplicationFileParser.as.
Je demandais ceci car il serait sympa d'avoir le format détaillé sur une page du wiki.
Et quant à donner une priorité entre fichiers depuis ce application.xml, comment fait-on? Comment est défini l'ordre de chargement? (ordre de préscence surement, mais si tu pouvais le confirmer )
Super lib dans tous les cas Cédric!