Search code examples
vaadinvaadin8

How to make the message/label to be closed


I need your help or some pointers on my challenge.

In my web application, I am displaying a warning message and a dashboard to the user.

The message is a label that tells some information about the dashboard. I am playing the dashboard in browser frame.

Please refer to the code below,

Label warningMessage = new Label("Warning : Dashboard is only accessible under local network/VPN.");
BrowserFrame boxInfo = new BrowserFrame(null, new ExternalResource(address));
boxInfo.setSizeFull();
VerticalLayout layout = new VerticalLayout();
layout.addComponent(warningMessage);
layout.addComponent(boxInfo);
layout.setExpandRatio(warningMessage, 0);
layout.setExpandRatio(boxInfo, 1);
layout.setSizeFull();
body.addComponent(layout);
body.setSizeFull();

My requirement as follows,

The label or any other component that display the message, should have a privilege to be closed as soon as the user clicks "X" button on the label.

It should be like

Warning : Dashboard is only accessible under local network/VPN. X

When the user reads the message and clicks on the "X" button/whatever it is. The message should disappear and browser frame needs to be re-sized to occupy the space of the label/component.

Please advice how to do this.


Solution

  • I would most likely create a new server-side component for it.

    pseudocode below.

    class ClosableLabel extends HorizontalLayout { 
      public CloseableLabel(String label, Button.ClickListener listener){
        addComponent(new Label(label));
        addComponent(new Button("x", listener);
      }
    
      // Probably needs some setters and such
    }
    

    In the view, you can then use these:

    CloseableLabel label = new CloseableLabel("Warning : Dashboard is only accessible under local network/VPN.", new ClickListener {
      @Override
      public onClick(event){ //or what ever the implementable method of ClickListener is called.
        layout.removeComponent(label);
      }
    });
    layout.addComponent(label);
    

    Then you can add more features to this component, like borders to the label, better icon than the letter x, no borders to the button, transitions etc. etc.

    All the code was written directly into StackOverflow and needs to be error checked and properly implemented.