使用带有 PrimeFaces 的 JSF 单击菜单后 CSS 丢失

Question

当我单击 p:menuitem 并更新 layoutunit 的内容时，我失去了 layoutunit CSS 样式。但是，如果我刷新，样式会重新出现。这是为什么呢？

<p:layout id="plantillaPrincipal" fullPage="true" >
            <p:layoutUnit id="cabe" position="north">


                <h:form id="bmenu">

                    <p:menubar>

                        <p:menuitem id="inicio" value="INICIO" actionListener="#{controlMenu.mostrarOpcion()}" update=":container">
                            <f:setPropertyActionListener value="inicio" target="#{controlMenu.opcion}"/>
                        </p:menuitem>
                        <p:menuitem id="tarifas" value="TARIFAS" actionListener="#{controlMenu.mostrarOpcion()}" update=":container">
                            <f:setPropertyActionListener value="tarifas" target="#{controlMenu.opcion}"/>
                        </p:menuitem>
                        <p:menuitem id="tasas" value="TASAS" actionListener="#{controlMenu.mostrarOpcion()}" update=":container">
                            <f:setPropertyActionListener value="tasas" target="#{controlMenu.opcion}"/>
                        </p:menuitem>
                        <p:menuitem id="dudas" value="DUDAS" actionListener="#{controlMenu.mostrarOpcion()}" update=":container">
                            <f:setPropertyActionListener value="dudas" target="#{controlMenu.opcion}"/>
                        </p:menuitem>
                        <p:menuitem id="consultas" value="CONSULTAS" actionListener="#{controlMenu.mostrarOpcion()}" update=":container">
                            <f:setPropertyActionListener value="consultas" target="#{controlMenu.opcion}"/>
                        </p:menuitem>
                    </p:menubar>
                </h:form>
            </p:layoutUnit> 

            <p:layoutUnit id="container" position="center">
                <h:form id="fcont">
                    <ui:insert name="panelInicio">...</ui:insert>
                </h:form>
            </p:layoutUnit>

---

这是要更新的 layoutunit 的内容

<ui:define name="panelInicio">
    <h:form id="inicio" rendered="#{controlMenu.opcion=='inicio'}">  
        <p:panel id="pinicio">hola desde inicio</p:panel>
    </h:form>
    <h:form id="tarifas" rendered="#{controlMenu.opcion=='tarifas'}">           
        <p:panel id="ptarifas">hola desde tarifas</p:panel>
    </h:form>
    <h:form id="tasas" rendered="#{controlMenu.opcion=='tasas'}">            
        <p:panel id="ptasas">hola desde tasas</p:panel>
    </h:form>
    <h:form id="dudas" rendered="#{controlMenu.opcion=='dudas'}">
        <p:panel id="pdudas">hola desde dudas</p:panel>
    </h:form>
    <h:form id="consultas" rendered="#{controlMenu.opcion=='consultas'}">
        <p:panel id="pconsultas">hola desde consultas</p:panel>
    </h:form>
</ui:define>

---

这是托管 bean

@ManagedBean
@ApplicationScoped
public class controlMenu {
public String opcion="";

public String getOpcion() {
    return opcion;
}

public void setOpcion(String opcion) {
    this.opcion = opcion;
}

public controlMenu(){       

}

public void mostrarOpcion(){
    System.out.print(opcion);

}

Answer 1

你不能更新LayoutUnits，他们没有渲染器。在单元内添加一个类似OutputPanel 的占位符并更新它。