Wicket Component – JQuery Accordion Menu
No Comments »
Presenting a very simple wicket component for everybody to use – a JQuery accordion menu.
You can see it live here
Full sources are available here
This is how you add it to the page:
Java
Map<AccordionLink, List<AccordionLink>> menus = new LinkedHashMap<AccordionLink, List<AccordionLink>>();
menus.put(new AccordionLink("Menu1", "http://www.menu1.com"),
Arrays.asList(
new AccordionLink("11", "http://www.menu11.com"),
new AccordionLink("12", "http://www.menu12.com"),
new AccordionLink("13", "http://www.menu13.com")));
menus.put(new AccordionLink("Menu2", "http://www.menu2.com"),
Arrays.asList(
new AccordionLink("21", "http://www.menu21.com"),
new AccordionLink("22", "http://www.menu22.com"),
new AccordionLink("23", "http://www.menu23.com")));
menus.put(new AccordionLink("Menu3", "http://www.menu3.com"),
Arrays.asList(
new AccordionLink("31", "http://www.menu31.com"),
new AccordionLink("32", "http://www.menu32.com"),
new AccordionLink("33", "http://www.menu33.com")));
menus.put(new AccordionLink("Menu4", "http://www.menu2.com"),
Arrays.asList(
new AccordionLink("41", "http://www.menu41.com"),
new AccordionLink("42", "http://www.menu42.com"),
new AccordionLink("43", "http://www.menu43.com")));
menus.put(new AccordionLink("Menu5", "http://www.menu2.com"),
Arrays.asList(
new AccordionLink("51", "http://www.menu51.com"),
new AccordionLink("52", "http://www.menu52.com"),
new AccordionLink("53", "http://www.menu53.com")));
add(new AccordionMenu("menu", menus, true, this));
The important line is add(new AccordionMenu(”menu”, menus, true, this));
HTML
<html xmlns:wicket>
<body>
<div wicket:id="menu"/>
</body>
</html>
Wicket component code:
AccordionMenu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns:wicket>
<head>
</head>
<body>
<wicket:panel>
<!--
Wicket component: JQuery Accordion Menu
Author: Nova Creator Software
Website: www.novacreator.com
Software provided as is, without any guarantees.
Free for any type of usage. We just kindly ask to keep this message.
-->
<div wicket:id="topdiv" class="menu_list">
<p wicket:id="repeatItems" class="menu_head">
<span wicket:id="menuItem"></span>
<div class="menu_body">
<a wicket:id="menuSubItem">
<span wicket:id="menuSubItemName"/>
</a>
</div>
</p>
</div>
</wicket:panel>
</body>
</html>
AccordionMenu.java
package com.novacreator.wicketcomponents.jquery.accordionmenu;
import java.util.List;
import java.util.Map;
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.ResourceReference;
import org.apache.wicket.ajax.AjaxEventBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxFallbackLink;
import org.apache.wicket.behavior.HeaderContributor;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.markup.html.resources.CompressedResourceReference;
import org.apache.wicket.markup.html.resources.JavascriptResourceReference;
import org.apache.wicket.markup.repeater.RepeatingView;
import org.apache.wicket.model.Model;
/*
Wicket component: JQuery Accordion Menu
Author: Nova Creator Software
Website: www.novacreator.com
Software provided as is, without any guarantees.
Free for any type of usage. We just kindly ask to keep this message.
*/
@SuppressWarnings("serial")
public class AccordionMenu extends Panel {
private static final ResourceReference JQUERYJS =
new JavascriptResourceReference(AccordionMenu.class, "../res/jquery.js");
private static final ResourceReference ACCORDIONJS =
new JavascriptResourceReference(AccordionMenu.class, "../res/accordionmenu.js");
private static final ResourceReference CSS =
new CompressedResourceReference(AccordionMenu.class, "../res/accordionmenu.css");
public AccordionMenu(String id, final Map<AccordionLink, List<AccordionLink>> menus, boolean autoExpand, final AccordionMenuListener listener) {
super(id);
add(HeaderContributor.forJavaScript(JQUERYJS));
add(HeaderContributor.forJavaScript(ACCORDIONJS));
add(HeaderContributor.forCss(CSS));
WebMarkupContainer topDiv = new WebMarkupContainer("topdiv");
add(topDiv);
if(autoExpand) {
topDiv.add(new AttributeModifier("id", true, new Model("autoexpand")));
} else {
topDiv.add(new AttributeModifier("id", true, new Model("noautoexpand")));
}
RepeatingView menuItems = new RepeatingView("repeatItems");
topDiv.add(menuItems);
for(final AccordionLink menu : menus.keySet()) {
WebMarkupContainer wmc = new WebMarkupContainer(menuItems.newChildId());
menuItems.add(wmc);
wmc.add(new AjaxEventBehavior("onclick"){
@Override
protected void onEvent(AjaxRequestTarget target) {
if(menu.getLink() != null &amp;amp;amp;amp;&amp;amp;amp;amp; !menu.getLink().isEmpty()) {
listener.onAccordionMenuClick(menu.getLink(), target);
}
}
});
wmc.add(new Label("menuItem", menu.getDisplayName()));
RepeatingView menuSubItems = new RepeatingView("menuSubItem");
wmc.add(menuSubItems);
for(final AccordionLink item : menus.get(menu)) {
AjaxFallbackLink iaf = new AjaxFallbackLink(menuSubItems.newChildId()) {
@Override
public void onClick(AjaxRequestTarget target) {
if(item.getLink() != null &amp;amp;amp;amp;&amp;amp;amp;amp; !item.getLink().isEmpty()) {
listener.onAccordionMenuClick(item.getLink(), target);
}
}
};
iaf.add(new Label("menuSubItemName", item.getDisplayName()));
menuSubItems.add(iaf);
}
}
}
}
AccordionMenuListener.java
package com.novacreator.wicketcomponents.jquery.accordionmenu;
import org.apache.wicket.ajax.AjaxRequestTarget;
/*
Wicket component: JQuery Accordion Menu
Author: Nova Creator Software
Website: www.novacreator.com
Software provided as is, without any guarantees.
Free for any type of usage. We just kindly ask to keep this message.
*/
public interface AccordionMenuListener {
public void onAccordionMenuClick(String link, AjaxRequestTarget target);
}
AccordionLink.java
package com.novacreator.wicketcomponents.jquery.accordionmenu;
import java.io.Serializable;
/*
Wicket component: JQuery Accordion Menu
Author: Nova Creator Software
Website: www.novacreator.com
Software provided as is, without any guarantees.
Free for any type of usage. We just kindly ask to keep this message.
*/
@SuppressWarnings("serial")
public class AccordionLink implements Serializable {
private String displayName;
private String link;
public AccordionLink(String displayName, String link) {
this.displayName = displayName;
this.link = link;
}
public String getDisplayName() {
return displayName;
}
public void setDisplayName(String displayName) {
this.displayName = displayName;
}
public String getLink() {
return link;
}
public void setLink(String link) {
this.link = link;
}
}
