javascript - online - Xpages: ¿cómo podemos implementar la localización para el código JS del lado del cliente?

npm

Question

Actualmente estoy desarrollando una aplicación multilingüe impulsada por Xpages utilizando formas estándar para localizar cadenas estáticas y dinámicas a través de recursos de .property internos y .property resourceBundles . Dentro de la aplicación, los usuarios pueden elegir su idioma preferido, esta decisión se almacena actualmente en un documento de configuración de usuario; También estoy planeando almacenar esas decisiones como cookies del navegador. Si no hay preferencias definidas por el usuario, el idioma predeterminado del navegador maneja la configuración regional utilizada en la aplicación. Esto funciona bien para todos los elementos del lado del servidor.

Ahora tengo que agregar algunas secuencias de comandos del lado del cliente, y necesito usar algunas cadenas localizadas también. Tengo que admitir que no tengo ni idea de cuál es el mejor enfoque para esto.

Las preguntas principales son:

1. ¿Puedo de alguna manera usar los paquetes de recursos / recursos de archivos existentes?
2. de ser así: ¿cómo puedo hacer referencia a esos recursos desde el código de mi script?
3. si no: ¿cuál es la mejor manera de organizar y hacer referencia a mis propios recursos de archivos?
4. finalmente: si tengo que hacerlo todo solo: ¿cómo puedo saber cuál es el lugar preferido por el usuario? Ese es fácil si se establece una cookie (ver arriba), pero ¿qué sucede si necesito hacer referencia a las preferencias del navegador y / o si un usuario ha rechazado el uso de cookies?

Editar: consideré ir al dojo i18n , pero no sé cómo implementar un plugin tan personalizado.

Answer 1

Una alternativa es leer los paquetes de recursos directamente en el navegador y hacer referencia a eso en JavaScript donde lo necesite. Para responder a sus preguntas principales:

1. Sí, pero si lo carga directamente desde la NSF, aún no se puede usar. Yo recomendaría crear una página XPage para que la muestre como un objeto JSON:

   <?xml version="1.0" encoding="UTF-8"?>
   <xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false">
   
   <xp:this.resources>
       <xp:bundle
       src="/labels_en.properties"
       var="translations">
       </xp:bundle>
   </xp:this.resources>
   
   <xp:this.afterRenderResponse><![CDATA[#{javascript:
   try {
   
    var externalContext = facesContext.getExternalContext();
    var writer = facesContext.getResponseWriter();
    var response = externalContext.getResponse();
   
    response.setContentType("application/json"); 
   
    var jsonOutput = {};
    var keys = translations.keySet();
   
    for (var key in keys) {
      jsonOutput[key] = translations[key];
    }
   
    writer.write(  "var translations = " + toJson(jsonOutput)  ) ;
    writer.endDocument();
   
   } catch (e) {
       print(e);
   }
   }]]>
       </xp:this.afterRenderResponse>
   
   </xp:view>

2. Debe incluir XPage desde 1. como una biblioteca de JavaScript del lado del cliente en su página. Creé una variable global de JavaScript llamada translations en XPage desde 1. así que puedes llamarla como translations.key donde key referencia a una variable del archivo de propiedades.

3. No se necesita respuesta ...

4. En XPage desde la respuesta 1, puede cargar el paquete de recursos adecuado según la configuración regional del usuario (configuración del idioma del navegador):

   <xp:this.resources>
       <xp:bundle var="translations">
       <xp:this.src><![CDATA[#{javascript:
   var language = "en";        //default language
   
   switch (context.getLocaleString() ) {
   case "nl":
       language = "nl";
       break;
   }
   
   return "/labels_" + language + ".properties";}]]></xp:this.src>
       </xp:bundle>
   </xp:this.resources>

Answer 2

