Integrating a javascript image slider/gallery with vaadin7

Vaadin 6 / 7 / 8
1

Hello,

I’m trying my hands on the new javascript integration feature in vaadin7, and for the most part they work as advertised. Now some javascript image gallery components provide a javascript API where you can pass in an array of image URLs to start it up. This is rather simple to integrate to vaadin7:

MyGalleryState.java:

public MyGalleryState extends JavaScriptComponentState {
public String[] images;
}

MyGallery.java:

@JavaScript( {"whatever.you.need.here.js"} )
@StyleSheet( {"and.the.stylesheets.css"} )
public MyGallery extends AbstractJavaScriptComponent {
  public void setImages(String[] images);
}

mygallery.js:

com_somecompany_mygallery = function() {
  //startup js for shuffling the data around...
var myImages = this.getState().images;
  var gallery = new SomeGallery({
          images: myImages
   });
};

Anyhow, here’s my problem: some javascript components requires the existence of certain markups and do not provide a programmatic javascript API. Let’s use http://galleria.io/docs/getting_started/beginners_guide/ as an example:

<div class="galleria">
    <img src="photo1.jpg">
    <img src="photo2.jpg">
    <img src="photo3.jpg">
</div>

How do one integrate this with vaadin7? One approach that come to mind is to generate the raw markups and stick it inside a Label with ContentMode.HTML in it, something like this: (Please ignore the obvious fact that the image urls wouldn’t work as it currently stand)

String[] myImages = new String[]
 {"photo1.jpg", "photo2.jpg", "photo3.jpg"};

//construct raw html
StringBuilder sb = new StringBuilder();
sb.append("<div class=\"galleria\">");
for (String myImage: myImages) {
  sb.append("<img src=\"" + myImage + "\">");
}
sb.append("</div>");

//put into a raw html label
Label label = new Label(sb.toString(), ContentMode.HTML);

//then put into an empty div/layout
CssLayout layout = new CssLayout(label);

Slightly clunky and looks like something that came from JSP or PHP. Any other ideas?
What’s the “proper vaadin” way of doing this?
Thank you very much in advance.

2

Hi,

I think the “proper vaadin way” would be to create a server-side component and a corresponding client-side widget for this. The server-side component would accept images as vaadin resources so they could come from the theme, external urls, a database etc. The client-side widget should then handle parsing the resource urls and using proper (GWT) APIs to construct the required markup.

3

Thank you for the reply. That was a bad wording on my part, of course we’d all like a “proper” GWT components if possible, but for cases like this where it’s a one-shot, display-only components, it would be overkill to create such a beast. (Not to mention i don’t have the faintest idea of where to start…).

So, allow me to rephrase the question then:: for obvious client-side-only javascript widgets (that won’t benefit much from a full blown server-side GWT components), is the approach acceptable? Is there a better (read: faster, more efficient, not reinventing the wheel) way to do this?

Follow up question: assuming i’m putting the static resources (images) under VAADIN/images folder, how do one construct the proper html url for said resources?

4

Hi again, a few additional comments:

  1. I agree that you might not always want to create the full server- and client-side components, but at least in this case I don’t think they would be that complicated.

  2. I don’t see anything wrong with your approach, aside from what you already state yourself - that it’s a bit clunky. However, if you don’t want to implement it with a custom widget, I don’t see too much improvement is possible.

  3. If one were to use the ‘proper’ way, you could just use vaadin resources (e.g. theme or file resource in your case) and have the client side handle that via ApplicationConnection.translateVaadinUri method which automatically handles the context path etc. If you want to use your label implementation and provide the urls from the server-side, you need to construct the url yourself. For that, please see e.g.
    VaadinServlet.getCurrent().getServletContext().getContextPath().

5

You might also want to look at ImageViewer source code (
https://github.com/tepi/ImageViewer/tree/master/src/org/vaadin/tepi/imageviewer
) for some pointers on how to send the image resources to the client side and how to handle them there. The most relevant methods here are com.vaadin.server.AbstractClientConnector.setResource(String, Resource) for setting the resource on the server-side and com.vaadin.client.ui.AbstractConnector.getResourceUrl(String) for fetching/translating it on the client side.