Cet article est une traduction du tutoriel Optimizing MXML code in Flash Catalyst “Panini” de Fabio Biondi.

Fabio Biondi m'a donné son accord concernant la traduction de ce tutoriel.

Dans ce tutoriel (divisé en 9 chapitres), nous allons créer un prototype d'une lecteur RSS typique pour les mobiles en utilisant Adobe Flash Catalyst et en important la mise en page depuis Adobe Illustrator CS5.

Nous allons utiliser une grande partie des composants les plus importants disponibles dans Flash Catalyst ” DataList ”, ” VerticalScrollBar ”, ” ScrollPanel ”, ” TextInput ”, appliquer des transitions et des itérations afin de permettre la navigation et créer une meilleure expérience utilisateur.

Nous allons également analyser les processus d'importation d'éléments d'interface d'Illustrator vers Flash Catalyst et nous allons structurer le projet afin que le code mxml généré par Catalyst soit de bonne qualité et bien structuré, adapté pour une utilisation ultérieure dans Flash Builder.

Pour cette raison, après chaque chapitre, nous allons jeter un oeil au code source pour voir ce qui se passe dans les coulisses.

Etre familier avec Adobe Flash Catalyst, Flex et MXML

Note: Ce tutoriel se concentre sur l'utilisation de Flash Catalyst pour construire une application de style mobile. L'utilisation d'Illustrator pour la conception de l'interface utilisateur est au-delà du champ d'application de ce tutoriel.

• Illustrator CS5 (Téléchargement version essai)
• Flash Catalyst CS5 (Téléchargement version essai)
• Flash Builder 4 (Téléchargement version essai)

Vous n'avez besoin que de Flash Catalyst CS5 pour suivre ce tutoriel.

Les fichiers sources contiennent les fichiers Adobe Illustrator et un projet Catalyst pour chaque chapitre.

• Téléchargement de toutes les mises en page

L'application est composée de 3 vues principales:

1. Ecran de démarrage: simple page statique avec un contenu importé depuis Adobe Illustrator.
2. Liste des articles du blog: cette page utilise des composants ” VerticalScrollBar ” et ” DataList ” pour créer une liste déroulante d'éléments cliquables. En haut, en plus, nous allons également utiliser le composant “TextInput” pour créer un champ de texte de saisie pour simuler une zone de recherche.
3. Détail d'un article: cet état représente une page d'affichage des détails de l'élément sélectionné. En plus de contenir des images importées à partir d'Illustrator, nous allons également créer une zone de texte défilantet en utilisant le composant “ScrollPanel”. Nous allons également ajouter quelques intéractions sur les boutons.

Voici le diagramme d'application, qui représente la structure hiérarchique de composants que nous allons créer dans ce projet:

• “Custom/generic components” représente des composants MXML génériques et étend généralement la classe Group;
• “Other Catalyst components” sont des éléments nécessaires pour les composants qui les contiennent;
• Les rectangles Orange représentent plutôt les skin Spark (d'autres fichiers MXML qui étendent la classe Skin et qui peuvent être utiliser pour personnaliser les composants Flex 4);

• Optimisation de code MXML dans Flash Catalyst – Introduction
• Optimisation de code MXML dans Flash Catalyst – Partie 1 – D'Illustrator vers Catalyst
• Optimisation de code MXML dans Flash Catalyst – Partie 2 – Composants génériques personnalisés
• Optimisation de code MXML dans Flash Catalyst – Partie 3 – Le composant VerticalScrollBar
• Optimisation de code MXML dans Flash Catalyst – Partie 4 – Le composant Liste de données
• Optimisation de code MXML dans Flash Catalyst – Partie 5 – Le composant Panneau de défilement
• Optimisation de code MXML dans Flash Catalyst – Partie 6 – Interactions et transitions
• Optimisation de code MXML dans Flash Catalyst – Partie 7 – Le composant TextInput
• Optimisation de code MXML dans Flash Catalyst – Partie 8 – Optimisation du code MXML
• Optimisation de code MXML dans Flash Catalyst – Partie 9 – Développer des applications mobiles avec Catalyst ?