Tree : Menu dans une application

**BenHoit** · 08/10/2009, 17h07

Re-Bonjour, je continue avec mes questions à la c...
je dois créer un menu hiérarchique dans mon application (PS : pas besoin d'enrouler ou derouler : c'est tout le temps tout ouvert ...).
Menu1
____Menu 1.1
____Menu 1.2
Menu2
____Menu 2.1

etc ...

Je me suis naturellement tourné vers le tree !
j'ai vu qu'on pouvait mettre une prop depthColor pour griser différemment les lignes de niveau 1 et celle de niveau 2 ...
Mais les utilisateurs étant ce qu'ils sont (vous voyez ce que je veux dire ...

), cela ne leur convient pas : il faut que les menus de niveau 1 aient une couleur dégradée du blanc vers le gris (voire même légèrement en relief) ........

Je ne vois pas comment faire cela ... Une idée ???

et d'avance ............ grand merci !

**Kantizbak** · 08/10/2009, 18h51

Je ne m'y connais pas trop mais j'essaierai les gradient-colors en css pour ton composant renderer (voir quels sont les composants qui acceptent ce style, je suis fatigué il est tard...

)

**Jim_Nastiq** · 09/10/2009, 10h16

Salut,

Je pense qu'il va falloir créer ton composant Tree perso qui hérite du composant Tree ou tu redessine avec un gradient les élements de niveau 1

**BenHoit** · 09/10/2009, 14h19

Merci à tous les 2 pour les pistes : ouf ça marche ....
donc j'ai effectivement fait un treeAmoi qui étend tree et j'ai réécrit la méthode drawRowBackground (qui vient de List)
Dans cette réécriture, j'ai changé le g.beginFill en g.beginGradientFill et utilisé une Matrix (pour faire un dégradé du haut vers le bas) ce qui donne :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
package
{
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.geom.Matrix;
 
	import mx.controls.Alert;
	import mx.controls.Tree;
	import mx.core.FlexShape;
 
	public class TreeAmoi extends Tree
	{
		public function TreeAmoi()
		{
			super();
		}
 
		override protected function drawRowBackground(s:Sprite, rowIndex:int,
                                            y:Number, height:Number, color:uint, dataIndex:int):void
        {
	        var bg:Shape;
	        if (rowIndex < s.numChildren)
	        {
	            bg = Shape(s.getChildAt(rowIndex));
	        }
	        else
	        {
	            bg = new FlexShape();
	            bg.name = "rowBackground";
	            s.addChild(bg);
	        }
 
	        // Height is usually as tall is the items in the row,
	        // but not if it would extend below the bottom of listContent.
	        var height:Number = Math.min(
	            rowInfo[rowIndex].height,
	            listContent.height - rowInfo[rowIndex].y);
 
	        bg.y = rowInfo[rowIndex].y;
 
			var matrix:Matrix = new Matrix();
			var boxWidth:Number = 100;
			var boxHeight:Number = 100;
			var boxRotation:Number = Math.PI/2;
			var tx:Number = 25;
			var ty:Number = 0;
			matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);
 
	        var g:Graphics = bg.graphics;
	        g.clear();
	        if (color == 16777215)
	        {
				g.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xCCCCCC], [1, 1],  [0, 255], matrix); //,null,"pad","rgb",0.75)
	        }
	        else
	        {
		        g.beginFill(color, getStyle("backgroundAlpha"));
	        }
	        g.drawRect(0, 0, listContent.width, height);
	        g.endFill();
        }
 
	}
}

Seul truc moche qui persiste : je ne peux pas connaitre le niveau de ma ligne à colorier dans ma méthode surchargée car la méthode getItemDepth de la classe Tree ne peut être embarquée dans treeAmoi pour cause de signature bizarre ... (mx_internal function getItemDepth(item:Object, offset:int):int)

Et donc je teste la couleur : si c'est blanc, je fais un dégradé sinon pas ...

ça résoud mon pb, c'est bien là l'essentiel !
Encore merci