MenuHolder.java

import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.Block;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.RenderSupport;
import org.apache.tapestry5.annotations.AfterRender;
import org.apache.tapestry5.annotations.BeforeRenderBody;
import org.apache.tapestry5.annotations.IncludeJavaScriptLibrary;
import org.apache.tapestry5.annotations.IncludeStylesheet;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.ioc.annotations.Inject;

// Menujs.com
@IncludeStylesheet({"Menu.css"})
@IncludeJavaScriptLibrary({"Menu.js"})
public class MenuHolder {
	private static String MENU_CONTAINER = "menu-container-";
    @Inject
    private ComponentResources resources;
	@Inject
    private RenderSupport renderSupport;
	
    @Parameter(name = "id", defaultPrefix = BindingConstants.LITERAL, required = true)
    private String id;
    
    public String getMenuID() {
    	return MENU_CONTAINER + id;
    }
    
	@AfterRender
	public void AfterRender(MarkupWriter writer) {
		String divName = getMenuID();
        renderSupport.addScript(String.format("Menu.init('%s', {'orientation': Menu.HORIZONTAL, 'hidePause': 0.1});", divName));
	}
	
	@BeforeRenderBody
	public Object RenderMenuItems(MarkupWriter writer) {
		// here search and append to the existing root menu the menu items defined in the child pages	
		ComponentResources parentResources = resources.getContainerResources();
        Block toRender = null;
        while (parentResources != null) {
            Block temp = parentResources.findBlock(id);
            if (temp != null) {
                toRender = temp;
            }
            parentResources = parentResources.getContainerResources();
        }
        return toRender;
	}
}

MenuHolder.tml

<ul> <li/> </ul> structure is required by menu.js. Check to menujs.com.

We create a container div tag with a <ul/> menu items holder. The submenu hierarchy will be placed at the <t:body/> element. It should be nested <li/> <ul/> structure with <a/> for the action for the menu actions

<t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">
	<style type="text/css">
                /*override/change the css if you want*/
		.menu a.selected  { color: #0079c0; background: red;}
	</style>
	<div class="menuBar">
		<ul class="menu" id="${menuID}">
			<t:body/>
		</ul>
	</div>    
</t:container>
  • No labels