Question

我正在使用JSF 2.2和PrimeFaces 5.2。如果我在此布局中使用HTML元素，则不会显示我的布局内容，如下图所示。如果我把HTML元素放在布局之外，那么一切都会有效。

左 ：没有<h1>元素/ 正确：<h1>元素

我是否忽视了某些事情或是否有这种行为的原因？我是JSF的新手。

代码

<h:body>

的内容

<h:form style="max-width:1000px; margin-bottom: 20px;">
    <p:tabMenu activeIndex="1">
        <p:menuitem value="Rechnung" icon="ui-icon-home" url="index.xhtml" />
        <p:menuitem value="Bearbeiten" icon="ui-icon-pencil" url="editor.xhtml" />
    </p:tabMenu>
</h:form>

<p:layout style="max-width:1000px;">
    <p:layoutUnit position="center" style="border: none;">
        <p:layout style="border: none;">
            <p:layoutUnit position="west" size="250" style="border: none;">
                <h:form>
                    <p:menu>
                        <p:submenu label="Tabellen">
                            <!-- some <p:menuitem> -->
                        </p:submenu>
                    </p:menu>
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="center" style="border: none;">
                <h1>Testresult</h1> <-- don't work
                <p:outputLabel value="test text"/> <-- works
                <!-- table -->
            </p:layoutUnit>
        </p:layout>
    </p:layoutUnit>
</p:layout>

Answer 1

当我在JSF课程中与Cagatay Civici交谈时，他建议我们不要使用布局（p或pe），而是使用常规div来管理布局。绝对不建议使用嵌套布局。

所以我们的布局页面来自

 <pe:layout fullPage="true" id="layoutFull">


        <pe:layoutPane id="idar758" position="north" closable="false" collapsible="false" size="60"
            collapsed="false" resizable="false">
            <h:form id="postLoginHeader">
                <ui:include src="./loginHeader.xhtml"/>
            </h:form>
        </pe:layoutPane>

        <p:layoutUnit position="center" closable="false" collapsible="false"
            collapsed="false" resizable="false" resizeWhileDragging="false"
            id="centerLayout">
            <div id="idar759" class="slimScrollMyPage1">
                <h:panelGrid id="panelGroup_38" columns="1" width="100%">
                    <p:messages globalOnly="true" autoUpdate="true" id="messages"
                        rendered="true" closable="true">
                        <p:effect id="idar760" type="bounce" event="load" delay="500" />
                    </p:messages>
                    <ui:insert name="body" id="insert_38" />
                </h:panelGrid>
            </div>
        </p:layoutUnit>

        <pe:layoutPane id="idar761" position="west" closable="true" resizable="false"
            resizeWhileDragging="false" size="235">
            <div id="idar762" class="slimScroll">
                <ui:include src="leftMenuAdmin.xhtml" id="include_36" />
            </div>
            <br />
            <p:spacer height="5" />
        </pe:layoutPane>

        <pe:layoutPane id="idar763" position="south" closable="false" size="30">
            <h:panelGroup id="panelGroup_40south">
                <ui:include src="./footer.xhtml" />
            </h:panelGroup>
        </pe:layoutPane>
    </pe:layout>

到

<ui:include src="./adminPostLoginHeader.xhtml" />
    <div class="container" id="div_23">
        <h:panelGrid columns="2" id="panelGrid_34"
            columnClasses="layoutColumn1,layoutColumn2">
            <h:panelGroup id="panelGroup_35">
                <div class="collapsible">
                    <p:commandButton value=" " />
                    <div id="idar762" class="slimScroll">
                        <ui:include src="leftMenuAdmin.xhtml" id="include_36" />
                    </div>
                </div>
            </h:panelGroup>
            <h:panelGroup id="panelGroup_37" width="100%">
                <div id="idar759" class="slimScrollMyPage1 bckgroundDiv"
                    style="background-image: url(#{serverThemeBean.landingImageUrl}) !important;">
                    <h:panelGrid id="panelGroup_38" columns="1" width="100%">
                        <p:messages globalOnly="true" autoUpdate="true" id="messages"
                            rendered="true" closable="true">
                            <p:effect id="idar760" type="bounce" event="load" delay="500" />
                        </p:messages>
                        <ui:insert name="body" id="insert_38" />
                        <p style="padding-bottom: 5px;" id="p_39" />
                    </h:panelGrid>
                </div>
            </h:panelGroup>
        </h:panelGrid>
    </div>
    <h:panelGroup>
        <ui:include src="./adminPostLoginFooter.xhtml" />
    </h:panelGroup>

p：布局内容未显示HTML元素

1 个答案: