How can I configure the color of the feedback messages in Wicket Sessions?

Question

The Problem

Hello, I am trying to configure the color of Wickets feedback messages. I am currently maintaining a Wicket GUI (Wicket 7.6.1). It seems that Session.get().warn("Watch out!") prints a green warning box, annotated with the CSS class alert-success. I would like it to change its color to yellow.

What I got so far:

I found that Session.get().getApplication().getResourceSettings() gives me access to some resource settings, including a properties factory. But I don't know how to use it. Also, I have looked for markup files related to my Session but not found any.

Any help would be greatly appreciated!

Answer 1

You can create your custom feedback panel if you want.

CustomFeedBackPanel.html

<wicket:panel>
    <div wicket:id="feedbackul">
        <wicket:container wicket:id="messages">
            <p wicket:id="message"></p>
        </wicket:container>
    </div>

</wicket:panel>

CustomFeedBackPanel.java

public class CustomFeedbackPanel extends Panel implements IFeedback {

    private static final long serialVersionUID = 1L;
    private final MessageListView messageListView;
    WebMarkupContainer messagesContainer = new WebMarkupContainer("feedbackul") {
        private static final long serialVersionUID = 1L;

        @Override
        protected void onConfigure() {
            super.onConfigure();
            setVisible(anyMessage());
        }
    };


    public CustomFeedbackPanel(final String id) {
        this(id, null);
    }


    public CustomFeedbackPanel(final String id, IFeedbackMessageFilter filter) {
        super(id);

        add(messagesContainer);
        messageListView = new MessageListView("messages");
        messagesContainer.add(messageListView);

        if (filter != null) {
            setFilter(filter);
        }
    }

    public final boolean anyErrorMessage() {
        return anyMessage(FeedbackMessage.ERROR);
    }

    public final boolean anyMessage() {
        return anyMessage(FeedbackMessage.UNDEFINED);
    }

    public final boolean anyMessage(int level) {
        List<FeedbackMessage> msgs = getCurrentMessages();

        for (FeedbackMessage msg : msgs) {
            if (msg.isLevel(level)) {
                return true;
            }
        }

        return false;
    }

    public final FeedbackMessagesModel getFeedbackMessagesModel() {
        return (FeedbackMessagesModel) messageListView.getDefaultModel();
    }

    public final IFeedbackMessageFilter getFilter() {
        return getFeedbackMessagesModel().getFilter();
    }

    public final CustomFeedbackPanel setFilter(IFeedbackMessageFilter filter) {
        getFeedbackMessagesModel().setFilter(filter);
        return this;
    }

    public final Comparator<FeedbackMessage> getSortingComparator() {
        return getFeedbackMessagesModel().getSortingComparator();
    }

    public final CustomFeedbackPanel setSortingComparator(Comparator<FeedbackMessage> sortingComparator) {
        getFeedbackMessagesModel().setSortingComparator(sortingComparator);
        return this;
    }

    @Override
    public boolean isVersioned() {
        return false;
    }

    public final CustomFeedbackPanel setMaxMessages(int maxMessages) {
        messageListView.setViewSize(maxMessages);
        return this;
    }

    protected String getCSSClass(final FeedbackMessage message) {
        String css = "feedback";
        if (message.getLevel() == FeedbackMessage.ERROR
                || message.getLevel() == FeedbackMessage.FATAL) {
            css = "feedback error";
        }
        if (message.getLevel() == FeedbackMessage.SUCCESS) {
            css = "feedback success";
        }
        if (message.getLevel() == FeedbackMessage.WARNING) {
            css = "feedback warn";
        }

        return css;
    }

    protected final List<FeedbackMessage> getCurrentMessages() {
        final List<FeedbackMessage> messages = messageListView.getModelObject();
        return Collections.unmodifiableList(messages);
    }

    protected FeedbackMessagesModel newFeedbackMessagesModel() {
        return new FeedbackMessagesModel(this);
    }

    protected Component newMessageDisplayComponent(String id, FeedbackMessage message) {
        Serializable serializable = message.getMessage();
        Label label = new Label(id, (serializable == null) ? "" : serializable.toString());
        label.setEscapeModelStrings(CustomFeedbackPanel.this.getEscapeModelStrings());
        //label.add(new AttributeModifier("class",getCSSClass(message)));
        return label;
    }

    private final class MessageListView extends ListView<FeedbackMessage> {
        private static final long serialVersionUID = 1L;

        public MessageListView(final String id) {
            super(id);
            setDefaultModel(newFeedbackMessagesModel());
        }

        @Override
        protected IModel<FeedbackMessage> getListItemModel(
                final IModel<? extends List<FeedbackMessage>> listViewModel, final int index) {
            return new AbstractReadOnlyModel<FeedbackMessage>() {
                private static final long serialVersionUID = 1L;


                @Override
                public FeedbackMessage getObject() {
                    if (index >= listViewModel.getObject().size()) {
                        return null;
                    } else {
                        return listViewModel.getObject().get(index);
                    }
                }
            };
        }

        @Override
        protected void populateItem(final ListItem<FeedbackMessage> listItem) {
            final FeedbackMessage message = listItem.getModelObject();
            message.markRendered();
            final Component label = newMessageDisplayComponent("message", message);
            final AttributeModifier levelModifier = AttributeModifier.replace("class",
                    getCSSClass(message));
            //label.add(levelModifier);
            listItem.add(levelModifier);
            listItem.add(label);
            messagesContainer.add(levelModifier);

        }


    }
}

Main thing you should consider getCssClass() method. You can change according to your requirement.I have modified just for your reference.

   protected String getCSSClass(final FeedbackMessage message) {
            String css = "feedback";
            if (message.getLevel() == FeedbackMessage.ERROR
                    || message.getLevel() == FeedbackMessage.FATAL) {
                css = "alert error";
            }
            if (message.getLevel() == FeedbackMessage.SUCCESS) {
                css = "alert success";
            }
            if (message.getLevel() == FeedbackMessage.WARNING) {
                css = "alert warn";
            }

            return css;
        }

Answer 2

Feedback messages are rendered by FeedbackPanel class. It seems your application uses custom implementation of FeedbackPanel that renders the messages as Bootstrap Alerts.

By default Wicket sets feedbackMessage<LogLevel> (e.g. feedbackMessageWarning) as a CSS class to all messages, so you can style them however you want.

Answer 3

An alternative to not create a custom FeedbackPanel and new HTML/Java files is to use enclosures:

Using Twitter Bootstrap classes:

<wicket:enclosure>
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <h4><i class="icon fa fa-ban"></i> Error on form validation!</h4>
        <div wicket:id="errorMessages"></div>
    </div>
</wicket:enclosure>

In page constructor:

FeedbackCollector collector = new FeedbackCollector(this);
ExactErrorLevelFilter errorFilter = new ExactErrorLevelFilter(FeedbackMessage.ERROR);

add(new FeedbackPanel("errorMessages", errorFilter) {
    @Override public boolean isVisible() {
        return !collector.collect(errorFilter).isEmpty();
    }
});

Since Wicket 6 feedback messages are attached to components, so you can use a FeedbackCollector and a filter to get and display desired messages. The advantages of enclosures is:

• you don't need to create new files;
• it works similar to fragments/panels;
• it's only rendered if desired messages exists;

Hope it helps.