Get it on Google Play

Desarrollo de themes Liferay: Selector de idioma

11-09-2017
 
Liferay language selector

Liferay language selector

En Liferay la manera de poner el selector de idioma en el theme es incrustando el portlet de selector de idioma. Pero que pasa cuando no queremos ninguno de los formatos que nos ofrece este portlet? Que pasa si queremos un formato como el de la imagen que ilustra este post o un desplegable.

En el mundo de los portales corporativos existe un sinfín de formatos para mostrar al usuario el desplegable de idioma: Con banderas, con texto en el idioma del usuario, con texto en el idioma del idioma mostrado, con diminutivos(ES, EN, CAT, …), etc.

Para crear el selector de idioma a nuestro gusto solo tenemos que usar los objetos ‘languageUtil'(Para obtener el listado de idiomas del site) y ‘themeDisplay'(Para obtener el idioma actual). Vamos a ver un ejemplo con FreeMarker’:

<!-- Caja con el idioma actual -->
<div>
	<#assign lang = themeDisplay.getLocale()>
	<#assign desc = themeDisplay.getLocale().getDisplayLanguage( themeDisplay.getLocale() )?cap_first>

	<a href="#">
		<!-- Bandera del idioma -->	
		<svg class="lexicon-icon lexicon-icon-${lang.toString()?lower_case?replace('_','-')}" focusable="false" role="img" title="" message="${desc}" ><use data-href="${themeDisplay.getPathThemeImages()}/lexicon/icons.svg#${lang.toString()?lower_case?replace('_','-')}" /></svg>

		<!-- Texto en el própio idioma -->
		<span class='langtext'>${desc}</span>

		<!-- Flecha para desplegar el idioma -->
		<svg class='lexicon-icon'><use xlink:href='${themeDisplay.getPathThemeImages()}/lexicon/icons.svg#angle-down' /></svg>
	</a>
</div>

<!-- Desplegable de idiomas -->
<div class='langDropdown'>
	<!-- Lista de idiomas en el portal -->
	<#list languageUtil.getAvailableLocales( themeDisplay.getScopeGroupId() ) as lang>
		<!-- El idioma actual no se muestra -->
		<#if lang.toString()!=themeDisplay.getLocale().toString()>
			<#assign desc =lang.getDisplayLanguage( lang )?cap_first>

			<div class='langDropdownLang'>
				<a href='/c/portal/update_language?p_l_id=20146&redirect=%2F%3Fp_p_id%3Dcom_liferay_site_admin_web_portlet_SiteSettingsPortlet&languageId=${lang.toString()}'>
					<!-- Bandera del idioma -->	
					<svg class="lexicon-icon lexicon-icon-${lang.toString()?lower_case?replace('_','-')}" focusable="false" role="img" title="" message="${desc}" ><use data-href="${themeDisplay.getPathThemeImages()}/lexicon/icons.svg#${lang.toString()?lower_case?replace('_','-')}" /></svg>

					<!-- Texto en el própio idioma -->
					<span class='langtext'>${desc}</span>
				</a>
			</div>
		</#if>
	</#list>
</div>

Os dejo el código comentado, creo que se explica por si solo. El código CSS y Javascript para hacer funcionar esto os lo dejo a vosotros. Espero que os resulte de utilidad.

Interesado en formación Liferay?

 

Leave a Reply