Discussion :

[phoenixatareva]

Bonjour,

Je recherche quelque chose qui me permettra de sélectionner des icônes ou autre, un peu comme sur le bureau d'un système d'exploitation.
Sélection d'items via une zone rectangulaire dont les coordonnées X1 et Y1 de départ sont définies lorsque l'on appuie sur le bouton gauche de la souris, et les coordonnées X2 et Y2 de fin sont déterminées lorsque l'on relâche le bouton de la souris.
J'ai déjà passé pas mal de temps à chercher sur le Web, mais je n'ai trouvé aucune piste.

Toute proposition sera la bienvenue.
Merci par avance pour vos suggestions

[Maskime]

Hello,

Tu peux faire un truc comme une map en html. Pour ce faire il y a une librairie qui existe qui s'appelle "flashlib". Grossi-modo tu vas demander a flex de dessiner des zones cliquable sur une image, lors du clique la librairie te diras sur quelle zone est ce que le clique s'est produit a toi ensuite de faire ce que tu veux...

[phoenixatareva]

Merci Maskime pour ta réponse.
J'ai fait un tour sur le web et effectivement, cette librairie a l'air très puissante en effet, j'y aurai certainement recours prochainement.

En fait, j'ai créé un package qui permet de réaliser la fonction en question, à savoir:

- Lorsque la souris est enfoncée, on définit les coordonnées x1 et y1 de départ de la zone rectangulaire qui va servir pour sélectionner (qui sont en fait les coordonnées du pointeur de souris à cet instant). On bouge alors la souris et les nouvelles coordonnées sont stockées dans x2 et y2, ce qui nous permet de tracer la zone rectangulaire. Celle-ci est réactualisée tant que la souris bouge
- Lorsque la souris est relâchée, on efface la zone rectangulaire et on vérifie quelles sont les 'items' qui sont compris entre x1 et x2, et y1 et y2.

Voici le package créé pour ceux que ça pourrait intéresser:

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
package MyControls
{
 
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import mx.controls.Alert;
	import mx.core.UIComponent;
 
 
 
 
	public class itemSelector
	{
 
		public var _view:itemsSelector;					// MVC (view connector)
 
 
		public var _x1:uint;							// selecting box start coordinates
		public var _y1:uint;
 
		public var _x2:uint;							// selecting box end coordinates
		public var _y2:uint;
 
		public var _clickFlag:Boolean = false;			// is Mousebutton down?
 
		public var s:Sprite = new Sprite();				// to draw the rectangular box
		public var c:UIComponent = new UIComponent();	// a surface to draw the sprite (box) inside
 
		public var _SelectedItems:Array = new Array();
		public var _totalItems:uint = 0;						// number of items in the view
 
		public var _ItemNo:uint;
 
 
		// properties
		public var _BoxColor:uint = 0x000000;				// color of the Box (default = black)
		public var _BoxThickness:uint = 1;					// thickness of the Box (default = 1px)
		public var _BoxAlpha:Number = 1.0;					// alpha of the Box (default = 1.0)
 
 
 
		// ------- Constructor -------
		public function itemSelector(view:itemsSelector)
		{
 
			_x1 = 100;
			_y1 = 100;
			_x2 = 200;
			_y2 = 200;
 
			_view = view;
 
			_view.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			_view.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			_view.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
 
		}
 
 
 
		public function DrawSelectBox():void
		{
			s.graphics.clear();
			s.graphics.lineStyle(_BoxThickness, _BoxColor, _BoxAlpha);
			s.graphics.drawRect(_x1,_y1, (_x2-_x1), (_y2-_y1));
 
			c.addChild(s);
			//_view.myPanel.addElement(c);
			_view.addElement(c);	
		}
 
 
 
		///////////////////////// Listening Events CALLBACK functions //////////////////////////
		////////////////////////////////////////////////////////////////////////////////////////
 
		private function mouseDownHandler(e:MouseEvent):void
		{
			// get selection box start coordinates
			_x1 = e.stageX;
			_y1 = e.stageY;
			_clickFlag = true;
		}
 
		private function mouseMove(e:MouseEvent):void
		{
			// get selection box start coordinates while Mouse is moving
			_x2 = e.stageX;
			_y2 = e.stageY;
 
			if (_clickFlag == true)
				DrawSelectBox();	// redraw this box, while mouse button is down
		}		
 
		private function mouseUpHandler(e:MouseEvent):void
		{
			var i:uint = 0;
			var j:uint = 0;
 
			// clear selection box
			_clickFlag = false;
			s.graphics.clear();
 
			// now get selected objects
			_totalItems = _view.objArray.length;
 
 
			_SelectedItems = [];	// flush selected components array
			for (i=0; i<_totalItems; i++)
			{
				if (   (_view.objArray[i].x > _x1 && _view.objArray[i].x < _x2 && _view.objArray[i].y > _y1 && _view.objArray[i].y < _y2) 
					|| (_view.objArray[i].x > _x1 && _view.objArray[i].x < _x2 && _view.objArray[i].y > _y2 && _view.objArray[i].y < _y1) 
					|| (_view.objArray[i].x > _x2 && _view.objArray[i].x < _x1 && _view.objArray[i].y > _y1 && _view.objArray[i].y < _y2) 
					|| (_view.objArray[i].x > _x2 && _view.objArray[i].x < _x1 && _view.objArray[i].y > _y2 && _view.objArray[i].y < _y1) )
				{
					_SelectedItems[j] = "Objet "+i.toString();
					j++;
				}	 
 
			}
			// fill datagrid with selected componenents...
			_view.dgrid.dataProvider = _SelectedItems;
		}
 
 
 
	}
}

