Subversion Repositories eFlore/Applications.cel

Rev

Rev 104 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
2 aperonnet 1
package org.tela_botanica.client.vues;
2
 
3
import org.tela_botanica.client.image.ImageMediateur;
60 jpm 4
import org.tela_botanica.client.interfaces.ListePaginable;
2 aperonnet 5
import org.tela_botanica.client.interfaces.Rafraichissable;
6
import org.tela_botanica.client.interfaces.VueListable;
7
 
8
import com.google.gwt.user.client.Element;
81 jpm 9
import com.google.gwt.user.client.ui.HTML;
134 aurelien 10
import com.gwtext.client.core.EventCallback;
2 aperonnet 11
import com.gwtext.client.core.EventObject;
134 aurelien 12
import com.gwtext.client.core.Ext;
13
import com.gwtext.client.core.ExtElement;
2 aperonnet 14
import com.gwtext.client.core.XTemplate;
15
import com.gwtext.client.data.FieldDef;
16
import com.gwtext.client.data.IntegerFieldDef;
17
import com.gwtext.client.data.Record;
18
import com.gwtext.client.data.RecordDef;
19
import com.gwtext.client.data.Store;
20
import com.gwtext.client.data.StringFieldDef;
5 aperonnet 21
import com.gwtext.client.dd.DragData;
22
import com.gwtext.client.dd.DragSource;
23
import com.gwtext.client.dd.DropTarget;
24
import com.gwtext.client.dd.DropTargetConfig;
2 aperonnet 25
import com.gwtext.client.util.Format;
26
import com.gwtext.client.widgets.Component;
134 aurelien 27
import com.gwtext.client.widgets.Container;
2 aperonnet 28
import com.gwtext.client.widgets.DataView;
29
import com.gwtext.client.widgets.Panel;
30
import com.gwtext.client.widgets.event.ContainerListenerAdapter;
31
import com.gwtext.client.widgets.event.DataViewListenerAdapter;
5 aperonnet 32
import com.gwtext.client.widgets.grid.GridDragData;
2 aperonnet 33
 
34
/**
5 aperonnet 35
 * Galerie d'images miniatures Avec barre de pagination
36
 *
2 aperonnet 37
 * @author aurelien
38
 */
5 aperonnet 39
public class GalerieImageVue extends Panel implements Rafraichissable,
60 jpm 40
		VueListable, ListePaginable {
2 aperonnet 41
 
42
	/**
43
	 * instance du médiateur
5 aperonnet 44
	 */
45
	private ImageMediateur iMediateur = null;
2 aperonnet 46
	/**
5 aperonnet 47
	 * Dataview, littéralement "vue de données" qui permet de définir la manière
48
	 * d'afficher les données
49
	 */
50
	private DataView dView = null;
2 aperonnet 51
	/**
5 aperonnet 52
	 * Dataview, littéralement "vue de données" qui permet de définir la manière
53
	 * d'afficher les données
54
	 */
55
	private Store st = null;
2 aperonnet 56
	/**
5 aperonnet 57
	 * Barre de pagination gérant l'affichage d'un nombre donné d'élements par
58
	 * page et la navigation entre eux
59
	 */
59 david 60
	private BarrePaginationVue pt = null;
2 aperonnet 61
	/**
62
	 * Booleen indiquant si la galerie est instanciée ou pas
5 aperonnet 63
	 */
64
	private boolean estInstancie = false;
2 aperonnet 65
 
66
	/**
67
	 * Constructeur sans argument, privé car ne doit pas être utilisé
68
	 */
69
	@SuppressWarnings("unused")
5 aperonnet 70
	private GalerieImageVue() {
71
		super();
2 aperonnet 72
	}
5 aperonnet 73
 
2 aperonnet 74
	/**
75
	 * Constructeur avec argument
5 aperonnet 76
	 *
77
	 * @param im
78
	 *            le médiateur avec lequel la vue va communiquer
2 aperonnet 79
	 */
80
	public GalerieImageVue(ImageMediateur im) {
81
		super("Galerie");
82
		iMediateur = im;
5 aperonnet 83
 
2 aperonnet 84
		// on ajoute des listeners au composant tout entier
85
		this.addListener(new ContainerListenerAdapter() {
86
 
5 aperonnet 87
			// pour gagner du temps on n'instancie la vue en elle même que lors
88
			// du premier affichage (lazy rendering)
89
 
2 aperonnet 90
			public void onShow(Component component) {
91
 
92
				if (!estInstancie) {
93
					initialiser();
94
				}
95
			}
134 aurelien 96
 
97
			public void onAfterLayout(Container c) {
98
 
99
				ExtElement lienUpload = Ext.get("lienUpload");
100
				lienUpload.addListener("click", new EventCallback() {
2 aperonnet 101
 
134 aurelien 102
					public void execute(EventObject e) {
103
 
104
						getIMediateur().uploaderImages();
105
					}
106
 
107
				}) ;
108
			}
109
 
2 aperonnet 110
		});
5 aperonnet 111
 
2 aperonnet 112
		// et on ajoute la tool bar
60 jpm 113
		pt = new BarrePaginationVue(this);
59 david 114
		pt.setLabelElement("Images");
115
		pt.setTaillePageParDefaut(50);
5 aperonnet 116
		this.setBottomToolbar(pt);
2 aperonnet 117
 
118
	}
119
 
120
	/**
5 aperonnet 121
	 * Ajoute tous les listeners nécessaires à l'intercation utilisateur avec la
122
	 * vue de données
2 aperonnet 123
	 */
124
	public void ajouterListenersDataView() {
125
 
126
		// ajout de listeners pour la gestion de la selection
127
		// dans la galerie
128
		dView.addListener(new DataViewListenerAdapter() {
5 aperonnet 129
 
2 aperonnet 130
			// gestion du clic sur une image
5 aperonnet 131
 
2 aperonnet 132
			public void onClick(DataView source, int index, Element node,
133
					EventObject e) {
5 aperonnet 134
 
2 aperonnet 135
				// on en notifie le médiateur
136
				getIMediateur().clicGalerieImage(index, node, e);
137
 
138
			}
139
 
140
			// gestion du clic droit
5 aperonnet 141
 
2 aperonnet 142
			public void onContextMenu(DataView source, int index, Element node,
143
					EventObject e) {
144
 
5 aperonnet 145
				// on stoppe l'évenement
2 aperonnet 146
				e.stopEvent();
147
				// et on notifie le médiateur
148
				getIMediateur().montrerContextMenu(e);
149
 
150
			}
151
 
152
			// gestion du double clic
5 aperonnet 153
 
2 aperonnet 154
			public void onDblClick(DataView source, int index, Element node,
155
					EventObject e) {
156
 
157
				// on notife le mediateur
158
				getIMediateur().clicGalerieImage(index, node, e);
5 aperonnet 159
 
2 aperonnet 160
			}
161
 
162
			// gestion des actions en fonction de la selection
5 aperonnet 163
 
2 aperonnet 164
			public void onSelectionChange(DataView view, Element[] selections) {
165
 
166
				// s'il n'y a aucun élement sélectionné
167
				if (selections.length <= 0) {
168
					// on en notifie le médiateur
169
					getIMediateur().aucuneSelection();
170
				} else {
171
					// sinon on notifie le médiateur
172
					getIMediateur().selection();
5 aperonnet 173
					// et on lui demande de synchroniser la séléction avec les
174
					// autres vues
2 aperonnet 175
					getIMediateur().synchroniserSelection("galerie");
176
				}
177
			}
178
 
179
		});
180
	}
181
 
182
	/**
183
	 * Accesseur pour la dataview
5 aperonnet 184
	 *
185
	 * @return la dataview
2 aperonnet 186
	 */
187
	public DataView getDView() {
188
		return dView;
189
	}
190
 
191
	/**
192
	 * Renvoie les ids des images sélectionnées
5 aperonnet 193
	 *
194
	 * @return un tableau de String contenant les identifiants des images
195
	 *         sélectionnées
2 aperonnet 196
	 */
197
	public String[] getIdSelectionnees() {
198
		Record[] selection = getDView().getSelectedRecords();
199
		int taille = selection.length;
200
		String id_selection[] = new String[taille];
201
 
202
		for (int i = 0; i < selection.length; i++) {
203
 
204
			id_selection[i] = selection[i].getAsString("num_image");
205
		}
206
 
207
		return id_selection;
208
	}
209
 
210
	/**
211
	 * Accesseur pour le médiateur
5 aperonnet 212
	 *
2 aperonnet 213
	 * @return le médiateur associé à la vue
214
	 */
215
	public ImageMediateur getIMediateur() {
216
		return iMediateur;
217
	}
218
 
219
	/**
220
	 * Accesseur pour le store
5 aperonnet 221
	 *
2 aperonnet 222
	 * @return le store associé à la vue
223
	 */
224
	public Store getSt() {
225
		return st;
226
	}
5 aperonnet 227
 
2 aperonnet 228
	/**
5 aperonnet 229
	 * Accesseur pour la toolbar
230
	 *
2 aperonnet 231
	 * @return la toolbar associée à la vue
232
	 */
59 david 233
	public BarrePaginationVue getToolBarVue() {
5 aperonnet 234
		return pt;
2 aperonnet 235
	}
236
 
237
	/**
5 aperonnet 238
	 * Fonction d'initialisation du contenu (appelée lors du premier affichage
239
	 * de la liste)
2 aperonnet 240
	 */
241
	public void initialiser() {
5 aperonnet 242
 
2 aperonnet 243
		// Preparation de la dataview et du template
244
		// le template va créer une div contenant une image
245
		// pour chacune des photos
246
		final XTemplate template = new XTemplate(
247
				new String[] {
248
						"<tpl for='.'>",
249
						"<div class='thumb-wrap' id='{num_image}'>",
250
						"<div class='thumb'><img src='{url_image_M}' title='{num_image}'></div>",
251
						"<span>{nom}</span></div>", "</tpl>",
252
						"<div class='x-clear'></div>" });
5 aperonnet 253
		// pour des raisons de performances on compile le template en une
254
		// fonction
2 aperonnet 255
		template.compile();
256
 
257
		// la dataview affichera les images en accord avec le template
258
		// cree precedemment
259
		dView = new DataView("div.thumb-wrap") {
260
 
261
			public void prepareData(Data data) {
262
				data.setProperty("shortName", Format.ellipsis(data
5 aperonnet 263
						.getProperty("num_image"), 15));
2 aperonnet 264
			}
5 aperonnet 265
 
2 aperonnet 266
		};
267
		dView.setTpl(template);
268
 
269
		// parametre d'affichage de la dataview
270
		this.setAutoScroll(true);
271
		dView.setAutoHeight(true);
272
		dView.setMultiSelect(true);
273
		dView.setOverCls("x-view-over");
134 aurelien 274
		dView.setEmptyText("<div class=\"avertissement\" >Aucune image à afficher. <a id=\"lienUpload\" href=# > Cliquez ici</a>  pour en ajouter ou allez dans le menu Fichier -> Ajouter des images </div>");
2 aperonnet 275
 
276
		// creation du store
277
		FieldDef defNumImage = new IntegerFieldDef("num_image");
278
		FieldDef defDatImage = new StringFieldDef("dat_image");
279
		FieldDef defLieImage = new StringFieldDef("lie_image");
280
		FieldDef defAppImage = new StringFieldDef("app_image");
281
		FieldDef defUrlImageS = new StringFieldDef("url_image_S");
282
		FieldDef defUrlImageM = new StringFieldDef("url_image_M");
283
		FieldDef defUrlImage = new StringFieldDef("url_image");
284
		FieldDef[] defTab = { defNumImage, defDatImage, defLieImage,
285
				defAppImage, defUrlImageS, defUrlImageM, defUrlImage };
286
		RecordDef rd = new RecordDef(defTab);
287
		st = new Store(rd);
288
		dView.setStore(st);
289
 
290
		this.getDView().setLoadingText("chargement");
291
 
292
		// ajouts de la gestion des evenements pour la dataview
293
		ajouterListenersDataView();
5 aperonnet 294
		configDragAndDrop() ;
2 aperonnet 295
 
296
		this.add(dView);
5 aperonnet 297
 
2 aperonnet 298
		// et on déclare le composant comme instancié
5 aperonnet 299
		estInstancie = true;
2 aperonnet 300
	}
5 aperonnet 301
 
302
	public void configDragAndDrop()
303
	{
304
		// on fabrique la nouvelle configuration
305
		// les éléments sur lesquels on fait du drag 'n drop doivent tous avoir le même ddGroup
306
		DropTargetConfig dtc = new DropTargetConfig();
307
		dtc.setdDdGroup("DragGroupName");
2 aperonnet 308
 
5 aperonnet 309
		//La drop target permet de gérer l'évenement onDrop sur l'élement courant
310
		@SuppressWarnings("unused")
311
		DropTarget tg = new DropTarget(this, dtc)
312
		{
313
			public boolean notifyDrop(DragSource source, EventObject e, DragData data){
314
 
315
				// si les données proviennent d'une grille
316
				if(data instanceof GridDragData)
317
		    	{
318
					// on appelle le médiateur
319
		    		  	return iMediateur.lierObsDD(source, e, data,getId()) ;
320
		    	}
321
				return false ;
322
			}
323
 
324
			public String notifyOver(DragSource source, EventObject e, DragData data){
325
			    return "x-dd-drop-ok";
326
			}
327
		};
328
 
329
	}
330
 
2 aperonnet 331
	/**
332
	 * Méthode héritée de l'interface rafraichissable
333
	 */
334
	public void rafraichir(Object nouvelleDonnees,
335
			boolean repandreRafraichissement) {
336
 
337
		// si l'objet reçu est un store
338
		if (nouvelleDonnees instanceof Store) {
5 aperonnet 339
 
134 aurelien 340
				st = (Store) nouvelleDonnees;
341
 
342
			if(st.getCount() != 0) {
343
 
344
				// on le charge
345
				st.load();
346
 
347
					// on l'affecte à la vue
348
					dView.setStore(st);
349
					// et on rafrachit la vue
350
					dView.refresh();
351
			}
5 aperonnet 352
 
2 aperonnet 353
		}
354
 
355
		// si le composant doit répandre le rafraichissement
356
		if (repandreRafraichissement) {
5 aperonnet 357
			// il en notifie le médiateur en lui donnant une copie des données
358
			// et en notifiant qu'il en est l'expéditeur
2 aperonnet 359
			getIMediateur().synchroniserDonneesZoomListeGalerie(
360
					nouvelleDonnees, this);
361
		}
5 aperonnet 362
 
2 aperonnet 363
		// si c'est la première mise à jour que l'on reçoit
5 aperonnet 364
		if (!estInstancie) {
2 aperonnet 365
			// alors le composant est considéré comme instancié
5 aperonnet 366
			estInstancie = true;
2 aperonnet 367
		}
368
	}
369
 
370
	/**
5 aperonnet 371
	 * Méthode héritée de l'interface VueListable Sélectionne les images dans la
372
	 * galerie suivant les identifiants donnés en paramètres
373
	 *
374
	 * @param ids
375
	 *            les identifiants des images à sélectionner
2 aperonnet 376
	 */
377
	public void selectionnerImages(int[] ids) {
378
 
379
		getDView().select(ids);
380
 
381
	}
5 aperonnet 382
 
60 jpm 383
	public void changerNumeroPage(int pageCourante) {
384
 
385
		iMediateur.changerNumeroPage(pageCourante) ;
386
 
387
	}
388
 
389
	public void changerTaillePage(int nouvelleTaillePage) {
390
 
391
		iMediateur.changerTaillePage(nouvelleTaillePage) ;
392
	}
393
 
2 aperonnet 394
}