Making pretty bookmarkable RESTful URLs in JSF is hard. Fortunately the Seam framework solves this problem by supporting HTTP parameters, advanced page navigation, and can use the help of UrlRewriteFilter. But making bookmarkable parameter URLs in combination with a POST form can still be a bit tricky. This blog post shows an example how to solve this problem.
Note: The code snippets used are only fragments. I also assume that UrlRewriteFilter is already installed etc. Seam-gen also contains UrlRewriteFilter, but you might have to add it to the deployment and configure web.xml. Use /rewrite-status to see if it’s working.
Example
We have a website that shows products of a given catagory. In our case, we use the catagory ‘audio’. We want bookmarkable URLs, like http://example.com/products.jsf?catagory=audio instead of http://example.com/products.jsf. And we want pretty URLs that hide technology implementation and parameter names, so in the end we want only URLs like http://example.com/products/audio.
Also we want a HTML POST form on the page that allows us to add products to a catagory (’audio’ in this case). After submitting this form, we want the URLs to still be pretty, so also here we only want URLs like /products/audio.
Making bookmarkable URLs for first HTTP requests
A URL is bookmarkable when the URL by itself contains all parameters needed to retrieve the page, like
/products.jsf?catagory=audio.
JSF is unable to do this because it cannot handle URL parameters. JSF depends on a HTTP POST (the postback request) to retrieve the page, so the user first has to click a button, after which JSF will show the page with audio products.
The Seam framework solves this problem by handling URL parameters, so we use Seam. (This is just one reason to use Seam around JSF. There are many more.)
Because we are using Seam around JSF, the URL becomes /products.seam?catagory=audio.
To make these parameters, we add the following to pages.xml:
<page view-id="/products.seam">
<param name="catagory" value="#{productsManager.catagory}" />
</page>
In the code above, productsManager is a backingbean and catagory is a property that will be set to ‘audio’ automatically when the url /products.seam?catagory=audio is requested.
Making pretty URLs for first HTTP requests
After enabling parameters for our URLs, we want them to be pretty. We want /products/audio instead of /products.seam?catagory=audio.
This is done by using UrlRewriteFilter. We add the following code to urlrewrite.xml:
<rule>
<from>/products/(.*)</from>
<to>/products.seam?catagory=$1</to>
</rule>
Bookmarkable URLs after a form submit
By default, with the code used above, when we use the form at /products/audio to add a product the catagory ‘audio’, the form will send us to the URL /products.seam without parameters, which is not bookmarkable! To make it bookmarkable, change the code that we have added to pages.xml to:
<page view-id="/products.seam">
<param name="catagory" value="#{productsManager.catagory}" />
<navigation from-action="#{productsManager.addProduct}">
<redirect view-id="/products.seam"/>
</navigation>
</page>
Where addProduct is an action method bound to the h:commandButton of the form.
When the form is now submitted, the user will be redirected to /products.seam?catagory=audio&cid=1, which is bookmarkable.
Notice that a cid parameter is added by Seam, which Seam uses to track conversations. (To remove it, read further.)
Pretty URLs after a form submit
After submitting the form, we have /products.seam?catagory=audio&cid=1. To make it pretty again (/products/audio), we use outbound urlrewriting. Add the following code to urlrewrite.xml:
<outbound-rule>
<from>^/products.seam\?catagory=(.*)</from>
<to>/products/$1</to>
</outbound-rule>
After a form submit, the URL will now be: /products/audio?cid=1. The URL is now prettier, but not completely, we still have the cid parameter. If you don’t need to maintain conversations, the cid parameter can be removed with by changing the outbound rule to:
<outbound-rule>
<from>^/products.seam\?catagory=(\w*)&cid=\d*</from>
<to>/products/$1</to>
</outbound-rule>
Disadvantage of the solution
1) Extra delay:
If you would make a HTML form without JSF, you could immediately specify the action URL (attribute of the HTML form), so you could immediately specify to URL you want to send form data to, without all the rewriting. When the browser then submits the POST data (immediately to the pretty bookmarkable URL), the server will immediately return the page with results. So only one HTTP request/response is needed. But with Seam/JSF two request/reponses are needed if you want pretty bookmarkable URLs, which is an extra unwanted delay, just to get the job done in these frameworks.
The following steps happen in the background in our example:
- The user enters /products/audio in the browser.
- The server responds with the page containing a HTML form like:
<form method="post" action="/products.seam">. Notice that it refers to /products.seam without parameters.
- The user enters form data and submits it. The browser will generate a HTTP POST request to /products.seam.
- The server processes the form data using productsManager.addProduct(), and responds with a HTTP REDIRECT to /products/audio. (A HTTP redirect doesn’t contain a page.)
- The browser receives the redirect, and immediately requests for /products/audio, using a HTTP GET.
- The server receives the HTTP GET and gives a HTTP OK reponse containing the page the user already was on.
Without the Seam/JSF framework, these steps would be shorter and faster, saving an extra client-server-client roundtrip. Because you could then specify the URL to submit to in the HTML form, and thus won’t need the HTTP redirect. But these extra step can also be used as an advantage; it allow serversided navigation rules. But it would be nice if both options were possible, allowing the developer to choose.
2) SEO:
Google recently announced that they are going to crawl through HTML forms to find URLs.
Because the HTML form is using /products.seam in the HTML code instead of the pretty bookmarkable url, Google might index URLs you don’t want to be indexed. (This can be stopped using robots.txt, but other crawler maybe might not use that file.)
3) Doesn’t work for validation:
When a form is not validated because the form fields are not passing the specified field conditions, the JSF life cycle will end and thus skip the Invoke Application phase, and thus the navigation rules above will not be executed. I don’t know if there’s an easy solution for this.
Notes:
1)
When using UrlRewriteFilter, make sure you encode XML entities, so a & becomes & in urls that have a querystring.
2)
The querystring of an URL is everything behind the questionmark, like /products.seam?catagory=audio&login=true. In UrlRewriteFilter, like in mod_rewrite, querystrings are handled separatly from the URL. In UrlRewriteFilter you’ll have to use the <condition> element when using a <rule> element for an URL containing a querystring. For example:
<rule>
<condition type="query-string">catagory=(\w*)&login=true</condition>
<from>/products.seam</from>
<to type="redirect">/products/%1</to>
</rule>
Also note that you’ll have to use %1 instead of $1 when using conditions.
You don’t have to use the <condition> element when using querystrings with the <outbound-rule> element.