Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Optimisation de code MXML dans Flash Catalyst – Partie 4 Composant Liste de données

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 16 juin 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 utiliser Flash Catalyst pour créer une liste de données personnalisée (aussi appelée Flex 4 Spark List).

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

Qu'est-ce que le composant Liste de données

Le composant Liste de données disponible dans Flash Catalyst représente le composant Spark List disponible dans Flex 4.x. Dans Flash Catalyst, ce composant requiert 2 éléments pour fonctionner correctement:

  • RepeatedItem: qui est le rendu des données de la liste que vous pouvez spécifiez en utilisant L'affichage tête haute (HUD – Heads-Up Display)
  • ScrollBar: ce composant n'est pas sélectionnable depuis L'affichage tête haute (HUD – Heads-Up Display) mais vous pouvez simplement placer une instance du composant dans la liste de données.

Qu'est-ce qu'un rendu de données

Appliquer un rendu de données personnalisé à un composant basé sur une liste signifie la création d'une mise en page personnalisée pour les éléments de la liste, la surcharge du rendu de données par défaut (habituellement un simple texte) et l'intégration de nouveaux éléments statiques et dynamiques.

Dans ce chapitre, le rendu de données de la liste est représenté par un texte multiligne et un séparateur horizontal mais il peut aussi inclure des boutons, des images et d'autres composants.

Créer le composant Liste de données

Premièrement, ouvrez le composant BlogView (clic droit > Modifier le composant) présent dans l'état BlogList.

Dans ce composant, en plus de la barre de défilement verticale que nous avons crée précédemment, il y a de nombreux exemples de rendu de données crées dans Illustrator.

Comme le composant Liste de données de Catalyst requiert un seul élément répété, vous pouvez supprimer tous les rendus de données supplémentaires à l'exception du premier qui va être utilisé par la liste de données.

Donc sélectionnez (en utilisant l'outil de sélection), tous les rendus de données à l'exception du premier et appuyez sur la touche Suppr du clavier pour les supprimer tous.

En tant qu'alternative à l'étape précédente, rappelez vous que vous pouvez sélectionner facilement les objets graphiques en utilisant le panneau Calques.

Par exemple, pour sélectionner tous les rendus de données (lignes horizontales et textes), Vous pouvez en effet ouvrir le panneau Calques, puis sélectionnez le dossier qui contient tous les rendus de données.

Comme vous pouvez le voir, une bonne organisation des calques dans Illustrator facilite le travail dans Catalyst.

Maintenant, sélectionnez tous les éléments nécessaires au composant Liste de données:

  1. le texte multiligne (qui sera une partie de l'élément répété)
  2. la ligne horizontale (qui sera une partie de l'élément répété)
  3. la barre de défilement verticale que nous avons crée au chapitre précédent

Depuis le menu contextuel (clic droit), sélectionnez l'option Choisir un composant > Liste de données

Définissez BlogDataList comme nom de composant:

Sélectionnez le composant Liste de données depuis l'espace de travail et cliquez sur Modifier des parties depuis le HUB

Définissez les objets qui vont servir au rendu des données de la liste (élément répété) en sélectionnant le champ de texte et la ligne horizontale et en cliquant sur Choisir une partie > Elément répété (suggéré)

Si la procédure a fonctionné, le composant Liste de données a ajouté automatiquement 5 éléments par défaut qui ont acquis leur mise en page depuis le modèle de l'élément répété.

Pour tester le fonctionnement de la barre de défilement, il est nécessaire d'insérer des éléments additionnels.

Vous pouvez le faire en cliquant sur le bouton Ajouter une ligne disponible dans le panneau Données en phase de conception, ce qui va dupliquer le contenu de l'élément sélectionné.

Ce panneau contient en fait le texte des éléments de la liste.

Grâce au panneau Données en phase de conception, vous pouvez aussi effectuer des changements sur les éléments existants en double cliquant sur l'élément que vous voulez mettre à jour.

Le composant Liste de données est maintenant composé de nombreux éléments et la légende du 4ème élément est mise à jour.

NOTE: Catalyst permet la création de rendu d'élément complexe, avec des images et différents champs de texte qui peut être géré par le panneau Données de conception. Cependant, nous n'allons pas discuter de ce sujet dans ce tutoriel. Regardez cette vidéo si vous voulez en savoir plus: Create a DataList In Flash Catalyst

Comme expliqué précédemment, pour utiliser le composant Vertical Scrollbar dans une liste de données, il suffit simplement d'en placer une instance à l'intérieure. Il n'y a donc par conséquent, pas d'étapes supplémentaires et nous pouvons compiler le projet (CTRL + ENTREE) pour lancer le test du composant Liste de données.

Ajout d'interactions

Maintenant nous devons ajouter l'événement onSelect pour rediriger les utilisateurs vers l'état ArticleDetails après chaque sélection dans la liste.

Utilisez le fil d'ariane pour retourner à l'intérieur du composant BlogView.

Sélectionnez le composant BlogDataList dans l'espace de travail en utilisant l'outil de sélection.

Cliquez sur le bouton “Ajouter une interaction” depuis le panneau Interactions. Entrez les valeur suivantes pour rediriger les utilisateurs vers l'état ArticleDetails après la sélection d'un élément de la liste.

Sinon, en utilisant l'option «Quand un élément spécifique est sélectionné” (voir l'image ci-dessous), vous pouvez également spécifier une itération différente pour chaque élément de la liste, bien que dans ce projet, nous n'en ayons pas besoin.\\Cependant, ce peut être une option intéressante si vous avez créé plusieurs composant DetailsView, sous forme d'états, avec pour chacun, un contenu (texte et images) lié à chaque élément de la liste.

Toutefois, dans cet exemple, les utilisateurs seront toujours dirigés vers le même état, ArticleDetails, affichant le même contenu indépendamment de l'élément de liste sélectionné.\\Flash Catalyst peut être utilisé pour créer des prototypes et des modèles de composant/vue et il n'est donc pas nécessaire de couvrir toutes les circonstances qui peuvent être traitées dans Flex à un stade ultérieur.

Le code MXML généré

Quand vous créez un composant Liste de données, Flash Catalyst génère les fichiers suivants:

  • NomDuComposant.mxml
  • NomDuComposantRepeatedItem

Le premier fichier est la skin du composant Liste de données.\\Dans ce projet, Flash Catalyst a généré le fichier BlogDataList.mxml:

<?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"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.List")]</fx:Metadata>
 
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>
 
	<s:DataGroup id="dataGroup" x="0" y="0" width="481" height="701" clipAndEnableScrolling="true"
				 itemRenderer="components.BlogDataListRepeatedItem">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
	</s:DataGroup>
 
	<s:VScrollBar x="459" y="5" fixedThumbSize="true" skinClass="components.BlogVScrollbar"
				  viewport="{dataGroup}"/>
