如何AJAX的更新动态包括通过导航菜单的内容？ [英] How to ajax-refresh dynamic include content by navigation menu?

问题描述

我刚学JSF 2感谢这个网站我在这么短的时间内学到了很多东西。

I'm just learning JSF 2 thanks to this site I had learned a lot in such a short time.

我的问题是关于如何实现一个共同的布局，我所有的JSF 2页，只有网页的部分内容不刷新整个页面，每当我点击一个链接/菜单从不同的面板。我使用的Facelets接近它我想要做什么，只是每次我点击从面板（左面板如菜单项），整个页面被刷新的链接。我正在寻找一种方法来刷新我的网页只是内容的一部分。下面举例说明，这是我的目标页面布局。

My question is regarding how to implement a common layout to all my JSF 2 pages and have only the content part of the page refresh not the whole page whenever I click a link/menu from a different panel. I am using the Facelets approach it does what I want except that each time I click a link from a panel (e.g. menu items from left panel) the whole page is refreshed. What I am looking for is a way to refresh only the content part of my page. To illustrate this below is my target pagelayout.

  没有张贴我的code，因为我不知道，如果Facelets的可以做到这一点。是否有其他方法更适合我的要求以外Facelets的？

Did not post my code because I'm not sure if Facelets can do this . Are there other approach more suited for my requirement other than Facelets?

推荐答案

一个简单的方法是以下几种观点：

A straightforward approach would be the following view:

<h:panelGroup id="header" layout="block">
    <h1>Header</h1>
</h:panelGroup>
<h:panelGroup id="menu" layout="block">
    <h:form>
        <f:ajax render=":content">
            <ul>
                <li><h:commandLink value="include1" action="#{bean.setPage('include1')}" /></li>            
                <li><h:commandLink value="include2" action="#{bean.setPage('include2')}" /></li>            
                <li><h:commandLink value="include3" action="#{bean.setPage('include3')}" /></li>            
            </ul>
        </f:ajax>
    </h:form>
</h:panelGroup>
<h:panelGroup id="content" layout="block">
    <ui:include src="/WEB-INF/includes/#{bean.page}.xhtml" />
</h:panelGroup>

通过这个bean：

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

     private String page;

     @PostConstruct
     public void init() {
         page = "include1"; //  Default include.
     }

     // +getter+setter.
 }

实际包括模板 include1.xhtml ， include2.xhtml 和 include3。 XHTML 在 / WEB-INF /包括文件夹（文件夹可以随意的选择;他们的文件只是放在 / WEB-INF 为<一个href="http://stackoverflow.com/questions/9031811/which-xhtml-files-do-i-need-to-put-in-web-inf-and-which-not/">$p$pvent直接访问通过猜测URL在浏览器的地址栏中）。

The actual include templates are include1.xhtml, include2.xhtml and include3.xhtml in /WEB-INF/includes folder (folder is free to your choice; they files are just placed in /WEB-INF in order to prevent direct access by guessing the URL in browser's address bar).

不过，这一切都失败Mojarra当＆LT;用户界面：包括＆GT; 页又包含＆LT; H：形式GT; 。任何回发将失败，因为它是完全缺失的视图状态。你可以解决这个在这个答案 JSF的commandButton适用于第二次点击，或者如果你已经在使用JSF工具库 OmniFaces ，使用它的 FixViewState脚本。

However, this all fails in Mojarra when the <ui:include> page in turn contains a <h:form>. Any postback will fail because it is totally missing the view state. You can solve this with a script found in this answer JSF commandButton works on second click, or if you're already using JSF utility library OmniFaces, use its FixViewState script.

此外，请确保您使用的是微创Mojarra 2.1.18旧版本将在保持视图失败范围的bean活着，导致回发时包括正在使用的错误。如果不能升级，那么你需要回落到有条件渲染视图，而不是有条件地建立视图以下（比较笨拙）的方法：

Also, make sure that you're using minimally Mojarra 2.1.18 as older versions will fail in keeping the view scoped bean alive, causing the wrong include being used during postback. If you can't upgrade, then you'd need to fall back to the following (relatively clumsy) approach of conditionally rendering the view instead of conditionally building the view:

...
<h:panelGroup id="content" layout="block">
    <ui:fragment rendered="#{bean.page eq 'include1'}">
        <ui:include src="include1.xhtml" />
    </ui:fragment>
    <ui:fragment rendered="#{bean.page eq 'include2'}">
        <ui:include src="include2.xhtml" />
    </ui:fragment>
    <ui:fragment rendered="#{bean.page eq 'include3'}">
        <ui:include src="include3.xhtml" />
    </ui:fragment>
</h:panelGroup>

的缺点是，该视图将变得相当大，而且，所有的相关联的受管Bean可能不必要地初始化即使当他们不会被用作每渲染条件

The disadvantage is that the view would become relatively large and that all associated managed beans may be unnecessarily initialized even though when they would not be used as per the rendered condition.

至于元件的定位，这是应用正确的CSS只是一个问题。这是超越JSF的范围:)至少，＆LT; H：panelGroup中布局=块＆GT; 呈现一个＆LT; D​​IV＆GT; ，所以这应该是足够了。

As to positioning of the elements, that's just a matter of applying the right CSS. That's beyond the scope of JSF :) At least, <h:panelGroup layout="block"> renders a <div>, so that should be good enough.

最后但并非最不重要的，这种做法是不是搜索引擎友好。所有的页面都不会被终端用户所searchbots可转位也可收藏。我建议用模板的方法去，而不是在这个答案的第二部分介绍：<一href="http://stackoverflow.com/questions/4792862/how-to-include-another-xhtml-in-xhtml-using-jsf-2-0-facelets">How使用JSF 2.0 Facelets的？又见包括<在XHTML另一个XHTML一个href="http://stackoverflow.com/questions/15521451/how-to-navigate-in-jsf-how-to-make-url-reflect-current-page-and-not-$p$pvious-o">How在JSF导航？如何使URL反映当前页面（而不是previous一个）。

Last but not least, this approach is not SEO friendly. All the pages are not indexable by searchbots nor bookmarkable by endusers. I'd suggest to go with templating approach instead as outlined in 2nd part of this answer: How to include another XHTML in XHTML using JSF 2.0 Facelets? See also How to navigate in JSF? How to make URL reflect current page (and not previous one).

这篇关于如何AJAX的更新动态包括通过导航菜单的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！