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 反映了当前点击的内容。

现在在表单

中定义 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;"它可能对您的情况有用。我不知道。请试一试！

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

顺便说一下，Breadcrumb是很好的PrimeFaces功能。

如果要捕获浏览器后退单击操作，可以使用一个JavaScript或Ajax脚本。

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

PrimeFaces使用浏览器历史记录/ Hashtag进行Ajax导航

2 个答案: