Series JSF – Phần 11 Đa ngôn ngữ (Internationalization) trong JSF Framework

cuongth

7 năm ago

Series JSF – Phần 11 Đa ngôn ngữ (Internationalization) trong JSF Framework. (Phần cuối).

Đa ngôn ngữ là một kỹ thuật giúp thay đổi trạng thái/ giá trị của các nhãn, message, tiền tệ, datetime mà không phải hardcode trong chương trình. Thay vào đó, chúng được lưu bên ngoài mã code ở các gói tài nguyên (resource buldles), database… một cách linh động. JSF cung cấp một cách xử lý thuận tiện qua các gói tài nguyên.

Các bước thực hiện đa ngôn ngữ trong JSF

Tạo file .properties lưu nhãn (label), message… cho từng ngôn ngữ. Định dạng tên của file phải là <file-name>_<locale>.properties.

Ngôn ngữ mặc định sẽ được bỏ qua trong tên tệp.

Ví dụ mình tạo 3 file ngôn ngữ cho tiếng việt, tiếng pháp và tiếng anh, trong đó ngôn ngữ mặc định là tiếng anh.

messages .properties (ngôn ngữ mặc định)

hello=Hello

messages_fr.properties

hello=Bonjour

messages_vi.properties

hello=Xin Chào

Đăng ký các file ngôn ngữ vào faces-config.xml

<?xml version = "1.0" encoding = "UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
   http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
  version="2.0">

  <application>
    <locale-config>
      <default-locale>en</default-locale>
      <supported-locale>vi</supported-locale>
      <supported-locale>jp</supported-locale>
    </locale-config>

    <resource-bundle>
      <base-name>i18n.messages</base-name>
      <var>msg</var>
    </resource-bundle>
  </application>
</faces-config>

<base-name>i18n.messages</base-name> : i18n là tên folder chứa các file ngôn ngữ, messages: tên bắt đầu của các file ngôn ngữ.

Tạo file index.xhtml với 1 select box để chọn ngôn ngữ, sau mỗi lần chọn ngôn ngữ message sẽ thay đổi theo ngôn ngữ tương ứng:

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
<h:head>
  <title>JSF tutorial</title>
</h:head>

<h:body>
  <h2>JSF Internalization Language Example</h2>

  <h:form>
    <h3>
      <h:outputText value="#{msg['hello']}" />
    </h3>

    <h:panelGrid columns="2"> 
            Language : 
            <h:selectOneMenu value="#{languageBean.locale}"
        onchange="submit()"
        valueChangeListener="#{languageBean.localeChanged}">
        <f:selectItems value="#{languageBean.countries}" />
      </h:selectOneMenu>
    </h:panelGrid>

  </h:form>
</h:body>
</html>

Thay đổi ngôn ngữ trong file LanguageBean.

@ManagedBean
@SessionScoped
public class LanguageBean implements Serializable {

  private static final long serialVersionUID = 1L;
  private String locale;
  private final static Locale LOCALE_VI = new Locale("vi", "VN");

  private static Map<String, Object> countries;
  static {
    countries = new LinkedHashMap<String, Object>();
    countries.put("English", Locale.ENGLISH);
    countries.put("French", Locale.FRENCH);
    countries.put("Vietnamese", LOCALE_VI);
  }

  public Map<String, Object> getCountries() {
    return countries;
  }

  public String getLocale() {
    return locale;
  }

  public void setLocale(String locale) {
    this.locale = locale;
  }

  // value change event listener
  public void localeChanged(ValueChangeEvent e) {
    String newLocaleValue = e.getNewValue().toString();
    for (Map.Entry<String, Object> entry : countries.entrySet()) {
      if (entry.getValue().toString().equals(newLocaleValue)) {
        FacesContext.getCurrentInstance().getViewRoot().setLocale((Locale) entry.getValue());
      }
    }
  }

}

Kết quả:

Okay, Done [wp-svg-icons icon=”thumbs-up” wrap=”i”]

Các bạn có thể download source ví dụ trên tại đây

Vậy là mình đã hoàn thành series về JSF Framework.

Thanks các bạn đã theo dõi, nếu có bất kỳ câu hỏi nào hãy để lại comment.