Popups elegantes en Joomla usando Mootools

Una ventana modal es el popup de la Web 2.0. Además de ser más usable y rápido, es más bonito. Joomla incorpora Mootools como framework Javascript en el core permitiendo crear popups en forma de ventana modal de una manera muy sencilla y homogénea. De hecho, cuando se programa en Joomla es recomendable usar todas las características del core Joomla para que todo quede con un “look” más consistente (Cómo usar el datepicker de Joomla).

Para poder usar los comportamientos que incorpora la librería Mootools en Joomla hay que incluir la siguiente línea de código en la primera línea del fichero index.php de tu template. Si estás desarrollando un componente, entonces añádela en el fichero view.html.php.


<?php JHTML::_( 'behavior.modal' ); ?>

JHTML en el template de Joomla
Esta línea de código genera el include de la librería Mootools y la librería Squeezebox, encargada de generar la ventana modal. Es importante usar esta función PHP ya que de esta forma te aseguras que no se cargue varias veces repetida la librería por diferentes extensiones. Una vez incluidas las librerías basta añadir la clase modal a los enlaces que queremos que generen una ventana modal. Por ejemplo:


<a class="modal" href="images/stories/imagen_grande.jpg">
    <mg src="images/stories/imagen_pequena.jpg" border="0" alt="Una imagen" />
</a>

Ventana modal en Joomla
Con el código introducido en este bloque se mostraría por pantalla la imagen pequeña, y al hacer click sobre ella aparecería una ventana modal con la imagen grande en alta resolución.

Se pueden añadir más opciones al enlace, por ejemplo:


<a class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y: 450}}" href="http://www.nosolocodigo.com"> Popup con iframe a nosolocodigo.com </a>

Ventana modal en Joomla con iframe
Con el código introducido en el bloque de arriba se mostraría una ventana modal con un iframe que puede apuntar a cualquier sitio. En este caso está apuntando a la página principal de este Nosolocodigo, pero si estás desarrollando una aplicación podría apuntar a una vista raw, o una vista html con el parámetro tmpl=component. Vamos, que puede apuntar a donde sea. Las opciones se definen en el atributo rel del enlace, creo que no hace falta más explicación.

Esto está muy bien para lanzar las ventanas desde un enlace, haciendo click sobre él, pero ¿y si queremos lanzar las ventanas usando una función Javascript? Pues entonces sigue leyendo..

En caso de que lo que se quiera sea lanzar la ventana modal desde Javascript puedes usar la siguiente función:


<a class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y: 450}}" href="http://www.nosolocodigo.com"></a>

<script>
      window.addEvent('domready', function(){ 
	   window.addEvent('load', function(){
	         SqueezeBox.fromElement($('popup'));
	   });
      });
</script>

Esta función se ejecutaría automáticamente en el evento load y provocaría que en el enlace con id popup se mostrará una ventana modal exactamente igual que si hiciéramos click sobre el enlace. Igual que se ha utilizado el evento load se podría usar cualquier otro evento.

Por último, si quieres lanzar una ventana modal instantáneamente sin haber definido previamente ningún enlace en el documento HTML, he implementado esta función que he encontrado por los foros de Joomla.org y que me funciona bastante bien. La función hay que definirla previamente para después usarla. Puedes crear un fichero Javascript y añadirlo al head del template usando el API de Joomla.


  SqueezeBox.loadModal = function(modalUrl,handler,x,y) {
       this.initialize();      
      
       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));      
      
       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);
      
   };

Una vez añadida la definición del método loadModal, para usarlo, simplemente hay que llamarlo de la siguiente forma:


window.addEvent('domready', function() {
         SqueezeBox.loadModal('http://www.nosolocodigo.com','iframe',650,450);         
 });

Como puedes ver, se puede dejar el template preparado para introducir popups tanto para imágenes como para enlaces externos/internos. Si además deseas programar extensiones en Joomla y quieres más, dispones de toda la potencia del framework Mootools para desarrollar tu aplicación.

JImageLib, nueva librería de Joomla para trabajar con imágenes

Otro de los proyectos del Google Summer of Code que se ha llevado a cabo este verano ha sido JImageLib. Se trata de una librería desarrollada por Daniel Ghilea, un estudiante de rumano de la universidad de Bucharest. La librería trabaja con GD, ImageMagic y GraphicsMagic, por lo tanto tienen que estar instalados en el equipo.

Para instalar la librería solamente hay que descargar el directorio de JImageLib y moverlo al directorio libraries/ de Joomla. Después hay que configurar el fichero config.php con algunas variables necesarias para que todo funcione bien.

Una vez instalado, para usar la librería cuando estamos programando un componente de Joomla, simplemente hay que añadir una línea de código:


jimport( 'JImageLib.JImageLib' );

La librería es realmente potente y fácil de utilizar, y puede resultar muy útil para crear thumbnails automáticamente de nuestros artículos, pasar imágenes a blanco y negro, a sepia, rotarla, redimensionar, etc.Además, la librería trabaja con caché, por lo que la performance del sitio no peligra. Se espera que se implemente en Joomla 1.6.

Vamos a ver como funciona con unos ejemplos muy sencillos.

  1. Crear un objeto nuevo y “setear” la anchura
    
    $img = new JImageLib();
    $img->setWidth(300);
    
    
  2. Cargar la imagen que se va a procesar
    
    if (! $img->load('images/joomla_logo_black.jpg')){
         print $img->getError();
         print "< br / >";    
    }
    if (! $img->setImageLib('im')){
         print $img->getError();
         print "< br / >"; 
    }
    
    
  3. Se le aplica un filtro y un efecto de flipping (vertical)
    
    if (! $img->setFilter('grayscale')){
         print $img->getError();
         print "< br / >";    
    }
    if (! $img->setFlipping('V')){
         print $img->getError();
         print "< br / >";    
    }
    
    
  4. Se le añade un prefijo e información extra
    
    if (! $img->setDirectory('images/thumbs/')){
         print $img->getError();
         print "< br / >";    
    }
    if (! $img->setUseImageSize('both')){
         print $img->getError();
         print "< br / >";    
    }
    if (! $img->setPrefix('thumb_')){
         print $img->getError();
         print "< br / >";    
    }
    
    
  5. Y se genera el thumbnail
    
    if (! $img->getThumbnail()){
        print $img->getError();
        print "< br / >";    
    } 
    
    

Como ves, la forma de manejar las imágenes desde código es muy sencilla. Para el que no sea programador, también se está desarrollando un plugin de contenido, para poder hacer uso de esta librería desde el editor WYSIWYG. Puedes descargarlo en JoomlaCode. Son dos plugins, uno de tipo system y otro de tipo content.

plugins_600x149

El plugin interpreta las etiquetas {image}, Por ejemplo:


{image 'images/joomla.jpg' width 300 sepia wm-file 'images/cancel_f2.png'  wm-position center popup greybox }

codigo_600x250

Una vez introducido el código en el editor, pulsas aplicar y…

wysiwyg_579x250

Luego, en el Front End, la imagen se enlaza con su tamaño original al hacer click, y aparece una ventana modal.

resultado_593x250

Si quieres má imformación, te recomiendo que sigas los artículos que va escribiendo Daniel Ghilea donde va contando sobre el estado de JImageLib. Realmente promete.

Trasteando con Monodevelop y Suse Linux 11.1

Después de ver que Microsoft ha publicado su framework ASP.NET MVC como software libre (bajo licencia MS-PL) y que el proyecto mono lo soporta al 100%, hoy me he puesto a trastear con monodevelop y Linux. Me he instalado la última versión de Suse Linux, la 11.1 y monodevelop, el IDE oficial del proyecto mono para Linux, y la verdad es que me ha sorprendido la facilidad de instalación y lo bien que funciona. Para instalar monodevelop en Suse Linux solo hay que hacer click en el paquete de instalación donde pone “1 click install”, y el gestor de paquetes yum hará el resto. Supongo que en el resto de distribuciones como debian y ubuntu, apt-get funcionará de una forma similar. Una vez instalado monodevelop ya se puede empezar a desarrollar en .NET, pero para desarrollar con el framework MVC se necesita la última versión de la máquina virtual de mono (2.4 en este momento, o superior). La última versión de mono se encuentra en el paquete mono_complete. Una vez instalado todo esto, solo queda instalar el plugin que permite crear proyectos MVC y que nos ayudará con el autocompletado y demás historias.

De paso que lo he instalado he grabado un video del proceso, he hecho un hola mundo muy sencillo y lo he subido a youtube. Es el primer video que grabo de mi escritorio, así que mis capacidades de edición de video no son muy grandes, jejejeje.

