Notifications and Message icons

Support
#1

Is it possible to create notification and message indicator icons to read / open them in CUBA as attached?

notification

1 Like
#2

Hi,

There are two ways of implementing this feature:

  1. Custom component or JavaScript extension
  2. Vaadin overlays add-on. Demo: http://sami.virtuallypreinstalled.com/overlays/

The second way is simpler than the first, but it requires additional jar file. Vaadin Overlays for Vaadin 7.6 is not published in Maven repository thus you should add overlays-1.1.3.jar to modules/web/lib and to your build file using Project properties > Advanced tab as a compile dependency:


files("${project.projectDir}/lib/overlays-1.1.3.jar")

Then you have to create web-toolkit module using Create module - Create web toolkit module action.

This add-on enables you to add overlay icons and text using simple Java API:


public class ExtAppMainWindow extends AppMainWindow {
    @Inject
    private Button demoBtn;
    @Inject
    private HBoxLayout demoBox;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        Label overlayLabel = new Label("10");
        overlayLabel.setStyleName("overlay-badge");

        AbstractComponent vButton = demoBtn.unwrap(AbstractComponent.class);
        CustomOverlay overlay = new CustomClickableOverlay(overlayLabel, vButton);
        overlay.setComponentAnchor(com.vaadin.ui.Alignment.TOP_LEFT);
        overlay.setOverlayAnchor(com.vaadin.ui.Alignment.MIDDLE_CENTER);
        overlay.setXOffset(0);
        overlay.setYOffset(0);

        AbstractOrderedLayout vLayout = demoBox.unwrap(AbstractOrderedLayout.class);
        vLayout.addComponent(overlay);
    }
}

You can style your overlay using CSS (Using extended theme):


.overlay-badge {
  background: red;
  color: white;
  border: 1px solid red;
  border-radius: 3px;
}

The result will be:

I’ve created demo project with Vaadin overlays here: GitHub - cuba-labs/overlays-addon-integration: How to use Vaadin overlays with CUBA Platform

overlay-demo

#3

Thank you Yuriy. The sample app is running well. But when I tried to apply the same in my project the project couldn’t find the path for the overlay resources even I have put the overlay jar file to the web/lib, update dependency, updated theme file.
Please see attached image of file path info that i have in my project, thanks for helping on what i am missing here.

overlay1

overlay2

overlay3

#4

Where have you put library jar? Have you regenerated IDE files using Studio?

#5

I have put the overlay jar file manually to the web/lib folder and also updated Grade file to update the dependencies, is it Ok? The line of code displayed in properties that you see in the snapshot I sent earlier, is that correct?

#6

Sorry, I’ve forgotten to tell about AppWidgetSet.xml file. There you have to add overlays library include statement.

See: overlays-addon-integration/AppWidgetSet.gwt.xml at master · cuba-labs/overlays-addon-integration · GitHub

#7

Thank you, worked.