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 créer la zone de texte défilante de l'état ArticleDetails en utilisant le composant Panneau de défilement disponible dans Flash Catalyst.

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

Sélectionnez l'état ArticleDetails depuis le panneau Etats.
Sélectionnez et ouvrez le composant DetailsView depuis le plan de travail (Clic droit > Modifier le composant ou double clic).

Le panneau Calques affiche maintenant uniquement les éléments contenus dans ce composant.

Sélectionnez les éléments graphiques de la barre de défilement (ScrollBar Thumb et ScrollBar Track) depuis le panneau Calques et convertissez les en Barre de défilement verticale en utilisant la même technique que décrite précédemment.
Les éléments de la barre de défilement se trouvent dans le dossier UI elements > TextArea (comme le montre l'image suivante).

Saisissez DetailsVScrollBar comme nom de composant.

Sélectionnez le composant et cliquez sur Modifier des parties pour définir les éléments Vignette et Piste (opération déjà décrite dans le chapitre |Barre de défilement verticale).

Nous allons maintenant créer le composant Panneau de défilement (la zone de texte défilante) qui consiste en:

• le contenu défilant: définissez l'option Contenu de défilement depuis le HUD;
• la barre de défilement: comme c'est le cas pour la liste de données, pour activer une barre de défilement dans le composant Panneau de défilement, il suffit simplement d'insérer à l'intérieur une instance de la barre verticale crée précédemment.

Editez le composant DetailsView et sélectionnez les composants zone de texte et barre de défilement verticale. Utilisez alors le HUD pour convertir ces objets en composant Panneau de défilement.

Saisissez ScrollableTextArea comme nom de composant.

Sélectionnez le Panneau de défilement que vous venez de créer et cliquez sur Modifier des parties.

Sélectionnez la zone de texte et cliquez sur Contenu de défilement (Recommandé) pour définir le contenu à défiler.

Vous pouvez modifier la taille de la zone visible en redimensionnant le composant pour l'adapter aux besoins de la mise en page.

Si vous compilez le projet (Ctrl + Entrée), la zone de texte défilante fonctionne désormais.
Cependant, vous pouvez remarque un comportement étrange de la barre de défilement causé par un mauvais positionnement de la vignette et de la piste. Pour corriger ça, vous devez accéder au composant barre de défilement (regardez le chemin ci-dessous)

Depuis le panneau Calques, vous pouvez voir que la Piste est positionnée au-dessus de la Vignette alors que ça devrait être l'inverse. Pour résoudre le problème, faites glisser le calque Vignette au-dessus de la Piste.

Avant:

Après:

Regardez le tutoriel Create a scrolling Text Panel in Flash Catalyst pour plus d'informations.

Les fichiers générés dans ce chapitre sont nombreux:

Les 3 skins de la barre verticale (similaires à ceux décrit dans la partie 3):

• DetailsVScrollBar.mxml
• DetailsVScrollBarThumb.mxml
• DetailsVScrollBarTrack.mxml

La skin du Panneau de défilement (qui est un composant Flex SkinnableContainer)

• ScrollableTextArea.mxml

Un composant MXML qui étend la classe Group et qui contient le contenu défilant. Il est utilisé par le composant ScrollableTextArea

• ScrollableTextAreaScrollingContent.mxml

La structure du projet:

Analysons le code. Premièrement, lorsque vous utilisez un Panneau défilant, Flash Catalyst crée une instance du composant SkinnableContainer, auquel est appliqué une skin personnalisée.
Dans le composant DetailsView.mxml, qui instancie le nouveau Panneau de défilement, nous trouvons ce code:

<s:SkinnableContainer x="33" y="453" skinClass="components.ScrollableTextArea"/>

Ci-dessous, le code source de la skin du composant, ScrollableTextArea.mxml.
Deux instances sont crées: la barre de défilement crée précédemment et un nouveau composant qui contient le contenu défilant.

<?xml version="1.0" encoding="utf-8"?>
<s:Skin 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:components="components.*"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.SkinnableContainer")]</fx:Metadata>
 
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>
 
	<components:ScrollableTextAreaScrollingContent 
		id="contentGroup" x="0" y="7" width="410"
		height="246" clipAndEnableScrolling="true"
		height.normal="171"/>
 
	<s:VScrollBar x="410" y="0" 
				  fixedThumbSize="true" 
				  skinClass="components.DetailsVScrollbar"
				  viewport="{contentGroup}"/>
</s:Skin>
 
<s:SkinnableContainer x="33" y="453" skinClass="components.ScrollableTextArea"/>

Voici le code source du contenu défilant: ScrollableTextAreaScrollingContent.mxml

<?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"
		 fc:resizable="false">
	<s:RichText d:id="22" d:userLabel="DetailsText" x="0" y="0" width="388"
				height="248" ai:aa="2" color="#F2F2F2" columnCount="1"
				fontFamily="Arial" fontSize="18" kerning="on"
				tabStops="S36 S72 S108 S144 S180 S216 S252 S288 S324 S360"
				flm:variant="12" whiteSpaceCollapse="preserve">
		<s:content><s:p><s:span>I have done a simple comparative launchin… [TEXT REMOVED IN THIS SAMPLE]</s:content>
	</s:RichText>
	<s:RichText x="0" y="258" text="Add&#xa;&#xa;More&#xa;&#xa;Content&#xa;&#xa;Here" fontFamily="Arial"/>
</s:Group>

Le projet nommé 005_ScrollPanel.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 ?