Crear componente para Joomla 2.5

Si vamos a utilizar joomla 2.5, como nuestro gestor de contenidos, es esencial aprender a crear un componente. Además de extender la funcionalidad de nuestro CMS, entenderemos mejor la estructura de archivos de Joomla.

Para el primer componente, vamos a ver un ejemplo de un “hola mundo”, que no requiere configuración en el backend de joomla. Únicamente mostrará el texto “hola mundo” en nuestro sitio web. Pese a ser un componente muy sencillo y evidentemente nada funcional, nos va a capacitar para crear una estructura básica que podemos ir extendiendo, conforme nuestros conocimientos nos permitan.

Joomla utiliza MVC cómo patrón por defecto para el diseño de nuestros componentes. Esto no es obligatorio realizarlo así; podemos crear el componente cómo mejor nos parezca. De todas formas, lo más recomendable es utilizar el mismo sistema que utiliza joomla para los componentes propios del sistema. Así nos vamos acostumbrando a su manera de realizar las cosas y nos será más sencillo entender otros componentes.

Para poderme explicar mejor, voy a mostrar una imagen con los archivos necesarios para crear un componente en joomla 2.5.

Archivos componente joomla

Esta es la estructura necesaria mínima para crear nuestro componente. En el primer nivel, sólo tenemos tres archivos y dos carpetas. Voy a explicar las utilidad de cada uno de ellos.

Configuración del componente – holamundo.xml

Al igual que en las plantillas y los módulos, este es el archivo encargado de indicar a joomla los datos generales del autor, y los archivos que componen el componente.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install SYSTEM "http://dev.joomla.org/xml/1.5/component-install.dtd">
<install type="component" version="2.5.0">
      <name>holamundo</name>
      <creationDate>Didiembre 2012</creationDate>
      <author>Mikel Garcia</author>
      <copyright>Copyright Info</copyright>
      <license>License Info</license>
      <version>1.0</version>
      <description>Componente Hola Mundo</description>
      <files>                                
            <filename>holamundo.php</filename>
            <filename>controller.php</filename>
            <folder>views</folder>
      </files>
      <administration>
            <menu>HolaMundo</menu>
            <files folder="BackEnd">
                  <filename component="admin.holamundo.php">admin.holamundo.php</filename>
                  <filename>controller.php</filename>
                  <folder>views</folder>
            </files>
      </administration>
</install>

A diferencia de los módulos, en este archivo vemos una sección más, denominada “administration”. A su vez, ésta se descompone en otras dos subsecciones:

  1. Menu: Es el texto que aparecerá en el menú “componentes” de nuestro joomla. Realmente es el nombre de una entrada en uno de los archivos de idioma del componente, pero no vamos a liarnos ahora con esto. Además al realizar click en este menú, seremos redirigidos a la parte backend de nuestro componente.
  2. Files: Le indicamos a joomla, cual es la carpeta que contiene la parte de administración de nuestro componente; en este caso “BackEnd”. Y le indicamos los archivos y carpetas que la componen, además de cual es el punto de entrada a nuestro componente en la zona de administración.

Punto de entrada al componente – holamundo.php

Este es el archivo que se ejecuta en primer lugar cuando alguien quiere acceder a nuestro componente en el sitio web. Si nos fijamos en el código, únicamente creamos una instancia de nuestro controlador, y ejecutamos la acción indicada. Como en este caso no se indica ninguna acción, el componente llamará a la vista por defecto.

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
require_once( JPATH_COMPONENT.DS.'controller.php' );
$controller   = new HolaMundoController( );
$controller->execute( JRequest::getVar( 'task' ) );
$controller->redirect();

Controlador del componente – controller.php

No voy a explicar en que consiste el patrón MVC. Para ello hay cientos de manuales en internet. Además nuestro controlador es muy sencillo. De hecho, no hemos definido ninguna acción en él. Únicamente, nuestro controlador va a ejecutar el método “display”, que llama al método omónimo de su padre.

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller');
class HolaMundoController extends JController
{
    function display($cachable = false, $urlparams = false){
        parent::display();
    }

}

Lo único especial que hemos hecho en este archivo es importar las clases de controladores de Joomla, y heredar de JController.

La vista del componente – Carpeta “views”

Si nos fijamos en la carpeta “views”, vemos que en su interior hay otra carpeta llamada “holamundo”. Por la convención de joomla en nomenclatura, esta será la vista por defecto de nuestro componente.

Si queremos añadir nuevas vistas a nuestro componente, tenemos que crear más carpetas en este directorio.

La vista, se descompone a su vez en dos partes: el “controlador de la vista” y los “layouts”.

Controlador de la vista – view.html.php

Joomla utiliza un sistema que podriamos denominar de “doble controlador”. Además de el o los controladores principales, cada vista dispone de su propio “controlador”. Se encarga de cojer los datos del modelo y pasarselos a los layouts, elegir el layout, etc…

<?php
defined( '_JEXEC') or die( 'Restricted access');
jimport( 'joomla.application.component.view');
class HolaMundoViewHolaMundo extends JView
{
    function display($tpl = null){
        parent::display($tpl);
    }

}

