Series JSF – Phần 8 Các thẻ (tag) Convertor, convert trong JSF
JSF cung cấp khả năng chuyển đổi định dạng dữ liệu (convert) ở bên trong các UI component.
Ví dụ, chuyển đổi text thành đối tượng date và validate định dạng khi nhập vào.
Để sử dụng những thẻ này chúng ta cần khai báo namespaces của nó:
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:f = "http://java.sun.com/jsf/core">
JSF cung cấp 2 thẻ convertor là : f:convertNumber (dùng để định dạng text sang số) và f:convertDateTime (dùng để định dạng text sang datetime). Ngoài ra bạn có thể tự tạo các thẻ convertor cho riêng mình.
1. f:convertNumber
Các thuộc tính hay dùng trong thẻ f:convertNumber:
type: kiểu dữ liệu như tiền tệ, phần trăm, kiểu số
pattern: định dạng dữ liệu theo mẫu
maxFractionDigits: số lượng tối đa các số sau dấu phẩy
maxFractionDigits: số lượng tối thiểu các số sau dấu phẩy
maxIntegerDigits: số lượng tối đa các số trước dấu phẩy
minIntegerDigits: số lượng các số tối thiểu các số trước dấu phẩy
currencySymbol: ký tự đơn vị tiền tệ
…
Ví dụ:
<table border="1" cellspacing="2" cellpadding="2">
<tr>
<th>Parameter</th>
<th>Value Passed</th>
<th>Output</th>
</tr>
<tr>
<td>minFractionDigits="10"</td>
<td>1111.2017</td>
<td><h:outputText value="1111.2017">
<f:convertNumber minFractionDigits="10" />
</h:outputText></td>
</tr>
<tr>
<td>maxFractionDigits="3"</td>
<td>1111.2017</td>
<td><h:outputText value="1111.2017">
<f:convertNumber maxFractionDigits="3" />
</h:outputText></td>
</tr>
<tr>
<td>minIntegerDigits="10"</td>
<td>1111.2017</td>
<td><h:outputText value="1111.2017">
<f:convertNumber minIntegerDigits="10" />
</h:outputText></td>
</tr>
<tr>
<td>maxIntegerDigits="3"</td>
<td>1111.2017</td>
<td><h:outputText value="1111.2017">
<f:convertNumber maxIntegerDigits="3" />
</h:outputText></td>
</tr>
<tr>
<td>pattern="#000.000"</td>
<td>1111.2017</td>
<td><h:outputText value="1111.2017">
<f:convertNumber pattern="#000.000" />
</h:outputText></td>
</tr>
<tr>
<td>currencySymbol="$"</td>
<td>$1111.2017</td>
<td><h:outputText value="1111.2017$">
<f:convertNumber currencySymbol="$" type="currency" />
</h:outputText></td>
</tr>
<tr>
<td>type="percent"</td>
<td>1111.2017%</td>
<td><h:outputText value="1111.2017%">
<f:convertNumber type="percent" />
</h:outputText></td>
</tr>
</table>
Kết quả:
Series JSF – Phần 8 Các thẻ (tag) Convertor, convert trong JSF
2. f:convertDateTime
Các thuộc tính hay dùng trong trong thẻ f:convertDateTime
type: kiểu dữ liệu: date, time hoặc cả hai
dateStyle: định đạng kiểu date: mặc định, ngắn, bình thường, dài hoặc đầy đủ
timeStyle: định đạng kiểu time: mặc định, ngắn, bình thường, dài hoặc đầy đủ
pattern: định dạng format kiểu dữ liệu như trong java.text.SimpleDateFormat
timeZone: định dạng dữ liệu theo vùng.
* Lưu ý: khi convert datetime, JSF mặc đinh lấy timezone = 0 do đó hiển thị giờ sẽ bị sai lệch. Ta cần điều chỉnh về timezone của hệ thống bằng cách thêm dòng dưới đây vào file web.xml
<context-param> <param-name>javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZONE</param-name> <param-value>true</param-value> </context-param>
Ví dụ:
@ManagedBean
@SessionScoped
public class HelloBean {
private Date date;
public Date getDate() {
date = new Date();
System.out.println(date);
return date;
}
public void setDate(Date date) {
this.date = date;
}
}
<h2>Convert Datetime Example</h2>
<table border="1" cellspacing="2" cellpadding="2">
<tr>
<th></th>
<th>Output</th>
</tr>
<tr>
<td>Default</td>
<td><h:outputText value="#{helloBean.date}">
<f:convertDateTime />
</h:outputText></td>
</tr>
<tr>
<td>type = time</td>
<td><h:outputText value="#{helloBean.date}">
<f:convertDateTime type="time" />
</h:outputText></td>
</tr>
<tr>
<td>type = date</td>
<td><h:outputText value="#{helloBean.date}">
<f:convertDateTime type="date" />
</h:outputText></td>
</tr>
<tr>
<td>pattern="dd-MM-yyyy"</td>
<td><h:outputText value="#{helloBean.date}">
<f:convertDateTime pattern="dd-MM-yyyy" />
</h:outputText></td>
</tr>
<tr>
<td>pattern="yyyy-MM-dd HH:mm:ss.SSS"</td>
<td><h:outputText value="#{helloBean.date}">
<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss.SSS" />
</h:outputText></td>
</tr>
</table>
Kết quả:
3. Tự tạo thẻ convertor
Bạn có thể tự định nghĩa thẻ convertor cho mình bằng các class java implements Converter.
Ví dụ ở đây mình tạo 1 thẻ convertor thực hiện thêm chữ xin chào trước đoạn text được in ra.
@FacesConverter("stackjava.com.convertortag.convertor")
public class CustomConvertor implements Converter {
public Object getAsObject(FacesContext context, UIComponent component, String value) {
return "Xin chào: " + value;
}
public String getAsString(FacesContext context, UIComponent component, Object value) {
return value.toString();
}
}
<h2>Convert custom Example</h2> <h:outputText value="stackjava.com"> <f:converter converterId="stackjava.com.convertortag.convertor"></f:converter> </h:outputText>
Kết quả:
Bạn để ý là với customer convertor thì nó sử dụng qua converterId. Trong JSF cũng đã có sẵn một số converterId như:
| Class | Converter ID |
|---|---|
| BigDecimalConverter | javax.faces.BigDecimal |
| BigIntegerConverter | javax.faces.BigInteger |
| BooleanConverter | javax.faces.Boolean |
| ByteConverter | javax.faces.Byte |
| CharacterConverter | javax.faces.Character |
| DateTimeConverter | javax.faces.Datetime |
| DoubleConverter | javax.faces.Double |
| EnumConverter | javax.faces.Enum |
| FloatConverter | javax.faces.Float |
| IntegerConverter | javax.faces.Integer |
| LongConverter | javax.faces.Long |
| NumberConverter | javax.faces.Number |
| ShortConverter | javax.faces.Short |
Okay, Done! [wp-svg-icons icon=”thumbs-up” wrap=”i”][wp-svg-icons icon=”thumbs-up” wrap=”i”]
Các bạn có thể download code ví dụ trên tại đây
Thanks các bạn đã theo dõi bài viết!
Phần tiếp theo chúng ta sẽ tìm hiểu về các thẻ validator trong JSF: https://stackjava.com/jsf/series-jsf-phan-9-cac-the-tag-validator-validate-trong-jsf.html
References: