Sie sind auf Seite 1von 26

Desarrollando Con Joomla I

Relator: Pablo Bustamante

1.

Introduccin a Joomla

Qu es Joomla?
Joomla es un Sistema de Administracin de Contenidos (CMS en sus siglas en ingles), esta desarrollado bajo plataforma PHP en su versin 5 y su motor de Base de Datos es Mysql.

Orgenes de Joomla?
A mediados de 2005, los administradores del equipo de desarrollo de Mambo (CMS antecesor de Joomla!) decidieron limitar las condiciones de la licencia de uso de su software. Ante tal hecho, los principales desarrolladores de la organizacin estuvieron en desacuerdo y fue as que ms de 30 miembros principales del equipo renunciaron de inmediato y fundaron Joomla! una palabra de origen africano que significa todos juntos, un CMS que funcionaba con el ncleo de Mambo, pero con cambios importantes en el cdigo y lo mejor de todo es software libre. No slo los desarrolladores de Mambo migraron al nuevo proyecto; miles de colaboradores, diseadores y comunidades enteras lo respaldaron desde un principio, sobre todo al difundirse la noticia de la accin ejecutada por Mambo y sus propietarios. De esta manera el proyecto Joomla! tom an ms energa, llegando a ser la aplicacin Web que hoy conocemos, no slo con excelentes caractersticas de gestin integral, sino con un futuro bastante promisorio en el mbito de la Web 2.0. En el presente, el fenmeno Joomla! representa ms que la existencia de una aplicacin Web de avanzada. Es la demostracin palpable de la superioridad que puede alcanzar el software libre cuando est presente el esfuerzo comn, activo y organizado de una numerosa comunidad global.

2.

Estructurando el CMS

Estructura de Joomla
Mdulos Templates

Componentes

Plugins

Framework

Caractersticas del Diseo Programacin Orientada a objetos. Separacin marcada de Modelo-Vista-Controlador (MVC). Modelo Escalable, en breves paso puede ser extendido sin necesidad de tocar su framework APIs completas que permiten acceder de manera rapida a funcionalidades complejas (Feed RSS, PDF, ZIP, etc.).

2.1 APIS mas usadas


