Series JSF – Phần 8 Các thẻ (tag) Convertor, convert trong JSF

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

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:

https://www.tutorialspoint.com/jsf/jsf_convertor_tags.htm

stackjava.com