Para finalizar el post pongo algunos de los recursos que me he encontrado por la web sobre ASP.NET MVC en Linux.

Capítulo gratis del libro Professional ASP.NET MVC 1.0

aspnetmvc

En el blog de scottgu han puesto un capítulo libre de desacarga del libro professional ASP.NET MVC 1.0, que hace poco han sacado a la venta. En el capítulo se puede leer un tutorial astante completo para hacer una aplicación con este nuevo framework de microsoft que usa el patrón de diseño MVC.

Enlace de la descarga: http://aspnetmvcbook.s3.amazonaws.com/aspnetmvc-nerdinner_v1.pdf

Actualización:

Microsoft anuncia que va a liberar su framework ASP.NET MVC bajo licencia MS-PL, por lo que estará libre de distribución y modificación, y al mismo tiempo, Miguel de Icaza anuncia también que el framework será soportado por el proyecto mono y el IDE monodevelop.

Me parece una jugada muy acertada por parte de de Microsoft, ya que de esta forma el framework ganará más adeptos entre gente del softwarte libre y ganará cuota de utilización ya que no solo se podrá usar en servidores Windows, sino también en servidores Linux con Mono.

Utilizar el calendario que incorpora el API de Joomla

Cuando se crea un componente es muy habitual crear formularios en los que el usuario tiene que introducir fechas. Esto puede ser un problema, ya que las fechas han de ir en un formato específico para que puedan ser procesadas en el servidor (con PHP).

Joomla incorpora un datepicker (calendario) que utiliza en el backoffice. Vamos a ver como utilizar este calendario en un componente creado por nosotros.

Para implementar el calendario en la parte de backoffice simplemente hay que llamar a la función JHTML::_(‘behavior.calendar’), que se encarga de incluir los ficheros necesarios donde se haya el objeto javascript que genera el calendario. Luego hay que escribir un formulario HTML con una llamada javascript que se encargará de generar el calendario. A continuaciónse puede ver un ejemplo de calendario implementado en un componente de backoffice de Joomla.


calendar

Primero se crea el textbox y después se crea una imagen, la ruta de la imagen es la misma que se usa en los calendarios del backoffice.  En el evento click de la imagen se añade el siguiente código:

onclick="return showCalendar('fecha', '%Y-%m-%d');"

Este código es el que crea el objeto calendario y lo muestra o lo esconde según convenga. El primer parámetro es el id del textbox donde se guardará la fecha y el segungo parámetro es una cadena que indica el formato de fecha usado. En este caso, se creará una fecha del tipo 2009-02-24. Si se desea otro formato de fecha solamente hay que cambiar esta cadena , por ejemplo, %d/%m/%Y generaría 26/02/2009. El resultado de usar el calendario es el siguiente:calendario joomla

Si se usa el mismo código en el frontend no funcionará, ya que en el backoffice se carga automaticamente un fichero javascript con funciones para facilitar este tipo de tareas. Para que funcione en el frontend carga el fichero javascript “includes/js/joomla.javascript.js”, donde está definida la función showCalendar.

Como listar los directorios de un directorio con el framework de Joomla

Esta vez voy a anotar un pequeño trozo de código que me ha servido de mucho en mi último trabajo.

No es ningún secreto saber cómo se listan los directorios, pero gracias al API de de Joomla! es mucho más sencillo, además se integra con la capa FTP para solucionar problemas cuando no tengamos permisos de escritura en nuestro script.

Para listar los directorios simplemente puse en siguiente código en el fichero view.html.php de mi componente:

jimport( 'joomla.filesystem.folder' );
//Importamos los ficheros necesarios

$carpetas = JFolder::folders(JPATH_COMPONENT.DS.'miDirectorio');

//Obtenemos los directorios, el metodo folders devuelve un array con el nombre de los //directorios

if(count($carpetas > 0))
{
    foreach ($carpetas as $carpeta)
    {
	       	echo "Nombre del directorio: " . $carpeta ;
    }
}else{
	echo "No hay directorios en ".  JPATH_COMPONENT.DS.'miDirectorio';
}

Ahora veamos como hacer lo mismo con php sin usar el framework:

(código sacado de la web www.desarrolloweb.com )

