New file |
0,0 → 1,480 |
package org.tela_botanica.client.vues.image; |
|
import org.tela_botanica.client.image.ImageMediateur; |
import org.tela_botanica.client.interfaces.ListePaginable; |
import org.tela_botanica.client.interfaces.Rafraichissable; |
import org.tela_botanica.client.interfaces.VueListable; |
import org.tela_botanica.client.vues.BarrePaginationVue; |
|
import com.google.gwt.user.client.Element; |
import com.google.gwt.user.client.ui.HTML; |
import com.gwtext.client.core.EventCallback; |
import com.gwtext.client.core.EventObject; |
import com.gwtext.client.core.Ext; |
import com.gwtext.client.core.ExtElement; |
import com.gwtext.client.core.XTemplate; |
import com.gwtext.client.data.FieldDef; |
import com.gwtext.client.data.IntegerFieldDef; |
import com.gwtext.client.data.Record; |
import com.gwtext.client.data.RecordDef; |
import com.gwtext.client.data.Store; |
import com.gwtext.client.data.StringFieldDef; |
import com.gwtext.client.dd.DragData; |
import com.gwtext.client.dd.DragSource; |
import com.gwtext.client.dd.DropTarget; |
import com.gwtext.client.dd.DropTargetConfig; |
import com.gwtext.client.util.Format; |
import com.gwtext.client.widgets.Component; |
import com.gwtext.client.widgets.Container; |
import com.gwtext.client.widgets.DataView; |
import com.gwtext.client.widgets.Panel; |
import com.gwtext.client.widgets.event.ContainerListener; |
import com.gwtext.client.widgets.event.ContainerListenerAdapter; |
import com.gwtext.client.widgets.event.DataViewListenerAdapter; |
import com.gwtext.client.widgets.event.PanelListenerAdapter; |
import com.gwtext.client.widgets.grid.GridDragData; |
|
/** |
* Galerie d'images miniatures Avec barre de pagination |
* |
* @author aurelien |
*/ |
public class GalerieImageVue extends Panel implements Rafraichissable, |
VueListable, ListePaginable { |
|
/** |
* instance du médiateur |
*/ |
private ImageMediateur iMediateur = null; |
/** |
* Dataview, littéralement "vue de données" qui permet de définir la manière |
* d'afficher les données |
*/ |
private DataView dView = null; |
/** |
* Dataview, littéralement "vue de données" qui permet de définir la manière |
* d'afficher les données |
*/ |
private Store st = null; |
/** |
* Barre de pagination gérant l'affichage d'un nombre donné d'élements par |
* page et la navigation entre eux |
*/ |
private BarrePaginationVue pt = null; |
/** |
* Booleen indiquant si la galerie est instanciée ou pas |
*/ |
private boolean estInstancie = false; |
|
private boolean garderRatio = false; |
|
private int tailleOr = 100 ; |
|
boolean lienUploadInitialise = false ; |
|
HTML videPanel = null ; |
|
|
/** |
* Constructeur sans argument, privé car ne doit pas être utilisé |
*/ |
@SuppressWarnings("unused") |
private GalerieImageVue() { |
super(); |
} |
|
/** |
* Constructeur avec argument |
* |
* @param im |
* le médiateur avec lequel la vue va communiquer |
*/ |
public GalerieImageVue(ImageMediateur im) { |
super("Galerie"); |
iMediateur = im; |
|
// on ajoute des listeners au composant tout entier |
this.addListener(new ContainerListenerAdapter() { |
|
// pour gagner du temps on n'instancie la vue en elle même que lors |
// du premier affichage (lazy rendering) |
|
public void onShow(Component component) { |
|
if (!estInstancie) { |
initialiser(); |
} |
|
} |
}); |
|
AjouterListenersLiens(); |
|
// et on ajoute la tool bar |
pt = new BarrePaginationVue(this); |
pt.setLabelElement("Images"); |
pt.setTaillePageParDefaut(50); |
this.setBottomToolbar(pt); |
|
} |
|
/** |
* Ajoute tous les listeners nécessaires à l'intercation utilisateur avec la |
* vue de données |
*/ |
public void ajouterListenersDataView() { |
|
// ajout de listeners pour la gestion de la selection |
// dans la galerie |
|
dView.addListener(new DataViewListenerAdapter() { |
|
// gestion du clic sur une image |
|
public void onClick(DataView source, int index, Element node, |
EventObject e) { |
|
// on en notifie le médiateur |
getIMediateur().clicGalerieImage(index, node, e); |
|
} |
|
// gestion du clic droit |
|
public void onContextMenu(DataView source, int index, Element node, |
EventObject e) { |
|
// on stoppe l'évenement |
e.stopEvent(); |
// et on notifie le médiateur |
getIMediateur().montrerContextMenu(e); |
|
} |
|
// gestion du double clic |
|
public void onDblClick(DataView source, int index, Element node, |
EventObject e) { |
|
// on notife le mediateur |
getIMediateur().clicGalerieImage(index, node, e); |
|
} |
|
// gestion des actions en fonction de la selection |
|
public void onSelectionChange(DataView view, Element[] selections) { |
|
// s'il n'y a aucun élement sélectionné |
if (selections.length <= 0) { |
// on en notifie le médiateur |
getIMediateur().aucuneSelection(); |
} else { |
// sinon on notifie le médiateur |
getIMediateur().selection(); |
// et on lui demande de synchroniser la séléction avec les |
// autres vues |
getIMediateur().synchroniserSelection("galerie"); |
} |
} |
}); |
} |
|
/** |
* Accesseur pour la dataview |
* |
* @return la dataview |
*/ |
public DataView getDView() { |
return dView; |
} |
|
/** |
* Renvoie les ids des images sélectionnées |
* |
* @return un tableau de String contenant les identifiants des images |
* sélectionnées |
*/ |
public String[] getIdSelectionnees() { |
Record[] selection = getDView().getSelectedRecords(); |
int taille = selection.length; |
String id_selection[] = new String[taille]; |
|
for (int i = 0; i < selection.length; i++) { |
|
id_selection[i] = selection[i].getAsString("num_image"); |
} |
|
return id_selection; |
} |
|
/** |
* Accesseur pour le médiateur |
* |
* @return le médiateur associé à la vue |
*/ |
public ImageMediateur getIMediateur() { |
return iMediateur; |
} |
|
/** |
* Accesseur pour le store |
* |
* @return le store associé à la vue |
*/ |
public Store getSt() { |
return st; |
} |
|
/** |
* Accesseur pour la toolbar |
* |
* @return la toolbar associée à la vue |
*/ |
public BarrePaginationVue getToolBarVue() { |
return pt; |
} |
|
/** |
* Fonction d'initialisation du contenu (appelée lors du premier affichage |
* de la liste) |
*/ |
public void initialiser() { |
|
// Preparation de la dataview et du template |
// le template va créer une div contenant une image |
// pour chacune des photos |
final XTemplate template = new XTemplate( |
new String[] { |
"<tpl for='.'>", |
"<div class='thumb-wrap' id='{num_image}'>", |
"<div class='thumb'><img src='{url_image_M}' width='{taille_x_s} px' height='{taille_y_s} px' title='{num_image}'></div>", |
"<span>{nom}</span></div>", "</tpl>", |
"<div class='x-clear'></div>" }); |
// pour des raisons de performances on compile le template en une |
// fonction |
template.compile(); |
|
// la dataview affichera les images en accord avec le template |
// cree precedemment |
dView = new DataView("div.thumb-wrap") { |
|
public void prepareData(Data data) { |
data.setProperty("shortName", Format.ellipsis(data |
.getProperty("num_image"), 15)); |
|
int[] XY = {data.getPropertyAsInt("taille_x") ,data.getPropertyAsInt("taille_y")} ; |
int[] XYresize ; |
|
if(garderRatio) { |
XYresize = calculerDimensions(XY); |
} |
else { |
XYresize = new int[2] ; |
XYresize[0] = XYresize[1] = tailleOr ; |
|
} |
|
data.setProperty("taille_x_s", XYresize[0]); |
data.setProperty("taille_y_s", XYresize[1]); |
} |
}; |
dView.setTpl(template); |
|
// parametre d'affichage de la dataview |
this.setAutoScroll(true); |
dView.setAutoHeight(true); |
dView.setMultiSelect(true); |
dView.setOverCls("x-view-over"); |
dView.setEmptyText(""); |
|
// creation du store |
FieldDef defNumImage = new IntegerFieldDef("num_image"); |
FieldDef defDatImage = new StringFieldDef("dat_image"); |
FieldDef defLieImage = new StringFieldDef("lie_image"); |
FieldDef defAppImage = new StringFieldDef("app_image"); |
FieldDef defUrlImageS = new StringFieldDef("url_image_S"); |
FieldDef defUrlImageM = new StringFieldDef("url_image_M"); |
FieldDef defUrlImage = new StringFieldDef("url_image"); |
FieldDef defTailleX = new IntegerFieldDef("taille_x"); |
FieldDef defTailleY = new IntegerFieldDef("taille_y"); |
FieldDef[] defTab = { defNumImage, defDatImage, defLieImage, |
defAppImage, defUrlImageS, defUrlImageM, defUrlImage,defTailleX,defTailleY}; |
RecordDef rd = new RecordDef(defTab); |
st = new Store(rd); |
dView.setStore(st); |
|
this.getDView().setLoadingText("chargement"); |
|
this.add(dView); |
dView.hide(); |
|
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/> " + |
" <a id=\"lienUploadSimple\" href=\"#\" > Cliquez ici pour ajouter un fichier à la fois </a> <br/> " + |
" Pour ajouter des images plus tard, allez dans le menu Fichier -> Ajouter des images </div>"); |
this.add(videPanel); |
|
// ajouts de la gestion des evenements pour la dataview |
configDragAndDrop() ; |
ajouterListenersDataView(); |
|
estInstancie = true ; |
|
} |
|
public void configDragAndDrop() |
{ |
// on fabrique la nouvelle configuration |
// les éléments sur lesquels on fait du drag 'n drop doivent tous avoir le même ddGroup |
DropTargetConfig dtc = new DropTargetConfig(); |
dtc.setdDdGroup("DragGroupName"); |
|
//La drop target permet de gérer l'évenement onDrop sur l'élement courant |
@SuppressWarnings("unused") |
DropTarget tg = new DropTarget(this, dtc) |
{ |
public boolean notifyDrop(DragSource source, EventObject e, DragData data){ |
|
// si les données proviennent d'une grille |
if(data instanceof GridDragData) |
{ |
// on appelle le médiateur |
return iMediateur.lierObsDD(source, e, data,getId()) ; |
} |
return false ; |
} |
|
public String notifyOver(DragSource source, EventObject e, DragData data){ |
return "x-dd-drop-ok"; |
} |
}; |
|
} |
|
/** |
* Méthode héritée de l'interface rafraichissable |
*/ |
public void rafraichir(Object nouvelleDonnees, |
boolean repandreRafraichissement) { |
|
// si l'objet reçu est un store |
if (nouvelleDonnees instanceof Store) { |
|
st = (Store) nouvelleDonnees; |
|
if(st.getCount() != 0) { |
|
// on le charge |
st.load(); |
|
if(videPanel.isVisible()) { |
videPanel.setVisible(false) ; |
} |
|
if(!dView.isVisible()) { |
dView.setVisible(true); |
} |
// on l'affecte à la vue |
dView.setStore(st); |
// et on rafrachit la vue |
dView.refresh(); |
} |
else |
{ |
st.removeAll(); |
st.load(); |
dView.setStore(st); |
|
if(dView.isVisible()) { |
dView.hide() ; |
} |
|
if(!videPanel.isVisible()) { |
videPanel.setVisible(true); |
AjouterListenersLiens(); |
} |
|
} |
} |
|
// si le composant doit répandre le rafraichissement |
if (repandreRafraichissement) { |
// il en notifie le médiateur en lui donnant une copie des données |
// et en notifiant qu'il en est l'expéditeur |
getIMediateur().synchroniserDonneesZoomListeGalerie( |
nouvelleDonnees, this); |
} |
} |
|
/** |
* Méthode héritée de l'interface VueListable Sélectionne les images dans la |
* galerie suivant les identifiants donnés en paramètres |
* |
* @param ids |
* les identifiants des images à sélectionner |
*/ |
public void selectionnerImages(int[] ids) { |
|
getDView().select(ids); |
|
} |
|
public void changerNumeroPage(int pageCourante) { |
|
iMediateur.changerNumeroPage(pageCourante) ; |
|
} |
|
public void changerTaillePage(int nouvelleTaillePage) { |
|
iMediateur.changerTaillePage(nouvelleTaillePage) ; |
} |
|
public int[] calculerDimensions(int[] tailleXY) { |
|
float[] tailleXYf = {new Float(tailleXY[0]),new Float(tailleXY[1])} ; |
float tailleOr = this.tailleOr ; |
float maxTaille = Math.max(tailleXYf[1],tailleXYf[0]) ; |
float[] XYresize = new float[2]; |
|
if(maxTaille == tailleXY[0]) { |
float rapport = tailleXYf[1]/tailleXYf[0] ; |
XYresize[0] = tailleOr ; |
XYresize[1] = tailleOr*rapport ; |
}else { |
float rapport = tailleXYf[0]/tailleXYf[1] ; |
XYresize[1] = tailleOr ; |
XYresize[0] = tailleOr*rapport ; |
} |
|
int[] res = {Math.round(XYresize[0]),Math.round(XYresize[1])} ; |
|
return res; |
} |
|
private void AjouterListenersLiens() { |
|
addListener(new PanelListenerAdapter() { |
|
public void onAfterLayout(Container c) { |
ExtElement uploadS = Ext.get("lienUploadSimple"); |
uploadS.removeAllListeners(); |
uploadS.addListener("click", new EventCallback() { |
public void execute(EventObject e) { |
getIMediateur().uploaderImages(false); |
} |
|
}) ; |
|
ExtElement uploadM = Ext.get("lienUploadMultiple"); |
uploadM.removeAllListeners(); |
uploadM.addListener("click", new EventCallback() { |
public void execute(EventObject e) { |
getIMediateur().uploaderImages(true); |
} |
}); |
} |
|
}); |
} |
} |
Property changes: |
Added: svn:mergeinfo |