Accéder à l'élémentRenderer d'un élément sélectionné

Question

J'ai une TileList avec des vignettes. Sous chaque image de vignette, j'affiche le nom de l'image. Je veux créer une fonctionnalité de renommer. Donc, sous le TileList est un bouton "Renommer l'image sélectionnée".

Lorsque ce bouton est cliqué, je voudrais changer l'état du composant itemRenderer. L'étiquette située sous l'image se transforme en TextInput afin que l'utilisateur puisse saisir un nouveau nom. Cela ressemble beaucoup à la fonctionnalité du fichier renommer Windows.

Comment puis-je accéder à la commande itemRenderer de l'image sélectionnée? Comment puis-je faire en sorte qu'il écoute l'événement click du bouton Rename?

Certains code:

<mx:TileList id="imageTileList" width="100%" height="100%" doubleClickEnabled="true" 
itemsChangeEffect="{tileListEffect}" dataProvider="{images}" 
keyDown="{tileListKeyDownHandler(event)}" 
itemRenderer="com.n200.components.htmlElement.ImageTile" 
columnWidth="128" rowHeight="128" itemDoubleClick="{insertImage()}" 
horizontalScrollPolicy="off" verticalScrollPolicy="auto" /> 

<mx:LinkButton label="Rename selected image" labelPlacement="left" 
    enabled="{imageTileList.selectedIndex>0}" 
    styleName="rename24" click="{renameSelectedImage()}" /> 


<mx:Script> 
<![CDATA[ 
    private function renameSelectedImage():void 
    { 
     // Need to access itemRenderer of selected image here 
    } 
]]> 
</mx:Script> 

Le itemRenderer est juste un mx: VBox avec un mx: Image et mx: Texte. En il y a un autre mx: État où le mx: Texte se transforme en mx: TextInput:

<mx:states> 
    <mx:State name="rename"> 
     <mx:RemoveChild target="{imageName}" /> 
     <mx:AddChild> 
      <mx:TextInput id="newName" text="{originalName}" keyDown="{textInputKeyDownHandler(event)}" 
       width="100%" focusOut="{commit()}" focusThickness="0" /> 
     </mx:AddChild> 
    </mx:State> 
</mx:states> 

<enterComponents:P200Image source="{imgFunction?imgFunction.fileId:null}" width="82" height="82" verticalAlign="bottom" stretch="true" /> 
<mx:Text id="imageName" text="{imgFunction.name}" selectable="false" truncateToFit="true" 
    textAlign="center" width="82" toolTip="{imgFunction.name}" /> 

Answer 1

Ok, merci Pbirkoff, votre réponse m'a conduit dans la bonne direction. La façon dont je le fais maintenant est que je mets la propriété name de l'objet de données à "" dès que F2 ou le bouton renommer est cliqué sur l'élément sélectionné par TileList.

J'ai implémenté une observation dans la propriété itemRenderer sur cette propriété data.name (http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html). Dès que cette propriété change, je change l'état de itemRenderer pour afficher une boîte de saisie plutôt qu'une étiquette.

Cela fonctionne maintenant comme l'explorateur de fichiers Windows.

Certains code avec certaines fonctions pertinentes du itemRenderer:

<mx:states> 
    <mx:State name="rename"> 
     <mx:RemoveChild target="{imageName}" /> 
     <mx:AddChild> 
      <mx:TextInput id="newName" text="{originalName}" keyDown="{textInputKeyDownHandler(event)}" 
       width="100%" focusOut="{commit()}" focusThickness="0" /> 
     </mx:AddChild> 
    </mx:State> 
</mx:states> 

<enterComponents:P200Image source="{imgFunction?imgFunction.fileId:null}" width="82" height="82" verticalAlign="bottom" stretch="true" /> 
<mx:Text id="imageName" text="{imgFunction.name}" selectable="false" truncateToFit="true" 
    textAlign="center" width="82" toolTip="{imgFunction.name}" /> 

<util:Observe source="{imgFunction.name}" handler="{nameChangedHandler}" /> 

<mx:Script> 
    <![CDATA[ 
     [Bindable] 
     private var imgFunction:ImageFunctionRecord; 

     [Bindable] 
     public override function set data(value:Object):void 
     { 
      super.data = value; 
      if(value) 
      { 
       imgFunction = ImageFunctionRecord(value); 
       originalName = imgFunction.name; 
      } 
      else 
      { 
       imgFunction = null; 
      } 
     } 
     public override function get data():Object 
     { 
      return imgFunction; 
     } 

     private function nameChangedHandler():void 
     { 
      if (imgFunction.name.length == 0) 
       // when rename is clicked, the name property will be set to "" 
       renameImage(); 
      else 
       originalName = imgFunction.name; 
     } 


     private function renameImage():void 
     { 
      currentState = "rename"; 
      newName.setFocus(); 
      selectAllText(); 
     } 

    ]]> 
</mx:Script> 

Answer 2

Je ne pense pas que ce soit la meilleure façon d'aller.

Ce que je voudrais faire est obtenir le SelectedItem de la TileList. C'est le modèle de données pour cette image (= un élément de votre collection d'images). Je suppose que cet objet a une propriété comme Name, ou Title. Essayez de définir cette valeur avec la nouvelle valeur. Lorsque vous créez l'objet [Bindable], la valeur correcte doit apparaître dans votre ItemRenderer.

Answer 3

Jetez un coup d'œil à this example --les contrôles d'édition en place pourraient vous donner un endroit pour commencer avec vos contrôles.