Aprendiendo Ext JS 3

Varios idiomas en un mismo sitio Más videos

Descripción del tema

En ocasiones es necesario crear sitios o sistemas multilenguaje, en este tema se muestra como detectar el idioma del explorador usando PHP, además de permitir que el usuario pueda cambiar el idioma mediante un combo.

Material de apoyo

Es necesario descargar el material de apoyo, descomprimirlo y copiar los archivos al servidor Web que instalamos previamente en nuestra computadora, dentro de la carpeta "lenguaje" que se creó en el tema anterior. Al ejecutar el archivo "multilanguage.php" podemos ver que es exactamente el mismo ejemplo del tema anterior a diferencia de que ahora aparece un combo en la parte superior derecha con algunos idiomas definidos.

Detectando el idioma del explorador

Vamos a editar el archivo "multilanguage.php". Al inicio del archivo vamos a escribir el código necesario para detectar el idioma del explorador, esto se hace leyendo el contenido de la variable SERVER de la siguiente manera:
$lang = $_SERVER['HTTP_ACCEPT_LANGUAGE'];
Con esa instrucción tenemos en la variable "$lang" el idioma del explorador en formato es, en, it, fr, etc… pero si el explorador tiene configurado el idioma propio de un país el valor de la variable "$lang" es diferente, por ejemplo el español de México sería es_MX, el español de Chile es_CL, el de Argentina es_AR, en_UK para el inglés del Reino Unido. Lo que necesitamos hacer es extraer los primeros dos caracteres de la variable "lang" de la siguiente manera:
$lang = substr($lang,0,2);
Por último es necesario importar al HTML el fichero con el idioma adecuado, de la siguiente manera:
<script type="text/javascript" src="../ext-2.2/locale/ext-lang-<?php echo $lang; ?>-min.js"></script>
Recuerda que se tiene que importar después del archivo "ext-all.js" para que sobrescriba el idioma que Ext JS tiene por defecto, una vez guardados los cambios puedes probarlos actualizando el explorador donde está el ejemplo. En el video se muestran tres diferentes exploradores con lenguajes diferentes.

Cambiar el idioma mediante el combo

Al seleccionar un lenguaje del combo la página se recarga y envía mediante la variable "lang" el lenguaje seleccionado, para este tema no vamos a prestarle atención a cómo lo hace, más adelante explicaré como agregarle eventos a elementos del documento, por ahora enfocaré este tema solo a la detección de idiomas. Es necesario verificar si se recibe el parámetro "lang", pues éste tendrá mayor importancia ya que el usuario ha seleccionado un lenguaje mediante el combo. Si en el request viene el parámetro "lang", entonces importaremos el lenguaje de la traducción solicitada de lo contrario importaremos el idioma del explorador, esto se traduce a código PHP de la siguiente manera:
if(!isset($_GET['lang'])){
            $lang = $_SERVER['HTTP_ACCEPT_LANGUAGE'];
            //es, es_MX, en, en_UK
            $lang = substr($lang,0,2);
}else{
            //Si el usuario ha seleccionado un lenguaje del combo 
}
El siguiente paso es tomar el parámetro "lang" y validar si contiene un lenguaje válido, en este caso vamos a verificar que contenga alguno de los cinco idiomas que soportará el ejemplo, para realizar esto utilizaré un bloque switch.
$lang = $_GET['lang'];
switch($lang){
            case 'en':
            case 'es':
            case 'it':
            case 'pt':
            case 'ro':
                        break;
            default:
                        $lang = 'en';
}
Si la variable "lang" contiene en, es, ro, pt o it significa que el contenido de la variable es correcto, por lo tanto no es necesario hacer nada más, pero si no contiene ninguno de estos valores significa que hay un error y le asignamos un valor por defecto, en este caso sería inglés (en).

Conclusión

Esta actividad que acabamos de terminar es suficiente para realizar sitios multilenguaje, como puedes ver fue muy sencillo. Si tienes alguna duda o sugerencia puedes dejarla en los comentarios.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

