Tutorial: Como crear un componente para Joomla! III

Frameworks, Joomla

Índice de la serie: desarrollo de extensiones con Joomla

Hacer componentes en Joomla!

Hacer Módulos para Joomla!
Hacer Plugins para Joomla!

En los anteriores posts he hablado sobre el patrón MVC y sobre el concepto de front-end y back-end en Joomla!. Una vez entendido se puede empezar a programar un componente MVC en condiciones.

Iniciación: Construir un componente simple en Joomla! 1.5 Usando el patrón MVC.

Siguiendo el patrón MVC, vamos a crear un componente simple para joomla 1.5 al que llamaremos prueba. El objetivo de esta primera toma de contacto es entender la metodología de trabajo para crear el componente de joomla! 1.5.

Lo primero que haremos será ir a la carpeta principal de Joomla en nuestro servidor web. Dentro de esa carpeta localizar el directorio components .
Observa que dentro del directorio existen otros directorios que empiezan por com_xxxx . Esta es la primera norma que pone Joomla!: los componentes se deben de ubicar en un directorio cuyo nombre empieze por com_ seguido del nombre del componente, por ejemplo para el componente prueba seria com_prueba (este aspecto es similar a la parte de módulos que hemos visto anteriormente)

Por lo tanto creamos un directorio dentro del directorio components y lo llamamos com_prueba. Cuando llamemos a nuestro componente, lo primero que hace Joomla es buscar el archivo php que hay dentro con el mismo nombre que el componente y ejecutarlo. Este es el punto de entrada del componente. Creamos el fichero prueba.php dentro del directorio y de momento lo dejamos en blanco. Por ahora solo estamos creando la estructura del componente. Lo siguiente es crear el archivo controller.php, y de momento también lo dejaremos en blanco. Ahora necesitamos crear los directorios en los que ubicaremos nuestro Modelo y nuestra Vista.

Crea un directorio con nombre models y otro con nombre views.

Dentro del directorio views, hay que crear un directorio por cada vista y el directorio tiene que tener el nombre de la vista; crea el directorio prueba dentro del directorio views.

Dentro del directorio views/prueba crea el directorio tmpl , aquí es donde se guardarán los layouts de la vista. El layout es el fichero final que se mostrará por el navegador, más adelante explicaré esto.

Crea el fichero views/prueba/view.html.php , este fichero también es necesario. Ahora crea el fichero prueba.php dentro de models.

Ya tienes la estructura básica del componente, aunque aún no hemos introducido código.

Como podrás imaginar el modelo del componente irá dentro de la carpeta models , las vistas se ubicaran dentro del directorio views, y el controlador en el archivo controller.php .

Joomla! 1.5 sabe qué componente tiene que cargar porque busca en la query string de la petición el parámetro “option”, del cual obtiene el nombre del componente a cargar. Es decir, nosotros para llamar a nuestro componente prueba, introduciremos en joomla la URL acabada con index.php?option=com_prueba. Esto muestra la pagina principal de nuestro componente, que por defecto carga la vista con el mismo nombre del componente, es decir, la vista con nombre «prueba».

Cuando se carga el componente, se ejecuta el punto de entrada a este, prueba.php, y en el punto de entrada será donde nosotros crearemos una instancia de nuestro componente.

Introduce el siguiente código en el punto de entrada de tu componente:

 
defined( '_JEXEC' ) or die( 'Restricted access' ); 
require_once( JPATH_COMPONENT.DS.'controller.php' );
 
if($controller = JRequest::getWord('controller')) {
    $path = JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php';
    if (file_exists($path)) {
        require_once $path;
    } else {
        $controller = '';
    }
}
 
$classname    = 'pruebaController'.$controller;
$controller   = new $classname( );
 
$controller->execute( JRequest::getVar( 'task' ) );
 
$controller->redirect();

Vamos a comentar el siguiente codigo paso a paso:

La primera línea comprueba si esta definida la variable «_JEXEC», y si no esta definida se muestra un mensaje de error por pantalla mediante la función “die”. Esto es una medida de seguridad que incluye el marco de trabajo Joomla! y que es recomendable usar en todos nuestros archivos .php que tengamos en el sitio, y que evitara que la gente acceda a las paginas directamente sin hacer antes las comprobaciones de seguridad que lleva incluida Joomla!

Seguidamente se importa el fichero controller.php donde crearemos nuestra clase que contendrá el controlador.

JPATH_COMPONENT y DS son constantes que define el marco de trabajo de Joomla! y que contienen el path al componente en el sistema y el separador de directorios adecuado para el sistema que se este utilizando, «\» para Windows y «/» para sistemas Unix. Utilizar estas constantes nos facilitara el trabajo más adelante y hará nuestras aplicaciones portables e independientes de la plataforma donde se estén utilizando.

Después de importar el controlador, se comprueba si existe el parámetro «controller» en la query string, y si existe establece la variable path a JPATH_COMPONENT/controllers/$controller.php, para luego hacer un require_once de path, e importar el controlador que se especifica en la petición y que se sitúa en la carpeta controllers .

Nosotros no hemos creado la carpeta controllers, por que de momento solo crearemos un controlador, pero también se pueden crear varios controladores y se instanciará uno u otro según el parámetro controller que se establezca en la query string.

Después de importar el fichero correspondiente a nuestro controlador, lo instanciamos y ejecutamos el método execute del controlador, y le pasamos como parámetro un string que contiene el valor del parámetro task que hayamos establecido en la query string.

