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 cet article, nous allons utiliser les interactions et les transitions de Flash Catalyst.

Vous avez besoin de lire les chapitres précédents pour comprendre cet article.

Pour compléter notre prototype, nous devons maintenant intégrer les fonctionnalités suivantes:

• Activation du bouton BACK, dans l'état ArticleDetails, pour retourner à la liste du blog;
• Application de transitions régulières lors du changement d'états pour rendre l'application plus séduisante;
• Conversion du texte statique de la barre d'actions de l'état BlogList en un composant Flash Catalyst TextInput (Cette procédure est décrite au chapitre 7);

Ouvrez le composant DetailsView (modifier le composant) et sélectionner le bouton BackButton.

Ajoutez une interaction sur le bouton en utilisant les options suivantes:

Pour supporter les états classiques des boutons (Haut, Dessus, Bas, Désactivé), nous devons, avant l'assignation de l'interaction « OnClick », convertir les éléments de mise en page du bouton en un composant Flash Catalyst Button. Cependant, dans ce projet, nous n'en avons pas l'utilité.

Le fichier DetailsView.mxml contient désormais le code suivant:

[...]
<fx:Script>
	<![CDATA[
	protected function backButton_clickHandler():void
	{
	mx.core.FlexGlobals.topLevelApplication.currentState='BlogList';
	}
	]]>
 
</fx:Script>
[...]
 
<lib:Bullet_3_Backward d:userLabel="BackButton" 
					   x="11" y="11" 
					   blendMode="normal"
					   click="backButton_clickHandler()" 
					   flm:knockout="false"/>

Dans Flash Catalyst, nous pouvons aussi appliquer des effets de transition lors du changement d'états afin de rendre la navigation plus agréable.
Nous allons utiliser le panneau Scénarios pour ajouter les transitions par défaut disponibles dans Flash Catalyst.

Utilisez le fil d'ariane pour retourner à la racine de l'application pour voir les trois états.

Ouvrez le panneau Scénarios s'il est masqué.

Le panneau Scénarios liste tous les transitions d'états possibles.
Toutefois, dans notre application, nous allons en utiliser que certaines.

• SplashScreen > BlogList
• BlogList > ArticleDetails
• ArticleDetails > BlogList

Dans le panneau Scenarios, localisez la transition SplashScreen > BlogList et cliquez sur le bouton Transition régulière (ci-dessous) pour appliquer la transition par défaut.

Pour visualisez un aperçu de la transition, cliquez sur le bouton PLAY.

Répétez les opérations précédentes pour appliquer les transitions régulières sur les éléments suivants:

• BlogList > ArticleDetails
• ArticleDetails > BlogList

En Utilisant le panneau Propriétés, qui affiche les paramètres de la transition sélectionnée, vous pouvez changer les paramètres tels que la durée et l'accélération.

Vous pouvez aussi changer la durée et la position des transitions directement depuis le panneau Scénarios

ou en utilisant le panneau défilant à côté du bouton Transition régulière.

Compilez l'application (Ctrl + Entrée) pour tester les transitions.

Grâce à la fragmentation du projet en composant personnalisés, le code MXML généré pour les transitions est relativement propre.

Dans le fichier principal, main.mxml, quelques lignes de code ont été ajoutées pour définir les transitions des trois états principaux:

[…]
	<s:states>
		<s:State name="SplashScreen"/>
		<s:State name="BlogList"/>
		<s:State name="ArticleDetails"/>
	</s:states>
 
	<components:SplashScreenView id="splashscreenview1" includeIn="SplashScreen" x="-1" y="1"/>
	<components:BlogView id="blogview1" includeIn="BlogList" x="0" y="0"/>
	<components:DetailsView id="detailsview1" includeIn="ArticleDetails" x="0" y="0"/>
 
	<s:transitions>
		<s:Transition fromState="SplashScreen" interruptionBehavior="stop" toState="BlogList">
			<s:Parallel>
				<s:Fade duration="500" target="{splashscreenview1}"/>
				<s:Fade duration="500" target="{blogview1}"/>
			</s:Parallel>
		</s:Transition>
		<s:Transition fromState="BlogList" interruptionBehavior="stop" toState="ArticleDetails">
			<s:Parallel>
				<s:Fade duration="500" target="{blogview1}"/>
				<s:Fade duration="500" target="{detailsview1}"/>
			</s:Parallel>
		</s:Transition>
		<s:Transition fromState="ArticleDetails" interruptionBehavior="stop" toState="BlogList">
			<s:Parallel>
				<s:Fade duration="500" target="{blogview1}"/>
				<s:Fade duration="500" target="{detailsview1}"/>
			</s:Parallel>
		</s:Transition>
	</s:transitions>
</s:Application>

Le projet nommé 006_Transitions.fxp attaché à ce tutoriel contient tous les codes générés précédemment.

• 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 ?