【PrimeFaces】元件屬性 update 寫法比較 - 絕對路徑 (冒號：)

tags: JSF JSP

Update 一般寫法

1. 官方文件 update：Component(s) to be updated with ajax.
   • update該屬性的type：String
2. 所以一般寫法都是，透過需要update元件的 id 來進行update
3. 範例：

<h:form>
    <p:growl id="growl" life="2000" />
     
    <p:commandButton value="Ajax Submit" id="ajax" update="growl" actionListener="#{buttonView.buttonAction}" styleClass="ui-priority-primary" />
</h:form>

Update 絕對路徑

1. 為何要用絕對路徑：
   因為有些元件會有 NamingContainer 的特性，會使該元件中的元件，無法看到該元件以外的id
   • The specified identifier must be unique among all the components (including facets) that are descendents of the nearest ancestor UIComponent that is a NamingContainer, or within the scope of the entire component tree if there is no such ancestor that is a NamingContainer.
   • NamingContainer 這個特性，就是該元件中都只能有唯一的id
   • 該元件中的id不會和元件外的id混用，所以該元件中的id可以和元件外的id重複
2. 有 NamingContainer 特性的常用元件：
   • Columns
   • DataList
   • DataTable
   • SubTable
   • Subview
   • TabView
3. 絕對路徑寫法：
   • 用 : 區隔每個id
   • 從最外層元件的id開始寫至最內層元件的id
4. 範例：
   • 用 commandLink 元件的屬性 update 來更新下方 outputPanel 元件要顯示的內容
   • 寫法：update=":form:exampleListPanel"

<h:form id="form">    
    <p:tabView id="exampleList" styleClass="elementMarginBottom">
        <p:tab title="列表">
            <p:dataTable id="exampleListDataTable" var="car" value="#{dtBasicView.cars}">     
                <p:column headerText="Action">
    
                    <!-- 控制Update的元件位置 -->
                    <p:commandLink action="#{exampleListAction.exampleListLinkAction()}" update=":form:exampleListPanel" styleClass="linkColor">
                        <i class="fa fa-file-o fa-2x" title="发票状态" />
                    </p:commandLink>
    
                </p:column>
            </p:dataTable>
        </p:tab>
    </p:tabView>
    
    <!-- 要Update更新的內容 -->
    <p:outputPanel id="exampleListPanel1">
        <p:tabView id="exampleListTabView1">
            <!-- 程式碼省略 -->
        </p:tabView>
    </p:outputPanel>
    <p:outputPanel id="exampleListPanel2">
        <p:tabView id="exampleListTabView2">
            <!-- 程式碼省略 -->
        </p:tabView>
    </p:outputPanel>
</h:form>

Reference 參考資料

1. PrimeFaces 5.3 官方文件：https://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf
2. Naming Container in JSF2/PrimeFaces [duplicate]：
   https://stackoverflow.com/questions/13543510/naming-container-in-jsf2-primefaces