JSF 2 Change Default Separator Character

In this tutorial we show you how to change the default separator character in JSF. The default separator character in JSF is : and it’s sometimes difficult to work with JavaScript or CSS selectors. In this example we’ll show you how to change it.

Change Default Separator Character

In your web.xml file you can specify the default character by setting the javax.faces.SEPARATOR_CHAR with the appropriate separator character.

<!-- change the default separator character -->
<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>

Getting the character programatically

You can retrieve the configured character programmatically, this way you don’t have to hard code this character everywhere in you code and don’t violate the DRY principle.

char sep = UINamingContainer.getSeparatorChar(facesContext);

Example simple view

We’ll demonstrate this with a simple view which has a user-form and a username inside that form.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:body>

    <h2>JSF 2: Change default separator character</h2>

    <h:form id="user-form">
        <h:inputText id="username"/>
    </h:form>

</h:body>
</html>

Example Output simple view

By default if you don’t change the separator character the id of the username field would be user-form:username but because we change the default character this results to user-form-username. This is much easier to use with css or javascript selectors.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <h2>JSF 2: Change default separator character</h2>
	<form id="user-form" ...>
		...
		<input id="user-form-username" type="text" name="user-form-username" />
		...
	</form>
</body>
</html>

Demo

URL: view-source:http://localhost:8081/jsf-change-separator-character/

jsf change default separator char

References

Download

You may also like...