DisplayObjects.align

[ths otra]

Bonjour !

J'avance petit à petit dans la découverte de la fabrique iOc, ça demande un peu de transpiration mais, avant de poser ma question, je tenais à dire que c'est vraiment extraordinaire ... et cela vient quand même plus intuitivement que je pensai.


En partant du modéle astro que je triture dans tous les sens, j'aimerai rajouter un logo (png) en fond. Donc, dans le fichier eden /context/application.eden dans l'import j'ajoute:
{
        id         : "logo" ,
        resource   : "images/image_de_fond.png" ,
        type       : "assembly" ,
        definition : { type : "flash.display.Bitmap" }
}

Jusqu'ici tout va bien.

Ensuite,  j'ajoute l'objet wallpaper  de type CoreSprite.

{  
        id            : "wallpaper"  ,
        type        : "asgard.display.CoreSprite"  ,
        lazyInit    : true,
        singleton : true ,
         properties :
        [
            { name:"addChild" , arguments : [ { ref:"logo" } ] },
        ]        
}

Jusqu'ici, tout va bien. Il s'affiche bien quand je l'ajoute au Display.

Ca se corse (putain, corse ça vient de Corse ? ;-) hummm, bref ) quand je tente de le positionner grâce au DisplayObjects ... j'ai le cerveau qui larsen et je me suis paumé:

{  
        id            : "wallpaper"  ,
        type        : "asgard.display.CoreSprite"  ,
        lazyInit    : true,
        singleton : true ,
         properties :
        [      { name:"DisplayObjects.align" , arguments :  
                [
                    { ref  : "logo" } ,
                    { ref  : "display"   } ,
                    { value : "Align.BOTTOM"   }
                ]
            },
            { name:"addChild" , arguments : [ { ref:"logo" } ] }
        ]        
}


 ... une petite piste siouplait... ?

@ EKA :  Puisque tu demandes qu'on te brusque un peu: je te signale que j'attends avec impatience la suite des tutos et même que je retiens en otage pas mal de corrections que je vais détruire si tu publies pas très vite... ;-)

(voici un extrait bordélique que je dois revérifier: http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd

S au lieu de T
nous pourront noter en particulier = nous pourrons noter en particulier


EDEN ("manque une virgule") :
{ name : "url"       , value : "http://www.ekameleon.net" } = { name : "url"    ,    value : "http://www.ekameleon.net" },



un "plus" de trop !
pour chercher une valeur définie plus plus
--> devient pour chercher une valeur définie plus


vegas.events.EventListener ;
--> system.events.EventListener


* http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd
avant de la supprimer la référence dans le cache
--> deviendrait: avant de supprimer la référence dans le cache


* http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd
Erreur de lien vers: Identifiable
--> Dans cet exemple la classe andromeda.vo.NetServerInfoVO implémente l'interface [ vegas.core.Identifiable ].

* http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd
erreur de nom: import vegas.core.ILockable;  
--> import system.process.Lockable;

* http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd
ses méthode
--> ses méthodes

* http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd
correctement le nouveau objet.
--> correctement le nouvel objet ?

nouveau objet
--> nouvel objet ?

* http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd
* manque [factory}
 type       : "test.UserFilterFactory" ,
-->  type       : "test.factory.UserFilterFactory" ,)

[eKameleon]

Hello :)

Pour utiliser la méthode statique d'une classe tu as plusieurs
solutions mais dans l'IoC directement il est préférable de créer une
définition d'objet avec la stratégie "factoryValue" (lire la
documentation à ce sujet)


Tu peux avec eden + définition d'objet obtenir la définition
suivante :

{
id : "logo_align" ,
type : "Class" ,
factoryValue : pegas.display.DisplayObjects , // use eden to find
the reference of the class
properties :
[
{ name : "align" , arguments : [ { ref : "logo" } , { ref :
"display" } , { value : pegas.draw.Align.BOTTOM } ] }
]
}

A tester... note bien que j'utilise les chemins complets pour les
objets dans eden, comme pour l'énumération pegas.draw.Align.BOTTOM


Donc ensuite il suffit dand ta définition d'objet "wallpaper" de
taper :

{
id : "wallpaper" ,
type : "flash.display.Sprite" ,

lazyInit : true,
singleton : true ,

generates : [ "logo_align" ] ,

properties :
[
{ name:"addChild" , arguments : [ { ref:"logo" } ] },
]

}

Avec le "generates" quand ta définition d'objet sera appelée pour la
première fois cela va attacher le logo dans le wallpaper et ensuite
cela va lancer tout seul la fonction...