Utilizo el siguiente enfoque: Todas las bibliotecas de JavaScript de mi cliente (CSJS) se almacenan como recursos de archivos en el diseño de la base de datos (Recursos> Archivos). En el código de las bibliotecas utilizo una notación similar a EL para marcar partes traducibles, por ejemplo:

var text="#{TRLT.TextToTranslate}";

Cada vez que deseo utilizar las bibliotecas en una página XPage, no las referenciamos directamente en los recursos de la página XPage, sino que agregamos una referencia a una "página-auxiliar" (js.xsp) en su lugar:

<xp:this.resources>
    <xp:headTag tagName="script">
        <xp:this.attributes>
            <xp:parameter name="src" value="js.xsp?lng=#{sessionScope.language}&amp;v=#{applicationScope.versionApp}"/>
            <xp:parameter name="type" value="text/javascript"/>
        </xp:this.attributes>
    </xp:headTag>
</xp:this.resources>

Js.xsp se comporta como un recurso de JavaScript: configuro rendered="false" en la página XPage y creo manualmente una respuesta con Content-Type="text/javascript" en el evento beforeRenderResponse . Cuando se llama a la página XPage, lee todas las bibliotecas de CSJS, las concatena y completa todas las traducciones basadas en los diccionarios que generalmente uso para las traducciones del lado del servidor.

Aquí está el código para el evento beforeRenderResponse de js.xsp:

importPackage(java.io);
importPackage(java.lang);
importPackage(java.util.regex);
importPackage(javax.servlet.http);
importPackage(org.apache.commons.io); // AFAIK this package is not installed by default (but generally very helpful)

var i,arr,lng,js,libs,c,s,m,bfr,dct,response,ec,is,os;

//---------------------------- initialize main variables
ec=facesContext.getExternalContext(); // the external context

lng=(param.lng || "en");  // the language can be provided as url parameter, otherwise use a default

dct=(applicationScope["TRLT_"+lng] || {}); // in my case, the dictionaries (HashMaps) containing the translations are stored in the applicationScope, but of course they can be loaded from anywhere (resource bundles etc.)

libs=(param.libs ? fromJson(param.libs) : ["mylib1.js","mylib2.js"]) // the library names can be provided as url parameter, otherwise use a default

//---------------------------- concatenate all libraries
js=new StringBuilder();
for (i=0;i<libs.length;i++) {
    if (s=IOUtils.toString(ec.getResourceAsStream(libs[i]),"UTF-8")) js.append("/n/n"+s);
}
js=js.toString();

//---------------------------- search for and replace translateable parts
m=Pattern.compile("[#$]//{TRLT//.([^}]+)//}").matcher(js);
bfr=new StringBuffer();
c=0;
while (m.find() && c<1e6) {
    c++;
    s=m.group(1);
    m.appendReplacement(bfr,dct[s] || s || "");
}
m.appendTail(bfr);
js=bfr.toString();

//---------------------------- create the response and finalize
response=ec.getResponse();
response.setHeader("Cache-Control","max-age="+(60*60*24*365).toFixed(0)); // its important to set the expiration "a bit" into the future to prevent the browser from reloading the js.xsp everytime you reference it on another XPage; in order to force the browser to update the XPage, use versioning (see url parameter "v" in the headTag definition above)
response.setDateHeader("Expires",new Date().getTime()+(1000*60*60*24*365));
response.setHeader("Content-Type","text/javascript; name=/"libs.js/"");
response.setHeader("Content-Disposition","inline; filename=/"libs.js/"");

is=new ByteArrayInputStream(js.getBytes("UTF-8"));
os=response.getOutputStream();
IOUtils.copy(is,os);
is.close();
os.close();
facesContext.responseComplete();
return;

PD: Tuve que modificar los códigos que aquí se presentan porque las versiones originales tienen algunas dependencias con mi marco general, así como también un poco de almacenamiento en caché y manejo de errores. Por lo tanto, no puedo garantizar que no haya errores tipográficos, pero en principio debería funcionar.