JSF / PrimeFaces：具有布局的頁面中的問題

Question

我的JSF頁面有問題，它使用PrimeFaces組件。 由於它可能會變得漫長而無聊，我盡量做到盡可能簡短。 考慮這個托管bean：

@Named(value = "testBean")
@RequestScoped
public class TestBean implements Serializable {

    private String test;

    public String update() {
        test = "Updated.";
        return "test";
    }

    // Getters and Setters...
}

這是test.xhtml的主體， test.xhtml了不相關的內容和樣式：

<h:body>
    <p:layout id="layout" fullPage="true">

        <p:layoutUnit position="north">
            <!-- Does not matter -->
        </p:layoutUnit>

        <p:layoutUnit id="input" position="west">
            <p:panel header="">
                <p:tabView>
                    <p:tab title="">
                        <!-- INPUTS and SUBMIT BUTTON -->
                    </p:tab>
                </p:tabView>
            </p:panel>
        </p:layoutUnit>

        <p:layoutUnit id="output" position="center">
            <h:form>
                <p:panel id="display" header="Information">  
                    <h:outputText value="#{testBean.test}" />  
                </p:panel>
                <p:separator />
                    <p:commandButton value="Update !" action="#{testBean.update()}" ajax="false" />
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="south">
            <!-- Does not matter -->
        </p:layoutUnit>

    </p:layout>
</h:body>

一切正常。 我有兩個問題：

1. 我應該將commandButton移動到另一個layoutUnit （輸入），我不能將<h:form>元素放在合理的位置。 我嘗試將它移到<p:layout>旁邊，所以它包含了所有布局單元，但它已經壞了（更新的頁面不再有“Updated。”字符串）。

2. 我想通過ajax使用另一個layoutUnit上的按鈕執行更新。 當我從commandButton刪除ajax="false"屬性並為全局表單元素設置prependId="false"屬性時，輸出文本不會更新。

在此先感謝您的幫助

Answer 1

我應該將commandButton移動到另一個layoutUnit（輸入），我不能將<h:form>元素放在合理的位置。 我嘗試將它移到<p:layout>旁邊，所以它包含了所有布局單元，但它已經壞了（更新的頁面不再有“Updated。”字符串）。

我不確定我是否理解你的具體問題。 做這樣的事情？

<p:layoutUnit id="input" position="west">
    <p:panel header="">
        <p:tabView>
            <p:tab title="">
                <!-- INPUTS and SUBMIT BUTTON -->
            </p:tab>
        </p:tabView>
        <h:form>
            <p:commandButton value="Update !" action="#{testBean.update}" ajax="false" />
        </h:form>
    </p:panel>
</p:layoutUnit>

<p:layoutUnit id="output" position="center">
    <p:panel id="display" header="Information">  
        <h:outputText value="#{testBean.test}" />  
    </p:panel>
    <p:separator />
</p:layoutUnit>

---

我想通過ajax使用另一個layoutUnit上的按鈕執行更新。 當我從commandButton中刪除ajax =“false”屬性並為全局表單元素設置prependId =“false”屬性時，輸出文本不會更新。

update ID必須是相對或絕對客戶端ID。 至於如何計算正確的客戶端ID，請檢查以下答案： 如何查找ajax update / render組件的客戶端ID？ 找不到帶有“bar”引用的表達式“foo”的組件

PrimeFaces布局組件不是NamingContainer ，因此它的ID不會被添加，並且一旦你從中心布局中取出<h:form> ，那么<p:panel id="display">就可以從命令按鈕:display 。 因此，這應該做：

<p:layoutUnit id="input" position="west">
    <p:panel header="">
        <p:tabView>
            <p:tab title="">
                <!-- INPUTS and SUBMIT BUTTON -->
            </p:tab>
        </p:tabView>
        <h:form>
            <p:commandButton value="Update !" action="#{testBean.update}" update=":display" />
        </h:form>
    </p:panel>
</p:layoutUnit>

<p:layoutUnit id="output" position="center">
    <p:panel id="display" header="Information">  
        <h:outputText value="#{testBean.test}" />  
    </p:panel>
    <p:separator />
</p:layoutUnit>