Después de esto se ejecuta el metodo redirect() del controlador, que redigirá el flujo del programa a la vista adecuada.

Parece complicado, pero no lo es tanto simplemente recuerda:

Se comprueba si viene un parámetro en la query string que establezca un controlador, y si viene se importa el fichero con el controlador.
Se instancia el controlador.
Se ejecuta el método execute del controlador.
Se ejecuta el método redirect del controlador.

Después de esto, lógicamente, tendremos que incluir el código del controlador que acabamos de instanciar.

Vamos al fichero controller.php y copiamos el siguiente codigo:

defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller');
	 
class pruebaController extends JController
{	
	function display()
	{	
		parent::display();
	}
}

Esta vez lo único que hemos hecho es crear la clase que hará la función de controlador, y es obligatorio que herede de JController.Hemos sobrescrito el metodo display, pero lo único que hacemos es ejecutar el metodo display de la clase padre, es decir, que básicamente no hacemos nada.

En un componente más complejo, antes de ejecutar parent::display(); incluiríamos lógica de negocio en la aplicación, con acceso a datos , etc..

El controlador da paso a la vista correspondiente, que en este caso es la que se llame prueba.

Se le puede especificar la vista que se quiere ver pasándole a la petición un parámetro en la query string , es decir, si en vez de ver la vista por defecto quieres que el controlador redirija a una vista con nombre «noticias», haremos una petición como la siguiente : index.php?option=com_prueba&view=noticias.

Lo mismo se puede hacer con el parámetro controller, pero en ese caso lo que haría sería instanciar el controlador con el nombre especificado en lugar de el controlador por defecto que se instancia.

Después de crear nuestro controlador, vamos a crear nuestra vista.

Vamos al fichero view.html.php en el directorio views/prueba y copiamos el siguiente código:

    defined( '_JEXEC') or die( 'Restricted access');
    jimport( 'joomla.application.component.view');
 
    class pruebaViewprueba extends JView
    {
	    function display($tpl = null)
	    {
		$model =& $this->getModel();
		$mensaje = $model->getMensaje();
		$this->assignRef('mensaje',$mensaje);
 
		parent::display($tpl);
	    }
 
    }

Observa la definición de la clase. Como puedes observar tiene un nombre un poco peculiar, este nombre no se lo he puesto así por que he querido, sino que he seguido una norma que establece el marco de trabajo Joomla!, y que consiste en poner primero el nombre del componente que lo llama, seguido de view y seguido del nombre de la vista:

NombreComponenteViewNombreVista

Esta norma es la que se sigue también para el modelo.

Lo que vamos a hacer en este caso es sobrescribir el método display y utilizar assignRef para crear referencias que utilizará el «layout».

La primera línea del método display obtiene el modelo, Joomla busca un modelo con nombre PruebaModelPrueba debido a que no se le pasa ningún parámetro a la función getModel() y lo instancia. Si le hubiéramos pasado el nombre de algún modelo como parámetro, nos hubiera devuelto el modelo especificado.

Una vez tenemos el modelo ejecutamos el método getMensaje de este, que devuelve un string. El string se le pasa al layout por referencia mediante assignRef.

Finalmente se ejecuta el método display de la clase padre, al cual se le puede pasar como parámetro el nombre del layout que se quiere visualizar, en nuestro caso no le pasaremos ninguno y visualizará el layout con nombre default.php .

Crea el fichero views/prueba/tmpl/default.php . Este será el layout que se visualizara por defecto en nuestra vista. Añade el siguiente código:

<h1> <?php  echo $this->mensaje ?> </h1>

Observa que recogemos lareferencia que hemos asignado antes mediante asignRef() simplemente como si fuera una variable local del script php. Yo he puesto este código muy simple, pero tu puedes poner todo el código html que se te ocurra.

Solo nos queda preparar el modelo e implementar el método getMensaje() que hemos usado antes en la vista,

Ves a la carpeta modelsy en el fichero prueba.php escribe el siguiente codigo :


defined('_JEXEC') or die("Invalid access");
jimport('joomla.application.component.model');
 
class pruebaModelprueba extends JModel
{
 
	function getMensaje(){
		return "Hola, soy un valor devuelto por el modelo";
	}
}

El código habla por si solo, ten en cuenta que yo he devuelto una cadena de texto por simplicidad, pero en una aplicación más compleja nos se devolvería una cadena obtenida de una base de datos o un resultSet, p.e.

Ya está finalizada la creación del componente. Para llamarlo tendremos que pasarle en la url como argumento el nombre del componente, y Joomla lo mostrará por pantalla. Como es lógico, Joomla sólo podrá mostrar un componente simultáneamente por pantalla.

Así quedaría la estructura de directorios para la parte de front-end de los componentes de Joomla!:

En el caso del componente que acabo de diseñar, después de introducir en el navegador la dirección http://localhost/sitioJoomla/index.php?option=com_prueba , debería mostrar, si todo ha ido bien : «Hola soy un valor que ha devuelto el modelo».

He explicado cómo hacer la parte de front-end de un componente de Joomla! La parte de back-end se desarrolla de una forma similar, pero bajo la carpeta administrator/components del sistema de directorios de Joomla!, más adelante lo explicaré, así como los metodos mas importantes de acceso a datos que trae el API de Joomla!, que nos ahorrarán mucho tiempo y nos permitrán crear componentes mas seguros.

Descargarse los ficheros del componente

Saludos.