Tomahawk jscookMenu tag

This tag is used to create menu component in the page. To display the items navigationMenuItem or navigationMenuItems tag are used. In the following example, we have used theme that looks just as in Internet Explorer.

Tomahawk jscookMenu tag

Code Description :

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<html>
<head>
<title>t:jscookMenu example</title>
</head>
<body>
<f:view>
<h:form> 
<t:jscookMenu layout="hbr" theme="ThemeIE" > 
<t:navigationMenuItem id="nmi1"
itemLabel="Menu1">
<t:navigationMenuItem id="nmi1_1"
itemLabel="Menu11" action="welcome" />
<t:navigationMenuItem id="nmi1_2"
itemLabel="menu12" action="welcome" />
<t:navigationMenuItem id="nmi1_3"
itemLabel="menu13" action="welcome" />
<t:navigationMenuItem id="nmi1_4"
itemLabel="menu14" split="true">
<t:navigationMenuItem id="nmi14_1"
itemLabel="menu141" action="welcome" />
<t:navigationMenuItem id="nmi14_2"
itemLabel="menu142" action="welcome"/>
<t:navigationMenuItem id="nmi14_3"
itemLabel="menu143" action="welcome" />
<t:navigationMenuItem id="nmi14_4"
itemLabel="menu144" action="welcome"/>

</t:navigationMenuItem>
</t:navigationMenuItem>
</t:jscookMenu> 
</h:form>
</f:view>
</body>
</html>

Rendered Output :

Html Source Code :

<html>
<head>
<script type="text/javascript" src="/tomahawk_tags/faces/
myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.
MyFacesResourceLoader/11862282/navmenu.jscookmenu.HtmlJSCookMenuRenderer
/JSCookMenu.js"><!--

//--></script>
<script type="text/javascript" src="/tomahawk_tags/faces/
myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.
MyFacesResourceLoader/11862282/navmenu.jscookmenu.HtmlJSCookMenuRenderer
/MyFacesHack.js"><!--

//--></script>
<script type="text/javascript"><!--
var myThemeIEBase='/tomahawk_tags/faces/myFacesExtensionResource/
org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/11862282
/navmenu.jscookmenu.HtmlJSCookMenuRenderer/ThemeIE/';
//--></script>
<script type="text/javascript" src="/tomahawk_tags/faces/
myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.
MyFacesResourceLoader/11862282/navmenu.jscookmenu.HtmlJSCookMenuRenderer/
ThemeIE/theme.js"><!--

//--></script>
<link rel="stylesheet" href="/tomahawk_tags/faces/myFacesExtensionResource/
org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/11862282/
navmenu.jscookmenu.HtmlJSCookMenuRenderer/ThemeIE/theme.css" 
type="text/css" />
<title>t:jscookMenu example</title>
</head>
<body>
<form id="_idJsp0" name="_idJsp0" method="post" action="/tomahawk_tags/
pages/jscookMenu.jsf" enctype="application/x-www-form-urlencoded"> 
<script type="text/javascript"><!--
var idJsp0__idJsp1_menu =
[[null, 'Menu1', null, '_idJsp0', null,[null, 'Menu11', 'idJsp0__
idJsp1_menu:A]welcome', '_idJsp0', null],
[null, 'menu12', 'idJsp0__idJsp1_menu:A]welcome', '_idJsp0', null],
[null, 'menu13', 'idJsp0__idJsp1_menu:A]welcome', '_idJsp0', null],
_cmSplit,[null, 'menu14', null, '_idJsp0', null,[null, 'menu141', 
'idJsp0__idJsp1_menu:A]welcome', '_idJsp0', null],
[null, 'menu142', 'idJsp0__idJsp1_menu:A]welcome', '_idJsp0', null],
[null, 'menu143', 'idJsp0__idJsp1_menu:A]welcome', '_idJsp0', null],
[null, 'menu144', 'idJsp0__idJsp1_menu:A]welcome', '_idJsp0', null]]]];
//--></script><div id="idJsp0__idJsp1_menu"></div>
<script type="text/javascript"><!--
if(window.cmDraw!=undefined) { cmDraw ('idJsp0__idJsp1_menu', 
idJsp0__idJsp1_menu, 'hbr', cmThemeIE, 'ThemeIE');}
//--></script> 
<input type="hidden" name="_idJsp0_SUBMIT" value="1" />
<input type="hidden" name="jscook_action" />
<script type="text/javascript"><!--

function clear__5FidJsp0()
{
clearFormHiddenParams__idJsp0('_idJsp0');
}

function clearFormHiddenParams__idJsp0(currFormName)
{
var f = document.forms['_idJsp0'];
f.elements['jscook_action'].value='';
f.target='';
}

clearFormHiddenParams__idJsp0();
//--></script><input type="hidden" name="javax.faces.ViewState" 
id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmp
lY3Q7kM5YnxBzKWwCAAB4cAAAAANzcgBHb3JnLmFwYWNoZS5teWZhY2VzLmFwcGxp
Y2F0aW9uLlRyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb25lbnRGW
RfYnEr2zwIABFsACV9jaGlsZHJlbnQASltMb3JnL2FwYWNoZS9teWZhY2VzL2" />
</form>
<!-- MYFACES JAVASCRIPT -->
</body>
</html>

This tag contains attributes given below :

id : This is the value which is used to uniquely identify the component within the closest container like form or subview. The main thing to remember is that its value must be a static value.
binding : This attribute is used to specify the property of the backing bean with which this component instance is to be bound.
rendered : Its default value is true. If this attribute is set to true then this component is presented in the page to the user. If false, then this component is not rendered.
immediate : This attribute is a boolean attribute that is used to identify the phase during which the value change event should be fired. In normal processing of the event, if immediate attribute is not set to true, the value change event is fired during the invoke application phase but if immediate attribute is set to true then the event is fired at the end of apply request value phase.
enabledOnUserRole : If the current user has one of the roles listed in the enabledOnUserRole attribute then enabling or disabling of the component is decided on the base of "disabled" attribute. If disabled attribute is set to true then component is disabled otherwise enabled. If the user is not in the above list then the component is rendered disabled.
visibleOnUserRole : If the current user has one of the roles listed in the visibleOnUserRole attribute then processing of the component is decided on the base of "rendered" attribute. If the rendered attribute is set to true then component is not rendered otherwise displayed on the page. On the other hand if the current user is not in the above list then the component is not processed.
javascriptLocation :This attribute specifies an alternate location to find javascript resources.
imageLocation : This attribute specifies an alternate location to find image resources.
styleLocation : This attribute specifies an alternate location to find stylesheet resources.
layout : This attribute is used to specify the layout applied to this component.
theme : This attribute is used to specify the theme applied to this component.

Ads