使用p：selectOneMenu导航

时间：2013-02-21 17:22:29

标签： jsf jsf-2 primefaces navigation selectonemenu

我正在使用选择一个菜单导航到我网站的不同部分：

<p:selectOneMenu value="#{navigator.outcome}">                      
    <f:selectItem itemLabel="Select page..." />
    <f:selectItem itemValue="page1" itemLabel="Page 1" />
    <f:selectItem itemValue="page2" itemLabel="Page 2" />
    <f:selectItem itemValue="page3" itemLabel="Page 3" />
    <p:ajax event="change" listener="#{navigator.navigate}" />
</p:selectOneMenu>

是否有更多的SEO友好的方式这样做？我担心JavaScript链接不会被跟踪。

3 个答案:

答案 0 :(得分：7)

使用<p:column>的自定义内容，其中<h:link>。

豆：

private List<Page> pages;

@PostConstruct
public void init() {
    pages = new ArrayList<Page>();
    pages.add(new Page("Page 1", "/page1.xhtml"));
    pages.add(new Page("Page 2", "/page2.xhtml"));
    pages.add(new Page("Page 3", "/page3.xhtml"));
}

查看：

<p:selectOneMenu var="page">
    <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.title}" />
    <p:column>
        <h:link value="#{page.title}" outcome="#{page.viewId}" />
    </p:column>
</p:selectOneMenu>

请注意，这不适用于List<SelectItem>或单个<f:selectItem>条目。您确实需要在上面的示例中提供List<Entity>（其中Entity为Page。

这会生成<table>，其中包含值得信赖且可抓取（且可点击！）<a>元素。

另见：

答案 1 :(得分：2)

只需创建功能导航为：

<p:selectOneMenu value="#{navigator.outcome}">                      
    <f:selectItem itemLabel="Select page..." />
    <f:selectItem itemValue="page1" itemLabel="Page 1" />
    <f:selectItem itemValue="page2" itemLabel="Page 2" />
    <f:selectItem itemValue="page3" itemLabel="Page 3" />
    <p:ajax event="change" listener="#{navigator.navigate}" />
</p:selectOneMenu>

public void navigate() {
    FacesContext context = FacesContext.getCurrentInstance();
    NavigationHandler navigationHandler = context.getApplication()
            .getNavigationHandler();
    navigationHandler.handleNavigation(context, null, outcome
            + "?faces-redirect=true");
}

答案 2 :(得分：1)

有很多方法可以满足你的需求。首先，我将描述您的方法的替代方案，然后将发表一些关于SEO的评论。

使用正常表单提交更改事件

首先，当用户在更改事件中隐式提交表单时，您可以通过普通表单提交来处理导航：

<h:form>
    <h:selectOneMenu value="#{bean.currentPage}" converter="pageConverter" onchange="submit()">
        <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.name}" />
    </h:selectOneMenu>
    <h:commandButton value="submit" action="#{bean.handleNavigation}" style="display:none"/>
</h:form>

与

@FacesConverter("pageConverter")

和托管bean（@ManagedBean Bean）与

private List<Page> pages;
private Page selectedPage;

public String handleNavigation(){
    //do some job before navigation
    return (selectedPage == null) ? null : selectedPage.getUrl();
}

和模型类

class Page {
    private String name;//title in links
    private String url;//JSF view-id
}

在有意义的客户端按钮上单击导航

您可以使用您的保管箱来保留用户选择的选择，并有一个按钮来执行导航：

<h:form>
    <h:selectOneMenu value="#{bean.currentPage}" converter="pageConverter">
        <f:selectItems value="#{bean.pages}" var="page" itemLabel="#{page.name}" />
    </h:selectOneMenu>
    <h:commandButton value="Navigate" action="#{bean.performNavigation}"}/>
</h:form>

与上述模型相同。

基于<h:link> s

的导航

您是否使用简单的<h:link> s导航作业：

<ul>
    <ui:repeat var="page" value="#{bean.pages}>
        <li>
            <h:link value="#{page.name}" outcome="#{page.url}" />
        </li>
    </ui:repeat>
</ul>

并相应地设置此菜单的样式。

SEO评论

SEO现在越来越重要，因此遵循其规则至关重要。除了使用上面的（基本）Page类命名页面链接之外，使用网址重写解决方案也很重要，这样用户才能在浏览器中看到www.site.com/contact-us而不是www.site.com/contact.xhtml }。

遵循恕我直言的最简单方法是使用Prettyfaces，这是一个很好的解决方案，符合我的口味。它允许您非常轻松地设置重写的URL（并在JSF组件中重写所有内部URL）。

要增强您的网站搜索引擎优化组件，您可以在seoUrl模型类中引入字段Page，然后使用Prettyfaces映射来显示搜索引擎优化的网址（即www.site.com/contact-us）在Web浏览器的地址栏中显示JSF view-id（即www.site.com/contact.xhtml）。

修改 - 有关网址重写需求的争议

谷歌提出的SEO友好规则的一些背景，其中引用了URL结构：

  1. 改善网址结构 - 它还可以让搜索引擎更好地抓取您的文档（Google search engine optimization guide）;
  2. 花时间让用户和搜索引擎尽可能简化您的网址。一些网站管理员试图通过重写其动态网址来实现这一目标 静态的（the same reference，italics mine）;
  3. 在网址中使用字词（以后的所有参考资料也来自Google指南）;
  4. 创建一个简单的目录结构;
  5. 允许删除部分网址。

    6. 现在是SEO专家的一些一般指导原则：

    1. 创建优化网址（Understanding SEO Friendly URL Syntax Practices）;
    2. 静态是方式＆amp;光（11 Best Practices for URLs）;
    3. 尽可能选择描述性网址（URL Rules to Follow To Create SEO and User Friendly URLs）等

      4. 我对此问题的检查：

      1. 如果您使用的是静态类型页面，其网址可能为www.site.com/contact-us.xhtml，但为什么会有6个过多的字符 - www.site.com/contact-us会更好;
      2. 您的facelet页面可以位于深层嵌套的内部结构中，例如/pages/articles/general/how-to-do-jsf.xhtml，但如果必要的话，最好像页面中反映路径一样的www.site.com/articles/how-to-do-jsf和url;
      3. 有些开发人员倾向于使用facelets的短文件名（jsf-bp.xhtml）或无意义的（article23.xhtml），但最好显示www.site.com/article/jsf-best-practices-for-beginners的网址;
      4. 扩展程序的使用，无论是.xhtml，.jsf等，都可能导致用户（可能还有搜索引擎）认为内容是动态（意味着该内容）是从模板中呈现的，就像在www.site.com/product.xhtml?id=12345中一样，但静态内容应该是首选的，因为用户（可能还有搜索引擎）会认为这样的URL描述了一个完全无状态的页面，比如在www.site.com/products/jsf-book-for-advanced-users。此外，它还大大增强了网站的可用性，这也非常重要;
      5. 人们倾向于使用id作为查询参数（?id=12345）和路径参数的名称（/jsf-book-for-advanced-users）;
      6. 网址重写提供了一种清晰的网站导航方式。想象一下路径www.site.com/products/jsf-book-for-advanced-users：这种类型的网址结构将呈现唯一的产品页面，删除/jsf-book-for-advanced-users可能会呈现完整的目录。但是，如果您对产品www.site.com/product.xhtml?name=jsf-book-for-advanced-users和目录有www.site.com/catalogue.xhtml会怎样？用户不清楚逻辑，重写可以构建您的URL;
      7. 最后，大多数处理SEO的网站都不使用文件扩展名（并且很少使用查询参数），以及我们所在的网站stackoverflow.com。

        8. 我并不认为我提到的来源是无可争辩的，或者是非常具有说服力的，或者他们的输入需要应用于每个网络应用程序等等。但我确实认为存在结构良好，用户友好的网站在生产中很长一段时间倾向于遵循这些规则。

相关问题
最新问题