<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>I18N &#8211; Oscar Blancarte &#8211; Software Architecture</title>
	<atom:link href="https://www.oscarblancarteblog.com/tag/i18n/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.oscarblancarteblog.com</link>
	<description>Software Architect &#38; FullStack developer</description>
	<lastBuildDate>Thu, 15 Dec 2016 09:00:27 +0000</lastBuildDate>
	<language>es-MX</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.5.5</generator>

<image>
	<url>https://www.oscarblancarteblog.com/wp-content/uploads/2019/03/cropped-ob-32x32.png</url>
	<title>I18N &#8211; Oscar Blancarte &#8211; Software Architecture</title>
	<link>https://www.oscarblancarteblog.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">89905023</site>	<item>
		<title>Traducir una página JSF con Java</title>
		<link>https://www.oscarblancarteblog.com/2016/12/15/traducir-una-pagina-jsf-java/</link>
					<comments>https://www.oscarblancarteblog.com/2016/12/15/traducir-una-pagina-jsf-java/#comments</comments>
		
		<dc:creator><![CDATA[oblancarte]]></dc:creator>
		<pubDate>Thu, 15 Dec 2016 09:00:27 +0000</pubDate>
				<category><![CDATA[Java]]></category>
		<category><![CDATA[I18N]]></category>
		<guid isPermaLink="false">http://www.oscarblancarteblog.com/?p=1298</guid>

					<description><![CDATA[<p>Con la penetración que está teniendo el Internet en todo el mundo, cada vez es más importante traducir nuestras páginas web, debido a que los visitantes ya pueden venir de cualquier parte del mundo, es por eso que los sitios más importantes o que buscan captar visitantes de otras regiones, permitan a sus usuarios cambiar [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://www.oscarblancarteblog.com/2016/12/15/traducir-una-pagina-jsf-java/">Traducir una página JSF con Java</a> appeared first on <a rel="nofollow" href="https://www.oscarblancarteblog.com">Oscar Blancarte - Software Architecture</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>				<img loading="lazy" class="size-thumbnail wp-image-1299 alignleft" src="http://www.oscarblancarteblog.com/wp-content/uploads/2016/12/translate-150x150.png" alt="Traducir" width="150" height="150" />Con la penetración que está teniendo el Internet en todo el mundo, cada vez es más importante traducir nuestras páginas web, debido a que los visitantes ya pueden venir de cualquier parte del mundo, es por eso que los sitios más importantes o que buscan captar visitantes de otras regiones, permitan a sus usuarios cambiar de idioma.</p>
<p>Pueda que de entrada parezca algo muy complicado o laborioso de hacer, sin embargo, es mucho más simple de lo que te puedas imaginar.</p>
<p>&nbsp;</p>
<p>Para explicar cómo funciona la Internacionalización (I18N), lo explicaremos mediante un ejemplo simple pero eficaz, implementaremos una página de Login, la cual se verá de la siguiente manera:</p>
<p>&nbsp;</p>
<p><img loading="lazy" class="aligncenter wp-image-1303 size-full" src="http://www.oscarblancarteblog.com/wp-content/uploads/2016/12/login.jpg" alt="Traducir" width="409" height="501" /></p>
<p><span id="more-1298"></span></p>
<p>El código completo lo puedes descargar de GitHub (<a href="https://github.com/oscarjb1/Blog-TranslateApp.git">https://github.com/oscarjb1/Blog-TranslateApp.git</a>).</p>
<p>&nbsp;</p>
<p>Básicamente, esta página nos permitirá cambiar entre inglés y español, seleccionando el idioma deseado en la parte superior derecha de la pantalla. Tras seleccionar el nuevo idioma, la página de recargara con el nuevo idioma.</p>
<p>&nbsp;</p>
<p>Veamos cómo es que esto es posible. Primero que nada, será necesario crear un archivo properties por cada idioma que soportará nuestra aplicación. Para nuestro ejemplo, solo requerimos de dos archivos como se ven a continuación:</p>
<p>&nbsp;</p>
<p><strong>messages.properties:</strong></p>
<p>Contiene las traducciones por default, en este caso Ingles.</p>
<p>&nbsp;</p>
<pre class="lang:css decode:true " title="messages.properties">areYou = ¿Are you Oscar?
changeUsr = change user
userName = Username
userNamePlaceholder = oscar@gmail.com
password = Password
passwordPlaceholder = Your password
remember = Remember
login = login</pre>
<p>&nbsp;</p>
<p><strong>message_es_ES.properties:</strong></p>
<p>Contiene las traducciones en español. Prestemos atención en el nombre, pues es sumamente importante, la primera parte <span class="lang:java decode:true crayon-inline ">“message”</span>  podría tener cualquier valor, pero todos los idiomas soportados deberán iniciar con el mismo nombre., sin embargo, lo que viene a continuación es sumamente importante para identificar el idioma, la segunda sección <span class="lang:java decode:true crayon-inline ">“es”</span>  indica el idioma (español) y la tercera parte <span class="lang:java decode:true crayon-inline ">“ES”</span>  el país (España).</p>
<p>&nbsp;</p>
<p>Podemos observar que las traducciones en inglés, no requieren país ni idioma, pues los hemos configurado como el idioma default, esto quiere decir que este idioma se utilizara en caso de no tener una coincidencia para el idioma del usuario.</p>
<p>&nbsp;</p>
<p>Para configurar el idioma default, es necesario definirlo en el archivo faces-config.xml y deberá quedar de la siguiente manera:</p>
<p>&nbsp;</p>
<pre class="lang:css decode:true " title="messages_es_ES.properties">areYou = ¿No eres Oscar?
changeUsr = cambia de usuario
userName = Usuario
userNamePlaceholder = oscar@gmail.com
password = Contraseña
passwordPlaceholder = Tu contraseña
remember = Recordarme
login = Entrar</pre>
<p>&nbsp;</p>
<p>Básicamente definiremos el idioma default (<span class="lang:xhtml decode:true crayon-inline ">&lt;default-locale&gt;</span> ) y los idiomas soportados (<span class="lang:xhtml decode:true crayon-inline">&lt;supported-locale&gt;</span>). La sección &lt;base-name&gt; debe de coincidir con el paquete en el que están los archivos de traducción, junto con la primera sección del nombre (messages). De esta forma JSF sabe, basado en este path + el idioma y el país, es posible determinar el archivo exacto a utilizar.  Finalmente, le indicamos que las traducciones las pase a una variable (<span class="lang:java decode:true crayon-inline ">&lt;var&gt;</span> ) llamada msg.</p>
<p>&nbsp;</p>
<p>Por otra parte, tenemos el archivo JSF donde creamos la presentación:</p>
<pre class="lang:xhtml decode:true " title="login.xhtml">&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:a="http://xmlns.jcp.org/jsf/passthrough"&gt;
    &lt;h:head&gt;
        &lt;title&gt;Facelet Title&lt;/title&gt;

    &lt;/h:head&gt;
    &lt;h:body&gt;
        &lt;h:outputStylesheet library="styles" name="styles.css"/&gt;
        &lt;section class="center"&gt;
            &lt;div class="log-container"&gt; 

                &lt;div class="log-header"&gt;
                    &lt;h:form&gt;
                        &lt;h:selectOneMenu class="frigth" value="#{loginBean.lang}"  valueChangeListener="#{loginBean.changeLang}" onchange="submit();"&gt;
                            &lt;f:selectItem itemValue="es_ES" itemLabel="Español"/&gt;
                            &lt;f:selectItem itemValue="en" itemLabel="English" /&gt;
                        &lt;/h:selectOneMenu&gt;
                    &lt;/h:form&gt;

                &lt;/div&gt;

                &lt;div class="avatar"&gt;
                    &lt;h:graphicImage library="images" name="oscar-sm.jpg"/&gt;
                    &lt;p&gt;#{msg['areYou']} &lt;a href="#"&gt;#{msg['changeUsr']}&lt;/a&gt;&lt;/p&gt;
                &lt;/div&gt;

                &lt;div class="log-form"&gt;
                    &lt;h:form&gt;
                        &lt;div class="input-group"&gt;
                            &lt;h:outputLabel value="#{msg['userName']}" for="username" /&gt;
                            &lt;h:inputText id="username"  value="#{loginBean.username}" a:placeholder="#{msg['userNamePlaceholder']}"/&gt;
                        &lt;/div&gt;
                        &lt;div class="input-group"&gt;
                            &lt;h:outputLabel value="#{msg['password']}" for="password"  /&gt;
                            &lt;h:inputText id="password"  value="#{loginBean.password}" a:placeholder="#{msg['passwordPlaceholder']}"/&gt;
                        &lt;/div&gt;
                        &lt;div class="input-group"&gt;
                            &lt;h:selectBooleanCheckbox id="remember" value="#{loginBean.remember}"/&gt;
                            &lt;h:outputLabel value="#{msg['remember']}" for="remember" /&gt;
                        &lt;/div&gt;
                        &lt;div class="input-group-r"&gt;
                            &lt;h:commandLink value="#{msg['login']}" styleClass="btn-default" action="#{loginBean.login}"/&gt;
                        &lt;/div&gt;
                    &lt;/h:form&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;
    &lt;/h:body&gt;
&lt;/html&gt;</pre>
<p>&nbsp;</p>
<p>Observemos que todos los valores traducibles están con la sintaxis <span class="lang:java decode:true crayon-inline ">#{msg[‘property’]}</span> , donde property es el nombre de la propiedad a traducir de los archivos de traducción.</p>
<p>La traducción se dispara cuando cambiamos el idioma en el componte, selectOneMenu el cual dispara un evento que es escuchado por el Bean <span class="lang:java decode:true crayon-inline ">LoginBean</span> , el cual vemos a continuación:</p>
<p>&nbsp;</p>
<pre class="lang:java decode:true " title="LoginBean.java">package com.osb.translateapp.beans;

import java.io.Serializable;
import java.util.Locale;
import java.util.logging.Logger;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import javax.faces.event.ValueChangeEvent;

/**
 * @author Oscar Blancarte
 */
@ManagedBean
@SessionScoped
public class LoginBean implements Serializable{

    private String lang;
    private String username;
    private String password;
    private boolean remember;
    
    public String getLang() {
        return lang;
    }

    public void setLang(String lang) {
        this.lang = lang;
    }

    public boolean isRemember() {
        return remember;
    }

    public void setRemember(boolean remember) {
        this.remember = remember;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public void changeLang(ValueChangeEvent e) {
        Object newValue = e.getNewValue();
        this.lang = newValue.toString();
        Logger.getAnonymousLogger().severe("new lang ==&gt; " + newValue.toString());
        UIViewRoot viewRoot = FacesContext.getCurrentInstance().getViewRoot();
        viewRoot.setLocale(new Locale(newValue.toString()));
    }

    public void login() {
    }
}</pre>
<p>&nbsp;</p>
<p>Cuando un nuevo idioma es seleccionado el método changeLang es ejecutado y el nuevo idioma es establecido mediante la línea:</p>
<p><span class="lang:java decode:true crayon-inline ">viewRoot.setLocale(new Locale(newValue.toString()));</span></p>
<p>Después de esto, la pantalla es recargada con el nuevo idioma. Es tan simple como eso.</p>
<p>&nbsp;</p>
<p><strong>NOTA:</strong> Los estilos para que la página se vea tal cuan aparece en la imagen, los puedes descargar del repositorio de GitHub que menciona anteriormente.		</p>
<p>The post <a rel="nofollow" href="https://www.oscarblancarteblog.com/2016/12/15/traducir-una-pagina-jsf-java/">Traducir una página JSF con Java</a> appeared first on <a rel="nofollow" href="https://www.oscarblancarteblog.com">Oscar Blancarte - Software Architecture</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.oscarblancarteblog.com/2016/12/15/traducir-una-pagina-jsf-java/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1298</post-id>	</item>
	</channel>
</rss>
