JSF2 - How to create a link containing parameters and anchor? - jsf-2

I want to produce a link looking like this:
http://domain.com/page.jsf?test=12#top
I tried using <h:outputLink> :
<h:outputLink value="/page.jsf#top">
<f:param name="test" value="12" />
My link
</h:outputLink>
But it failed and produced the link http://domain.com/page.jsf#top?test=12, which is wrong.
Is there a way to do this using JSF, or do I have to create this kind of links "manually"?

Since JSF 2.0 there is an <h:link> component that takes a JSF navigation case outcome through its outcome attribute, thus making it a perfect candidate for navigation within a JSF-based application. The component you used, <h:outputLink> is best used for navigation to the external world. You can of course use it to handle JSF navigation but it will feel plain clumsy.
If you decide to switch to <h:link> you can make use of its fragment attribute to attach your anchor (always look at the documentation - linked above):
The identifier of the page fragment which should be brought into focus when the target page is rendered. The value of this attribute is appended to the end of target URL following a hash (#) mark. This notation is part of the standard URL syntax.
All in all, your link should come as:
<h:link value="My link" outcome="/page" fragment="top">
<f:param name="test" value="12" />
</h:link>
It will produce the HTML that you desire.
Further point of reference:
When should I use h:outputLink instead of h:commandLink?

Related

PrettyFaces url routing from form submit

I'm using Pretty Faces to do URL rewriting, in order to be able to reuse some xhtml files. I'd like to have URLs like '/honda/index.xhtml' and '/toyota/index.xhtml' both go to the same /make/index.xhtml file, with the make coming in as a parameter. This routing seems to work OK with a config like this:
<url-mapping id="carMake">
<pattern value="/#{make}/index.xhtml"></pattern>
<view-id value="/make/index.xhtml"/>
</url-mapping>
I also have this mapping for a search results type of page:
<url-mapping id="search">
<pattern value="/#{make}/search/index.xhtml" />
<view-id value="/search/index.xhtml" />
</url-mapping>
Both of these work as expected when I manually put the URL in the browser.
I run into a problem when I try to put a form on the first page, that I want to redirect to the second page. I have this jsf xhtml code for a form:
<h:form>
<h:messages />
<h:inputText id="searchTerm"/>
<h:commandButton value="search" action="/honda/search/index.xhtml?faces-redirect=true"/>
</h:form>
(hard coding /honda here to simplify the example)
When I try to submit this search, it bounces back to the same /honda/index.xhtml, with no messages being displayed on the page.
The logs show this:
09-23 11:39:55 DEBUG PrettyNavigationHandler:57 - Navigation requested: fromAction [/honda/search/index.xhtml?faces-redirect=true], outcome [/honda/search/index.xhtml?faces-redirect=true]
09-23 11:39:55 DEBUG PrettyNavigationHandler:60 - Not a PrettyFaces navigation string - passing control to default nav-handler
I've tried without the faces-redirect param, but got the same result.
Why does /honda/search/index.xhtml work when I put it into the browser directly, but not as the result of an action?
If you want to use separate the URL from the View ID, and you don't want to reference the view-id in the app, then you need to use pretty navigation strings:
<h:commandButton value="search"
action="pretty:honda"><f:param name="make" value="honda" /></h:commandLink>
But this really is just making it more complicated than it needs to be. I would recommend doing what #chkal suggested, except his example is a little wrong. It should have been:
<h:commandButton value="search"
action="/search/index.xhtml?faces-redirect=true&make=honda"/>
This should be covered in the docs :) http://ocpsoft.org/docs/prettyfaces/3.3.3/en-US/html/components.html#components.prettylink Check that section (and the ones below it) and see if that helps!
You cannot use a pretty URL as a value for the action attribute this way. You have to use a standard JSF outcome with make being a query parameter.
Try this:
<h:commandButton value="search"
action="/honda/search/index.xhtml?faces-redirect=true&make=honda"/>

widgetVar name collision in Primefaces in multiple cc:renderFacet