Bon j'ai pas testé le code ci-dessus mais cela devrait être bon .. à
voir donc si cela fonctionne.. si tu n'y arrives pas n'hésites pas à
me faire un petit test dans un zip avec tout ce qu'il faut pour
essayer la base de ton exemple ci-dessus et je me ferais un plaisir de
voir ce qui peut être fait.

A noter que je dois implémenter dans l'avenir des layouts intégrés à
certaines vues pour simplifier ce genre de problèmatique.

A noter aussi que je te conseille d'utiliser la classe Background pour
créer des displays principaux en IoC .. la classe Background est très
souple et permet de contrôler vraiment les éléments graphiques (un peu
comme les DIVs en HTML)

Je te conseille de lire le tutoriel sur le sujet et d'en abuser dans
toutes tes applications (regarde les exemples dans AST'r, tu vas voir
que beaucoup de classes héritent de Background ou sinon que j'utilise
des Background directement dans l'IoC)

http://www.ekameleon.net/blog/index.php?post/2009/04/30/La-classe-asgarddisplayBackground

PS : Pour les corrections merci mais n'hésite pas à ouvrir un autre
message la prochaine fois ou pense à mes issues sur Google Code ;)
C'est plus simple à gérer d'ouvrir une issue par problème pour que je
les fixe rapidement ;)

J'ai déjà commencé un peu le refactoring des tutoriels mais je dois
continuer merci ;)

EKA+ :)

On 12 août, 16:14, ths otra <ths.o...@gmail.com> wrote:
> Bonjour !
>
> J'avance petit à petit dans la découverte de la fabrique iOc, ça demande un
> peu de transpiration mais, avant de poser ma question, je tenais à dire que
> c'est vraiment extraordinaire ... et cela vient quand même plus
> intuitivement que je pensai.
>
> En partant du modéle astro que je triture dans tous les sens, j'aimerai
> rajouter un logo (png) en fond. Donc, dans le fichier eden
> /context/application.eden dans l'import j'ajoute:
> {
>         id         : "logo" ,
>         resource   : "images/image_de_fond.png" ,
>         type       : "assembly" ,
>         definition : { type : "flash.display.Bitmap" }
>
> }
>
> Jusqu'ici tout va bien.
>

> Ensuite,  j'ajoute l'objet *wallpaper * de type CoreSprite.

> *http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd

> avant de la supprimer la référence dans le cache
> --> deviendrait: avant de supprimer la référence dans le cache
>

> *http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd

> Erreur de lien vers: Identifiable
> --> Dans cet exemple la classe andromeda.vo.NetServerInfoVO implémente
> l'interface [ vegas.core.Identifiable ].
>

> *http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd

> erreur de nom: import vegas.core.ILockable;
> --> import system.process.Lockable;
>

> *http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd

> ses méthode
> --> ses méthodes
>

> *http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd

> correctement le nouveau objet.
> --> correctement le nouvel objet ?
>
> nouveau objet
> --> nouvel objet ?
>

> *http://docs.google.com/Doc?id=dfd9s8cg_27c5s2pwkd

[ths otra]

salut eka

- je teste ta solution tout de suite et te dis ça. Merci !

- pour les issues, je vais les faire, je prends le temps de finir les tutos d'abord et je ferais ça top clean ;-) .. ne t'embête donc pas à essayer de comprendre ce que je t'ai mis dans mon mail précédent ...ce n'était que mon bloc-note où je les archives en attendant !

[ekameleon]

Hello :)

Regarde bien au passage les documents car au fur et à mesure je fixe les problèmes que tu me remontes dans les Google Documents ;) Donc tes notes vont plus être à jour ;)

Alors que si tu penses à noter tout cela tranquillement dans les issues de AndromedAS au fur et à mesure tu verras que du coup on pourra être synchro entre les corrections et tes notes ;)

PS : A noter une mise à jour en cours de AndromedAS, je mets à jour les exemples (FLA, classes "main" etc...)

PS2 : A noter une mise à jour de ASGard aussi avec un soucis avec les dernières versions de Maashaack sur les classes qui héritent de Task et CoreAction (comme RemotingService). N'hésitez pas à me faire remonter tout oubli de ma part dans mon refactoring ;)

EKA+ :)

[ths otra]

ok, je vais prendre l'habitude d'utiliser les issues alors. ;-) Pfiou, je vais devenir Googlien.

[ekameleon]

Hello :)

Tu vas voir on devient vite addict :D

EKA+ :)

[ths otra]

