Discussion :

[hush]

Bonjour à tous,

Je cherche à obtenir un renderer particulier, qui permettrait d'afficher du texte sur une même ligne, dans deux couleurs distinctes.
Un peu à la manière de l'application "Photos" sur iOS:


Je sais qu'il existe le composant IconItemRenderer qui est proche du rendu que je souhaite obtenir, donc je me demandais s'il était possible de le modif en CSS afin d'obtenir ce que je veux.

Merci !!

[Madfrix]

Bonjour,

il vaut mieux gérer 2 labels dans ton itemRenderer et gérer le css ou les propriétés sur chacun d'eux

[hush]

Voilà ma solution, si ça peut en aider certains...
J'ai surchargé la classe IconItemRenderer pour lui faire adopter le comportement que je souhaitais.

La classe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
package com.xxx.renderer
{
	import spark.components.IconItemRenderer;
	import spark.components.supportClasses.StyleableTextField;
 
	public class InlineIconItemRenderer extends IconItemRenderer
	{
		public function InlineIconItemRenderer()
		{
			super();
		}
 
		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
		{
			var messageDisplayReference:StyleableTextField = (messageDisplay) ? messageDisplay : null;
			messageDisplay = null;
 
			super.layoutContents(unscaledWidth, unscaledHeight);
 
			if (messageDisplayReference)
			{
				var spaceWidth:Number = labelDisplay.textWidth / labelDisplay.text.length;
 
				messageDisplay = messageDisplayReference;
				messageDisplay.x = labelDisplay.x + labelDisplay.textWidth + spaceWidth;
				messageDisplay.y = (labelDisplay.y + labelDisplay.height) - messageDisplay.height;
			}
		}
	}
}

Et si on veut modifier le style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
@namespace renderer "com.xxx.renderer.*";
 
renderer|InlineIconItemRenderer {
	messageStyleName: InlineIconItemRendererMessage
}
 
.InlineIconItemRendererMessage {
	/* .... */
}

Résultat: