Subversion Repositories eFlore/Applications.cel

Rev

Rev 208 | Details | Compare with Previous | Last modification | View Log | RSS feed

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