使用 JSF2.0 和 Primefaces 3.4 进行导航

Posted

技术标签:

【中文标题】使用 JSF2.0 和 Primefaces 3.4 进行导航【英文标题】:Navigation with JSF2.0 and Primefaces 3.4 【发布时间】:2012-12-31 01:29:00 【问题描述】:

我是 JSF 和 Primefaces 的新手,刚刚开始研究登录和基本导航,我已经遇到了问题。我在 SO 上遇到了大约 10 个类似的问题,但没有一个解决方案对我有用,所以我想我会发布我的具体问题,以便真正了解的人可以为我指明正确的方向。

    登录:似乎和注销一样可以正常工作,但我很担心,因为浏览器中的 url 仍然显示登录后我在登录屏幕,并且我直接使用了 Oracle EE6 中的登录示例文档。登录方式如下。

    public String login()
    FacesContext context = FacesContext.getCurrentInstance();
    HttpServletRequest request = (HttpServletRequest)context.getExternalContext().getRequest();
    try
        logger.log(Level.FINE, "User credentials: name: 0, password: 1", new Object[] this.username, this.password);
        request.login(this.username, encrypt(this.password));
        logger.log(Level.FINE, "User: 0 logged in", this.username);
    catch(ServletException e)
        logger.log(Level.SEVERE, "User: 0 login failed, password: 1", new Object[]this.username, encrypt(this.password));
        context.addMessage(null, new FacesMessage("Login Failed!"));
        return "error";
    
    return "/faces/system/index";
    

    登录后,我被带到正确目录中的正确页面,并且所有内容都正确显示,但是当您将鼠标悬停在链接上时,浏览器底部的状态栏会为所有三个链接显示相同的 url。下面提供的页面代码。

        <h:body>
        <p:layout fullPage="true">
            <f:facet name="last">
                <h:outputStylesheet library="css" name="discovery.css"></h:outputStylesheet>
            </f:facet>
            <p:layoutUnit styleClass="headerDiv" position="north" size="100">
                <h:graphicImage library="images" name="header.jpg"></h:graphicImage>
            </p:layoutUnit>
            <p:layoutUnit styleClass="navDiv" position="west" size="200" id="navPanel">
                <h:form>
                    <h:outputText value="Navigation Menu"></h:outputText>
                    <br/>
                    <p:commandLink value="First Time Users" update=":main">
                        <f:setPropertyActionListener target="#navigationBean.pageToDisplay" value="tutorial.xhtml"></f:setPropertyActionListener>
                    </p:commandLink>
                    <br/>
                    <p:commandLink value="Help" update=":main">
                        <f:setPropertyActionListener target="#navigationBean.pageToDisplay" value="help.xhtml"></f:setPropertyActionListener>
                    </p:commandLink>
                    <br/>
                    <h:commandLink action="#loginBean.logout()" value="Log Out"></h:commandLink>
                </h:form>
            </p:layoutUnit>
            <p:layoutUnit position="center" id="main">
                <ui:include src="#navigationBean.pageToDisplay"></ui:include>
            </p:layoutUnit>
        </p:layout>
    </h:body>
    

    NavigationBean

    @Named(value = "navigationBean") @RequestScoped 公共类 NavigationBean 实现可序列化

    公共 NavigationBean()

    公共字符串 getPageToDisplay() 返回页面显示;

    public void setPageToDisplay(String pageToDisplay) this.pageToDisplay = pageToDisplay;

    private String pageToDisplay = "welcome.xhtml";

登录后页面加载时,显示导航bean中设置的默认页面,但单击注销链接以外的任何链接会导致默认页面从中心布局单元中消失并显示空白页面/单击注销链接上的注销确实像预期的那样注销。任何帮助将不胜感激。

【问题讨论】:

【参考方案1】:

1.登录:似乎和注销一样可以正常工作,但我很担心,因为浏览器中的 url 仍然显示登录后我在登录屏幕。

发送重定向(这指示浏览器在给定的 URL 上发送新的 GET 请求,该请求会反映在浏览器的地址栏中)。

return "/faces/system/index?faces-redirect=true";

2.登录后,我被带到正确目录中的正确页面,并且所有内容都正确显示,但是当您将鼠标悬停在链接上时,浏览器底部的状态栏会为所有三个链接显示相同的 url。

&lt;h:form&gt; 确实提交到同一个页面。使用&lt;h:outputLink&gt;&lt;h:link&gt; 而不是&lt;h:commandLink&gt; 进行逐页导航。另见When should I use h:outputLink instead of h:commandLink?


3.登录后页面加载时会显示导航 bean 中设置的默认页面,但单击除注销链接以外的任何链接会导致默认页面从中心布局单元中消失并显示空白页面

这可以通过使用 GET 而不是 ajax 回发来进行页面到页面导航来解决。因此,在解决 #2 时,它本质上就解决了。您可能只想将您的NavigationBean 重新设计为过滤器或阶段侦听器,它也会拦截 GET 请求。您根本不应该通过 POST 导航。它破坏了可收藏性、用户体验和 SEO,就像您现在遇到的那样。

【讨论】:

感谢 BalusC,这确实解决了导航工作的问题。我希望使用 target 属性并为其提供中心布局面板的 id 值,以使页面显示在该面板中,但它会在我的浏览器中的全新选项卡中打开页面,我肯定将有图如何使它不这样做。再次感谢您的帮助。

以上是关于使用 JSF2.0 和 Primefaces 3.4 进行导航的主要内容,如果未能解决你的问题,请参考以下文章

JSF 页面元素无法从具有动作属性的支持 bean 触发方法。(JSF2.0 + primefaces)

关于 JSF 2.0 自定义组件和 Primefaces 的帮助

JSF 2.0 无法从 primefaces 呈现对话框

Primefaces 动态列不适用于延迟加载

Spring Security + JSF 2.0 + Primefaces + Hibernate 配置

使用 JSF 2.0 和 Primefaces 设置项目