Subversion Repositories eFlore/Applications.cel

Rev

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