« Späť

Textos internacionalizados en Liferay 6.1 manejados en JavaScript

La internacionalización en Liferay Portal es tema muy conocido. Como ya sabemos, nos apoyamos en ficheros de propiedades para definir los textos a manejar dentro de la web. El problema aparece cuando queremos manejar y mostrar estos texto mediante funciones JavaScript. 

Vamos a ilustrar con un ejemplo la situación comentada. Se diseña una página en la que el usuario puede realizar un conjunto de operaciones:

El usuario puede hacer click sobre cualquiera de los iconos que aparecen en la página para desencadenar operaciones (borrado, edición, etc). En determinadas ocasiones, nos interesará solicitar una confirmación de la operación mediante un popup JavaScript:

Queremos que estos mensajes estén internacionalizados. La función JavaScript es muy simple:

function confirmOperation(message){
    var agree =
        confirm(message);
    if (agree)
        return true ;
    else
        return false ;
}

Desde Liferay, tenemos que inyectar el mensaje en la función JavaScript. A continuación, planteamos una posible estrategia. Supongamos que action.jsp es la vista que nos muestra las diferentes operaciones sobre las que el usuario puede actuar, vamos a trabajar sobre la acción deleteTeam:

    <portlet:actionURL name="deleteTeam" var="deleteTeam">
        <portlet:param name="teamId" value="<%=teamId %>"></portlet:param>
   </portlet:actionURL>

   ...

    <span>
    <aui:a href="<%= deleteTeam%>" title="delete-team" cssClass="simple" >
         <img alt="delete-team" src="<%= srcDelete%>" />
    </aui:a>
   </span>

Para incorporar la función Javascript trabajamos con una clase genérica llamada ConfirmationUtil que modifica la url, en este caso, srcDelete, para inyectar la función Javascript:

public class ConfirmationUtil {
    
    public static String addConfirmation(PageContext pageContext, String url, String message){
        
        if (url.startsWith("javascript:")) {
            url = url.substring(11);
        }

        if (url.startsWith(Http.HTTP_WITH_SLASH) || url.startsWith(Http.HTTPS_WITH_SLASH)) {
            url = "submitForm(document.hrefFm, '" + HttpUtil.encodeURL(url) + "');";
        }

        if (url.startsWith("wsrp_rewrite?")) {
            url = StringUtil.replace(url, "/wsrp_rewrite", "&wsrp-extensions=encodeURL/wsrp_rewrite");
            url = "submitForm(document.hrefFm, '" + url + "');";
        }
// La variable message almacena el mesaje que se mostrara en el ventana
        String message = LanguageUtil.get(pageContext, message);
                
        url = "javascript:if (confirm('" +
message + "')) { " + url + " } else { self.focus(); }";

        return url;
    }
}

La página action.jsp quedaría tal que así:

    <portlet:actionURL name="deleteTeam" var="deleteTeam">
        <portlet:param name="teamId" value="<%=teamId %>"></portlet:param>
   </portlet:actionURL>

      <%  

deleteTeam = ConfirmationUtil.addConfirmation(
                pageContext,
                deleteTeam,
                "are-you-sure-you-want-to-delete-team");

      %>

     <span>
     <aui:a href="<%= deleteTeam%>" title="delete-team" cssClass="simple" >
         <img alt="delete-team" src="<%= srcDelete%>" />
     </aui:a>
   </span>

 

 

 

El fichero de propiedades, por ejemplo, Language_es.properties (UTF-8):

...

are-you-sure-you-want-to-delete-team=Esta seguro de que desea eliminar este grupo de trabajo
...

La ventaja emergente será tal que así:

Si deseamos que el texto que muestra sea "¿Está seguro de que desea eliminar este grupo de trabajo?" debemos modificar el fichero de propiedades, pero ¿cómo?:

Opción 1:

...
are-you-sure-you-want-to-delete-team=¿Está seguro de que desea eliminar este grupo de trabajo?
...

 

Opción 2:

...
are-you-sure-you-want-to-delete-team=¿Está seguro de que desea eliminar este grupo de trabajo?
...

Encontramos problemas cuando manejamos este tipo de caracteres. Probablemente existan diferentes soluciones, describimos la que utilizamos habitualmente:

Paso 1: Ficheros de i18n siempre en formato UTF-8, por tanto, quedaría para esa entrada tal que así:

...
are-you-sure-you-want-to-delete-team=¿Está seguro de que desea eliminar este grupo de trabajo?
...

Paso 2: Modificación de la clase ConfirmationUtil:

public class ConfirmationUtil {
    
    public static String addConfirmation(PageContext pageContext, String url, String message){
        
        if (url.startsWith("javascript:")) {
            url = url.substring(11);
        }

        if (url.startsWith(Http.HTTP_WITH_SLASH) || url.startsWith(Http.HTTPS_WITH_SLASH)) {
            url = "submitForm(document.hrefFm, '" + HttpUtil.encodeURL(url) + "');";
        }

        if (url.startsWith("wsrp_rewrite?")) {
            url = StringUtil.replace(url, "/wsrp_rewrite", "&wsrp-extensions=encodeURL/wsrp_rewrite");
            url = "submitForm(document.hrefFm, '" + url + "');";
        }
// La variable message almacena el mesaje que se mostrara en el ventana

         String htmlMessage = LanguageUtil.get(pageContext, message);

// Se aplica una transformacion sobre el mensaje I18n transformando

// su formato HTML en texto.
        String message = HtmlUtil.extractText(htmlMessage);    
        url = "javascript:if (confirm('" + message + "')) { " + url + " } else { self.focus(); }";
 

        return url;
    }
}

 

Komentáre
Trackback URL:

comments powered by Disqus