profondeur AGILITY avec Flex 4

Question

J'ai un code dans Flex 4 comme celui-ci

<!-- START >>> middle part: items --> 
<mx:Canvas id="itemContainer" 
      width="100%" 
      height="100%"> 
    <!-- START >>> Items Display on the page --> 
    <mx:Repeater id="richTextReapeater" 
       dataProvider="{_model.current_day.richTextNotes}"> 
     <components:RichTextNoteDisplay theNote="{richTextReapeater.currentItem}" />  
    </mx:Repeater> 
    <mx:Repeater id="postItReapeater" 
       dataProvider="{_model.current_day.positNotes}"> 
      <components:PostItNoteDisplay theNote="{postItReapeater.currentItem}" /> 
    </mx:Repeater> 
    ...... 
</mx:Canvas> 

Principalement il est un MX: Canvas qui a l'intérieur reapeaters pour plusieurs composants personnalisés que j'ai créé. La plupart de ces composants personnalisés sont comme ceci:

<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          x="{theNote.x}" 
          y="{theNote.y}" 
          width="{theNote.width}" 
          height="{theNote.height}" 
          depth="{theNote.depth}" 
          rotation="{theNote.rotation}" 
creationComplete="skinnablecontainer1_creationCompleteHandler(event)" > 

Tout fonctionne très bien (x, y, largeur, hauteur, rotation), sauf pour la profondeur!

il semble que quel que soit le numéro, il montre l'ordre dans lequel il a été rendu dans le conteneur parent. (MX: Toile)! Ce que je veux réaliser c'est que les uns par rapport aux autres, tous les éléments dans le mx: Canvas montre dans l'ordre de "profondeur" qui leur est assigné.

Comment faire?

Answer 1

Vous utilisez un répéteur; ce qui est, en substance, une boucle.

Il semble que vous demandiez de faire une boucle sur des éléments, mais de traiter ces éléments dans un ordre différent. Est-ce exact?

Ma première recommandation serait que vous recherchiez des façons de trier vos éléments dataProvider par la profondeur avant que le répéteur ne 'fonctionne'.

Ma deuxième recommandation est que vous n'utilisez pas de répéteur. Une classe basée sur la liste vous donnera de meilleures performances grâce au recyclage des moteurs de rendu. Si vous avez vraiment besoin de créer tous les enfants à la fois, ma troisième recommandation est que vous passiez à une implémentation ActionScript qui vous donnera beaucoup plus de contrôle granulaire sur comment et quand les choses sont créées.

Chaque fois que j'ai utilisé un répéteur, j'ai été mécontent.

---

Voici quelques informations sur lists and itemRenderers avec Flex 4.

Ceci est une estimation approximative de la façon dont je pourrais modifier cet exemple pour utiliser une liste au lieu d'un répéteur:

<!-- START >>> middle part: items --> 
    <mx:Canvas id="itemContainer" 
       width="100%" 
       height="100%"> 
     <!-- START >>> Items Display on the page --> 
     <s:List id="richTextList" 
        dataProvider="{_model.current_day.richTextNotes}" 
        itemRenderer="com.something.myComponent"> 
     </s:List> 
    </mx:Canvas> 

Une itemRenderer peut-être quelque chose comme ceci:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:SkinnableContainer rotation="{data.rotation}" 
    creationComplete="skinnablecontainer1_creationCompleteHandler(event)" /> 
</s:ItemRenderer> 

la liste déterminera la largeur, positions x et y du rendu. Dans la plupart des cas, il déterminera également la hauteur; bien que la liste Flex 3 ait une option variableRowHeight.

Si vous souhaitez utiliser un ata OND base différente renderer, regarder dans un itemRendererFunction