Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Item Renderer – Optimiser les performances des ItemRenderer

Si vous affichez un grand nombre d'itemRenerers  (que ce soit dans une DataGrid ou dans une AdvancedDataGrid), les performances de votre application Flex pourraient être affectées si vous ne codez pas ces itemRenderer de manière optimale.

Voici quelques conseils qui pourraient vous aider:

• Limitez le nombre de colonnes utilisant des itemRenderer. Est-ce que vous avez vraiment besoin que chacun colonne utilise un itemRenderer personnalisé? Parfois ce sera le cas mais il faut savoir peser le pour et le contre…
• Essayer de ne pas changer les styles des éléments de votre itemRenderer trop souvent. Si vous avez besoin de changer de styles (par exemple, afficher du vert pour une valeur positive et du rouge pour une valeur négative), pensez à avoir 2 composants préparés avec ces styles et d'en afficher/cacher un. Le changement de style est une des tâches les plus lourdes en Flex.
• N'utilisez pas de Container comme base pour votre itemRenderer. Les conteneurs ajoutent beaucoup de code qui ne vous sera pas forcement utile (positionnement des composants automatique). Ils sont ok pour une utilisation limitée, mais il est plus optimal d'écrire vos itemRenderer en se basant sur UIComponent.

Basculement de styles dans un itemRenderer

Voici un itemRenderer qui affiche un composant ou l'autre suivant la valeur du champ de data "price":

<mx:Canvas>
    <mx:Script><![CDATA private function lessThanZero() : Boolean {
           return data.price < 0; }
    ]]></mx:Script>
    <mx:Label text="{data.price}" color="#FF0000" visible="{lessThanZero()}" />
    <mx:Label text="{data.price}" color="#00FF00" visible="{!lessThanZero()}" />
</mx:Canvas>

Cette méthode sera bien plus rapide qu'un changement de style (avec setStyle() par exemple). Voici d'autres conseils:

• Essayez d'éviter le data binding avec les styles. Le changement de style est déjà une opération lente, alors l'ajout du code de data binding ne fait qu'empirer la chose
• Utilisez un Canvas ou héritez de ListItemRenderer comme noeud root de votre itemRenderer.