Modifier les en-têtes sur une grille de données en flash avec AS3.0. Changer le contenu dans les cellules Datagrid pour un Marquee

Question

Bonjour mes collègues scripteurs,

J'ai essayé de personnaliser le composant DataGrid. Jusqu'à présent, j'ai été en mesure de personnaliser les cellules en utilisant un cellRenderer personnalisé. Je voudrais changer la façon dont l'en-tête ressemble en utilisant un headerRenderer personnalisé, mais de tous ceux que j'ai essayé de faire ne fonctionnent pas.

Ceci est mon code headerRenderer actuel.

package { 
    import fl.controls.dataGridClasses.HeaderRenderer; 
    import flash.text.TextFormat; 
    import flash.filters.BevelFilter; 
    import flash.text.TextField; 
    import flash.display.Sprite; 

    public class PlayListHeaderRenderer extends HeaderRenderer { 
     public function PlayListHeaderRenderer() { 
      var format:TextFormat = new TextFormat("Arial", 12); 
      format.color = 0xffff00; 
      format.bold = true; 
      var upSkinBg:Sprite = new Sprite(); 
      upSkinBg.graphics.lineStyle(0.1,0x999999); 
      upSkinBg.graphics.beginFill(0x666666); 
      upSkinBg.graphics.drawRect(0,0,10,10); 
      upSkinBg.graphics.endFill(); 
      var downSkinBg:Sprite = new Sprite(); 
      downSkinBg.graphics.lineStyle(0.1,0x999999); 
      downSkinBg.graphics.beginFill(0x0000cc); 
      downSkinBg.graphics.drawRect(0,0,10,10); 
      downSkinBg.graphics.endFill(); 
      var overSkinBg:Sprite = new Sprite(); 
      overSkinBg.graphics.lineStyle(0.1,0x999999); 
      overSkinBg.graphics.beginFill(0x0000ff); 
      overSkinBg.graphics.drawRect(0,0,10,10); 
      overSkinBg.graphics.endFill(); 
      var selectedUpSkinBg:Sprite = new Sprite(); 
      selectedUpSkinBg.graphics.lineStyle(0.1,0x999999); 
      selectedUpSkinBg.graphics.beginFill(0x0000cc); 
      selectedUpSkinBg.graphics.drawRect(0,0,10,10); 
      selectedUpSkinBg.graphics.endFill(); 
      var selectedDownSkinBg:Sprite = new Sprite(); 
      selectedDownSkinBg.graphics.lineStyle(0.1,0x999999); 
      selectedDownSkinBg.graphics.beginFill(0x0000cc); 
      selectedDownSkinBg.graphics.drawRect(0,0,10,10); 
      selectedDownSkinBg.graphics.endFill(); 
      var selectedOverSkinBg:Sprite = new Sprite(); 
      selectedOverSkinBg.graphics.lineStyle(0.1,0x999999); 
      selectedOverSkinBg.graphics.beginFill(0x0000ff); 
      selectedOverSkinBg.graphics.drawRect(0,0,10,10); 
      selectedOverSkinBg.graphics.endFill(); 
      setStyle("textFormat", format); 
      setStyle("upSkin", upSkinBg); 
      setStyle("downSkin", downSkinBg); 
      setStyle("overSkin", overSkinBg); 
      setStyle("selectedUpSkin", selectedUpSkinBg); 
      setStyle("selectedDownSkin", selectedDownSkinBg); 
      setStyle("selectedOverSkin", selectedOverSkinBg); 
     } 
    } 
} 

Dans mon programme actuel je fais quelque chose comme:

dgPL.setStyle("headerRenderer", PlayListHeaderRenderer); 

pour essayer de définir la classe headerRenderer que j'ai créé au nom DataGrid DGPL. Mais ça ne marche pas. D'après ce que j'ai trouvé sur Internet, la classe headerRenderer est supposée agir exactement comme la classe cellRenderer dans la conception et l'implémentation. Je ne trouve aucun exemple de personnes utilisant une classe headerRenderer personnalisée ou des exemples sur la façon d'en créer une. Donc toute aide serait appréciée en me laissant savoir où je me suis trompé en concevant ma classe ou en l'implémentant dans mon programme serait apprécié. J'essaye aussi de comprendre comment ajouter un Marquee aux cellules de la même grille de données de sorte que si le contenu de la cellule est trop long pour la taille de la cellule, il défilera à travers la cellule quand l'utilisateur jettera sur la liste de contenu de datagids. La partie avec laquelle je suis en difficulté est de trouver comment obtenir la nouvelle chaîne affectée à la cellule sans surcharger définitivement le contenu du fournisseur de données pour cette ligne spécifique dans la grille de données. De ma recherche sur internet, j'ai trouvé un moyen de créer un chapiteau pour textFields. Ce que je ne peux pas comprendre, c'est comment l'appliquer à la grille de données elle-même.

Le code pour le chapiteau est la suivante:

var tf:TextField = new TextField(); 
tf.defaultTextFormat = dtf; 
tf.text = dgPL.getItemAt(evt.rowIndex.toString()).Artist + "     "; 
tf.x = tf.y = 300; 
addChild(tf); 
var t:Timer = new Timer(200); 
t.addEventListener(
    TimerEvent.TIMER, 
    function(ev:TimerEvent): void 
    { 
     tf.text = tf.text.substr(1) + tf.text.charAt(0); 
    } 
); 
t.start(); 

En ce moment, les travaux marquee en créant un champ de texte et de faire le chapiteau de cette façon, mais ce n'est pas la façon la plus efficace de le faire du tout à cause aux problèmes d'allignement lors du défilement du contenu dans la grille de données.

Je sais comment le Marquee fonctionne Je ne vois tout simplement pas comment appliquer ce rectangle de sélection aux cellules DataGrid. Je sais comment saisir le contenu de ma cellule sans aucun problème et comment le redéfinir pour que le rectangle de sélection fonctionne, mais je ne suis pas sûr de savoir comment l'assigner à la cellule elle-même sans surcharger définitivement le fournisseur de données.

Toute aide sur l'un de ces sujets serait grandement appréciée.

Sincèrement, Tim

Answer 1

Pour votre premier problème. Vous devez utiliser la classe non instance comme argument pour setStyle. Vous devez donc créer 4 classes basées sur Sprite et les passer dans setStyle.

En ce qui concerne vos problèmes de défilement de texte je vous propose cette petite classe:

package { 
    import fl.controls.listClasses.CellRenderer; 
    import flash.events.MouseEvent; 
    import flash.events.Event; 

    public class ScrolledDataGridCell extends CellRenderer{ 

     private var mOver:Boolean=false; 
     private var active:Boolean=false; 
     public function ScrolledDataGridCell() { 
      addEventListener(MouseEvent.ROLL_OVER,over); 
      addEventListener(MouseEvent.ROLL_OUT,out); 

     } 
     private function over(e:Event):void{ 
      mOver=true; 
      if(!active&&textField.maxScrollH>0){ 
       active=true; 
       addEventListener(Event.ENTER_FRAME,frame); 
      } 
     } 
     private function out(e:Event):void{ 
      mOver=false 
     } 

     private function frame(e:Event):void{ 
      if(mOver){ 
       textField.scrollH++; 
      }else{ 
       if(textField.scrollH>0){ 
        textField.scrollH--; 
       }else{ 
        if(active){ 
         active=false; 
         removeEventListener(Event.ENTER_FRAME,frame); 
        } 
       } 
      } 
     } 
    } 
}