Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Optimisation de code MXML dans Flash Catalyst – Partie 8 Optimisation du code

Compatible Flash Catalyst CS5. Cliquer pour en savoir plus sur les compatibilités.Compatible Illustrator CS5. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 04 juillet 2011

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.

Présentation

Dans cet article, nous allons optimiser le code généré par Flash Catalyst en divisant la mise en page en différents composants personnalisés afin de rendre le code plus lisible.

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

Création de composants personnalisés

Le code MXML généré par défaut n'est pas si mauvais que ça.
Cependant, le nombre de lignes dans les trois composants principaux de l'application est vraiment trop important et le code n'est pas vraiment lisible. Les composants BlogView et DetailView possède 150 lignes chacun, dont la majorité représente les éléments graphiques des deux barres d'actions placées en haut de chaque état.

Pour « optimiser » ces deux composants, sélectionnez tous les éléments des différentes barres d'actions et convertissez les en un composant Composant personnalisé/générique.

Définissez BlogBarView comme nom de composant.

Le code du composant BlogView est maintenant plus facile à lire parce que plus de cent lignes ont été déplacées vers le nouveau composant appelé BlogBarView.\\A leur place, dans le composant BlogView, vous trouvez une ligne de code qui crée une nouvelle instance du composant BlogBarView.

[...]
<components:BlogBarView x="0" y="0"/>
[...]

Nous allons maintenant répéter les opérations précédentes dans le composant DetailsView.\\Ouvrez le composant et sélectionnez tous les éléments de sa barre d'action pour les convertir en un nouveau Composant personnalisé/génerique appelé DetailsBarView.

Cependant, un message d'erreur apparaît.

La raison est que nous avons précédemment défini une interaction sur le bouton Back et ce message notifie que ces actions seront supprimées lorsque nous allons créer ce nouveau composant.
Vous pouvez cliquer sur OK mais nous allons devoir appliquer de nouveau l'interaction sur le bouton Back.
Cependant, en regardant le code, nous voyons que le composant DetailsView.mxml est encore dense.
Nous allons pouvoir convertir en un nouveau Composant personnalisé/générique, les éléments graphiques du pied de page: le bouton More details et les deux lignes horizontales.

Sélectionnez ces éléments et répétez l'opération réalisé précédemment pour les convertir en un Composant personnalisé/générique appelé DetailsFooterView.

En analysant le code source du composant DetailsView.mxml, vous remarquez que les lignes du code ont diminué à moins de 40, ce qui est acceptable pour ce type de projet.
Le code contient maintenant les instances des composants DetailsFooterView et DetailsBarView.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
		 xmlns:ai="http://ns.adobe.com/ai/2009"
		 xmlns:d="http://ns.adobe.com/fxg/2008/dt"
		 xmlns:flm="http://ns.adobe.com/flame/2008"
		 xmlns:lib="assets.graphics.Layout.*"
		 xmlns:components="components.*"
		 fc:resizable="false">
	<fx:Script>
		<![CDATA[
 
		]]>
 
	</fx:Script>
	<fx:DesignLayer ai:artboardIndex="2" ai:x="1079" d:layerType="page" d:pageHeight="800" d:pageWidth="480" d:userLabel="ArticleDetails Layers">
		<fx:DesignLayer d:id="17" d:userLabel="UI elements">
			<s:Rect d:userLabel="bg" x="0" y="0" width="480" height="800">
				<s:fill>
					<s:SolidColor color="#333333"/>
				</s:fill>
			</s:Rect>
			<fx:DesignLayer d:id="18" d:userLabel="Footer">
				<fx:DesignLayer d:id="19" d:userLabel="MoreDetail Button">
				</fx:DesignLayer>
 
 
 
 
                       <components:DetailsFooterView x="0" y="713"/>
 
 
			</fx:DesignLayer>
			<fx:DesignLayer d:id="21" d:userLabel="TextArea">
				<s:SkinnableContainer x="33" y="453" skinClass="components.ScrollableTextArea"/>
			</fx:DesignLayer>
			<s:BitmapImage d:id="23" d:userLabel="Image" x="26" y="90" width="428" height="343"
						   smooth="true" source="@Embed('/assets/images/Layout/timthumb.jpg')"/>
		</fx:DesignLayer>
		<fx:DesignLayer d:id="24" d:userLabel="ArticleDetails ActionBar">
 
 
                <components:DetailsBarView x="0" y="0"/>
 
 
		</fx:DesignLayer>
	</fx:DesignLayer>
</s:Group>

Pour compléter l'application, appliquer de nouveau l'interaction sur le bouton Back.
Ouvrez le composant DetailsBarView > DetailsView et insérez de nouveau l'interaction.

Nous allons aussi ouvrir une page HTML quand l'utilisateur clique sur le bouton More Details. Sélectionnez le bouton contenu dans le composant DetailsView > DetailsFooterView et ajouter l'interaction suivante

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

Sommaire