Attention, il est impératif qu'un tableau d'objets 'objArray' ait été défini, et qu'il contienne des composants (panel, ...) avec leur propriétés respectives!

Voici maintenant le fichier MXML associé qui affiche 20 composants de type Panel à des positions aléatoires sur l'écran. Ce tableau est déclaré dans la fonction addMyItem(...).

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
67
68
69
70
71
72
73
74
75
76
77
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init(event)" width="1257" height="832">
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
 
 
	<fx:Script>
		<![CDATA[
 
			import MyControls.itemSelector;
 
			import flash.display.Sprite;
 
			import mx.collections.ArrayCollection;
			import mx.containers.Canvas;
			import mx.controls.Alert;
			import mx.core.UIComponent;
 
			public var objArray:Array = new Array();
			public var obj:Object = new Object();
 
			public var iname:uint = 0;
			public function addMyItem(x:int, y:int):void
			{
				var i:uint = 0;
 
				iname++;
				var objItem:Panel = new Panel();
 
				objItem.x = x;
				objItem.y = y;
				objItem.width = 50;
				objItem.height = 5;
				objItem.alpha = 1.0;
				objItem.enabled = true;
				objItem.name = "Panel"+iname.toString();
 
				objArray.push(objItem);
 
				this.addElement(objItem);
 
			}
 
			public function init(e:Event):void
			{
				var nb:uint = 0;
				// on créée des objets sur la page			
				for (nb=0; nb<20; nb++)				
					addMyItem(Math.random()*1000 , Math.random()*700);
 
 
				// appel de l'objet générique de sélection
				// objArray est un tableau REQUIS contenant les objets EFFECTIVEMENT présents sur la page!
				var obj:itemSelector = new itemSelector(this);
 
				// you can define these 3 properties
				obj._BoxColor = 0xAA4400;				// color of the Box (default = black)
				obj._BoxThickness = 3;					// thickness of the Box (default = 1px)
				obj._BoxAlpha = 1.0;					// alpha of the Box (default = 1.0)
			}
 
		]]>
	</fx:Script>
 
	<!-- don't remove this panel-->
	<s:Panel width="1" height="1" visible="false" name="stuff"></s:Panel>
 
	<mx:DataGrid x="1128" y="94" width="128" height="340" id="dgrid">
		<mx:columns>
			<mx:DataGridColumn headerText="Objets sélectionnés" dataField="col1"/>
		</mx:columns>
	</mx:DataGrid>
 
</s:Application>

[Maskime]

Ha j'avais pas compris que tu voulais faire ça ^^

En tout cas merci pour la communauté ^^