Creazione di un addon

Ciao a tutti,
vi scrivo per chiedere un consiglio su un esempio di widget che sto creando.
La mia intenzione è quella di creare un componente di tipo Image con un attributo in più rispetto al normale tag html (quindi alterare l’html originario) e vorrei passare al src dell’immagine un Fileresoure (quindi codificato con l’uri “interno” di Vaadin).

Quindi mi aspetterei di chiamare il componente così:
MyImage im=new MyImage(new FileResource(new File(“path fisico sul disco dell’immagine”));
layout.addComponent(im);

che tradotto in html dovrà essere:

Su questa immagine poi devo poter chiamare delle funzioni da un javascript che importerò.

Grazie dell’eventuale aiuto!

Ciao Fabrizio,
dovendo interagire con l’immagine via javascript ti consiglierei di implementare un’estensione javascript (AbstractJavaScriptExtension) da applicare ad un componente Image standard.
Nel connettore javascript vai ad impostare l’attributo desiderato il cui valore puoi eventualmente impostare lato server (JavaScriptExtensionState).
Questo inoltre ti permetterebbe sia di invocare dal componente java funzioni javascript definite nel connettore che di chiamare dal connettore delle funzionalità lato server.
Per ulteriori informazioni vedi la
documentazione
sui componenti ed estensioni javascript ed i javadoc di
AbstractJavaScriptExtension

Nel caso più semplice (senza pssaggio di stato e interazioni) avresti qualcosa del genere

@JavaScript("my_image_connector.js")
public class MyImageExtension extends AbstractJavaScriptExtension {

    public MyImageExtension(Image image) {
        super(image);
    }
}

// file my_image_connector.js
window.il_package_della_tua_classe_MyImage = function() {
    var me = this;
    console.log("================================================" , me);
    me.getElement(me.getParentId()).setAttribute("nuovoattributo", "valore");
}

class MyUI extends UI {

    protected void init(VaadinRequest vaadinRequest) {
        ...
        Image image = new Image(new FileResource(new File("path fisico sul disco dell'immagine"));
        new MyImageExtension(image);
        layout.addComponent(image);
        ...
    }
}

Spero di esserti stato di aiuto
Marco

Ciao Marco,
ho trovato un’altra soluzione…forse un pò più “artigianale” ma la tua sicuramente è più pulita e semplice.
Grazie dell’interessamento e alla prossima !

Ciao Marco,
stavo provando la tua soluzione a scopo didattico però trovo un problema che forse mi puoi aiutare a capire…
eseguendo questa istruzione
me.getElement(me.getParentId()).setAttribute(“nuovoattributo”, “valore”);

non mi aggiunge l’attributo all’elemento img bensì al div principale di vaadin

Hai idea di come intercettare il tag reale e non il div principale ?
Grazie !

A che componente hai applicato l’estensione? Puoi postare anche il codice java?

Hai ragione! avevo fatto l’extend sulla UI…ma per un semplice motivo…perchè avevo bisogno di recuperare la virtual URL della seconda immagine che passo come parametro.

Ti faccio vedere il codice e forse capirai come poter recuperare il secondo path virtuale

@JavaScript({“jquery-1.8.3.min.js”,“jquery.elevatezoom.js”,“zoomerext_connector.js”})
public class ZoomerExt extends AbstractJavaScriptExtension {

private static final long serialVersionUID = 1L;

public ZoomerExt(UI ui,String id,Image image,Image imageLarge) {
    super(image);

//QUI DOVREI RECUPERARE IL PATH “VAADIN” DELL’IMMAGINE
//DOVREI SETTARE LA RISORSA CON
setResource(“imageLarge_”+id, imageLarge.getSource());
MA POI NON SO COME RECUPERARE L’URL //nel formato APP/…/image.pnh
enableZoomImage(id,virtualPathImageLarge);
}

private void enableZoomImage(String id,String virtualPathImageLarge) {
    callFunction("enableZoomImage", virtualPathImageLarge);
}

 @Override
protected ZoomerExtState getState() {
    return (ZoomerExtState) super.getState();
}

}

il connector invece è:
window.res_zoomer_ZoomerExt = function() {
var me = this;

this.enableZoomImage = function(id,virtualPathImageLarge) {
    me.getElement(me.getParentId()).setAttribute('data-zoom-image',virtualPathImageLarge);
    me.getElement(me.getParentId()).setAttribute('id',id);
}

}

Ciao,
la tua intuizione sul setResource è la via più corretta a mio avviso.

Io proverei prevedendo che l’estensione sia applicata ad un componente Image e passando contestualemente la risorsa relativa all’altra immagine

public ZoomerExt(Image image, Resource imageLarge) { setResource("imageLarge", imageLarge); } Poi nel connettore andrei, tramite la funzione translateVaadinUri (vedi javadoc di AbstractJavascriptExtension) ad ottenere l’url corretto.

window.res_zoomer_ZoomerExt = function() {
     var me = this;
     me.onStateChange = function() {
         var virtualPath = me.translateVaadinUri(me.getState().resources.imageLarge.uRL);    
         me.getElement(me.getParentId()).setAttribute('data-zoom-image',virtualPath);
    }
}

Implementando la logica nella funzione onStateChange, questa verrà invocata ad ogni modificato dell’oggetto di stato lato server; il che ti permetterebbe di cambiare lato server l’immagine esponendo per esempio un metodo

void setImageLarge(Resource imageLarge) { setResource("imageLarge", imageLarge); }

Se hai necessità anche di impostare l’id sul tag img io lo farei utilizzando direttamente il metodo setId del componente Image

image.setId("myID")

HTH
Marco

Ecco che cosa non trovavo ! questo metodo : translateVaadinUri

Grazie ancora !