AST'r AS3 - Example eGallery with IOC & ( AMFPHP or eden localization )

[eKameleon]

Hello :)

Message rapide pour vous annoncer une version stable de l'exemple
eGallery AS3 de AST'r :)

Dans cet exemple qui reprend la logique de la version AS2, j'illustre
comment réaliser une petite galerie d'image simple via des données
externes (en local ou serveur).

Dans cet exemple j'ai basé l'application sur la fabrique IOC basée
ECMAScript et "eden" de AndromedA et comme toujours un moteur MVC basé
sur FrontController et flux d'événement global.

Pour utiliser et tester cet exemple je vous invite à récupérer ou
mettre à jour le SVN de AST'r :

http://astr.googlecode.com/svn/trunk/

Pour un aperçu rapide dans ASt'r AS3 le répertoire AS3/trunk/examples/
egallery/trunk :
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/

Je vais résumer rapidement le fonctionnement de l'application basée
pour le moment sur Flash CS3 et bientôt sur une version Flex 3 AS3
(tout pareil) :

1 - Il suffit d'ouvrir le fla dans svn/ trunk/ AS3/ trunk/
examples/ egallery/ trunk/egallery.fla et de lancer la compilation du
projet.

Vous pouvez regarder rapidement le panneau de propriété du document
pour voir que j'utilise la classe "main" egallery.Application pour
lancer l'application
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/src/egallery/Application.as

Dans cette classe le plus important et le ECMAObjectLoader qui va se
charger de lancer l'initialisation de la fabrique IOC via les fichiers
externes qui se trouvent dans deploy/context/

2 - La fabrique est donc remplie via des fichiers au format eden au
runtime.

2-1 Déclaration du contexte principal de l'application et lancement de
l'application (chargement multiple des autres fichier .eden)
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/deploy/context/application.eden

2-2 Initialisation des targets pour gérer les logs de l'application
( tracer et console SOS par défaut..)
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/deploy/context/logging.eden

2-3 Structure MVC avec initialisation tout d'abord des controllers de
l'application
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/deploy/context/controller.eden

2-4 Structure MVC avec initialisation ensuite des modèles
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/deploy/context/model.eden

2-5 Structure MVC avec initialisation des vues et éléments principaux
de l'UI
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/deploy/context/view.eden

3 - Dans le fichier application.eden vous pouvez voir que je lance un
séquenceur qui initialise l'application et charge un fichier de
configuration et un fichier de localization par défaut pour toute
l'application.

4 - L'application peut être configurée en mode "local" ou "server" en
modifiant directement le fichier deploy/config/config.eden
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/deploy/config/config.eden

Il est donc ensuite possible d'utiliser le mode "local" avec les
données dans le fichier de localisation :
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/deploy/locale/localize_fr.eden

J'utilise ici le parseur eden pour transformer mes types customs dans
le fichier externe en VO (value object) ... je peux donc directement
utiliser ces valeurs typées (PictureVO) dans mon application pour
remplir le modèle.

5 - Le type "server" dans la config change la stratégie de
l'application et charge dans une base de donnée via un service AMFPHP
les VOs...
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/src/egallery/controller/net/remoting/GetGallery.as

Le process de ce service se trouve dans un controller attaché au
FrontController de l'application et lancé selon les besoins dans le
controller d'initialisation de l'application :
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/src/egallery/controller/application/InitApplication.as

C'est dans la classe InitApplication que la stratégie change et switch
entre le mode "server" et "local"

6 - Je montre aussi dans cet exemple comment utiliser en AS3 les
FlashVars que l'on peut envoyé d'une page web ou autre vers
l'animation flash... En effet je prends l'exemple du chemin de la
passerelle de AMFPHP (gateway.php) qui se trouve dans deploy/php/ ...

En fait, je ne sais pas si vous l'avez remarquer mais en général si
l'on utilise AMFPHP il faut se méfier au niveau de la publication en
ligne de l'url de l'utilisateur lorsqu'il tape celle ci dans son
navigateur....

Par exemple, pour AMFPHP si dans le swf on appelle la passerelle avec
l'url : http::/www.toto.com/php/gateway.php

Il ne faudra surtout pas que l'utilisateur de l'application est tapé
dans son navigateur : www.toto.com/php/gateway.php (sans le html://
par exemple)

En effet AMFPHP doit être appelé avec une url de passerelle ayant un
"host" identique dans le swf et dans le navigateur...

Pour remédier à cela il faut utiliser une page principale HTML (ou
PHP) qui contient le swf principal et qui envoi vers celui ci une
FlashVars contenant la constante HTTP HOST de la page où l'on se
trouve :

$_SERVER['HTTP_HOST']

On peut par exemple utiliser SWFObject et créer une page comme ceci :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php

$httphost = 'so.addVariable("httphost", "' . $_SERVER['HTTP_HOST'] .
');';

?>
<html>

<head>

<title>Test</title>

<script src="js/swfobject.js" type="text/javascript"></script>

</head>

<body>

<div id="swf">
Alternate HTML content should be placed here
This content requires the Adobe Flash Player
<a href="http://www.adobe.com/go/getflash/">Get Flash</a>
</div>

<script type="text/javascript">
var so = new SWFObject("index.swf", "testFlashVars", "100%",
"100%", "9", "#FFFFFF", true);

so.addParam("allowFullScreen", "true") ;
so.addParam("quality", "high");
so.addParam("play", "true");
so.addParam("loop", "false");
so.addParam("type", "application/x-shockwave-flash");
so.addParam("pluginspage", "http://www.adobe.com/go/
getflashplayer");

<?php
echo $httphost ; // add httphost in the swf
?>

so.write("swf");
</script>

</body>

</html>

Au final... on envoi une variable "httphost" vers le swf et il faut
récupérer cette variable ... pour cela en AS3 il faut cibler le
DisplayObject de la scène principale (root de l'application) et
utiliser l'expression :

var httphost:String =
Application.application.parameters.httphost ; // ici exemple basé
Flex MXML

Pour ma part dans AST'r je stocke cette donnée dans la configuration
de l'application (Config.getInstance()) .

Dans AST'r j'écrase donc en cas de besoin la valeur par défaut de mon
httphost via un process lancé dans application.eden :
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/src/egallery/process/application/RunFlashVars.as

Voir dans application.eden
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/egallery/trunk/deploy/context/application.eden
Je lance ligne 67 le process "init_flashvars" juste après le
chargement de la config et de la localisation

Bref.. beaucoup à dire et là je vais aller me coucher.. donc j'espère
tout doucement pouvoir écrire un tuto complet là dessus... avec des
screenshots etc...



EKA+ :)