TechQA.

JSF Menus not getting formatted stlyed

1.1k views Asked by At

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>&#8250; </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>&#8250; </f:verbatim>
                    <t:outputText value="#{menu['menu_admin_change_password']}"/>
                </t:commandNavigation2>
                <t:commandNavigation2>
                    <f:verbatim>&#8250; </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(formname, 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">&#8250; 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">&#8250; Change Password</a></li>
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp8');" id="menucontents:nav1:_idJsp8" class="off">&#8250; 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>

enter image description here

css jsf include tomahawk
Original Q&A
1

There are 1 answers

1
BalusC On BEST ANSWER

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.

Related Questions in CSS

Related Questions in JSF

Related Questions in INCLUDE

Related Questions in TOMAHAWK

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions