Internacionalizacion en JSF (Primefaces,properties)

Submitted by joseguru on Jue, 02/05/2015 - 13:02

En este blog hablaremos de la intercionalizacion de una pagina web utilizando properties de una manera sencilla pero eficaz, para ello en el ejemplo que realize utilizo jsf junto con el framework primefaces.

  • Se creo dentro nuestro proyecto un paquete donde se encuentra la clase LenguajeBean
  • Tambien se realizo una clase xhtml que queremos cambiar la llamaremos prueba
  • Posteriormente dentro de otro paquete o en el mismo donde se encuentra la clase LenguajeBean se crean los properties donde almacenaremos los nombres de los componentes que seran a traducir español, ingles. en mi caso esos dos utilizare.
  • Configuramenos el faces-config.xml donde le agregaremos una linea de codigo que se explicara paso a paso.

    • Esta es la clase que se utiiza para manejar los eventos mediante un selectOneMenu y donde definimos los lenguajes a utilizar para el cambio
    de idioma de la pagina.

    import java.io.Serializable;
    import java.util.LinkedHashMap;
    import java.util.Locale;
    import java.util.Map;

    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.SessionScoped;
    import javax.faces.context.FacesContext;
    import javax.faces.event.ValueChangeEvent;
     
    @ManagedBean(name="idioma")
    @SessionScoped
    public class LenguageBean implements Serializable{
           
            private static final long serialVersionUID = 1L;
           
            private String localeCode;
           
            private static Map<String,Object> countries;// creamos un map donde esperamos una cadena y un objeto
            static{
                    countries = new LinkedHashMap<String,Object>();
                    Locale espanol=new Locale("ES");
                    countries.put("Español", espanol);
                    countries.put("English", Locale.ENGLISH); // donde English es el valor que aparecera en el selectOnemenu y el objeto en que se convertira o traducira.
                   
                   
            }

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

           
            public String getLocaleCode() {
                    return localeCode;
            }

            public void setLocaleCode(String localeCode) {
                    this.localeCode = localeCode;
            }

            public void countryLocaleCodeChanged(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());
                           
                    }
            }

            }

    }

    Dentro del documento xhtml creamos el selectOneMenu como se muestra y posteriormente tambien creamos un label que es el componente
    que se traducira.

    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
          xmlns:h="http://xmlns.jcp.org/jsf/html"
       
            xmlns:p="http://primefaces.org/ui"
            xmlns:f="http://xmlns.jcp.org/jsf/core">

        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
           
             
            <title>Manejo de Idiomas</title>
        </h:head>

        <h:body>

            <div id="top" class="top">
                <ui:insert name="top">
                  <h:form>
    <!-- <p:selectOneMenu/> nombre del componente de primefaces-->
                     <p:selectOneMenu value="#{language.localeCode}" onchange="submit()"
                            valueChangeListener="#{language.countryLocaleCodeChanged}">
                            <f:selectItems value="#{language.countriesInMap}" />
                    </p:selectOneMenu>
                   
                  </h:form>
                </ui:insert>
            </div>

            <div id="content" class="center_content">
                <ui:insert name="content">
                  <h:form id="frm">
                     <h:outputText value="#{msg.saludo}"/> <!-- archivo que se traducira donde msg es el nombre de la variable que se define en el faces-config y saludo
              es la variable que contiene el nombre en español e ingles-->

    <!-- por ejemplo si nosotros queremos tradudir el nombre de un CommandButton que se encuentra dentro de un panel solo seria de la siguiente manera-->
                           
                   
                            <p:panel header="#{msg.nombredelpanel}">
                                 <h:panelgrid columns="2">
                                   <h:outputLabel value="#{msg.nombredellabel}" />
                                    <p:inputtext/>
                                       <p:commandButton value="#{msg.nombredelboton}"/>
    </h:panelgrid>
                          </p:panel>
                           
                           
                    </h:form>
                </ui:insert>
            </div>

        </h:body>

    </html>

    Aqui se muestra el archivo de configuracion del faces-config.xml
    donde com.prueba.mensajes es la ruta donde se encuentra nuestros properties con el nombre mensajes.
    por ejemplo
    mensajes.properties // que contiene archivos en español
    mensajes_en.properties // archivos en ingles.

    y

    msg nombre de a variable que se utiliza en el documento xhtml.

    <application>
               <locale-config>
                    <default-locale>es</default-locale>
                    <supported-locale>fr</supported-locale>  
               </locale-config>
               
               <resource-bundle>
                  <base-name>com.prueba.mensajes</base-name>
                  <var>msg</var>
               </resource-bundle>
             
         </application>

    saludos.
    gururcitos (-__-<}