</s:Skin>

Le fichier BlogDataListRepeatedItemRenderer.mxml représente le rendu d'élément du composant DataList, et il est utilisé par la skin BlogDataList ci-dessus:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 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"
				autoDrawBackground="false" fc:resizable="false">
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
		<s:State name="selected"/>
	</s:states>
	<s:RichText d:id="9" d:userLabel="Label" x="24" y="0" width="432" height="47"
				ai:aa="2" color="#F2F2F2" columnCount="1" fontFamily="Arial"
				fontSize="18" kerning="on"
				tabStops="S36 S72 S108 S144 S180 S216 S252 S288 S324 S360 S396"
				text="{data}"
				flm:variant="3" whiteSpaceCollapse="preserve"/>
	<s:Group d:userLabel="HRule" x="0" y="59">
		<s:Line d:userLabel="hrule" x="0.5" y="0.5" xTo="480">
			<s:stroke>
				<s:SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#333333"/>
			</s:stroke>
		</s:Line>
		<s:Line d:userLabel="hrule" x="0.5" y="1.5" xTo="480">
			<s:stroke>
				<s:SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#999999"/>
			</s:stroke>
		</s:Line>
	</s:Group>
	<s:Rect d:userLabel="Item Highlight Rectangle" width="481" height="61"
			alpha.hovered="0.3"
			alpha.normal="0"
			alpha.selected="0.5">
		<s:fill>
			<s:SolidColor color="0xCED7EE"/>
		</s:fill>
	</s:Rect>
</s:ItemRenderer>

En outre, quand vous créez et utilisez un composant Liste de données, Flash Catalyst créé une instance du composant Spark List.

A l'intérieur du composant personnalisé BlogView (créé au début du tutoriel), il y a maintenant une instance de la classe List, dont la propriété skinClass est définie sur BlogDataList.

<s:List id="list1" x="1" y="90" change="list_changeHandler()"
		skinClass="components.BlogDataList">
	<s:ArrayCollection>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
	</s:ArrayCollection>
</s:List>

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

Sommaire