2013-07-24 14 views
5

Mi piacerebbe sapere se è possibile in Vaadin 7.0.5 includere grafica SVG in un'interfaccia utente di Vaadin, e questo senza alcun componente aggiuntivo.Come includere un SVG generato dinamicamente nell'interfaccia utente di Vaadin?

Attualmente sto usando questo codice

StreamResource ressourceSVG = new StreamResource(source, "graphe.svg"); 

Embedded embedded = new Embedded("SVG", ressourceSVG); 
embedded.setType(Embedded.TYPE_OBJECT); 
embedded.setMimeType("images/svg+xml"); 

verticalLayout.addComponent(embedded); 
setContent(verticalLayout); 

E con questo, semplicemente non succede nulla ... Solo l'aspetto del testo "SVG" nel browser.

L'unico topic che ho trovato su questo argomento datato da 3 anni fa e non ho trovato un indizio nel libro.

nell'API solo interfacce esiste: elemental.svg ma non è davvero aiutando ...

Se voi ragazzi avete qualche idea ... sarebbe fantastico

+0

cosa succede? cosa non succede? – nexus

+0

@nexus L'unica cosa che succede è l'aspetto del testo SVG. Nell'HTML generato ho solo il testo "SVG" generato da questo elemento nient'altro. – Sidewinder94

+1

cosa succede se usi TYPE_IMAGE o TYPE_BROWSER invece di TYPE_OBJECT? – nexus

risposta

4

Così, sembra la risposta è che per uno SVG per essere visualizzato in Vaadin 7 si dovrebbe usare BrowserFrame per visualizzare la risorsa SVG.

Utilizzo di qualcosa come di seguito dove sourceSVG è una streamSource contenente i dati SVG.

StreamResource ressourceSVG = new StreamResource(sourceSVG, "graphe.svg"); 

BrowserFrame embedded = new BrowserFrame("SVG", ressourceSVG); 

verticalLayout.addComponent(component); 
verticalLayout.addComponent(embedded); 
setContent(verticalLayout); 

Ho dovuto ricaricare il telaio dopo il caricamento della pagina web, ma alla fine ha funzionato

2

In realtà, almeno nella versione 7.1.7, è possibile utilizzare Embedded con SVG direttamente. V'è anche un esempio nella Book, anche se si tratta di un ThemeResource:

// A resource reference to some object 
Resource res = new ThemeResource("img/reindeer.svg"); 

// Display the object 
Embedded object = new Embedded("My SVG", res); 
object.setMimeType("image/svg+xml"); // Unnecessary 
layout.addComponent(object); 

Tuttavia, StreamResource s anche funzionano bene, almeno con il seguente frammento:

Embedded image = new Embedded(); 
image.setMimeType("image/svg+xml"); //also unnecessary here :p 
layout.addComponent(image); 
StreamSource source = //define your source 
image.setSource(new StreamResource(source, "image.svg")); 

(si noti che se si devi rigenerare la tua immagine, devi fornire un valore nuovo, unico filename per il StreamResource)

+1

Grazie per il suggerimento, proverò a ricordarlo quando aggiornerò la mia app di vaadin – Sidewinder94

Problemi correlati