Usando AJAX con Typo3

Con el avance de las nuevas tecnologías seguro que habra mucha gente que este buscando integrar esas nuevas tecnologías con los -también famosos- CMS, en este caso hablo de Typo3 y de AJAX, con lo que se pueden conseguir cosas muy interesantes, como por ejemplo: cargar galerías de imágenes, mostrar secciones de páginas en base a ciertas peticiones, etc.

Pues bien, existen unos cuantos plug-ins (extensiones) de Typo3 que permiten utilizar AJAX en el front-end, pero en muchos casos -casi siempre en mi caso- esas extensiones no son capaces de hacer las cosas que se quiere que hagan, en tal caso hay que hacer extensiones propias y dicho eso voy a explicar fácilmente como integrar AJAX en nuestras extensiones.

Lo primero es hacer la extensión y para esto hay otra extensión que crea una extensión base, es decir una colección de archivos que luego podemos extender para que la funcion se comporte como queremos que lo haga. La extensión se llama Kickstarter y asumo que para continuar con estas instrucciónes se tiene un control de dicha extensión (no voy a tocar nada de eso aquí). Aquí hay un tutorial básico de la extensión Kickstarter.

La lógica detrás de poder utilizar AJAX es bastante simple: desde la versión 4.0 de Typo3 se ha definido un nuevo método para poder hacer peticiones y poder limitar la respuesta de Typo3, es decir se puede hacer una petición a una URL determinada y definir que es lo que se carga, evitando sobrecargas en el servidor -y de ancho de banda- al cargar extensiones, modulos, librerías, sistemas de caché, etc, etc. que no se necesitan para el caso de utilizar AJAX. Esta definición se llama eID y para poder utilizarla hay que definirla en la configuración de nuestra extensión.

Entonces, para definir nuestra extensión abrimos el archivo ext_localconf.php -que está en el directorio donde tenemos la extensión que vamos a utilizar-

Y al final del archivo (antes de ?>) agregamos esto:

  1. $TYPO3_CONF_VARS['FE']['eID_include']['tx_mipalabra'] = 'EXT:mi_extension/pi1/procesador_eventos.php';

En donde tx_mipalabra será la clave registrada con la que podamos acceder a nuestro código para peticiones.

Con esto hecho podremos acceder a http://miservidor.com/index.php?eID=tx_mipalabra y Typo3 pasará la petición al archivo que vaya a procesar la petición, en este caso procesador_eventos.php

Lo siguiente que tenemos que hacer es definir los metodos que vayamos a utilizar dentro del procesador_eventos.php y listo, básicamente eso es todo, podemos entonces hacer peticiones a través de AJAX enviando los parametros que queramos, por ejemplo:

  1. xobject = false;
  2. if(window.XMLHttpRequest)
  3.   {
  4.     try { xobject = new XMLHttpRequest(); }
  5.     catch(e) { xobject = false; }
  6.   }
  7. else if(window.ActiveXObject)
  8.   {
  9.     try { xobject = new ActiveXObject("Msxml2.XMLHTTP"); }
  10.     catch(e)
  11.       {
  12.         try { xobject = new ActiveXObject("Microsoft.XMLHTTP"); }
  13.         catch(e) { xobject = false; }
  14.       }
  15.   }
  16.  
  17. if(xobject)
  18.   {
  19.     xobject.onreadystatechange = function() { AJAX_DATA.completeProcess(action); }
  20.  
  21.     xobject.open("POST", "http://miservidor.com/index.php?eID=tx_mipalabra&get=usuario&uid=1000", sync);
  22.     xobject.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  23.     xobject.send(AJAX_DATA.makeDataString(action, params));
  24.   }
  25. else
  26.   alert('Error code: 01');

Aunque el código anterior no está completo (falta el resto del proceso AJAX) es un claro ejemplo de como hacer la petición que habremos de procesar en nuestro archivo para este fin.

Eso es todo, ya hemos preparado nuestra extensión y nuestra instalación de Typo3 para que pueda manejar AJAX, esto es bastante útil a la hora de tener por ejemplo un calendario de eventos sin tener que recargar la página cada vez al seleccionar una fecha determinada.

Créditos en la página (Typo3)

Si, en una página hecha con Typo3, se ve el código fuente (click derecho -> Ver código fuente) casi en la mayoría de los casos uno se encuentra con algo parecido a esto:

<!–
  1.   This website is powered by TYPO3 – inspiring people to share!
  2.   TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
  3.   TYPO3 is copyright 1998-2008 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
  4.   Information and contribution at http://typo3.com/ and http://typo3.org/
  5. –>

Supongamos que queremos cambiar este mensaje o agregar nuestra pequeña nota personal, por ejemplo para que el resultado sea algo así:

<!–
  1.   Stefan Aichholzer S.
  2.   Soluciones para Typo3
  3.   Contenido CC (GNU/GPL)
  4.  
  5.   This website is powered by TYPO3 – inspiring people to share!
  6.   TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
  7.   TYPO3 is copyright 1998-2008 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
  8.   Information and contribution at http://typo3.com/ and http://typo3.org/
  9. –>

Pues se puede hacer de dos maneras, la primera es cambiando una de las clases del nucleo de Typo3 (y no voy a explicar este método, ya que no me parece correcto) y la segunda es agragando un par de líneas en la zona “Setup” de nuestra plantilla raíz:

