URL rewriting with prettyfaces in JSF web application

Imagine a URL which includes multiple parameters like this one:   https://www.prettyfaces-example.com/?id=1&name=pretty&other=links   If you are a developer with passion about simplicity, you probably want to rewrite the above URL in order to achieve memorable link. Most of the modern content management systems have a feature that allows you to rename the URL of a blog […]

by Veselin Pavlov

July 21, 2015

4 min read

url address - URL rewriting with prettyfaces in JSF web application

Imagine a URL which includes multiple parameters like this one:

 

https://www.prettyfaces-example.com/?id=1&name=pretty&other=links

 

If you are a developer with passion about simplicity, you probably want to rewrite the above URL in order to achieve memorable link. Most of the modern content management systems have a feature that allows you to rename the URL of a blog post or a page. I was curious how this could be implemented in a JSF application and found out that it isn’t trivial. Luckily there is a library that makes it easier to include this feature in your application. The library name is prettyfaces and is developed by ocpsoft.

In order to show you how the library works I created a small JSF application example. The idea of the application is to show in a page a parameter from the URL.

First, I created a page index.xhtml

[html]
<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml"
xmlns_h="https://java.sun.com/jsf/html">

<h:head>
<title>Hello World!</title>
</h:head>

<h:body>
<h1>Welcome page</h1>
<h:outputText value="#{example.text}" />
</h:body>
</html>
[/html]

It takes a value from the bean “example” and shows it on the page.

The bean on the other hand, takes the “text” parameter from the URL and sets the value of the bean property “text”.

Here is the code:

[java]
package eu.dreamix.example;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="example")
@RequestScoped
public class ExampleBean {
@ManagedProperty(value = "#{param.text}")
private String text;

public ExampleBean() {
}

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}
}
[/java]

Now when I call my page like this:

https://localhost:8888/prettylinks-example/faces/index.xhtml?text=Hello%20World!

 

I receive an output page:

—————————————————————————————————————————-

Welcome page

Hello World!

—————————————————————————————————————————-

As you can see the link doesn’t give you meaningful information and is hard to remember it. In order to improve the situation, I used prettyfaces.

The installation of prettyfaces is really simple with maven. All you need to do is to include thеsе dependencies in your pom.xml file:

[html]
<dependency>
<groupId>org.ocpsoft.rewrite</groupId>
<artifactId>rewrite-servlet</artifactId>
<version>2.0.12.Final</version>
</dependency>
<dependency>
<groupId>org.ocpsoft.rewrite</groupId>
<artifactId>rewrite-config-prettyfaces</artifactId>
<version>2.0.12.Final</version>
</dependency>
[/html]

Comment: As I write this blog post, the selected versions of the above libraries are the latest.

The Next step

After including the library into our project the next step is to create a configuration file for prettyfaces. As the instructions from the documentation say, I created a file called pretty-config.xml:

[html]
<pretty-config xmlns="https://ocpsoft.org/schema/rewrite-config-prettyfaces"
xmlns_xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi_schemaLocation="https://ocpsoft.org/schema/rewrite-config-prettyfaces
https://ocpsoft.org/xml/ns/prettyfaces/rewrite-config-prettyfaces.xsd">

<url-mapping id="example" >
<pattern value="/welcome" />
<view-id value="/faces/index.xhtml?text=Hello%20World!" />
</url-mapping>

</pretty-config>
[/html]

By doing this I mapped the path “/welcome” to the longer path. Now when I go to:

https://localhost:8888/prettylinks-example/welcome

 

I receive the same page:

—————————————————————————————————————————-

Welcome page

Hello World!

—————————————————————————————————————————-

This is nice, but I can’t hard-code every possible link that a user might want to change. I need to have the freedom to edit the mappings dynamically. Fortunately, prettyfaces provide this feature. In order to make the URL mappings dynamic I had to create another bean:

[java]
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="dynamic")
@RequestScoped
public class DynamicLinksBean {
private String uglyLink;

public DynamicLinksBean() {
this.uglyLink = "/faces/index.xhtml?text=welcome!";
}

public String getUglyLink() {
return uglyLink;
}

public void setUglyLink(String uglyLink) {
this.uglyLink = uglyLink;
}
}
[/java]

Comment: For the purpose of this example the bean contains only a String property that is set to the “ugly” path. However, you can make it to get the URLs from a database or a file or to construct them in some dynamic way with random values or whatever you need.

Then we have to modify the prettyfaces configuration file like this:

[html]
<pretty-config xmlns="https://ocpsoft.org/schema/rewrite-config-prettyfaces"
xmlns_xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi_schemaLocation="https://ocpsoft.org/schema/rewrite-config-prettyfaces
https://ocpsoft.org/xml/ns/prettyfaces/rewrite-config-prettyfaces.xsd">

<url-mapping id="example" >
<pattern value="/welcome" />
<view-id value="#{dynamic.getUglyLink}" />
</url-mapping>

</pretty-config>
[/html]

By doing this I mapped the path “/welcome” to the path that is set in the property uglyLink of the DynamicLinksBean.

I hope you enjoyed my post. If you have any suggestions or know an easier way to implement this feature, please comment.

Categories

Dev Manager and Partner at Dreamix