In Jakarta Server Faces (JSF) applications, you often need to convert data between its native format and a format suitable for display or input on the user interface. JSF provides built-in converters that can handle various data types, including dates, numbers, and more. In this tutorial, we will show how to use them.
Step 1: Create a Model Bean
Firstly, let’s define a simple Model Bean that we will use as reference in our View. This Bean contains several fields, including a java.util.Date Field:
@Model
public class ConverterBean implements Serializable {
private int intValue;
private double doubleValue;
private Date dateValue;
// Getters/Setters omitted for brevity
public void submit() {
System.out.println(this.toString());
}
@Override
public String toString() {
return "ConverterBean [intValue=" + intValue + ", doubleValue=" + doubleValue + ", dateValue=" + dateValue
+ "]";
}
}
As you can see from the code, we also have added a submit action method to print the content of the fields.
Step 2: Create the JSF View
Next, let’s create a JSF View which maps the fields of the ConverterBean Class:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="jakarta.faces.core" xmlns:ui="jakarta.faces.facelets"
xmlns:h="jakarta.faces.html" >
<h:head>
<h:outputStylesheet name="style.css" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
</h:head>
<h:body>
<h2>JSF Converter demo</h2>
<h:form>
<h:outputLabel for="intValue" value="Integer Value:" />
<h:inputText id="intValue" value="#{converterBean.intValue}" />
<br />
<h:outputLabel for="doubleValue" value="Double Value:" />
<h:inputText id="doubleValue" value="#{converterBean.doubleValue}" />
<br />
<h:outputLabel for="dateValue" value="Date Value:" />
<h:inputText id="dateValue" value="#{converterBean.dateValue}">
<!-- Built-in date converter with a custom pattern -->
<f:convertDateTime pattern="yyyy-MM-dd" />
</h:inputText>
<h:message for="dateValue" style="color: red;" />
<br />
<h:commandButton value="Submit" action="#{converterBean.submit}" />
</h:form>
</h:body>
</html>
Two things to notice:
- JSF will automatically format the Integer and Double fields according to the data type of the Model. Therefore, the intValue field will default to “0” and the “doubleValue” will default to “0.0”
- The convertDateTime will convert the inputText to a date format according to the pattern “yyyy-MM-dd”. This means we get automatically formatted our Date fields without writing any piece of code.
- Finally, by adding a message element that references the dateValue we can output any error in the automatic conversion.
Step 3: Testing the JSF Converter
Let’s test our application. As you can see, if we attempt to use a wrong format for our date (according to our pattern) the error displays in the message field:
On the other hand, by entering valid field values, the submit action method will display the Bean values which have gone through the automatic conversion:
10:17:31,850 INFO [stdout] (default task-1) ConverterBean [intValue=10, doubleValue=10.5, dateValue=Thu Jul 27 02:00:00 CEST 2023]
Other Date Converter options
In our first example, we are using a single java.util.Date field with a basic pattern. You can also include a Time in your Date format, for example:
<h:inputText id="both" value="#{bean.both}">
<f:convertDateTime type="both" pattern="yyyy-MM-dd HH:mm:ss" />
</h:inputText>
Besides, you can also use other Java Classes to manage Date and Time. For example, given the following properties:
LocalDate localDate; LocalTime localTime; LocalDateTime localDateTime; OffsetTime offsetTime; OffsetDateTime offsetDateTime; ZonedDateTime zonedDateTime;
You can map them as follows in your HTML page:
<h:form id="form">
<h:inputText id="localDate" value="#{converterBean.localDate}">
<f:convertDateTime type="localDate" pattern="yyyy-MM-dd" />
</h:inputText>
<h:inputText id="localTime" value="#{converterBean.localTime}">
<f:convertDateTime type="localTime" pattern="HH:mm:ss" />
</h:inputText>
<h:inputText id="localDateTime" value="#{converterBean.localDateTime}">
<f:convertDateTime type="localDateTime"
pattern="yyyy-MM-dd HH:mm:ss">
</f:convertDateTime>
</h:inputText>
<h:inputText id="offsetTime" value="#{converterBean.offsetTime}">
<f:convertDateTime type="offsetTime" />
</h:inputText>
<h:inputText id="offsetDateTime" value="#{converterBean.offsetDateTime}">
<f:convertDateTime type="offsetDateTime" />
</h:inputText>
<h:inputText id="zonedDateTime" value="#{converterBean.zonedDateTime}">
<f:convertDateTime type="zonedDateTime" />
</h:inputText>
<h:commandButton value="submit" action="#{converterBean.submit}" />
</h:form>
Converting numbers in JSF
In JSF (JavaServer Faces), the <f:convertNumber /> tag is used to format numeric values in a specific way. It allows you to convert numbers to various formats, such as currency, percentage, and custom patterns, depending on your requirements. Here’s how you can use <f:convertNumber />
Suppose you have a numeric value in your managed bean, say myNumber, and you want to display it with specific formatting.
To format the number as currency (e.g., USD, EUR), use the type attribute of <f:convertNumber />:
<h:outputText value="#{myBean.myNumber}">
<f:convertNumber type="currency" currencyCode="USD" />
</h:outputText>
To format the number as a percentage, use the type attribute with the value “percent”:
<h:outputText value="#{myBean.myNumber}">
<f:convertNumber type="percent" />
</h:outputText>
Remember that <f:convertNumber /> is only effective for displaying the formatted number on the UI. It does not alter the actual value stored in the managed bean.
By using <f:convertNumber />, you can easily format numeric values as desired in your JSF applications, making the presentation of data more user-friendly and aligned with your application’s requirements.
To learn more about JSF Custom Converters, check the following article: How to create a Custom JSF Converter
Found the article helpful? if so please follow us on Socials
