JSF Menus not getting formatted stlyed
Contents of menucontents.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:subview id="menucontents">
<f:loadBundle basename="com.cpc.resources.menu" var="menu"/>
<t:div id="hNav_outer">
<t:panelNavigation2 id="nav1" layout="list" itemClass="off" activeItemClass="on" openItemClass="on"
renderAll="true">
<t:commandNavigation2 value="#{menu['menu_Home']}" style="padding-left: 0px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_Home']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
<t:commandNavigation2 value="#{menu['menu_admin']}" style="padding-left: 150px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_change_password']}"/>
</t:commandNavigation2>
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_forgot_password']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
</t:panelNavigation2>
</t:div>
</f:subview>
Contents of menu.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/css/basic.css" />
</head>
<body>
<f:view>
<jsp:include page="menucontents.jsp" />
</f:view>
</body>
</html>
view source from broswer
<html>
<head>
<script type="text/javascript" src="/cpcnew/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/12973772/navmenu.htmlnavmenu.HtmlPanelNavigationMenu/HMenuIEHover.js"><!--
//--></script>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="/cpcnew/pages/css/basic.css" />
</head>
<body>
<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">
<li class="off"><script type="text/javascript"><!--
function oamSetHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]=='undefined')
{
var newInput = document.createElement('input');
newInput.setAttribute('type','hidden');
newInput.setAttribute('id',name);
newInput.setAttribute('name',name);
newInput.setAttribute('value',value);
form.appendChild(newInput);
}
else
{
form.elements[name].value=value;
}
}
function oamClearHiddenInput(formn开发者_开发百科ame, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]!='undefined')
{
form.elements[name].value=null;
}
}
function oamSubmitForm(formName, linkId, target, params)
{
var clearFn = 'clearFormHiddenParams_'+formName.replace(/-/g, '\$:').replace(/:/g,'_');
if(typeof eval('window.'+clearFn)!='undefined')
{
eval('window.'+clearFn+'(formName)');
}
if(typeof window.getScrolling!='undefined')
{
oamSetHiddenInput(formName,'autoScroll',getScrolling());
}
var oldTarget = '';
if((typeof target!='undefined') && target != null)
{
oldTarget=document.forms[formName].target;
document.forms[formName].target=target;
}
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamSetHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamSetHiddenInput(formName,formName +':'+'_idcl',linkId);
if(document.forms[formName].onsubmit)
{
var result=document.forms[formName].onsubmit();
if((typeof result=='undefined')||result)
{
document.forms[formName].submit();
}
}
else
{
document.forms[formName].submit();
}
if(oldTarget==null) oldTarget='';
document.forms[formName].target=oldTarget;
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamClearHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamClearHiddenInput(formName,formName +':'+'_idcl',linkId);return false;
}
//--></script><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp0');" id="menucontents:nav1:_idJsp0" class="off">Home</a><ul style="padding-left: 0px;">
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp1');" id="menucontents:nav1:_idJsp1" class="off">› Home</a></li></ul></li>
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp4');" id="menucontents:nav1:_idJsp4" class="off">Administrator</a><ul style="padding-left: 150px;">
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp5');" id="menucontents:nav1:_idJsp5" class="off">› Change Password</a></li>
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp8');" id="menucontents:nav1:_idJsp8" class="off">› Forgot Password</a></li></ul></li>
</ul></div>
<script type="text/javascript"><!--
function getScrolling()
{
var x = 0; var y = 0;if (self.pageXOffset || self.pageYOffset)
{
x = self.pageXOffset;
y = self.pageYOffset;
}
else if ((document.documentElement && document.documentElement.scrollLeft)||(document.documentElement && document.documentElement.scrollTop))
{
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
else if (document.body)
{
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
return x + "," + y;
}
//--></script>
</body>
</html>
It look much like that the CSS is relying on specific HTML element ID's in the HTML source. Before splitting the content to a <f:subview id="menucontents">, the following elements
<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">
were generated as follows
<div id="hNav_outer">
<ul id="nav1">
The Tomahawk CSS example stylesheet is apparently relying on those IDs
#hNav_outer {
...
}
#nav1 {
...
}
However, with the split to a <f:subview id="menucontents">, JSF will prepend the generated HTML element ID's with the ID of the <f:subview>. So you need to alter the CSS as well.
#menucontents\3A hNav_outer {
...
}
#menucontents\3A nav1 {
...
}
There's a special story behind \3A: the colon : is an illegal character in CSS identifiers. This was an oversight in the early JSF 1.x versions. In JSF 2.x this was fixed by making the JSF client ID separator : configureable (you could specify it to be for example _ which is in turn valid in CSS).
You could escape the colon as follows as well
#menucontents\:hNav_outer {
...
}
#menucontents\:nav1 {
...
}
But that doesn't work in IE6/7, hence the recommendation to use \3A (with the trailing space!) instead of the colon in CSS selectors.
加载中,请稍侯......
精彩评论