page.config {
  1. headerComment (
  2.   Stefan Aichholzer S.
  3.   Soluciones para Typo3
  4.   Contenido CC (GNU/GPL)
  5.  )
  6. }

Listo, con esto añadimos nuestra nota personal al mensaje que por defecto muestra Typo3 y que no debería cambiarse por cuestiones de ética (pienso yo, al menos). Aquí se puede agregar todo lo que se quiera, no hay límite de palabras.

Migas de pan (Breadcrumb) con Typo3

Supongamos que tenemos nuestro sitio con varias páginas que forman un menú y dentro de dichas páginas hay más páginas (sub-páginas) y así por muchos niveles. Resulta que cuanto navegamos en muchos sitios hay eso que se llama “migas de pan” o “breadcrumb” por su nombre en Inglés y que básicamente es una ruta desde la página raíz hasta la página en la que estamos en determinado momento.

Pues bien, utilizando TypoScript podemos hacer esto fácilmente en Typo3 y a continuación el código para hacerlo.

lib.breadcrumb=COA
  1. lib.breadcrumb {
  2.  10 = HMENU
  3.  10 {
  4.   special = rootline
  5.   special.range = 0
  6.   includeNotInMenu = 1
  7.    1 = TMENU
  8.    1 {
  9.       noBlur = 1
  10.       wrap = |
  11.       NO.linkWrap = | / |*||*| |
  12.       NO.stdWrap.field = title
  13.       NO.ATagTitle.field = title
  14.       CUR = 1
  15.       CUR.allWrap = <span id="colored">|</span>
  16.      CUR.doNotLinkIt = 1
  17.    }
  18.   }
  19. }

Si por ejemplo ponemos esto en la sección “Setup” de la plantilla principal, la que tengamos por raíz, estas migas de pan se podrán utilizar automáticamente y desde cualquier página que esté dentro del árbol.

Lo ideal sería tener un contenedor <div></div> con un “id” único al que le podamos insertar el contenido generado por este script, que lo que hace es básicamente un menú con las páginas que le indicamos y únicamente hasta donde le hemos indicado. Esto es muy fácil si se utiliza el plug-in “automaketemplate”, por ejemplo:

temp.mainTemplate = TEMPLATE
  1. temp.mainTemplate {
  2. template =< plugin.tx_automaketemplate_pi1
  3. workOnSubpart = PLANTILLA_BODY
  4.   subparts.breadcrumb < lib.breadcrumb
  5. }

Con esto hemos asignado las “migas de pan” a un contenedor con id=breadcrumb (<div id=”bredcrumb”> &nbsp; </div>) Hay que notar que con este segmento de TypoScript le he indicado a Typo3 que quiero que trabaje sobre una “sub-parte” del contenido etiquetado con PLANTILLA_BODY, esto es lo primero que se debe hacer para que poder “trabajar” y asignar contenidos a contenedores dentro de la plantilla.

Con esto marcamos en donde queremos trabajar:

plugin.tx_automaketemplate_pi1 {
  1.   content = FILE
  2.   content.file = fileadmin/plantilla/index.html
  3.  
  4.   elements {
  5.     BODY.all = 1
  6.     BODY.all.subpartMarker = PLANTILLA_BODY
  7.   }
  8. }

Como se puede ver aquí le indico que al cuerpo de mi plantilla lo identifique con PLANTILLA_BODY y de este modo se puede “trabajar” sobre dicha zona con el resto del TypoScript.

Mi opinión: Typo3

Muchos habrán escuchado hablar de los famosos CMS (Content Management System) que están por todas partes hoy en día.

Si la cosa sigue así en un futuro no habrá más que unos cuantos desarrollando CMS’es y unos pocos utilizandolos para implementar sus sitios web.

Lo dicho: Typo3. Luego de muchos debates con un cliente “grande” y de escuchar sus repetidas opiniones a cerca de lo potente que es un CMS (cuando en realidad no tienen idea de nada) y de lo bien que les viene utilizar uno; me he puesto a investigar un poco.

Por ahora ya tengo todo el panel de administración (llevo con el un par de días) bajo la manga y la manera de hacer las cosas me parece bastante intuitiva -aunque con ciertas cosas muy mejorables- y puedo decir que es una herramienta que se parece a muchas otras. Typo3 es el CMS de elección para empresas “serias” y con proyectos “grandes” y todo esto se debe a que tiene un ventaja sobre sus competidores y es el uso de su propio pseudo-lenguaje. He de admitir que ese pseudo-lenguaje (TypoScript) es bastante potente y ofrece mucha flexibilidad a la hora de hacer ciertas cosas.

En una sola palabra: potente. Así es como describiría a Typo3, pero como todo en la vida también tiene su lado negativo y es que la documentación la tuvo que haber escrito alguien con muy pocas ganas y con el tiempo justo y digo esto porque solo de leer la documentación uno se entera de lo justo -o menos- y en la mayoría de los casos lo justo no es suficiente.

Iré, en los próximos días, investigando mucho más a fondo y por supuesto miraré el código del core de Typo3, ya que me interesaría saber cual es su lógica y sobre mis investigaciones publicaré lo que me pueda parecer interesante, todo acompañado de breves tutoriales -claro- ya que información en castellano es complicada de encontrar.