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

BackGroundImage

General questions regarding the development with JVx.

Re: BackGroundImage

Postby rzenz » Wed Oct 18, 2017 9:53 am

There is currently no way to do this, there is JVx #1771 logged regarding extending the API to support the same API as UIIcon for the background image.

You can emulate this behavior by using an UIFormLayout (with one exception which I'll come to later), because the UIFormLayout allows you to overlap components.

Code: Select all
UIFormLayout layout = new UIFormLayout();
// Remove the margins to make sure that the components stretch from
// one border to the other.
layout.setMargins(0, 0, 0, 0);

UIPanel panel = new UIPanel();
panel.setLayout(layout);
// The item order (so which is displayed on top) is directly related to
// the order in which they are added. The first added item is the top
// item.
panel.add(new UILabel("Foreground"), layout.getConstraints(0, 0, -1, -1));
// Note how both components are getting constraints with the same properties
// (but not actually the same constraints). In this case they will span from
// the whole width and height of the panel.
panel.add(new UIIcon(backgroundImage), layout.getConstraints(0, 0, -1, -1));


That way you have complete control over how the background image is placed. If you want to directly use the panel for components, instead of having one wrapper panel, you can also use the border anchors of the layout directly:

Code: Select all
panel.add(new UIIcon(backgroundImage), layout.getConstraints(
        layout.getTopAnchor(),
        layout.getLeftAnchor(),
        layout.getBottomAnchor(),
        layout.getRightAnchor()));


That has the upside that you do not need to set the margins to zero, the background icon component will automatically span the full size of the panel. This is useful if you want to directly add the components to this panel, like that:

Code: Select all
UIFormLayout layout = new UIFormLayout();

UIPanel panel = new UIPanel();
panel.setLayout(layout);
panel.add(new UILabel("Name"), layout.getConstraints(0, 0));
panel.add(new UIEditor(dataBook, "NAME"), layout.getConstraints(1, 0));
panel.add(new UILabel("Password"), layout.getConstraints(0, 1));
panel.add(new UIEditor(dataBook, "PASSWORD"), layout.getConstraints(1, 1));
panel.add(new UIIcon(backgroundImage), layout.getConstraints(
        layout.getTopAnchor(),
        layout.getLeftAnchor(),
        layout.getBottomAnchor(),
        layout.getRightAnchor()));


Of course you could encapsulate the logic for adding a background icon inside a new component for easier reuse:

Code: Select all
public class BackgroundImagePanel extends UIPanel
{
    private UIIcon backgroundIcon = new UIIcon();
   
    public BackgroundImagePanel()
    {
        super();
       
        UIPanel innerPanel = new UIPanel();
        // Make the inner container transparent.
        innerPanel.setBackground(null);
       
        UIFormLayout layout = new UIFormLayout();
        layout.setMargins(0, 0, 0, 0);
       
        setLayout(layout);
        add(innerPanel, layout.getConstraints(0, 0, -1, -1));
        add(backgroundIcon, layout.getConstraints(0, 0, -1, -1));
       
        // Set innerPanel as target for all properties.
        setUIResourceContainer(innerPanel);
    }
   
    public UIIcon getBackgroundIcon()
    {
        return backgroundIcon;
    }
   
}


With the usage being simply:

Code: Select all
UIFormLayout layout = new UIFormLayout();

BackgroundImagePanel panel = new BackgroundImagePanel();
panel.setLayout(layout);
panel.getBackgroundIcon().setImage(backgroundImage);
panel.getBackgroundIcon().setHorizontalAlignment(IAlignmentConstants.ALIGN_CENTER);
panel.add(new UILabel("Name"), layout.getConstraints(0, 0));
panel.add(new UIEditor(dataBook, "NAME"), layout.getConstraints(1, 0));
panel.add(new UILabel("Password"), layout.getConstraints(0, 1));
panel.add(new UIEditor(dataBook, "PASSWORD"), layout.getConstraints(1, 1));


Also see the blog posts about creating custom components and how the Resource/UIResource system works for further information on that.

Now back to the exception which I mentioned earlier. The FormLayout can overlap components with the exception of the Vaadin implementation. The "old" Vaadin FormLayout does not have this ability, however the new Vaadin client side layouts do have this ability, see the section "Vaadin Client-Side Layouts" in this blog post on how to use them, if you are using the Vaadin implementation, that is.

Additionally, if you use JavaFX you could set the background image using the CSS capabilities of JavaFX. When you set a name on a UIComponent, it will be set as ID in JavaFX.
User avatar
rzenz
 
Posts: 36
Joined: Mon Dec 12, 2016 1:40 pm
Location: Vienna, Austria

Return to Development