$ruta = /path/a/tu/directorio
   // abrir un directorio y listarlo recursivo
   if (is_dir($ruta)) {
      if ($dh = opendir($ruta)) {
         while (($file = readdir($dh)) !== false) {
            //esta línea la utilizaríamos si queremos listar todo lo que hay en el directorio
            //mostraría tanto archivos como directorios
            //echo "Nombre de archivo: $file : Es un: " . filetype($ruta . $file);
            if (is_dir($ruta . $file) && $file!="." && $file!=".."){
               //solo si el archivo es un directorio, distinto que "." y ".."
               echo "Directorio: $ruta$file";
               listar_directorios_ruta($ruta . $file . "/");
            }
         }
      closedir($dh);
      }
   }else
      echo "No es ruta valida";
}

Como puedes ver, se comprueba manualmente si el directorio existe con la función is_dir(), esto ya lo lleva implementado el API de Joomla y no hace falta que lo volvamos a hacer si usamos el método folders.

Este es el código del método folders:

function folders($path, $filter = '.', $recurse = false, $fullpath = false, $exclude = array('.svn', 'CVS'))
	{
		// Initialize variables
		$arr = array ();

		// Check to make sure the path valid and clean
		$path = JPath::clean($path);

		// Is the path a folder?
		if (!is_dir($path)) {
			JError::raiseWarning(21, 'JFolder::folder: '.JText::_('Path is not a folder').' '.$path);
			return false;
		}

		// read the source directory
		$handle = opendir($path);
		while (($file = readdir($handle)) !== false)
		{
			$dir = $path.DS.$file;
			$isDir = is_dir($dir);
			if (($file != '.') && ($file != '..') && (!in_array($file, $exclude)) && $isDir) {
				// removes SVN directores from list
				if (preg_match("/$filter/", $file)) {
					if ($fullpath) {
						$arr[] = $dir;
					} else {
						$arr[] = $file;
					}
				}
				if ($recurse) {
					if (is_integer($recurse)) {
						$recurse--;
					}
					$arr2 = JFolder::folders($dir, $filter, $recurse, $fullpath);
					$arr = array_merge($arr, $arr2);
				}
			}
		}
		closedir($handle);

		asort($arr);
		return $arr;
	}

Como puedes comprobar se hacen todo tipo de comprobaciones y nos libra de realizarlas a mano.

Puedes ver más métodos interesantes en la documentación oficial del API de Joomla

Tutorial: Como crear módulos para Joomla! 1.5

Índice de la serie: desarrollo de extensiones con Joomla

  1. Hacer componentes en Joomla!
  1. Patrón MVC
  2. Concepto de Front-End y Back-End
  3. Primer componente MVC simple con Joomla!
  4. Segundo componente, Back-End y acceso a datos.
  5. Crear el xml del componente de joomla y generar instalable.
  • Hacer Módulos para Joomla!
  • Hacer Plugins para Joomla!
  • Aunque con las extensiones existentes de Joomla tendremos suficiente en la mayoría de los casos, hay ocasiones en que necesitamos algo concreto, como por ejemplo un módulo que muestre los usuarios registrados que cumplan años hoy o uno que muestre los artículos publicados hace un año.

    Y eso es precisamente lo que voy a hacer.

    En el siguiente tutorial vamos a crear un modulo que consulte a la base de datos y muestre el titulo de los artículos con un enlace al articulo completo.

    Hacer un módulo es mucho más sencillo que un componente.

    De hecho los módulos están pensados para mostrar datos concretos, como usuarios conectados, datos de contacto, menús etc… que en muchos casos son una simple consulta a la base de datos.

    Los módulos se encuentran situados en el directorio modules dentro del directorio de instalación de Joomla y por cada módulo hay una carpeta con nombre mod_nombredelModulo .

    Nuestro módulo se va a llamar anyo, por lo tanto la carpeta del módulo se llamará mod_anyo.

    La estructura de un módulo es muy simple, tiene un fichero php con el mismo nombre que el módulo, el cual es el punto de entrada, que tomará en control del módulo cuando este sea llamado.

    Para separar la lógica de la presentación se ha creado la clase helper, en la cual escribiremos nuestras funciones y de esta forma nuestro código quedará más ordenador y legible. La clase helper se encuentra en el fichero de nombre helper.php en la raíz del directorio del módulo.

    [Read more...]