I have composite component, in which I have toolbar and datatable. I also defined facet which contains a form for manipulating data from datatable. Users define that facet for different kinds of data. Now, I have problem because I render that facet multiple times and now I have collisions for widgetVar names for Primefaces components. It is no possible to use insertChildren multiple times so I think this is only possible solution. Also I wouldn't like to force users of component to define 10 facets and write ui:include 10 times. Is there any other way to insert some facelet code in composite component, or is there any way to pass parameter to facet, and use that parameter to dynamically create widgetVar?
OK, after some time I just didn't succeeded to do what I wanted. First I had some composite component like this:
<cc:interface>
<!-- Attributes definition -->
<cc:facet name="form"/>
</cc:interface>
<cc:implementation>
<p:dialog><f:subview id="detailSubview1"><cc:renderFacet name="form"/></f:subview></p:dialog>
<p:dialog><f:subview id="detailSubview2"><cc:renderFacet name="form"/></f:subview></p:dialog>
<!-- There is some more renderFacets but this is enough -->
</cc:implementation>
If I have for example p:selectOneMenu inside the form, without any widgetVar definitions, all will be with same name for widgetVar and this is a problem.
So, I changed this completely and I will transform this composite component to ui:composition and decorate it in my page. In that case widget vars are generated as I want, with different names, because they are in different naming containers.
A widgetVar is in fact used in JavaScript to identify the component. Therefor a widgetVar must be unique in a page. You'll have to declare it yourself.
If you want to create a custom component, as I think might suit you better than ui:define/ui:include, you might want to do something like this:
Say we want to create a component that renders a p:commandButton and a h:outputText with the same value (for whatever reason). You create a XHTML page in directory [deployed-root]/resources/example, named customComponent.xhtm:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsf/composite">
<c:interface>
<c:attribute name="text" required="true" />
</c:interface>
<c:implementation>
<h:outputText value="#{cc.attrs.text}" />
<p:commandButton value="#{cc.attrs.text}" />
</c:implementation>
</html>
Then to use this in another page you'll have to define the namespace xmlns:e="http://java.sun.com/jsf/composite/example", and then you can refer to the custom component like this: <e:customComponent text="some text here"/>.
It should also be noted that it is bad practice to declare forms in custom components. This affects flexibility of use drastically since forms cannot be nested.
PrimeFaces can generate wigetVars so you don't have to.
From the 3.4 User's Guide:
<p:dialog id="dlg">
<!-- contents -->
</p:dialog>
<p:commandButton type="button" value="Show" onclick="#{p:widgetVar('dlg')}.show();"/>
This is designed to work in naming containers, so it should work just fine in composite components, <ui:repeat/>, <h:dataTable/>, etc.

Get JSF 2 url to change after first, not second click

JSF URLs don't seem to change after the first click, only after the 2nd. E.g. when navigating from home.jsf to auction.jsf, the page being displayed is already auction.jsf but the URL in the browser address bar stays at home.jsf, until I click on the Auction link the second time. Why is this happening? Is there a way to disable it, and get the url to display correctly?
You seem to be navigating by POST instead of by GET. You should not perform page-to-page navigation by POST in first place. Replace <h:commandLink> by <h:link>.
So, do not navigate by
<h:form>
<h:commandLink value="Auction" action="auction" />
</h:form>
but by
<h:link value="Auction" outcome="auction" />
A JSF POST form basically submits to the current URL and any navigation is by default performed by a server-side forward using RequestDispatcher#forward() (if you are well familiar with the basic Servlet API, you know what this means). You could work around with performing a redirect instead
<h:form>
<h:commandLink value="Auction" action="auction?faces-redirect=true" />
</h:form>
but, as said, this is a work around not a solution.
See also:
When should I use h:outputLink instead of h:commandLink?
You need to add faces-redirect=true to your URL. Check out this short tutorial from Mkyong.com.

Is there something better to generate absolute links?

Is a better way to generate absolute links in JSF 2.0 ? Right now I'm using <h:outputLink/> in that ugly way with #{facesContext.externalContext.requestContextPath} like below. I don't want to use JSTL and <c:url />
<h:outputLink value="#{facesContext.externalContext.requestContextPath}/pages/home.jsf">Home</h:outputLink>
You can shorten #{facesContext.externalContext.requestContextPath} to #{request.contextPath}. You can even get rid of it to use HTML <base> tag instead.
In this particular case, better is to use <h:link> instead. It can take a context-relative navigation case path in outcome attribute:
<h:link value="Home" outcome="pages/home" />
JSF will take care about adding the right context path and FacesServlet mapping while generating the <a> element:
Home
See also:
Communication in JSF 2.0 - Implicit navigation
How get the base URL?

Changing Browser URL from backing bean in JSF 2

This is related to Changing Browser URL from backing bean
#balusc
How do I do the same thing in JSF 2? I have a search page with 6 different components (mostly PrimeFaces 3.0) for setting the search parameters. How can I get all the parameters to appear in the URL so that the user can share the results page using the URL?
I looked at PrettyFaces, and that seems to be capable of doing this in a better way, but I would rather make it work with just JSF2 if that is a simpler solution...
Thanks!
You should either manually specify all the parameters via nested f:param tags like this:
<h:link outcome="nextPage">
<f:param name="param1" value="val1" />
<f:param name="param2" value="val2" />
</h:link>
or just specify includeViewParams parameter:
<h:link outcome="nextPage" includeViewParams="true">
The same goes for h:button

Resources