22Comentarios

  • Avatar-8 Diego 19/06/2009

    Como hago para que en el combo aparezca por defecto el idioma del navegador y para que se mantenga ese valor cuando lo modificas? Porque cuando vos cambias de idioma el combo fijate que vuelve a decir por defecto "English".

    • Avatar-9 Crysfel 22/06/2009

      Tendrías que hacer una comparación cuando pintes el combo y si el idioma es el mismo escribes selected="selected", si necesitas mas ayuda registrate en los foros (http://foro.quizzpot.com) y con gusto te ayudaremos entre todos. saludos

      • Avatar-4 Yordany Oliva Mateo 15/07/2009

        Este Post está genial, tine todo lo que hace falta y la mejor forma de enseñar a todo aquel que quiere aprender. !!!!!!!!!!!!De veras esta genial!!!!!!!!!!

        • Avatar-4 jamesjara 03/11/2009

          creo que se refiere a cookies, usa cookies

          • Avatar-2 Lila 05/12/2009

            Queridos internautas, no me funciona este ejemplo. Me sale Error: Ext no esta definido

            • Avatar-4 Crysfel 07/12/2009

              Asegurate de haber descargado la librería de ExtJS y de tener correctamente las rutas en el HTML

              • Avatar-2 Mar 22/12/2009

                Hola No me va, creo q es pq cuando añado las dos letras del lenguaje al script donde se define el idioma &lt;script type=&quot;text/javascript&quot; src=&quot;../ext-2.2/locale/ext-lang--min.js"&gt; El trozito de código en php no va. Es más ni siquiera se colorea como código php. Alguien sabe q hago mal??? Gracias

                • Avatar-3 Erick 24/12/2009

                  Mar, este código no tiene por que tener complicaciones si lo estas guardando correctamente en todo caso trata usando algo asi: &lt;script type=&quot;text/javascript&quot; src=&quot;../ext-2.2/locale/ext-lang–-min.js”&gt;

                  • Avatar-9 Crysfel 24/12/2009

                    verifica que la ruta al javascript del lenguaje este funcionando correctamente.

                    • Avatar-11 israel 21/02/2010

                      Yo estoy trabajando con el Ext JS 3.1 y es ext-lang-es.js, esto por si alguno trabaja con esa version, buen dia

                      • Avatar-9 Lumir Olivares 05/07/2010

                        a mi me ejecuta el codigo sin errores, pero no me hace nada, es decir, aunque escojo las opciones en el Combo, nunca se hacen los cambios de idioma, no se si influta en que este usando la version 3.1.2. de Ext....les agradeceria si me pudiesen ayudar

                        • Avatar-12 Crysfel 06/07/2010

                          Para la versión 3 los archivos de las traducciones se encuentran en "src/locale". Saludos

                          • Avatar-1 Ernesto 21/07/2010

                            Agregaría lo siguiente en el combo para que quede seleccionado el idioma elegido, de lo contrario no se puede elegir el primer idioma de la lista. He reemplazado en el código los signos ? en la apertura y en el cierre del código php para que se pueda ver en el blog &lt;option value=&quot;en&quot;&gt;English &lt;option value=&quot;es&quot;&gt;Español &lt;option value=&quot;it&quot;&gt;Italiano &lt;option value=&quot;pt&quot;&gt;Português &lt;option value=&quot;ro&quot;&gt;Română (Romanian)

                            • Avatar-7 Ernesto 21/07/2010

                              Agregaría lo siguiente en el combo para que quede seleccionado el idioma elegido, de lo contrario no se puede elegir el primer idioma de la lista. \&lt;option value=&quot;en&quot;\&gt;English\ \&lt;option value=&quot;es&quot;\&gt;Español\ \&lt;option value=&quot;it&quot;\&gt;Italiano\ \&lt;option value=&quot;pt&quot;\&gt;Português\ \&lt;option value=&quot;ro&quot;\&gt;Română (Romanian)\

                              • Avatar-1 Ernesto 21/07/2010

                                Agregaría lo siguiente en el combo para que quede seleccionado el idioma elegido, de lo contrario no se puede elegir el primer idioma de la lista.

                                • Avatar-4 Ernesto 21/07/2010

                                  Agregaría lo que se ve en el link siguiente en el combo para que quede seleccionado el idioma elegido, de lo contrario no se puede elegir el primer idioma de la lista. http://pastebin.com/embed_js.php?i=DupPHiNU

                                  • Avatar-9 jose 21/07/2010

                                    hola me ocurre algo raro me aparecen dos Jcombox y solo uno de ellos me cambia los idiomas por q me sucede eso ?

                                    • Avatar-10 Carlos 02/05/2011

                                      Porque cuando ejecuto multilanguage.php en cualquier navegador me aparece como una descarga? Alguien me puede ayudar.

                                      • Avatar-4 Rolando Fernandez M 26/01/2012

                                        para que se mantenga el combo con la opción seleccionada: English English .......... ..........

                                        • Avatar-7 pedro 23/07/2014

                                          oye pero tienes que crear la misma pagina 5 veces uno por cada idioma

                                          • Avatar-10 Crysfel Villa 23/07/2014

                                            No, solo tienes que crear 5 archivos JS diferentes, en este caso usamos los que ya trae la librería de Ext e incluimos el que viene en el parámetro. Saludos

                                          • Avatar-2 Jairo Sarmiento 19/10/2019

                                            No me deja des argar el material de apoyo, amigo, quién es amable de pasarmelo?

                                            Instructor del curso

                                            Crysfel3

                                            Autor: Crysfel Villa

                                            Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                            Descarga Código Fuente Ver Demostración

                                            Regístrate a este curso

                                            Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                            Tendrás acceso a descargar los videos, códigos y material adicional.

                                            Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                            Llevarás un registro de tu avance.