hum, surtout de la class Background ... je parcours ton tutoriel, c'est de la boulette. Google, j'en suis loin !

(cela dit, je ne dois pas avoir bien mis en place ta technique -generates-, marche pô encore. je fouille et je ne trouve pas je te fais un petit paquet ;-) )

[ekameleon]

Hello :)

Comme je te l'ai dis je n'ai pas testé le bout de code donc méfiance ;)

Sinon penses à faire un "linkage enforcer" sur la classe DisplayObjects dans ta classe "main" pour qu'elle soit présente dans le swf. Sans cela tu ne pourras pas l'invoquer dans les fichiers externes.

EKA+ :)

[ths otra]

Bon, je suis coincé là:

[2] 18:18:04 [object ECMAObjectFactory] getObject failed with the id 'logo_align' : TypeError: Error #1034: Echec de la contrainte de type : conversion de display::Display@11eed31 en flash.geom.Rectangle impossible.

J'ai bien ajouté un linkage enforcer sur la classe DisplayObjets dans ma classe Main.
Finalement, je suis bien motivé à abuser allégrement de la class Background ! (d'autant plus que l'étape suivante c'est le positionnement et redimensionnement en fonction du stage et qu'elle diffuse un évenement Change, plus les propriétés maxHeight/maxWidth etc etc... parfait quoi ! ;-))

Le truc c'est que je voulais positionnemer le logo par rapport au Display principal (celui que je passe en paramètres dans DisplayObjects) mais faut peut-être que je fasse autrement..  tu fais comment toi ?

paste!

[ekameleon]

Hello :)

je me suis fait trompé par ton bout de code :) Regarde la documentation et la signature de la méthode align() de la classe :) Le second argument est un objet de type flash.geom.Rectangle (voir l'erreur)

du coup :

{
   id                  : "logo_align" ,
   type              : "Class" ,
   factoryValue : pegas.display.DisplayObjects ,

   properties     :
   [
       {
             name         : "align" ,
             arguments :
             [
                  { ref      : "logo" } ,

                  { value  : new flash.geom.Rectangle(0,0,450,50) } ,
                  { value   : pegas.draw.Align.BOTTOM }
             ]
       }
   ]
}

Donc pour la zone rectangulaire forcément moi ce qui me dérange c'est que tu prends référence sur une zone "display" inconnue dans ton code ? Comme souvent je rappelle qu'il est préférable de me donner un bout de code complet plutôt qu'une partie ;)

Sinon pour récupérer un flash.geom.Rectangle avec un DisplayObject en référence il y a des tas de solutions simples ... avec par exemple les méthodes getBounds() et getRect() de la classe DisplayObject.

Bien entendu la méthode que tu as choisies est préférable pour débuter et moins complexe... créer une petite classe qui hérite de Background ... suffit ensuite de faire un override sur la méthode viewChanged de la classe et de mettre les attributs "autoSize=true" et "isFull=true" selon les besoins.

Exemple dans Evideo de AST'r avec le footer :

http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/evideo/trunk/src/evideo/display/application/Footer.as
http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/evideo/trunk/deploy/context/display/footer.eden

Tu peux adapter l'exemple en fonction de tes besoins... pas besoin par exemple qu'il soit en isFull = true et dans la méthode viewChanged suffit de prendre une référence de ton logo et donc de positionner le logo avec DisplayObjects :)

Autre exemple avec la classe Wallpaper :

http://code.google.com/p/astr/source/browse/trunk/AS3/trunk/examples/evideo/trunk/src/evideo/display/application/Wallpaper.as

Suffit dans l'ioc de passer la référence de picture et donc d'adapter le viewChanged avec DisplayObjects.align

PS : note pour moi même, je dois finaliser la classe DisplayObjects en acceptant les méthods alignWithDisplay et alignWithStage.. cela peut simplifier la vie de tout le monde je pense ;)

EKA+ :)

[ths otra]

Hello !

Merci de ta réponse. Effectivement, j'avais un peu mis de côté  Evideo qui m'avait semblé un peu plus complexe comme premier exemple. Mais au début, j'avais effectivementcommmencé par faire une class Background (j'ai besoin d'un fond de couleur en dégradé et d'une image en fond). Seulement à un moment, je me suis dis que c'était inutile de créer une classe pour si peu.

J'ai une bar horizontal à faire après, j'avais donc bien noté la présence du footer ;-)


Je fouille du côté des méthodes getBounds() et getRect() de la classe DisplayObject pour placer mon machin.

C'est partiii !

Bonne journée et peut-être à plus tard ;-)


Thomas