![\"\"](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/03\/SPFX-Entendiendo-la-utilizaci\u00f3n-de-recursos.jpg\")
<\/p>\n<\/p>\n
La semana pasada se anunci\u00f3 la disponibilidad General del SPFX<\/a>\u00a0 en todos los tenant de Office 365. A d\u00eda de hoy,\u00a0 ya podemos ponerlo en entornos productivos, as\u00ed que vamos a aprovechar esta circunstancia para tratar de entender c\u00f3mo funciona la soluci\u00f3n del tema de Recursos que trae de serie SPFX y de esta forma, evitar errores. Antes de empezar a ver el funcionamiento de los recursos multidioma, vamos \u00a0e explicar el funcionamiento que esperamos que tenga.<\/p>\n Cuando en un desarrollo ASP.NET hacemos uso de un fichero de recursos o en un desarrollo JavaScript utilizamos una librer\u00eda como i18n\u00a0<\/a>,\u00a0lo que esperamos es tener un fichero gen\u00e9rico con el idioma habitual de nuestra aplicaci\u00f3n<\/strong>. \u00a0En caso de que nuestra aplicaci\u00f3n soporte otro idioma, agregamos otro fichero: bien resx<\/strong>, bien .json<\/strong> (con la extensi\u00f3n del idioma que soporta), y \u00e9l mismo se encargar\u00e1 de traducir nuestra aplicaci\u00f3n.<\/p>\n <\/p>\n En caso de que no dispongamos del fichero de recursos de un idioma,<\/strong> devolver\u00e1 la aplicaci\u00f3n en el idioma definido por defecto.<\/p>\n Tal y como funciona SPFX<\/strong>, cuando creamos un proyecto (>yo @microsoft\/sharepoint) en el WebPart disponemos de un fichero de \u00abrecursos\u00bb por defecto. Est\u00e1 \u00a0ubicado en \u00a0la carpeta \u00absrc->webparts->resource->loc\u00bb. Dentro de esta carpeta hay dos ficheros:<\/p>\n <\/p>\n Para poder utilizar los recursos dentro de nuestro c\u00f3digo, bastar\u00e1 con importar la clase mystring de la siguiente forma:<\/p>\n Para utilizarlo, dispondremos de Intelisense<\/em>, en el cual tendremos todos los recursos disponibles.<\/p>\n Vamos a ver un ejemplo b\u00e1sico. En el load de la clase de WebPart, a\u00f1adimos en el html que nos muestre el contenido de uno de estos elementos del fichero de recursos, de manera que el resultado sea:<\/p>\n Si arrancamos nuestra soluci\u00f3n dentro del Workbench local funcionar\u00e1 correctamente: A continuaci\u00f3n, esta misma soluci\u00f3n la desplegamos en un Tenant de Office 365 y \u00bfcu\u00e1l es el resultado? Por lo que pod\u00e9is deducir, esta claro que va a fallar… Analicemos como funciona SPFX.<\/p>\n Si vamos al fichero de configuraci\u00f3n de la soluci\u00f3n ubicado dentro de la carpeta Config-> Config.json, vemos que ese documento tiene un nodo, que es \u00ablocalizedResources\u00bb. En este nodo est\u00e1 la ubicaci\u00f3n de los ficheros de recursos de cada WebPart, en los cuales el par\u00e1metro es el idioma en el que se ejecuta.<\/p>\n En base a este funcionamiento, si utilizamos el sistema de recursos por defecto que trae SPFX, en caso de que despleguemos un WebPart y el cliente lo visualice en un idioma que no tengamos creado, en ese fichero se producir\u00e1 un error.<\/p>\n El motivo por el cual no falla en el Workbench, es porque se est\u00e1 cargando la p\u00e1gina como si se estuviera cargando en idioma americano. \u00bfC\u00f3mo lo sabemos? Nos vamos a la carpeta \/temp\/, abrimos el fichero workbench.html y observamos que se carga como si estuvi\u00e9ramos en un navegador americano.<\/p>\n Aunque en un principio, la soluci\u00f3n que se ha propuesto para solucionar el tema del multi idioma dentro de un WebPart parece una soluci\u00f3n pensada y meditada, mi opini\u00f3n es que tiene que mejorar y abordar el supuesto de que haya un idioma por defecto.<\/p>\n Office 365<\/strong> da soporte a todos los lenguajes disponibles, y en el SPFX creo que se deber\u00eda haber optado por una soluci\u00f3n como la de las Add-In. En los Add-In indic\u00e1bamos los idiomas que soportaba y cu\u00e1l era el idioma por defecto.<\/p>\n Otra alternativa ser\u00eda que funcione como hace i18n,<\/strong> es decir, tener un idioma por defecto, para que en el caso de que no haya traducci\u00f3n para ese idioma, devuelva un idioma y no un error.<\/p>\n <\/p>\n<\/span>","protected":false},"excerpt":{"rendered":" La semana pasada se anunci\u00f3 la disponibilidad General del SPFX\u00a0 en todos los tenant de Office 365. A d\u00eda de hoy,\u00a0 ya podemos ponerlo en entornos productivos, as\u00ed que vamos a aprovechar esta circunstancia para tratar de entender c\u00f3mo funciona … Continue reading
\n<\/p>\nIntroducci\u00f3n<\/strong><\/h2>\n
![\"\"](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/03\/klosions_idiomas.png\")
<\/p>\n\n
\r\nimport * as strings from 'resourceStrings';\r\n<\/pre>\n
\r\n public render(): void {\r\n this.domElement.innerHTML = strings.BasicGroupName + `\r\n \r\n<div class="${styles.helloWorld}">\r\n\r\n\r\n<div class="${styles.container}">\r\n\r\n\r\n<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">\r\n\r\n\r\n<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">\r\n <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!<\/span>\r\n Customize SharePoint experiences using Web Parts.\r\n${escape(this.properties.description)}\r\n <a href="https:\/\/aka.ms\/spfx" class="${styles.button}">\r\n <span class="${styles.label}">Learn more<\/span> \r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n`;\r\n }\r\n<\/pre>\n
\n![\"\"](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/03\/Worckbench-1024x451.jpg\")
<\/p>\n
\n![\"\"](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/03\/errorResource.jpg\")
<\/p>\n\u00bfPor qu\u00e9 falla?<\/strong><\/h2>\n
\r\n{\r\n "localizedResources": {\r\n "resourceStrings": "webparts\/resource\/loc\/{locale}.js"\r\n }\r\n}\r\n<\/pre>\n\u00bfPor qu\u00e9 no falla en el Workbench?<\/strong><\/h2>\n
\r\n<!doctype html>\r\n<html dir="ltr">\r\n<head>\r\n <meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\r\n <meta http-equiv="X-UA-Compatible" content="IE=edge" \/>\r\n <meta name="viewport" content="width=device-width, initial-scale=1" \/>\r\n\r\n <title>SharePoint Web Part Workbench<\/title>\r\n\r\n <link rel="shortcut icon" href="https:\/\/localhost:4321\/node_modules\/@microsoft\/sp-webpart-workbench\/dist\/assets\/server-icon.png" \/>\r\n\r\n <script type="text\/javascript" src="https:\/\/localhost:4321\/temp\/manifests.js"><\/script>\r\n <script type="text\/javascript" src="https:\/\/localhost:4321\/node_modules\/@microsoft\/sp-loader\/dist\/sp-loader_en-us.js"><\/script>\r\n <script type="text\/javascript" src="https:\/\/localhost:4321\/node_modules\/@microsoft\/sp-webpart-workbench\/lib\/api\/workbenchInit.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <script type="text\/javascript">\r\n window.spModuleLoader.start(window.preloadedData);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Conclusi\u00f3n<\/strong><\/h1>\n