Quel est votre flux de travail pour l'habillage des applications Flex?

Question

Aussi, par où commencez-vous si vous voulez créer un complet Flex 4 peau? Existe-t-il une liste de toutes les "pièces" (composants) dont vous avez besoin pour créer des graphiques pour quelque part, ou des exemples complets d'habillages pour les utiliser comme modèle? Et vos habillages s'affichent-ils correctement dans la vue de conception de Flash Builder? (Y compris les polices incorporées)

Answer 1

La plupart des gens pointeront vers Flash Catalyst, mais la dernière fois que je l'ai regardé était pas tout compris en termes de création d'une peau complète/thème, sans parler d'autres problèmes inhérents à 1,0 logiciel. Je commence par copier les fichiers d'habillage par défaut et les modifier, ainsi que créer un nouveau fichier CSS basé sur le fichier defaults.css fourni avec le SDK. La partie la plus délicate est que tous les composants (Tree, DataGrid, DateChooser, ColorPicker, etc) ne sont pas disponibles en tant que composants Spark, ce qui signifie que vous avez besoin d'un skin/thème complet pour créer un tas de skins mx. Bottom line: Si vous êtes sérieux au sujet de faire cela correctement, vous devrez passer beaucoup de temps à comprendre defaults.css et les classes de peau à laquelle il se réfère. Pour répondre à votre question initiale, mon flux de travail personnel consiste à créer une maquette de l'habillage dans OmniGraffle, puis à l'utiliser comme guide pour modifier les copies des fichiers d'habillage par défaut (regardez dans spark.skins, et mx.spark. skins) en manipulant directement le mxml (par opposition à l'utilisation d'un outil graphique tel que Illustrator ou Catalyst.)

Espérons que cela vous aide.

Answer 2

C'est là que je normalement « commencer »

http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

Une fois que je savoir quels sont les éléments que je dois la peau, et je ne peux pas changer ce que je veux changer Flex avec CSS, je aller dans Flash et commencer à briser les composants et les peaufiner.

http://www.adobe.com/devnet/flex/articles/skins_styles.html

(Aussi, je ne l'ai jamais eu quoi que ce soit Render "correctement" en vue de la conception)

Answer 3

Fondamentalement, vous avez beaucoup d'options quand écorcher Flex 4 applications:

• Utilisation de styles "généraux" (chromeColor, selectionColor, focusColor, ...). Ceci est généralement appelé "Styling" au lieu de Skinning parce que vous ne modifiez que l'apparence générale de l'application. C'est de loin le moyen le plus simple de changer rapidement l'apparence de votre application sans rien savoir de FXG, MXMLG, ... L'inconvénient est qu'il ressemble toujours à une application Flex, mais avec des couleurs/polices différentes. produire des fichiers FXG. Ces outils peuvent être Illustrator, Photoshop, Flash CS5. Vous concevez chacun des composants spark avec ces outils et exportez le résultat au format .fxg. FXG est génial parce que c'est optimized, mais vous ne pouvez pas utiliser des choses telles que la liaison de données
• Écrivez votre peau en MXMLG, à la main (en partant de zéro ou en copiant la peau d'étincelle par défaut) ou avec l'aide de Flash Catalyst. Catalyst peut prendre votre dessin Illustrator ou Photoshop et le convertir en MXMLG. L'expérience montre que c'est encore douloureux, même avec la dernière version. Et vous finissez souvent par faire des choses comme this.

Dans notre équipe, le flux de travail concepteur/développeur avec Flash Catalyst n'existe pas. La prochaine version est meilleure mais elle est encore loin de ce que Microsoft fait avec Visual Studio/Blend. Cela dit, la nouvelle architecture Spark est géniale.Le skinning est beaucoup plus facile, flexible et lisible. Avec cette architecture, un développeur code le composant et le concepteur ne l'apprend qu'en connaissant le contrat (skinparts, skinstates, data) Ceci est également vrai pour les vues si vous utilisez le modèle Presentation Model.

Il n'y a pas d'habillage "modèle" comme celui disponible dans Flex 3 car l'habillage n'utilise plus de symbole. Ce qui pourrait être fait cependant est un explorateur de style Flex 4. Un dernier mot, il a déjà été dit ici, mais n'oubliez pas qu'avec la version actuelle (4.1), il n'y a pas d'équivalent d'étincelle pour tous les composants, donc vous utiliserez toujours les techniques de skin Flex 3 pour composants, tels que DataGrid, Tree, ...