Discussion :

[tiboudchou]

Bien le bonjour à vous tous,

Comme vous le savez, je m'intéresse à la techno Flex depuis quelques temps.
D'abord d'un point de vue architecture MVC puis communication avec des services Spring Java.

Ma question du jour est l'intégration d'un design.

En Web "classique", il suffit de transformer la jpeg du designer en html/css. Certains outils comme photoshop aide pour découper une image en html.

En Flex, comment cela se passe ? Le designer me fournit une jpeg et ensuite ? Y a t-il des outils ? Des méthodes prouvées ?

Merci à tous

Bonne journée

[ellene]

Bonjour ma réponse tient en deux mots Flash Catalyst

Mais cette dernière est encore en version béta et bien évidemment il faudra par la suite une licence mais si on peut s'offrir une licence CS4 alors pourquoi pas Flash Catalyst .
Et sinon comme le dis CR_Gio il y a aussi le Skinning disponible dans Flex 3 et surtout dans Flex 4 (attention cette version n'est toujours pas releasée !!).

[tiboudchou]

Ok merci pour les infos.

1. Vous savez quand Flex 4 va être "releasé" ?

2. Quelqu'un a t-il déjà utilisé Catalyst dans un process de développement :
a. Le designer produit un fichier illustrator
b. Le designer ou le développeur produit des composants flex/css à partir d'un fichier illustrator (avec Catalyst)
c. Le développeur développe l'application (logique métier, connexion aux données) à partir des composants flex/css produit en b.
?
Une expérience la dessus ?

[Jim_Nastiq]

Flex 4 c'est pour 2010 mais je ne sais pas trop à quel semestre...
Pour Catalyst à éviter selon moi pour le moment, c'est beau mais vraiment pénible à reprendre en main pour le développeur, et ce qui marchait sur la beta 1 ne marche plus sur la beta 2, et inversement ... bref, tant qu'il n'y a pas de release final je conseille d'éviter, pour l'instant c'est juste pour faire "mumuse"

Enfin, si tu arrives à intégrer en HTML/CSS une maquette, tu n'auras aucun souci à le faire avec Flex , en plus même pas besoin de hack pour certains navigateur et cie car c'est le falsh player qui lit la css (les joies du CSS et des différents navigateur )

[tiboudchou]

Enfin, si tu arrives à intégrer en HTML/CSS une maquette

Non, justement, jamais fait
Jusqu'à présent, c'est le designer, qui, après que j'ai validé son design, découpait en html/css.

Et en ce moment je me renseigne pour découper un design en composants flex/css

[Kantizbak]

Avec Flex 3 c'est possible mais ça demande du travail, il n'existe pas d'outil.
Comme te l'a dit eillen, la prochaine version de flex va proposer une solution à ton besoin
J'ai testé Catalyst il y a quelques mois et je ne l'ai pas trouvé abouti... mais bon je ne suis pas designer

[tiboudchou]

Ok merci pour toutes vos réponses.
Mais Flex Skinning, ce n'est pas juste pour skinner les composants standards ?

Moi je voudrais créer un composant (qui n'existe pas en Flex classique) à partir d'un calque photoshop.

Comment créer un tel composant (forme, logique, comportement, etc.) ? Outil ? Tuto ? Autres ?

[Kantizbak]

A moins que je ne me trompe, un calque photo shop n'a pas de comportement... un composant Flex est AVANT TOUT un comportement.
Tu parle donc de 2 choses différentes, mais je peux me tromper...

[tiboudchou]

A moins que je ne me trompe, un calque photo shop n'a pas de comportement

Tout à fait

un composant Flex est AVANT TOUT un comportement

Certes, mais c'est également une forme et un design

Tu parle donc de 2 choses différentes

Oui elles sont différentes. Et c'est justement l'objet de ce topic. Comment passer des calques du designer (qui montrent le design d'un composant dans différents états) à un vrai composant Flex (mxml, as, css) ?

[Kantizbak]

bon il ya une solution toute simple avec les css :

en décrivant les zones "étirables" de ton dessin et en générant un swf (ça c'est ce que je récupère, je ne sais pas comment tu peux le générer, avec Illustrator peut etre) tu peux déclarer qq chose du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
ComboBox{
background-image : Embed(source='mon.swf', symbol='monSymbol');
background§size : '100%';
}