Flex workflow et meilleures pratiques

Question

Tout en passant en revue les tutoriels et les exemples de projets Flex, ils semblent se concentrer principalement sur les éléments de formulaire et les grilles de données, plutôt que de fournir du contenu de manière plus visuelle. C'est ce dont j'ai besoin pour ce projet à venir. En conséquence, j'ai un trou dans mon niveau de confort que j'espère qu'un développeur Flex expérimenté peut m'aider à déraper.

Le projet que j'ai est un outil d'index de collaboration pour afficher les produits et services des clients en utilisant une interface utilisateur avec quatre panneaux distincts.

1. Le panneau supérieur gauche contiendra une liste de catégories dans un défilement vertical.
2. Le panneau inférieur gauche contiendra un effet de roue de sous-catégories, basé sur la catégorie choisie.
3. Le panneau supérieur droit contiendra les informations détaillées - Le titre et la description de la catégorie sélectionnée. Et en dessous, le titre et la description de la sous-catégorie sélectionnée.
4. Le panneau inférieur droit contiendra une liste des éléments de service et de produit appartenant à la sous-catégorie. En dessous de chaque élément de la liste sera un lien accordéon avec des liens URL pour plus d'informations dans chacun.

Il y aura un fichier XML contenant l'arbre de données complet pilotant cet index de collaboration. En outre, en fonction de la catégorie choisie, les variances de couleur apparaîtront en arrière-plan de certaines des sections de mise en page.

Donc, il semble que je vais devoir créer quelques composants personnalisés, peut-être adopter quelques composants existants, et tout re-skin afin qu'il apporte un aspect synonyme de la marque du client.

Même si j'ai plein de questions, aborder la première section semble logique, et la première question qui me vient à l'esprit dans cette section est: dans le panneau supérieur gauche, la liste des catégories devrait-elle être standard? -skinned? ou devraient-ils être des instances d'objet apportées en quelque sorte à Flex. Ensuite, dans la deuxième section, j'ai vu un composant qui affichait des images d'une manière qui était parfaite pour cette section. Mais, les éléments montrés ici ne seraient que des blocs de coin visuels et arrondis avec des noms de sous-catégories. Donc, je ne suis pas sûr que ce composant fonctionnera ou non.

Answer 1

1. AS3 est très différent de AS2. Je suis sûr que vous l'avez déjà remarqué, mais il vaut la peine de le mentionner au cas où vous ne l'auriez pas fait. Les composants Flex sont essentiellement un ensemble d'objets Flash. Donc, vous pouvez, en quelque sorte, écrire chaque composant Flex seul en utilisant simplement des Sprites et/ou des TextFields. Cela inclut les skins. Une peau est à peu près une forme attachée à un objet avec un dessin personnalisé. Un bouton est juste une combinaison d'image + textField + skin, avec tous les événements et les transitions de peau gérés pour vous.

La raison pour laquelle je mentionne ceci est qu'il n'y a pas de bonne façon de faire ce que vous voulez. Si vous utilisez le contrôle List, vous devez probablement écrire un composant qui implémente IListItemRenderer. Bouton fait, de sorte que vous pouvez simplement remplacer le bouton, pas de problèmes. Vous pouvez avoir des boutons avec une étiquette + icône. Ou juste une icône. Ou juste une étiquette. Vous pouvez également définir l'emplacement de l'étiquette par rapport à l'icône (labelPosition = "above | below | left | right"). Il y a beaucoup de flexibilité intégrée.

Answer 2

J'ai développé Flex 4 assez fortement au cours des 6 derniers mois et je dois dire que cela rendrait votre travail très facile.

Voici ce que je ferais:

1) Départ FlexSpaces pour le meilleur Flex 3 architecture du projet. Il s'agit d'un CMS complet Flex avec catégories, tags, recherche, système de fichiers, collaboration, etc.

2) Téléchargez le Flex 4 SDK et installez-le. Il n'est plus nécessaire d'utiliser Flex 3, si vous commencez tout juste, allez certainement avec Flex 4. Si vous avez besoin de composants personnalisés, Spark (la nouvelle architecture de composants) a une façon très simple de les faire (voici un blog cool construire un Rating Component dans Spark qui vous montre comment le faire). Flex 4 est rétrocompatible avec les composants Flex 3, de sorte que vous pouvez utiliser des projets/composants que vous trouvez sur Internet si vous le souhaitez, pas de problème.

3) Pour la liste de catégories en haut à gauche, si les catégories ne sont pas imbriquées, j'utiliserais le spark.components.List, (here's one en utilisant des rendus d'éléments plus complexes). Ensuite, il suffit d'étendre le spark.components.supportClasses.ItemRenderer, qui agit comme une peau. Si les catégories sont imbriquées, utilisez simplement le mx.controls.Tree. Jetez un coup d'œil à ce projet FlexSpaces (ils montrent comment utiliser XML/ArrayCollections dans l'arborescence, votre question sur les "instances d'objets amenées en flexion").

4) Pour l'effet de la roue, la seule chose que je n'aime pas à propos de Spark est qu'il est difficile d'animer les mises en page. Mais les gens commencent à faire des mises en page 3D, consultez Here's 5 3D Layouts for Flex 4 par Ryan Campbell. Il y a aussi OpenFlux si vous voulez des mises en page très facilement animées. Les effets Flex en général sont assez maladroits, donc je finis par utiliser Tweener ou TweenMax pour les animations. 5) En ce qui concerne la reskinning, essayer de reskin en utilisant l'architecture Flex 3 serait une tâche monumentale, si vous vouliez la rendre propre et agréable, et il serait fou de tenter de réutiliser ce code dans le projet suivant. Pour Spark, c'est un jeu d'enfant, et c'est 100% mxml. Il suffit de copier le dossier sparkSkins entier du SDK et commencer à changer les choses, et vous êtes prêt à partir.

Mais oui, ce projet FlexSpaces est un exemple très solide pour ce dont vous parlez. Totalement open source.

Vive

Answer 3

Merci pour la mention de FlexSpaces. Notez qu'il a finalement été porté vers Flex 4, y compris une conversion de premier passage pour déclencher des contrôles plus tôt cette année. Encore à faire: ajouter l'injection de dépendance avec Spring ActionScript, supprimer l'utilisation de Cairngorm 2.x.