For a improved usability I want to associate an icon with every entity (e.g. car icon for cars) and display it in the web gui. I want to use the font awesome icons as described here.
Is it somehow possible to
Display the entity icon on the tab that lists or edits the entity
Display the entity icon on fields that link to that related entity (in list or editor)
E.g. by unwrapping the components like described in the “styled-checkbox” example?
For now CUBA does not have this functionality, but you can add icons using Vaadin API:
import com.haulmont.cuba.gui.components.AbstractWindow;
import com.vaadin.server.FontAwesome;
import com.vaadin.ui.TabSheet;
public class Screen extends AbstractWindow {
@Override
public void ready() {
super.ready();
// find tab with current Window
com.vaadin.ui.Component windowComponent = this.frame.unwrap(com.vaadin.ui.Component.class);
while (windowComponent.getParent() != null && !(windowComponent.getParent() instanceof TabSheet)) {
windowComponent = windowComponent.getParent();
}
if (windowComponent.getParent() instanceof TabSheet) {
TabSheet tabSheet = (TabSheet) windowComponent.getParent();
TabSheet.Tab tab = tabSheet.getTab(windowComponent);
// add icon
tab.setIcon(FontAwesome.CAR);
// remove icon after window close
addCloseListener(actionId ->
tab.setIcon(null)
);
}
}
}
I’ve attached sample project so you can try it in action.
This approach is a bit tricky so we are planning to provide CUBA API to assign icons for Window from XML and at run time.
If you want to display Icon for an input Field you can use setIcon method of a Field (TextField, PickerField, etc) or you can add a Label with icon to the right of the field.
Thanks a lot for this example. It helped me a lot.
I created e.g. now my own base class for an AbstractEditor which sets an icon and the InstanceName as caption instead of the generic message text. Maybe this would also be a good CUBA product feature ?