This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information

Vaadin Panel background image

Our current Vaadin UI got a new feature. It's now possible to set a background image for a Panel.

This feature was already defined in JVx' IPanel but our vaadin UI didn't support it out-of-the-box.

We already had a custom Panel and it was an easy task to add missing functionality. Sorry, we don't have an extension for this feature, but it shouldn't be a problem to create an extension based on our implementation.

Our solution

As mentioned, we had a custom panel implementation. Its a simple extension of CssPanel with an implementation of SingleComponentContainer. The class can be found here.

The important part in our implementation is that we have a custom State and Connector for our Panel. The state got additional properties for the background, like repeat-x, repeat-y or the size. The image itself is a Resource and we re-used the existing transport mechanism for image resources. The mechanism is available in AbstractClientConnector. The nice thing with this standard mechanism is that the client has a method to build the correct image URL, automatically.

Our implementation:

public void setBackgroundImage(Resource pResource)
{
    setResource("background-image", pResource);
   
    SimplePanelState state = getState();

    if (pResource != null)
    {
        state.backgroundRepeatX = "no-repeat";
        state.backgroundRepeatY = "no-repeat";
    }
    else
    {
        state.backgroundRepeatX = null;
        state.backgroundRepeatY = null;
    }
}

The most important thing was the connector on client side which reads the State and sets the background image via css. The full class is available here.

The following code snippet shows how we set the background image. It's not really tricky

@Override
public void onStateChanged(StateChangeEvent stateChangeEvent)
{
    super.onStateChanged(stateChangeEvent);

    String sURI = getResourceUrl("background-image");

    if (sURI != null)
    {
        Style style = getWidget().getElement().getStyle();
       
        style.setBackgroundImage("url(" + sURI + ")");
       
        SimplePanelState state = getState();
       
        if (state.backgroundSize != null)
        {
            style.setProperty("background-size", state.backgroundSize);
        }
       
        if (state.backgroundRepeatX != null)
        {
            style.setProperty("background-repeat-x", state.backgroundRepeatX);
        }

        if (state.backgroundRepeatY != null)
        {
            style.setProperty("background-repeat-y", state.backgroundRepeatY);
        }
    }
    else
    {
        Style style = getWidget().getElement().getStyle();
       
        style.clearBackgroundImage();
        style.clearProperty("background-size");
        style.clearProperty("background-repeat-x");
        style.clearProperty("background-repeat-y");
    }
}

The method getResourceUrl is an existing method and returns the full image URL. It was easier to re-use this method than creating the URL manually.

We made a simple test in our showcase application and the result was as expected:

Background image

Background image

The image was set with following code:

panelMain.setBackgroundImage(UIImage.getImage("/penguin.jpg"));

categories News | rjahn | 21/11/2015 | comments Comments (0)

© SIB Visions GmbH