A continuacin expondre una lista con las Apis mas usadas para el desarrollo de aplicaciones: JFactory::getDBO() = Este objeto nos genera una instancia de Base de Datos, con esto podemos realizar consultas. Metodos: - setQuery: Asigna una consulta SQL al objeto. - Query: Ejecuta la consulta, en general se utiliza para comandos sql (insert, delete, update) - loadObjectList: Nos devuelve una matriz de tipo DBO con el resultado de nuestra consulta. - loadObject: Nos devuelve una matriz de tipo DBO con la primera fila de nuestra consulta - loadAssocList: Nos devuelve un Array con los valores entregados por el DBO. - loadAssoc: Nos devuelve un Array con los valores de la primera fila de nuestra consulta - loadResult: Nos entrega una columna especifica de la primera fila de nuestra consulta. Ejemplo: $db = JFactory::getDBO(); $db->setQuery(select * from #__content order by ordering); $contenidos = $db->loadObjectlist();

JFactory::getDate() = Este objeto nos genera una instancia de tipo Date. Metodos: - toFormat: Nos entrega la fecha cargada en un formato especial definido - toString: Nos devuelve la fecha en una cadena de texto. Ejemplo: $fecha =JFactory::getDate(2010-07-29)->toFormat(%d de %B de %Y); Echo $fecha; Resultado 29 de Julio de 2010 JFactory::getApplication: Esta instruccin nos instancia el objeto de tipo Sitio, esto nos permite acceder a informacin del sitio. Metodos: - getCfg: Obtiene valores desde el configuration.php del sitio - getPageTitle: Obtiene el titulo de la pagina actual - getTemplate: Obtiene el nombre de la plantilla actual - login: Ejecuta la funcin login - logout: Ejecuta la funcin logout - redirect: Redireccin a una url especificada - setPageTitle: Modifica el Titulo de la pagina actual

3.

Modelo-Vista-Controlador (MVC)
Es un estilo de arquitectura de software que separa los datos de una aplicacin, la interfaz de usuario, y la lgica de control en tres componentes distintos. El estilo de llamada y retorno MVC (segn CMU), se ve frecuentemente en aplicaciones web, donde la vista es la pgina HTML y el cdigo que provee de datos dinmicos a la pgina. El modelo es el Sistema de Gestin de Base de Datos y la Lgica de negocio, y el controlador es el responsable de recibir los eventos de entrada desde la vista.

La nueva versin 1.5 de joomla! Incluye novedades en la elaboracin de componentes, entre ellas la posibilidad de incorporar un patrn de diseo MVC , que a la larga facilitar el mantenimiento de nuestro componente, y lo har ms fcil de extender al mismo tiempo que resultar ms fcil de leer por otras personas. Lo primero que hay que tener claro es el funcionamiento del modelo MVC. Una aplicacin web basada en este patrn separa su cdigo en tres partes diferenciadas: El controlador: el controlador es el punto de entrada de la aplicacin, se mantiene a la escucha de todas las peticiones, ejecuta la lgica de la aplicacin, y muestra la vista apropiada para cada caso. El modelo : el modelo contiene todo el cdigo relacionado con el acceso a datos. Es importante que sea un cdigo lo ms genrico posible y se pueda reutilizar en otras situaciones y proyectos. Nunca incluiremos lgica en el modelo, solamente consultas a la base de datos y validaciones de entrada de datos. La vista : la vista contiene el cdigo que representar lo que nosotros veremos por pantalla, en este caso se trata de cdigo HTML.

4.

Mdulos
Los mdulos son pequeas extensiones que nos permiten entregar informacin a los usuarios sin necesidad de programacin compleja, estos en general dependen de los componentes que alimentan la informacin que estos muestran. Estos se encuentran situados en el directorio modules dentro del directorio de instalacin de Joomla y por cada mdulo hay una carpeta con nombre mod_nombredelModulo . Los mdulos en Joomla 1.5 utilizan una estructura que emula la separacin entre modelo-vistacontrolador. A continuacin vamos a crear un modulo que consulte a la base de datos y muestre el titulo de los artculos con un enlace al articulo completo. Nuestro mdulo se va a llamar anyo, por lo tanto la carpeta del mdulo se llamar mod_anyo. La estructura de un mdulo es muy simple, tiene un fichero php con el mismo nombre que el mdulo, el cual es el punto de entrada, que tomar en control del mdulo cuando este sea llamado. Para separar la lgica de la presentacin se ha creado la clase helper, en la cual escribiremos nuestras funciones y de esta forma nuestro cdigo quedar ms ordenador y legible. La clase helper se encuentra en el fichero de nombre helper.php en la raz del directorio del mdulo. Desde mod_anyo.php ejecutaremos las funciones de la clase helper simplemente llamndolos como mtodos estticos . Por ultimo, tenemos el layout, o template, que se encuentra dentro de la carpeta tmpl de nuestro mdulo , el cual puede tener cualquier nombre que se te ocurra, pero le asignaremos default.php, que es el nombre por defecto que buscara Joomla si no le indicamos lo contrario.

Para la parte de Back-End disponemos del fichero mod_anyo.xml , donde definiremos los parmetros del mdulo y mediante el cual podremos parametrizar el modulo para hacerlo mas configurable y reutilizable.

Vamos a ver el cdigo de nuestro punto de entrada:

Controlador
<?php // no acceso directo defined( '_JEXEC' ) or die( 'Restricted access' ); // incluir al helper que devolver los datos, solo una vez require_once( dirname(__FILE__).DS.'helper.php' ); $articulos = modAnyoHelper::getArticulos( $params ); require( JModuleHelper::getLayoutPath( 'mod_Anyo','default') ); ?>

La primera lnea, como siempre que hacemos una extensin para Joomla, es una lnea de comprobacin, que asegura que no se este accediendo al modulo sin estar usando Joomla. La segunda lnea importa el fichero de la clase helper, donde almacenamos nuestras funciones. En la tercera lnea, ejecutamos la funcin getArticulos() de nuestro helper que devuelve una lista de objetos con los resultados de la consulta SQL. Por ltimo, hacemos un require del layout, que en nuestro se llama default y lo hacemos usando el mtodo getLayoutPath de la clase JModuleHelper, que devuelve la ruta del layout pasndole como parmetro el nombre del mdulo y al nombre del layout. En el helper almacenamos nuestras funciones, donde accedemos a datos para recuperar la lista de artculos que se escribieron hoy hace un anyo. Vamos a ver el cdigo:

Modelo
<?php class modAnyoHelper { function getArticulos( $params ) { jimport('joomla.utilities.date'); $jnow = new JDate(); $now = $jnow->toMySQL(); $db = &JFactory::getDBO(); $consulta = "select title,id from #__content where datediff( #__content.created, '".$now."' ) = 365 limit 0,30"; $db->setQuery($consulta); $categorias = $db->loadObjectList(); return $db->loadObjectList(); } } ?>

La clase helper ha de llamarse con el nombre del modulo sin _ seguido de helper, es decir, en nuestro caso seria modanyoHelper. Mediante jimport importamos el fichero necesario para instanciar una clase de tipo JDate. Jimport admite como parmetro un string que apunte al package donde se encuentre la clase. Es un concepto similar al import de java . Los paquetes se importan segn el rbol de clases existentes en el Framework. Despus creamos el mtodo getArticulos que ser el que devuelva una lista de artculos que tengan un ao de antigedad. Utilizamos un objeto de tipo JDatabase para realizar la consulta y despus simplemente obtenemos la lista de objetos mediante el mtodo loadObjectList . El meollo de la cuestin esta en la consulta SQL, donde se utiliza la funcin datediff para consultar los artculos con una antigedad de 365 das Finalmente , en el layout, sacamos por pantalla una lista HTML con enlaces a los artculos que se escribieron hace justo 365 das:

Vista
<?php if($params->get('asignarCss')){ $css = $params->get('clase'); } ?> <ul <?php if(isset($css )){ echo 'class="'.$css.'"';} ?> > <?php foreach ($articulos as $articulo) { echo ' <li><a href="index.php?option=com_content&amp;id='.$articulo-">id.'>'. $articulo->title .'</a></li> '; } ?> </ul>

Fjate que para acceder a los parmetros del fichero mod_anyo.xml se utiliza $params->get() . Estos parmetros se definen previamente en el fichero xml que acompaa el modulo.

<?xml version="1.0" encoding="utf-8"?> <install type="module" version="1.5.0"> <name>Hoy hace un ao</name> <author>David Noguera</author> <version>1.5.0</version> <creationDate>30.07.2006</creationDate> <description>Modulo que carga los artculos de tal dia como hoy pero hace un ao</description> <authorEmail>david@nosolocodigo.com</authorEmail> <files> <filename module="mod_anyo">mod_anyo.php</filename> <filename>helper.php</filename> <filename>mod_anyo.xml</filename> <filename>tmpl/default.php</filename> <filename>tmpl/index.html</filename> </files> <params> <param name="clase" type="text" default="mod_anyo" label="Clase Css para el ul" description="La clase que se aplicara al ul" /> <param name="asignarCss" type="radio" default="1" label="Clase css" description="Determina si se debe asignar la clase css o no"> <option value="0">No</option> <option value="1">Si</option> </param> </params> </install>

10

5.

Creando mi Componente MVC

Siguiendo el patrn 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 metodologa 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 mdulos 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 tambin 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 guardarn los layouts de la vista. El layout es el fichero final que se mostrar por el navegador, ms adelante explicar esto. Crea el fichero views/prueba/view.html.php , este fichero tambin es necesario. Ahora crea el fichero prueba.php dentro de models. Ya tienes la estructura bsica del componente, aunque an no hemos introducido cdigo.

11

Como podrs 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 peticin el parmetro 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.

12

Introduce el siguiente cdigo 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 cdigo paso a paso: La primera lnea comprueba si esta definida la variable _JEXEC, y si no esta definida se muestra un mensaje de error por pantalla mediante la funcin 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 ms adelante y har nuestras aplicaciones portables e independientes de la plataforma donde se estn utilizando. Despus de importar el controlador, se comprueba si existe el parmetro 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 peticin y que se sita en la carpeta controllers . Nosotros no hemos creado la carpeta controllers, por que de momento solo crearemos un controlador, pero tambin se pueden crear varios controladores y se instanciar uno u otro segn el parmetro controller que se establezca en la query string. Despus de importar el fichero correspondiente a nuestro controlador, lo instanciamos y ejecutamos el mtodo execute del controlador, y le pasamos como parmetro un string que contiene el valor del parmetro task que hayamos establecido en la query string.

13

Despus 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 parmetro 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 mtodo execute del controlador. Se ejecuta el mtodo redirect del controlador. Despus de esto, lgicamente, tendremos que incluir el cdigo 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 funcin 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 bsicamente no hacemos nada. En un componente ms complejo, antes de ejecutar parent::display(); incluiramos lgica de negocio en la aplicacin, 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 pasndole a la peticin un parmetro 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 peticin como la siguiente : index.php? option=com_prueba&view=noticias. Lo mismo se puede hacer con el parmetro controller, pero en ese caso lo que hara sera instanciar el controlador con el nombre especificado en lugar de el controlador por defecto que se instancia. Despus de crear nuestro controlador, vamos a crear nuestra vista.

14

Vamos al fichero view.html.php en el directorio views/prueba y copiamos el siguiente cdigo: 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 definicin 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 tambin para el modelo. Lo que vamos a hacer en este caso es sobrescribir el mtodo display y utilizar assignRef para crear referencias que utilizar el layout. La primera lnea del mtodo display obtiene el modelo, Joomla busca un modelo con nombre PruebaModelPrueba debido a que no se le pasa ningn parmetro a la funcin getModel() y lo instancia. Si le hubiramos pasado el nombre de algn modelo como parmetro, nos hubiera devuelto el modelo especificado. Una vez tenemos el modelo ejecutamos el mtodo getMensaje de este, que devuelve un string. El string se le pasa al layout por referencia mediante assignRef. Finalmente se ejecuta el mtodo display de la clase padre, al cual se le puede pasar como parmetro 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. Aade el siguiente cdigo: <h1> <?php echo $this->mensaje ?> </h1> Observa que recogemos la referencia que hemos asignado antes mediante asignRef() simplemente como si fuera una variable local del script php. Yo he puesto este cdigo muy simple, pero tu puedes poner todo el cdigo html que se te ocurra. Solo nos queda preparar el modelo e implementar el mtodo getMensaje() que hemos usado antes en la vista,

15

Ves a la carpeta models y en el fichero prueba.php escribe el siguiente cdigo : 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 cdigo habla por si solo, ten en cuenta que yo he devuelto una cadena de texto por simplicidad, pero en una aplicacin ms compleja nos se devolvera una cadena obtenida de una base de datos o un resultSet, p.e. Ya est finalizada la creacin del componente. Para llamarlo tendremos que pasarle en la url como argumento el nombre del componente, y Joomla lo mostrar por pantalla. Como es lgico, Joomla slo podr mostrar un componente simultneamente por pantalla. As quedara la estructura de directorios para la parte de front-end de los componentes de Joomla!:

En el caso del componente que acabo de disear, despus de introducir en el navegador la direccin http://localhost/sitioJoomla/index.php?option=com_prueba , debera mostrar, si todo ha ido bien : Hola soy un valor que ha devuelto el modelo.

16

6.

Plugins: Extendiendo el Core Joomla


Los plugins nos permiten modificar el comportamiento estndar de Joomla!, pudiendo interceptar ciertos eventos prefijados para ejecutar nuestro cdigo antes o despus del evento. Los plugins pueden llegar a ser muy utiles y potentes. Por ejemplo, se puede interceptar el evento de publicar un articulo y hacer que joomla imprima un mensaje personalizado antes de cada articulo, o lo que a ti se te ocurra, simplemente tienes que tener a mano la lista de eventos (hooks) definidos y tu imaginacin para hacer con joomla! lo que quieras. Existen varios tipos de plugins, por cada tipo de plugin existe un directorio dentro del directorio plugins, por lo tanto tenemos el directorio plugins/content para los plugins de tipo content y as con todos los tipos. Existen varios tipos, mira en tu carpeta plugins y comprueba los tipos. Un plugin es un objeto que deriva de la clase JPlugin. Esta clase tiene unos mtodos definidos que son ganchos (hooks) , tambin se les podra llamar listeners , y que se ejecutaran cuando el evento asociado a cada clase se dispare, por lo tanto tendremos que sobrescribir las funciones gancho que necesitemos y escribir nuestro cdigo all. Por ejemplo, si sobrescribimos el mtodo onLoginUser y escribimos una sencilla rutina que envi un email a nuestra cuenta de correo, estaremos modificando el sistema para que cada vez que un usuario haga login, envi un email a nuestra cuenta indicando quien se ha logueado y a que hora. Esto es simplemente un ejemplo, ya que , lgicamente , seria intil hacer una cosa as, adems de llenar de correo inservible nuestra bandeja de entrada. Vamos a crear un plugin sencillo que se va a llamar HolaMundo y que va a imprimir por pantalla, antes de que se visualice el contenido un mensaje, que previamente va a ser fijado en los parmetros del plugin. Los parmetros del plugin se fijan como siempre en Joomla!, mediante el fichero xml de configuracin.

17

Esta es la estructura de nuestro plugin :

Primero vamos a ver el fichero xml de configuracin, en el que definiremos nuestro parmetro. <?xml version=1.0 encoding=utf-8 ?> <install version=1.5 type=plugin group=content> <name>Content Hola Mundo</name> <author>David Noguera</author> <creationDate>15-02-2008</creationDate> <authorEmail>david@nosolocodigo.com</authorEmail> <authorUrl>www.nosolocodigo.com</authorUrl> <version>1.0</version> <description>Muestra un mensaje antes de mostrar el contenido </description> <files> <filename plugin=HolaMundo>HolaMundo.php</filename> <filename>HolaMundo.xml</filename> </files> <params> <param name=mensaje type=text size=50 default=Hola, me llamo David label=Introduce el mensaje a ser mostrado aqu : description=Mensaje que se mostrar antes del contenido/> </params> </install>

Como puedes observar, le estamos diciendo a Joomla que muestre en la seccin de parmetros del plugin , una caja de texto de 50 de ancho, donde podremos especificar el mensaje que queremos que se muestre. Y le hemos dicho que el fichero donde se encuentra el plugin es HolaMundo.php .

18

Vamos a crear nuestro plugin : defined( '_JEXEC' ) or die( 'Acceso Restringido' ); jimport( 'joomla.plugin.plugin' ); class plgContentHolaMundo extends JPlugin { function plgContentHolaMundo( &$subject ) { parent::__construct( $subject ); } function onBeforeDisplayContent(&$article, &$params, $limitstart=0) { $plugin =& JPluginHelper::getPlugin('content', 'HolaMundo'); $pluginParams = new JParameter( $plugin->params ); $mensaje = ""; Mundo'); $salidaPantalla = ' <h2>' . $mensaje . '</h2> '; return $salidaPantalla; } } ?> $mensaje = $pluginParams->get('mensaje', 'Hola

En Joomla 1.5 se ha introducido una nueva forma de hacer los plugins, ms orientada a objetos. Para que nuestro plugin funcione, en el fichero HolaMundo.php tendremos que crear la clase plgContentHolaMundo y decirle que derive de JPlugin. El nombre de la clase es muy importante, si no se pone bien no funcionar. Despus crearemos el constructor de la clase, el cual invoca el constructor de la clase padre. El constructor ha de crearse con una funcin de igual nombre que la clase, ya que si lo hacemos con el mtodo __construct de php5 no ser compatible con php4. Esto se hace siempre igual en todos los plugins. Despus crearemos el metodo onBeforeDisplayContent , donde introduciremos el cdigo que queremos que se ejecute antes de mostrar el titulo. Si te has fijado, el mtodo admite como parmetro las variables $article, $params y $limitstart. Esta definicin de parmetros la tendremos que hacer siempre.

19

El contenido del articulo se almacena en $article->text, es decir, que si queremos modificar algo en el contenido del articulo, deberemos modificar $article->text. Vamos a ver el cuerpo de la funcin : Con el metodo getPlugin de JPluginHelper, obtenemos el plugin pasandole como parmetro el tipo y el nombre, por este orden. Despus en la variable $pluginParams almacenamos una instancia del objeto JParameter al que le tenemos que pasar como parmetro la propiedad params del objeto plugin que previamente hemos obtenido. Acto seguido almacenamos en la variable $mensaje el parmetro mensaje que hemos definido en el fichero xml y que podremos cambiar en la parte de Back-End de Joomla!. Por ltimo almacenamos en la variable $salidaPantalla lo que queremos que se muestre antes de mostrar el contenido , y la devolvemos como valor de retorno. Crea un zip con los dos ficheros, e instlalo con el instalador de extensiones de Joomla!, despus ves al Plugin Manager y actvalo, all tambin podrs cambiar el mensaje que se imprime por pantalla. Este es el resultado:

Puedes consultar los eventos disponibles en la documentacin oficial de Joomla en http://docs.joomla.org/Tutorial:Plugins

20

7.

Plantillas en Joomla
Bsicamente un template puede estar formado por las siguientes carpetas y archivos:

Carpetas
css Es la carpeta que contiene los estilos en cascada del template. html Esta carpeta posee los archivos que funcionaran como plantilla especifica para mdulos y componentes. Su uso no es prioritario pero es una funcionalidad a explotar si deseamos un cdigo personalizado para componentes/mdulos. images Contendr las imgenes usadas para el diseo.

21

Archivos
index.php El archivo principal, contendr todo el HTML y directivas PHP de Joomla! para cargar el contenido (artculos, componentes, mdulos, etc.) templateDetails.xml Determinante para que la plantilla sea reconocida en el back-end del CMS. Posee diversos datos como licencia, autor, e-mail, etc. En Joomla! 1.5 la plantilla podr tener parmetros manejables desde el back-end para cambiar la visualizacin del template. En este archivo se agregaran los parmetros y las posiciones de disponibles para mostrar los mdulos. template_thumbnail.png Es la imagen que actuar como previsualizacin del template en la administracin. params.ini Contendr los valores para configurar los parmetros del template. Si la plantilla no posee parmetros para configurar, este archivo no ser necesario. template.css Es el estilo en cascada principal que se encuentra dentro de la carpeta 'css'. En la rama de Joomla! 1.0.x este archivo tena el nombre de template_css.css favicon.ico Es el favicon que usaremos en nuestro sitio. Imgenes varias Conformaran el diseo de la plantilla. Dentro de la carpeta 'html', como deca ms arriba, estarn archivos y carpetas especficos para los mdulos y componentes del sitio. Con esto podremos manejar a nuestro gusto la apariencia y el output de dichos componentes y mdulos. La idea es que la plantilla prevalezca por encima del output HTML que genera Joomla! De esta forma, por ejemplo, podremos reemplazar todas las tablas que genera tal componente y reemplazarlas por DIVs.

Creacin de la carpeta para nuestro template


Lo primero que haremos ser crear la carpeta en donde se alojaran los archivos de nuestra plantilla. Para eso vamos al directorio 'templates' de Joomla! y creamos una carpeta con el nombre que queramos, en minscula, y en caso de ser varias palabras, sin espacios. Luego podemos crear las subcarpetas necesarias: css, images y/o HTML

22

Creacin de templateDetails.xml
Podemos dividir en cuatro partes el contenido de templateDetails.xml: Datos, Archivos, Posiciones y Parmetros. Datos Aqu, entre cada etiqueta pondremos los datos especficos de la plantilla como su versin, autor, email, pgina web, ao, licencia y descripcin: <?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="template"> <name>Nombre del template</name> <creationDate>Fecha de creacin</creationDate> <author>Nombre del autor</author> <copyright>Licencia</copyright> <authorEmail>E-mail del autor</authorEmail> <authorUrl>Web del autor</authorUrl> <version>Versin</version> <description> <![CDATA[ Aqui va la descripcin, puede usarse HTML o texto plano. ]]> </description> Archivos Cuando hayamos terminado nuestro trabajo, aqu deberemos especificar todos los archivos que hemos utilizado para el diseo, para luego comprimir todo en ZIP y tener un instalador de la plantilla. Como ahora no necesitamos un instalador (ya que estamos creando el template dentro del mismo Joomla!) podemos dejar estos campos incompletos, pero es muy recomendable que al terminar el trabajo lo completemos debidamente: <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>favicon.ico</filename> <filename>css/template.css</filename> <filename>images/imagen.png</filename> </files>

Posiciones Es importante saber con anticipacin que posiciones usaremos y cuantas en nuestro sitio para planificar en donde mostrarlos en la plantilla. <positions> <position>left</position> <position>right</position> <position>user3</position> </positions>

23

Parmetros Si deseamos realizar una plantilla ms verstil, podemos agregarle parmetros para ser manejados desde el Back-end. Por ejemplo, si nuestra plantilla cuenta con la posibilidad de configurar los colores de fondo, esta opcin estar habilitada para ser activada desde la administracin de Joomla!. <params> <param name="color" type="list" default="blanco" label="Color de la tipografia" description="Color de la tipografia"> <option value="azul">Azul</option> <option value="rojo">Rojo</option> <option value="verde">Verde</option> </param> </params> </install>

Creacin de index.php
Para la creacin del index.php, lo primero que haremos ser insertar el HTML que formar la maquetacin de la plantilla. Para eso partiremos desde un layout bsico de tres columnas, barra de navegacin, header y footer. Entonces en index.php creamos el HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <!-- Contenedor --> <div id="contenedor"> <!-- Comienzo header --> <div id="header"> </div> <!-- Fin header --> <!-- Comienzo navegacion--> <div id="navegacion"> </div> <!-- Fin navegacion --> <!-- Comienzo columna izquierda --> <div id="izquierda"> </div> <!-- Fin columna izquierda --> <!-- Comienzo contenido --> <div id="contenido"> </div> <!-- Fin contenido --> <!-- Comienzo columna derecha --> <div id="derecha"> </div> <!-- Fin columna derecha --> <!-- Comienzo footer --> <div id="footer"> </div> <!-- Fin footer --> </div> <!-- Fin contenedor --> </body> </html>

24

Lo siguiente ser ir incorporando las directivas que cargaran toda la informacin para que la plantilla funcione. Veamos las bsicas: <jdoc:include type="head" /> Esta directiva ir dentro de la cabecera HTML. Cargar el ttulo de la pgina en cuestin, metatags, feed, y framework javascript. Joomla! a partir de la versin 1.5 decide usar como framework javascript a Mootools. Y esto lo hace de forma nativa, es decir que no nos d la posibilidad de elegir entre cargarlo o no (a menos que editemos algn archivo fuente). Obviamente no hay que tomarlo para mal, sino al revs, entre lneas el equipo de Joomla! nos esta diciendo que echemos rienda suelta a nuestra imaginacin y utilicemos a Mootools para aadir efectos, nuevas propiedades o lo que queramos a la plantilla. En otras palabras, que explotemos todo su potencial. Otro hecho es que para mostrar nuestro favicon, tendremos que aadir las lneas manualmente para mostrarlo. $this->template Obtendremos el nombre de la carpeta contenedora de nuestra plantilla. Se puede utilizar para cargar el estilo en cascada, favicon y cualquier archivo que queramos y se encuentre dentro de esta carpeta. <jdoc:include type="modules" name="posicin" style="estilo" /> Con esta directiva estamos indicando la carga de un mdulo en particular y de una manera especifica. Esto se establecer a partir de los parmetros 'name' y 'style'. En el caso del primero, escribiremos la posicin de mdulo que queremos cargar. Por ejemplo, si deseamos todos los mdulos derechos, el parmetro ser 'name="right"'. El segundo parmetro posee algunas variantes, el uso de cada una va a depender de nuestras necesidades. Las variedades de estilo pueden ser 'table', 'horz', 'xhtml', 'rounded' y 'raw'. Tanto con 'table' como con 'horz' el contenido del mdulo ser cargado a travs de tablas, la diferencia es que el primer parmetro lo har de forma vertical (a travs de una columna) y el segundo lo har de forma horizontal (a travs de una fila). Si utilizamos 'xhtml' el contenido en vez de ser cargado en tablas ser insertado en DIVs. El parmetro 'rounded' es similar a 'xhtml' con la diferencia que carga el contenido en varios DIVs anidados. Este ltimo se suele utilizar para realizar bordes redondeados a travs de imgenes. Finalmente el parmetro 'raw' cargar el contenido neto, sin contenedores ni ttulo. Ejemplo: Queremos insertar en DIVs todos los mdulos izquierdos en determinada parte del sitio, la directiva quedar conformada por: <jdoc:include type="component" /> Con ella cargaremos el contenido principal del sitio (artculos, secciones, categoras, etc.). A diferencia de la inclusin de mdulos, esta directiva no posee parmetros para manejar en donde cargar el contenido.

25

Edicin de template.css
Vamos a la carpeta 'css' y creamos el archivo template.css. Lo primero que haremos ser insertar los estilos para la maquetacin de la plantilla: *{ padding: 0; margin: 0; } body { font-size: 62.5%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; color: #333; background-color:white; } #contenedor { margin: 0 auto; width: 922px; } #header { width: 900px; float: left; padding: 10px; margin: 10px 0px 5px 0px; } #navegacion { float: left; width: 900px; padding: 10px; margin: 0px 0px 5px 0px; } #izquierda { margin: 0px 5px 5px 0px; padding: 10px; width: 195px; float: left; } #contenido{ float: left; margin: 0px 5px 5px 0px; padding: 10px; width: 456px; display: inline; } #derecha { color: #333; margin: 0px 0px 5px 0px; padding: 10px; width: 195px; float: left; } #footer { width: 900px; clear: both; margin: 0px 0px 10px 0px; padding: 10px; }

26

Das könnte Ihnen auch gefallen