Publié par

Il y a 9 années -

Temps de lecture 2 minutes

Flex : Custom style DataGrid


Lors de la finalisation de l’un de nos développements Flex, nous avons mis en place des styles pour les différents composants de l’application. Mais il se trouve que nous avons rencontré une petite difficulté sur le composant DataGrid. A noter également l’utilisation de Flex 4 dans cet exemple, mais ce problème est aussi valable avec Flex 3.

 

Les styles

Avec Flex, les styles sont très simples à mettre en place, et se font de la même manière qu’en HTML :

  • Soit via la définition des styles directement dans le fichier MXML :

	myStyle {
		fontFamily: "arial";
		background-color:#FFFFFF;
	}

  • Soit via la définition d’une feuille de styles CSS, déclarée dans le fichier MXML :

Concernant le composant DataGrid, modifier les couleurs des lignes devient trivial avec la propriété alternatingItemColors. Néanmoins la situation se corse lorsque nous devons appliquer ces couleurs aux lignes d’une seule colonne…

Exemple

Prenons un exemple :

XebiaCustomDataGrid1.mxml



	
	


	
		
			
			
			
		
	



Dans cet exemple, nous avons un simple DataGrid remplit avec une ArrayCollection, et dont les lignes ont des couleurs alternées.

Dans ce second exemple, nous ajoutons une CSS :

xebia.css

.grid {
	alternatingItemColors: #ffccff, #ff99cc;
}

.header {
	fontWeight: bold;
}

XebiaCustomDataGrid2.mxml



	

	
	


	
		
			
			
			
		
	


On notera l’ajout des attributs styleName et headerStyleName dans les propriétés du DataGrid, ainsi que de la déclaration de la CSS :


Nous obtenons ainsi le rendu suivant :

Mais que faire si nous voulons appliquer un style sur une seule colonne ? La solution consiste à surcharger les cellules de la colonne concernée par un renderer. Pour ce faire, une classe ActionScript doit être mise en place.

Voici la classe CustomCell.as :

public class CustomCell extends Label  
     { 

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
        { 
            super.updateDisplayList(unscaledWidth, unscaledHeight); 
            var g:Graphics = graphics; 
            g.clear();

	    	if (DataGridListData(listData).rowIndex % 2 == 0) {
	        	g.beginFill(0xffdfbf);
	     	} else {
	     		g.beginFill(0xffc080);
	     		
	     	}
	        g.drawRect(0, -2, unscaledWidth+1, unscaledHeight+4);
	        g.endFill();  
        }    
     } 

Ainsi pour chaque ligne, nous dessinons un rectangle dans la cellule avec la même alternance de couleurs.
Il ne nous reste plus qu’à appliquer ce renderer au DataGrid.

XebiaCustomDataGrid3.mxml



	

	
	


	
		
			
			
			
		
	


Nous remarquons que la propriété itemRenderer a été ajoutée sur la troisième colonne du DataGrid.

Ainsi nous obtenons le rendu suivant :

Enfin à travers cet exemple nous revoyons une des limites de Flex: malgré la richesse des composants et de leurs comportements, lorsque les développements deviennent un peu plus subtils, du code ActionScript est nécessaire, là où dans cet exemple une simple instruction CSS aurait suffit…

En espérant que cette solution puisse aider d’autres personnes !

Vous pouvez télécharger les sources sur le SVN de Xebia France.

Publié par

Publié par Nicolas Jozwiak

Nicolas est delivery manager disposant de 12 ans d’expérience en conception et développement. Son parcours chez un éditeur avant son entrée chez Xebia lui a notamment permis de développer de solides compétences dans le domaine de la qualité et de l’industrialisation (tests, intégration continue, gestion de configuration, contrôle qualité). Bénéficiant d’une expérience très solide de mise en place des méthodes agiles et d’accompagnement d’équipes sur le terrain, il s’attache à mettre à profit quotidiennement son expérience qui est reconnue pour son approche pragmatique, proactive et pédagogique.

Commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.