PrimeFaces Ajax 导航与浏览器历史/标签

Question

我已经实现了一个单页设计的 Web 应用程序。它基本上加载一个页面，然后使用 AJAX 更新中心内容。代码如下：

    <h:body>

        <pe:layout id="page" fullPage="true">


            <!-- West -->
            <pe:layoutPane id="west" position="west" >
                <f:facet name="header">Main Menu</f:facet>

                <h:form id="form1">

                    <p:panelMenu id="panelMenu">


                        <p:submenu label="Persons">

                            <p:menuitem value="Person List" update=":centerpanel"
                                actionListener="#{layout.setAll('formPersonList.xhtml', 'Person List')}">                           
                            </p:menuitem>

                        </p:submenu>



                    </p:panelMenu>
                </h:form>
            </pe:layoutPane>

            <!-- Center -->
            <pe:layoutPane id="content" position="center">

                <h:panelGroup id="centerpanel" layout="block">
                    <ui:include id="include" src="#{layout.navigation}" />

                </h:panelGroup>

            </pe:layoutPane>
        </pe:layout>
</h:body>

这基本上可以，但我也想启用浏览器导航。例如：http://ticketmonster-jdf.rhcloud.com/ 带有 url 上的主题标签。因此，使用后退/前进按钮，我可以转到等效选项。 知道怎么做吗？

Answer 1

根据您的问题，我创建了一篇博文，解释如何使用 jQuery BBQ 使其工作。

使用 jQuery BBQ，您可以在通过 AJAX 和/或 DHTML 动态修改页面的同时跟踪状态、历史记录并允许添加书签。只需单击链接，使用浏览器的返回和下一步按钮，重新加载页面......

首先我们应该包含jQuery BBQ。

<h:outputScript library="js" name="jquery.ba-bbq.min.js" /> 

现在考虑我们有菜单（包含我们所有的导航规则）

  <p:submenu label="Meat">
     <p:menuitem outcome="/meat/steak.xhtml" value="Steak" />
     <p:menuitem outcome="/meat/burger.xhtml" value="Burger" />
     <p:menuitem outcome="/meat/chicken.xhtml" value="Chicken" /> 
     <p:menuitem outcome="/meat/kebab.xhtml" value="Kebab" /> 
  </p:submenu>

然后是居中的内容

 <pe:layoutPane id="content" position="center">

     <h:panelGroup id="centerpanel" layout="block">
        <ui:include id="include" src="#{mainBean.currentNav}" />
     </h:panelGroup>

  </pe:layoutPane>

include反映了当前点击的Nav。

现在在表单中定义一个remoteCommand

<p:remoteCommand name="updateNav" 
                 actionListener="#{mainBean.updateNav()}"  
                 update=":centerpanel"/>

此 remoteCommand 将根据主题标签更新我们的 currentNav。

创建您的 JS 文件或将以下代码包含到准备好的文档中

$(document).ready(function() {

   $('.ui-menuitem-link').click(function(event) {
       event.preventDefault();
       var currentNav = $(this).attr('href').
                        substr($(this).attr('href').indexOf("/faces") + 6)
       window.location.hash = '#' + currentNav;

   })

   $(window).bind('hashchange', function(e) {

    var url = $.param.fragment();
    updateNav([{name: 'currentNav', value: url}]); //remoteCommand Call

   })

   $(window).trigger('hashchange');

 });

基本上我们首先处理对菜单项的点击，设置窗口的哈希值。

然后我们在jQuery BBQ的帮助下定义窗口的hashchange事件。

ManagedBean

public void updateNav() {
    FacesContext context = FacesContext.getCurrentInstance();
    Map map = context.getExternalContext().getRequestParameterMap();
    currentNav = (String) map.get("currentNav");
}

有关完整代码，请参阅我为该问题创建的新帖子。

Primefaces Hash Navigation Using jQuery BBQ

这个例子也可以在github上找到。

希望对你有帮助。

Answer 2

如果我理解您的问题，您想使用后退/前进按钮进行导航。你可以在你的 backing bean 中使用 LinkedList 来做到这一点：

private LinkedList<String> historyForBackPage= new LinkedList<String>();

public void setLastBackPage(String navigationCase) {
    historyForBackPage.push(navigationCase);
    if (historyForBackPage.size() > yourMaxSize) {
        historyForBackPage.pollLast();
    }
}

public String getLastBackPage() {
    return historyForBackPage.pop();
}

并且在您调用layout.setAll 方法时始终添加最后一页。简单的 commandButton 调用 getLastBackPage() 方法。试用前请先配置navigation case in faces-config.xml。

如果您的案例不能用于导航案例，因为您只使用一个 XHTML，那么您可以为您的 bean 添加后退/前进页面名称并呈现您的页面。可能是简单的 JavaScript 调用 onclick="window.history.go(-1); return false;" 它在您的情况下可能很有用。我不知道。请试一试！

在我的回答中，我只关注后退按钮，但我认为您可以以同样的方式调整前进按钮。

顺便说一句，Breadcrumb 是一个不错的 PrimeFaces 功能。

---

如果你想捕捉浏览器的返回点击动作，你可以使用一个 JavaScript 或 Ajax 脚本。

对于 Ajax 脚本，请查看此答案https://stackoverflow.com/a/10050826/1047582。