Wicket visiblity and class toggle

Question

I'm learning Wicket and now I'm struggling with how to do a sidebar menu.

<ul class="nav nav-tabs nav-stacked">
    <li><a wicket:id="linkA">A</a></li>
    <li class="active"><a wicket:id="linkB">B</a></li>
    <li><a wicket:id="linkC">C</a></li>
    <li><a wicket:id="linkD">D</a></li>
    <li><a wicket:id="linkE">E</a></li>
</ul>

Some links won't be visible to some users (according to the role of the user) and when I'm on the page where link goes to, I want <li> to have class active (like linkB has in the example). What's the Wicket way of doing this?

score 6 · Accepted Answer · answered May 26 '13 at 10:26

6

To add 'class="active"' you can simply add this to your java code:

if(...condition...){
  link.add(new AttributeAppender("class", "active");
}

To toggle visibility you can simply do this:

if(...condition...){
  item.setVisible(false);
}

where item is a WebMarkupContainer that is connected to one of the html li-tags via a wicket ID (you can also simply call link.setVisible(false), but the list bullet point would still be rendered then).

answered May 26 '13 at 10:26

Tom

3,913
19
28

Thank you for your answer. Is there a way to reference the parent node in markup, so I don't have to assign wicket:ids to all
s?

Jakub Kulhan

May 26 '13 at 11:40

see my comment to the next answer – Tom May 26 '13 at 17:50

mrak · Answer 2 · 2013-05-26T13:32:26.473

2

Wicket is component oriented framework, so the "Wicket-way" is by overwriting components methods. The simplest solution in your case would be to have the li-s as Wicket components.



    // your custom method to load the user
    final IModel<User> user = getUserModel();
    final private Class<? extends WebPage> pageLinkA;

    WebMarkupContainer li = new WebMarkupContainer("linkContainerA") {

        @Override
        protected void onConfigure() {
            super.onConfigure();
            boolean visible = user.getObject().hasRoleXY();
            setVisible(visible);
        }

        @Override
        protected void onComponentTag(ComponentTag t) {
            super.onComponentTag(t);
            if(getPage().getClass() == pageLinkA) {
               t.put("class", "active");
            }

        }
    }

   li.add(new BookmarkablePageLink("linkA", pageLinkA));

To avoid code repetition the most suitable way would be to create custom component (extending Panel or GenericPanel) or at least to extend WebMarkupContainer.

Edit: As Tom pointed out, you can also use AttributeAppender and add it directly in onConfigure() (based on getPage().getClass() == pageLinkA ). In this way overwriting of onComponentTag would not be necessary.

edited May 26 '13 at 13:32

answered May 26 '13 at 10:42

mrak

2,826
21
21

Thank you for your answer, too. The follow-up question is same as for the Tom, is there a way to reference the parent node in markup, so I don't have to assign wicket:ids to all
s?

Jakub Kulhan

May 26 '13 at 11:41

As far as I know (and following the Wicket guidelines), not. This question also is related to: [Modify Attribute of Wicket ComponentTag Parent](http://stackoverflow.com/questions/6459481/modify-attribute-of-wicket-componenttag-parent). You are probably working with bootstrap and this will be common case, so I would definitely recommend to implement a custom component for the link. – mrak May 26 '13 at 13:18

1

Usually, you would not create a list manually, but use a Wicket ListView for the task. With a ListView you do not have to provide Wicket-IDs for each item, since the ListView takes care of it. – Tom May 26 '13 at 17:49

This is not quite right: You would still need to put wicket:id on the li element for the ListView and than add the Link within populateItem(...). – mrak May 26 '13 at 19:33

@Tom Thank you for poiting out ListView. The code looks much better now. – Jakub Kulhan May 26 '13 at 21:48

Wicket visiblity and class toggle

2 Answers2