Si nos fijamos en el código utilizado, también es un archivo muy sencillo. Importamos las clases de vistas del sistema, y heredamos de JView. Despues únicamente sobre escribimos el método “display”, y como no realizamos ninguna acción más, llamamos al metodo padre, pasandole el layout que quemos mostrar. Al no pasar ninguno, éste elegirá el “default.php”

Conviene destacar la nomenclatura utilizada para llamar a la clase de nuestro archivo. El nombre “HolaMundoViewHolaMundo” no es casual. De hecho se descompone en dos partes, separadas por la palabra “view”.

  1. El primer “HolaMundo” es el nombre de nuestro controlador. Debe llamarse exactamente igual.
  2. El segundo “HolaMundo” es el nombre de nuestra vista. Si nos fijamos, coincide con el nombre de la carpeta dende está albergada.

Template de nuestra vista – Carpeta “tmpl”

En esta carpeta hay otros dos archivos en nuestro caso. Pero si nuestro componente tuviese más layouts, aquí debería haber un archivo más por cada layout.

El archivo “default.php” es el que contiene el html que finalmente será mostrado. Como podemos ver sólo contiene la frase “Hola mundo”.

Por otro lado el archivo “default.xml”, le indica al gestor de menús de nuestro joomla, que puede utilizar esta vista como una vista enlazable desde el menú de nuestro sitio web.

Administración del componente

La parte BackEnd de nuestro componente en joomla 2.5, funciona exactamente igual que la parte frontal. Por lo que no creeo que necesite más explicación. Lo único, nos fijamos que sus archivos en vez de alojarse en la carpeta “components”, se copian a la carpeta “administrator/components”.

Espero que esta explicación te sirva para poder crear un componente para joomla 2.5. Hemos visto la estructura más básica necesaria, que me parece lo más importante. Después poco a poco, ir conociendo más a fondo como poder crear un componente joomla más funcional. Por último dejo un enlace desde donde poder descargar nuestro componente: componente para joomla 2.5.

Esta entrada fue publicada en Componentes. Guarda el enlace permanente.

11 respuestas a Crear componente para Joomla 2.5

  1. omar alejadro dijo:

    Muy interesante y muchas gracias por el aporte. Esta Estructura es compatible con Joomla 3.0?

  2. todojoomla dijo:

    La verdad todabía no me he metido en serio con joomla 3.0 asi que no te lo puedo asegurar. De todas formas mucho tendría que cambiar la estructura de joomla para no ser compatible. Puede que haya pequeños cambios, como hubo de la 1.5 a la 2.5. Por ejemplo, los parámetros. Pero la estructura seguro se mantendrá invariable.

  3. Carlos Aguirre dijo:

    Hola estimado.
    Muy interesante tu artículo. Ya que tenemos la base para la creacion del componente me gustaria si puedes ampliarlo con un ejemplo mas practico, porque aun me quedan dudas donde poner las acciones que necesito. Mas explicitamente, quiero escribir un componente que se conecte con otra base de datos en el servidor, sea capaz de generar vistas de las tablas, introducir nuevos registros y modificar los existentes.
    Muchas gracias!

  4. Frank dijo:

    Gracias por el artículo, muy ilustrativo!.
    Tengo una duda: para poder reescribir las vistas desde el template hay que añadir código en el controlador de la vista o joomla! lo gestiona de forma autónoma. Estoy intentando reescribir la vista de un componente propio y no hay manera….
    Gracias!

    • todojoomla dijo:

      Joomla gestiona eso automáticamente gracias a su diseño MVC. Primero busca la vista dentro de tu template. Si no la encuentra, la busca en su localización natural dentro del componente.

  5. jcarper dijo:

    Excelente artículo, tal vez pudieras ampliar tu ejemplo haciéndolo mas interesante utilizando la base de datos de joomla para manipular la información.

  6. Vaquero dijo:

    Muy bueno. Podrías hacer un tutorial de componente y modulo para joomla 3 ?

    • Mikel dijo:

      Gracias por el comentario. Actualmente tengo una carga de trabajo bastante importante y no tengo mucho tiempo para dedicarle al Blog. De todas formas no puede diferir demasiado de una versión a otra. De hecho creo que con heredar de la clase adecuada (en la versión 3 cambia), sería suficiente…

  7. Jaime dijo:

    Muy bueno el aporte, gracias! Pero instalo el ejemplo y al darle al menú Extensiones->HolaMundo me sale una página en blanco. Me parece que no debe ser así, debería de salirme algo como “Éste componente no requiere configuración” o algo así ¿no?
    Disculpen mi ignorancia, soy nuevo en esto.
    Saludos.

    • Mikel dijo:

      Efectivamente debería aparecer la frase que comentas. Tal vez haya cometido algún error (no recuerdo ahora), pero deberías estar en posición de poder resolverlo ;)

      Un saludo

  8. Aquiro Quint dijo:

    Hola; me gusto el aticulo en este momento necesito modificar un componente no crearlo asi que si me peudes ayudar seria fabuloso. como hago para contactarte y hablamos en detalle

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s