Меню JSF не отформатировано - PullRequest
Новая
       26

Меню JSF не отформатировано

1 голос
/ 11 февраля 2011

Содержимое 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>

Содержимое 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>

просмотр источника из 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

1 Ответ

2 голосов
/ 11 февраля 2011

Похоже, что CSS полагается на конкретные идентификаторы HTML-элементов в источнике HTML.Перед разделением содержимого на <f:subview id="menucontents"> следующие элементы 

<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">

были сгенерированы следующим образом 

<div id="hNav_outer">
<ul id="nav1">

Пример таблицы стилей Tomahawk CSS, очевидно, основан на этих идентификаторах 

#hNav_outer {
    ...
}

#nav1 {
    ...
}

Однако, с разделением на <f:subview id="menucontents">, JSF будет добавлять к сгенерированным идентификаторам HTML-элементов идентификатор <f:subview>.Так что вам нужно изменить CSS.

#menucontents\3A hNav_outer {
    ...
}

#menucontents\3A nav1 {
    ...
}

За \3A стоит особая история: двоеточие : является недопустимым символом в идентификаторах CSS.Это было упущением в ранних версиях JSF 1.x.В JSF 2.x это было исправлено путем настройки настраиваемого разделителя идентификатора клиента JSF : (вы можете указать его, например, _, который, в свою очередь, действителен в CSS).

Вы также можете избежать двоеточия следующим образом 

#menucontents\:hNav_outer {
    ...
}

#menucontents\:nav1 {
    ...
}

Но это не работает в IE6 / 7, поэтому рекомендуется использовать \3A (с завершающим пробелом!)вместо двоеточия в селекторах CSS.

...