open new page (navigate to new site) when selecting a dataTable row

Question

There a several related question on this topic on SO and elsewhere, but I couldn't find a definitive answer on this specific question.

I have a p:dataTable and I want the possibility to click on a row and open a detail page (a new page, not a dialogue or window).

I have solved it this way (which I have from the primefaces website, for some reason it is no longer there: http://web.archive.org/web/20101001223235/http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf):

<p:dataTable var="order" value="#{orderBean.orders}" selection="#{orderBean.selectedOrder}" selectionMode="single" rowKey="#{order.number}">
  <p:ajax event="rowSelect" listener="#{orderBean.orderSelect}"/>
  <p:column ... />
</p:dataTable>

The navigation is then executed in the bean:

public void orderSelect(SelectEvent event) {  
  ConfigurableNavigationHandler nh = (ConfigurableNavigationHandler)FacesContext.getCurrentInstance().getApplication().getNavigationHandler();
  nh.performNavigation("orderDetail?faces-redirect=true");
}

My Question: is there a way of doing this just inside JSF without the help of a backing bean?

I am also asking because they removed the code exmaple from the primefaces site, which might be an indication that this is not the right way of doing something like that.

Answer 1

Wrap the cell(s) of interest in a simple <h:link>.

<p:column>
    <h:link outcome="orderDetail">
        ...
    </h:link>
</p:column>

Use if necessary CSS display:block on the link to let it span the entire cell. You can if necessary pass request parameters using a nested <f:param>.

Answer 2

since it is an ajax request, typically the request/response is used to re-render some components in the web page. What you could do is

<p:ajax event="someventofintrest" onsuccess="javascript:myjsmethod();"></p:ajax>

and

<p:remotecommand name="myjsmethod" action="#{mybean.mybeanmethod}" />

and in the backing bean

public String mybeanmethod(){
  return "mynewpage";  // Navigate away to mynewpage.xhtml
}

HTH.

Answer 3

As I didn't find a really perfect solution, this is how I do it now.

I have now a "navigator" class like this

@Component
public class Navigator {
  public void nav(String page) {
    UIHelper.navigateTo(page);
  }
}

And I call this class from my ajax event:

<p:ajax event="rowSelect" listener="#{navigator.nav('orderDetail')}"/>

As I said, not really perfect, but I like the fact that I don't have to write code in my backing bean. (Of course I have to write code for the Navigator, but that I can re-use.)