Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Creazione di un addon

Fabrizio Attanasio
5 years ago Oct 13, 2016 10:48am
Marco Collovati
5 years ago Oct 13, 2016 7:44pm

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

Fabrizio Attanasio
5 years ago Oct 14, 2016 8:16am
Fabrizio Attanasio
5 years ago Oct 14, 2016 10:35am
Marco Collovati
5 years ago Oct 14, 2016 10:37am
Fabrizio Attanasio
5 years ago Oct 14, 2016 10:52am
Marco Collovati
5 years ago Oct 14, 2016 11:17am

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
 

Fabrizio Attanasio
5 years ago Oct 14, 2016 12:54pm