Как сделать частичный рендеринг страницы (центральное содержание) с JSF2 шаблонов через AJAX (из меню)

Question

я изо всех сил пытался заставить это работать в течение 2 недель, я пытаюсь объединить информацию из BalusC из этих 2 сообщений в ( link1 link2 ) для частичного рендеринга страницыцентральная область контента через меню слева.Таким образом, ссылки слева обновят содержимое центра посредством частичного рендеринга страницы, используя <f:ajax> или, возможно, <a4j:ajax> через richfaces

------------------------------------------------------
| include1 link |                                     |
| include2 link |  center content like include1.xhtml |
| include3 link |                                     |
------------------------------------------------------

my page-layout.xhtml (основной шаблон, который будет использоваться include1.xhtml, include2.xhtml, ..) выглядит следующим образом.

<h:body>
    <div id="top" class="top">
        <ui:insert name="top">page-layout default top content</ui:insert>
    </div>
    <div>
        <div id="left">
            <h:form id="navigationFormId">             
                    <f:ajax render=":contentForm">                                        
                        <h:commandLink value="include1" 
                                       action="#{navigationBean.setPage('include1')}" />
                        <p></p>
                        <h:commandLink value="include2" 
                                       action="#{navigationBean.setPage('include2')}" />                    
                        <p></p>
                        <h:commandLink value="include3" 
                                       action="#{navigationBean.setPage('include3')}" />   
                        <p></p>
                    </f:ajax>                                     
            </h:form>
        </div>
        <div id="content">
           <ui:insert name="content">

                <h:panelGroup id="contentPanelGroup" layout="block"> 
                    <h:form id="contentForm">

                        <h:panelGroup rendered="#{navigationBean.page == 'include1'}">            
                            <ui:include src="include1.xhtml" />         
                        </h:panelGroup> 
                        <h:panelGroup rendered="#{navigationBean.page == 'include2'}">            
                            <ui:include src="include2.xhtml" />         
                        </h:panelGroup>
                        <h:panelGroup rendered="#{navigationBean.page == 'include3'}">             
                            <ui:include src="include3.xhtml" />         
                        </h:panelGroup>

                    </h:form> 
               </h:panelGroup>     

            </ui:insert>
        </div>
    </div>
</h:body>

NavigationBean.java определяется как компонент ViewScoped через CDI с @ Named

открытым классом NavigationBean реализует Serializable {

public NavigationBean() {}

public String getPage() {return page;}
public void setPage(String p) {page = p;}
private String page = "include1";

}

включенные страницы являются файлами, такими как include1.xhtml и include2.xhtml и должны загружаться в центральное содержимое при щелчке левой ссылки меню, вот пример include2.xhtml

<h:body>

    <ui:composition template="page-template.xhtml">
        <ui:define name="content">

             include2

             <h:form> 
                 form components for include2
             </h:form>

        </ui:define>
    </ui:composition>

</h:body>

Я получаю FileNotFoundException, хотя трассировка стека не сообщает, какой, но удаление тегов

<h:panelGroup rendered=".....>
    <ui:include src="..." />
</h:panelGroup>

удаляет исключение.Я думаю, что это правильная реализация для достижения этой цели на основе 2 сообщений BalusC, но просто не могу заставить ее работать.

Answer 1

я смог получить дизайн через JSF2 / Ajax и richfaces4 (другие реализации были бы в порядке, я полагаю), где левый элемент меню навигации, реализованный с помощью шаблонов, способен визуализировать центральное содержимое шаблона с помощью ajax, предотвращаяполное обновление страницы и эффект мерцания.

мой код navigationmenu.xhtml выглядит следующим образом

<ui:composition>
<h:form id="navigationFormId">
        <rich:collapsiblePanel id="carrierCollapsibleId" header="Links that update center content" switchType="client">
            <h:commandLink  id="linkId1" action="/page1" value="Update Center Content with page1">
                <a4j:ajax execute="@form" render=":centerContentDiv,:centerForm" />                    
            </h:commandLink>
            <br />
            <h:commandLink  id="linkId2" action="/page2" value="Update Center Content with page2">
                <a4j:ajax execute="@form" render=":centerContentDiv,:centerForm" />                    
            </h:commandLink>
</rich:collapsiblePanel>
...
</h:form>

Я считаю, что атрибут render=":centerContentDiv,:centerForm" для тегов a4j:ajax можно изменить только на render=":centerForm", но я этого не проверял.Я знаю, что оба работают вместе, однако.Кроме того, я попробовал ajax-теги JSF2 с пробелами между идентификаторами и получил ошибки, поэтому я перешел на a4j richfaces 4.x и затем мог использовать запятые, если пробел не использовался.

теперь, чтобы это работало, каждый файл pageX.xhtml, например page1.xhtml, должен иметь <h:form id="centerForm">, вот пример page1.xhtml

<ui:composition template="/templates/uiTemplate.xhtml">
        <ui:define name="center_content">                                
            <h:form id="centerForm">
               <!-- put your components in here -->    

            </h:form>
        </ui:define>
    </ui:composition>

одно ограничение - каждое представление, использующее шаблон, должно определять <h:form id=centerForm" ...>, иначе JSF2 будет жаловаться, что не может найти цель рендеринга.

В моем файле uiTemplate.xhtml есть код для верхнего и нижнего колонтитула, но соответствующая часть, в которой определено содержимое навигации и центра, выглядит следующим образом

<div class="header_content">
        <div id="left">
            <ui:include src="navigationMenu.xhtml" />
        </div>
        <div id="center_content">
                                 <!-- think this panelGroup wrapper can be -->
                                 <!-- removed. need to test that though -->
            <h:panelGroup id="centerContentDiv" layout="block">
                <ui:insert name="center_content" />
            </h:panelGroup>
        </div>
    </div>

Answer 2

Ошибка, которую вы получаете, предполагает, что страница include ... xhtml не может быть найдена. Где находятся файлы? Они должны быть в том же каталоге, что и файл page-layout.xhtml? Чтобы упростить все, я просто проверил, работает ли include, yuo может заменить это:

<h:form id="contentForm">
        <h:panelGroup rendered="#{navigationBean.page == 'include1'}">            
                <ui:include src="include1.xhtml" />         
        </h:panelGroup> 
        <h:panelGroup rendered="#{navigationBean.page == 'include2'}">            
                <ui:include src="include2.xhtml" />         
        </h:panelGroup>
        <h:panelGroup rendered="#{navigationBean.page == 'include3'}">             
                <ui:include src="include3.xhtml" />         
        </h:panelGroup>
</h:form> 

с:

<h:form id="contentForm">
        <ui:include src="include1.xhtml" />         
</h:form>