Tutorial: Como crear componentes en Joomla Patrn MVC

Frameworks, Joomla
admin | 4/02/2008

ndice de la serie: desarrollo de extensiones con Joomla

1. Hacer componentes en Joomla! 1. Patrn 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. 2. Hacer Mdulos para Joomla! 3. Hacer Plugins para Joomla! El patrn de diseo MVC. 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. El patrn de diseo MVC se lleva utilizando mucho tiempo en el mbito del desarrollo web en marcos de trabajo como Jakarta struts de apache (java), Java Server Faces de Sun (java), Symphony (php), etc Lo primero que hay que tener claro es el funcionamiento del modelo MVC. MVC son las siglas de Model View Controller, es decir, modelo vista controlador. Una aplicacin web basada en este patrn separa su cdigo en tres partes diferenciadas:
y

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.

El objetivo de usar este patrn de diseo, es separar lo mas posible el cdigo de nuestra aplicacin, para que quede mas ordenado. Proximamente ms

Tutorial: Cmo crear un componente para Joomla! 1.5 II

Frameworks, Joomla
David | 5/02/2008

ndice de la serie: desarrollo de extensiones con Joomla

1. Hacer componentes en Joomla! 1. Patrn 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. 2. Hacer Mdulos para Joomla! 3. Hacer Plugins para Joomla! Implementacin del MVC de Joomla! 1.5 En el artculo anterior habl sobre el patrn MVC . MVC es un patrn genrico, despus cada marco de trabajo tiene una forma de implementar este patrn. El marco de trabajo de Joomla! proporciona una implementacin sin archivos de configuracin, al contrario de lo que hacen otros marcos de trabajo como Struts o JSF. Esto puede ser una ventaja o una desventaja segn como se mire. Joomla no proporciona este archivo de configuracin, sin embargo tiene otra forma de mapear las acciones del controlador. Joomla le da vital importancia al nombre que le tienes que dar a cada fichero del componente, es importantsimo que nombres bien el controlador, las vistas y los modelos de tu componente, de lo contrario Joomla no sabr encontrarlos . De esto hablaremos ms adelante. Introduccin al concepto de front-end y back-end Nuestro componente tendr dos partes diferenciadas: el front-end y el back-end.
y

Front-end: el front-end es la parte del componente que es visible para el usuario de nuestro sitio web. Se visualiza donde hayamos incluido la etiqueta <jdoc:include type=component /> en el template. Su cdigo fuente se encuentra en el directorio components dentro del directorio principal de Joomla!.

Back-end : es la parte del componente que se mostrar cuando entremos al sitio como administradores. El componente se mostrar donde lo hayamos especificado en el template del back-end. El template para la parte de back-end y la parte de front-end es difrerente. Su codigo fuente se encuentra en el directorio components dentro del directorio administrator dentro del directorio principal de Joomla!. En el transcurso del desarrollo de nuestro componente podemos afrontar la parte de back-end y la de front-end como dos desarrollos distintos. En la parte de back-end realizaremos labores de mantenimiento y configuracin para la aplicacin. Despus, en la parte de front-end obtendremos los parmetros que previamente hemos configurado en la parte de back-end.

Por ejemplo, podemos crear un componente para gestionar recursos. En la parte de back-end del componente podramos crear un formulario para subir el recurso al servidor, y ponerle un nombre , una categora, etc y en la parte de front-end simplemente generar una consulta a la base de datos y mostrar los recursos subidos al servidor. De esta manera solo los usuarios con privilegios de administrador podran subir recursos al servidor.

Tutorial: Como crear un componente para Joomla! III

Frameworks, Joomla
David | 5/02/2008

ndice de la serie: desarrollo de extensiones con Joomla

1. Hacer componentes en Joomla! 1. Patrn 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. 2. Hacer Mdulos para Joomla! 3. Hacer Plugins para Joomla! En los anteriores posts he hablado sobre el patrn MVC y sobre el concepto de frontend y back-end en Joomla!. Una vez entendido se puede empezar a programar un componente MVC en condiciones. Iniciacin: Construir un componente simple en Joomla! 1.5 Usando el patrn 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.

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. 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 $controller = 'pruebaController' .$controller ; = new $classname ( );

$controller ->execute( JRequest::getVar( 'task' ) ); $controller ->redirect();

Vamos a comentar el siguiente codigo 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. 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:
y y

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.

y y

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. 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 lareferencia 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, Ves a la carpeta models y 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 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.

He explicado cmo 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!, ms adelante lo explicar, as como los metodos mas importantes de acceso a datos que trae el API de Joomla!, que nos ahorrarn mucho tiempo y nos permitrn crear componentes mas seguros.

Descargarse los ficheros del componente

Tutorial: Como crear un componente para Joomla!1.5 IV

Frameworks, Joomla, Programacin
David | 7/02/2008

ndice de la serie: desarrollo de extensiones con Joomla

1. Hacer componentes en Joomla! 1. Patrn 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. 2. Hacer Mdulos para Joomla! 3. Hacer Plugins para Joomla! El tutorial anterior fue una introduccin a la creacin de componentes en Joomla 1.5, pero aun faltan muchas cosas. Faltan cosas como el acceso a datos mediante el framework de Joomla, los tasks y ms cosas que se me escapan he ir completando ms adelante. Para la parte de back-end, el sistema es el mismo, lo nico que deberemos de ubicar el componente en la carpeta administrator/components . El acceso al componente es por la URL tuSitio/administrator/index.php?option=com_prueba . El api de Joomla! nos provee de unos objetos especficos para operar con bases de datos.Siempre que se pueda es recomendable usar estos objetos, en lugar de conectar directamente con las funciones de mysql que tiene php, ya que el API de Joomla! hace mucho trabajo por debajo, como proteccin contra inyeccin Sql, optimizacin, etc En ocasiones , necesitaremos un acceso a datos mas profundo, y no nos podremos conformar con lo que nos ofrece el api de Joomla!, en estos casos no queda mas remedio que utilizar el acceso a datos de toda la vida. En este tutorial el componente se va llamar prueba. Por lo tanto accederemos a el mediante la URL /administrator/index?option=com_prueba . Nuestro componente es muy simple:

muestra una lista con los mensajes existentes y un formulario de introduccin de datos en el que se presenta un campo de texto y un botn para enviar el formulario. Al enviarse el formulario se introduce en una tabla de la base de datos que hemos creado previamente el mensaje y nos lleva a la misma pagina que muestra todos los mensajes insertados y te da la opcin de seguir insertando mensajes. Vamos a crear la base de datos, esta es la sentencia SQL que yo he usado:
CREATE TABLE 'jos_prueba' ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `mensaje` VARCHAR( 30 ) NOT NULL DEFAULT 'mensaje' ) ENGINE = innodb;

Como puedes observar son dos campos; una tabla muy simple. Vamos a crear la estructura principal de nuestro componente como en el tutorial anterior, si tienes dudas, pgale un vistazo . La estructura principal del componente es esta:

A continuacin puedes observar el diagrama del componente que vamos a crear:

La vista Prueba Admin es la que se muestra por defecto en nuestro componente, en ella se har un listado de todos los mensajes creados en la base de datos, y al fina pondr un enlace que redirija a la vista IntroduceNuevo. En la vista IntroduceNuevo, se presenta un formulario con una caja de texto y un botn de submit. Este boton de submit redirige al task IntroduceMensaje, donde introduciremos el mensaje en la base de datos y redirigiremos a la vista PruebaAdmin de nuevo para que se muestren todos los mensajes insertados y te da la opcin de seguir insertando. Lo primero que necesitamos es un modelo para nuestra vista PruebaAdmin, creamos la carpeta models, y dentro un archivo con nombre pruebaAdmin.php , dentro de este archivo crearemos la clase que contiene el modelo. El modelo tiene que recuperar todos los datos de la base de datos y devolverlos para que la vista pueda mostrarlos. Dentro de la carpeta models crea el fichero pruebaAdmin.php . De momento vamos a agregar el cdigo necesario para recuperar los datos de la tabla. Este es el cdigo que he usado:
defined('_JEXEC') or die(); jimport( 'joomla.application.component.model' ); class PruebaAdminModelPruebaAdmin extends JModel { var $datos; function getData() { if (empty( $this->datos )) {

$query = ' SELECT * ' . ' FROM #__prueba ' ; $this->datos = $this->_getList( $query ); } return $this->datos; } }

Como siempre la primera lnea hace una comprobacin para ver si se esta accediendo desde Joomla! o se esta haciendo un acceso directo, esta medida de seguridad debe de estar siempre presente. La segunda lnea se utiliza la funcin jimport del api de Joomla!, esta funcin importa la clase abstracta para el modelo. Observa que la nomenclatura sigue la norma descrita: Nombre de la Vista Model Nombre del modelo Al tener este nombre , el controaldor PruebaAdminController podra acceder directamente a los mtodos de este modelo. La funcin getData() comprueba si la variable $datos esta vacia, y si lo esta, entonces almacena en ella los datos de la tabla jos_prueba en la variable.Para ello utiliza el metodo getList() . Este mtodo es heredado por la clase padre y lo que hace es devolver una lista de objetos con los resultados de la consulta. Cada objeto de la lista tendr tantas propiedades como campos tenga la tabla consultada.Por lo tanto en la variable $datos se almacena una lista de objetos con los resultados de la consulta. Lo siguiente es mostrar estos datos en la vista PruebaAdmin. Introduce el siguiente cdigo en el fichero views/pruebaAdmin/view.html.php :
defined( '_JEXEC' ) or die( 'Restricted access' ); jimport( 'joomla.application.component.view' ); class PruebaAdminViewPruebaadmin extends JView { function display($tpl = null ) { $model =& $this->getModel(); $datos = $model->getData(); $this->assignRef( 'mensajes' , $datos ); parent::display($tpl); } }

Las dos primeras lneas ya no necesitan explicacin. La nomenclatura de la Vista sigue el patrn descrito. Se sobrescribe el mtodo display() , lo primero es obtener el modelo, al seguir las nombras de nombrado no hace falta especificar el nombre del modelo en el mtodo getModel(). Almacenamos en la variable $datos la lista de objetos que devuelve el mtodo que hemos creado anteriormente en el modelo, y se la pasamos al layout mediante el mtodo assignRef. Cdigo para el layout default.php de la vista :
<table class="adminlist"> <thead> <tr> <th width="5">ID </th> <th>Mensaje </th> </tr> </thead> <tbody> <?php $n =count( $this ->mensajes ); for ($i=0; $i < $n; $i++) { $row =& $this ->mensajes[$i]; ?> <tr> <td> <?php echo $row ->id; ?> </td> <td><?php echo $row ->mensaje; ?> </td> </tr> <?php } ?> <tr> <td>&#160;</td> <td><a href="<?php echo JURI::base();?> index.php?option=com_prueba&view=introduceNuevo">Nuevo Mensaje </a></td> </tr> </tbody> </table>

Recorremos la lista de objetos "mensajes" y creamos un elemento "tr" por cada mensaje, observa que estamos accediendo a la propiedad id y mensaje de cada objeto de la lista, esto es por que como he explicado antes se crea tantas propiedades como campos tenga el resultado de la consulta. Al final de la tabla, he agregado un enlace que redirige a la vista que crearemos luego y que permitir introducir un nuevo mensaje. El mtodo esttico JURI::base() devuelve la url base del sitio, para realizar la peticin correctamente.

Introduce algunos datos en tu tabla y comprueba que todo funciona correctamente. Vamos a crear la vista introduceNuevo. Crea el directorio introduceNuevo dentro de la carpeta views , crea el directorio tmpl y los archivos view.html.php y tmpl/default.php correspondientes . Introduce el siguiente cdigo en view.html.php:
defined( '_JEXEC' ) or die( 'Restricted access' ); jimport( 'joomla.application.component.view' ); class PruebaAdminViewIntroduceNuevo extends JView { function display($tpl = null ) { parent::display($tpl); } }

No se realiza ningn acceso a datos , simplemente se ejecuta el mtodo display() y se visualiza el layout por defecto (tmpl/default.php) .La nomenclatura de la vista ha de seguir el patrn que ya se ha explicado anteriormente : Nombre componente View Nombre de la vista . Ahora vamos a ver el cdigo del layout :
<form action="index.php" method="post"> <table border="0"> <tbody> <tr> <td>ID</td> <td>Mensaje</td> </tr> <tr> <td><input disabled size="3" name="id" /></td> <td><input maxlength="30" size="30" name="mensaje" /></td> </tr> <tr> <td>&#160;</td> <td><input type="submit" value="Enviar" /></td> </tr> </tbody> </table> <input type="hidden" value="com_prueba" name="option" /> <input type="hidden" value="introduceMensaje" name="task" /> </form>

Como puedes observar, he creado un formulario que enva la informacin a index.php , y le he puesto una caja de texto para introducir el mensaje y otra para el id, la del id permanece bloqueada ya que se trata de un campo autoincremental y se ira incrementando automticamente en la base de datos.

Esta informacin la tiene que procesar el task introduceMensaje . La forma de indicar que la informacin ha de ser procesada por este task es poniendo un input de tipo hidden con atributo name igual a task y un valor igual al nombre del task que deseamos que procese el formulario. En el otro input de tipo hidden se se indica el option para indicar a Joomla! que el task se encuentra dentro del componente com_prueba. Los nombre de los campos input deben de coincidir con los nombres de los campos de la tabla en la que introduciremos los datos. Vamos a crear el task introduceMensaje : En la clase controlador PruebaAdminController que debes haber creado anteriormente introduce el siguiente mtodo:
function introduceMensaje (){ $option = JRequest::getCmd('option'); $modelo = $this->getModel('pruebaAdmin' ); $res = $modelo->introduce (JRequest::get('post')); if($res == 1){ $this->setMessage ('Mensage introducido!' ); $this->setRedirect ('index.php?option=' . $option. '&view=pruebaAdmin' ); }else{ $this->setMessage ('Error al introducir!' ); $this->setRedirect ('index.php?option=' . $option. '&view=Error' ); } }

Al pulsar submit en el formulario anterior , los datos son enviados a index.php, el marco de trabajo Joomla! lee los parmetros de entrada y detecta que hay un parmetro que indica el componente de destino , el componente com_prueba recibe la peticin y el controlador detecta que existe un parmetro task, este parmetro es un parmetro especial que se usa en Joomla! para procesar acciones de formularios, Joomla! buscara en la clase controlador un metodo que tenga el mismo nombre que el valor del parmetro task y le concedera el control. Es por eso que el nombre del mtodo ha de coincidir con el nombre del task que pusimos en el formulario. Se pueden mapear tasks a mtodos diferentes, pero esto queda pendiente para otro articulo. En este task volvemos a utilizar el API de Joomla! para acceder a datos, pero en este caso vamos a usar el objeto JTable, para introducir datos. Podramos utilizar funciones como mysql_query() para realizar consultas de tipo insert y update, sin embargo estas funciones son mas difciles de generar, requieren de conocimientos de lenguaje SQL y probablemente nos dejemos huecos de seguridad que dan lugar a inyecciones SQL y otros fallos. El API de Joomla! proporciona el objeto JTable para crear, leer , actualizar y borrar registros de una tabla. Crea la carpeta tables, y dentro de esta carpeta crea el archivo Mensajes.php , El nombre del archivo a de ser igual que el nombre de la clase JTable,

es decir si el archivo se llama Mensajes.php, la clase se llamara TableMensajes. Si no se hace as, Joomla! tendra problemas para encontrar el objeto JTable. Introduce el siguiente cdigo en el archivo:
defined( '_JEXEC' ) or die( 'Restricted access' ); class TableMensajes extends JTable { var $id = null ; var $mensaje = null ; function __construct (&$db) { parent::__construct ( '#__prueba' , 'id', $db ); } }

Se declaran tantas propiedades como campos tenga la tabla sobre la que se quiere trabajar, el nombre de las propiedades debe ser igual que el nombre de los campos. En el constructor se le pasa como primer parmetro el nombre de la tabla, como segundo parmetro la clave primaria y en el tercer parmetro la referencia al objeto base de datos del marco de trabajo Joomla!, el nombre de este tercer parmetro es siempre igual. Ya tenemos el objeto JTable necesario para utilizar desde el modelo pruebaAdmin, por lo tanto cuando ejecutemos el task introduceMensaje, se instanciara el modelo pruebaAdmin y se ejecutara el mtodo introduce de este. Es en el mtodo introduce del modelo pruebaAdmin donde se usa el objeto JTable que acabamos de crear. Vamos a implementar el mtodo introduce del modelo pruebaAdmin , introduce el siguiente mtodo en el modelo:
function introduce($post){ $row =& JTable::getInstance ('Mensajes' , 'Table'); if (!$row->bind($post)) { return JError::raiseWarning (500, $row->getError()); } if (!$row->store()) { return JError::raiseWarning (500, $row->getError()); } return 1; }

Observa que acepta como parmetro una variable a la que llama $post. En esta variable almacenaremos la peticin entera que previamente hemos obtenido en el controlador mediante la instruccin : JRequest::get(post)

Esta instruccin recoge los parmetros de entrada de la peticin, es como acceder al array $_POST de php, pero mediante el API de Joomla!, lo que nos provee de proteccin contra inyeccin de cdigo, etc Es importante saber que si se intenta pasar el valor de los parmetros post mediante el objeto JRequest desde otro sitio que no sea el controlador, por ejemplo desde una vista, el objeto JTable no recibir los parmetros correctamente y generar un error al intentar obtener los valores de la peticin. En la primera lnea del mtodo se obtiene una instancia del objeto TableMensajes que hemos creado antes , si no pones los nombre correctamente no se instanciar el objeto. Despus se ejecuta el mtodo bin() del objeto TableMensajes que lo que hace es buscar en los parmetros post de entrada parmetros con el mismo nombre que los campos de la tabla y enlazarlos, por eso es importante que en el formulario hayamos escrito correctamente los nombres de los inputs. Acto seguido se ejecuta el mtodo store() , que almacena en la base de datos los datos provenientes del formulario. Busca la clave primaria, y si ya existe un un registro con la misma clave primaria ejecuta una consulta update, si aun no esta creada la clave primaria, ejecuta una consulta insert. Si alguno de estos dos mtodos no se ejecuta correctamente se lanza un error el mtodo mediante el cdigo : return JError::raiseWarning(500, $row->getError()) . De vuelta al task introduce mensaje, obtenemos la devolucin del metodo introduce y la procesamos con este cdigo :
if($res == 1){ $this->setMessage ('Mensage introducido!' ); $this->setRedirect ('index.php?option=' . $option. '&view=pruebaAdmin' ); }else{ $this->setMessage ('Error al introducir!' ); $this->setRedirect ('index.php?option=' . $option. '&view=Error' ); }

Este cdigo ya lo hemos introducido antes en el task introduceMensaje. Si todo ha funcionado correctamente , se redireccin a la vista pruebaAdmin mediante el mtodo de controlador setRedirect(),en la cual se volvern a mostrar todos los mensajes insertados y un enlace para insertar mas mensajes. Si no, se redirecciona a una vista con nombre error en la cual crearemos un mensaje de error a gusto de cada cual. El mtodo del controlador setMessage() establece el mensaje que aparecer en la parte superior izquierda de la pantalla por defecto, o donde este definido en el template de

back-end, y hace que se muestre como en la foto :

Si has leido todo, enhorabuena. Proximamente hablar sobre como usar el editor wysiwyg de Joomla, sobre como usar AJAX en nuestros componentes y tambin Google Maps. Tambin escribir algo de mdulos.

Crear el XML del componente de Joomla y generar instalable

Joomla
David | 11/03/2008

ndice de la serie: desarrollo de extensiones con Joomla

1. Hacer componentes en Joomla! 1. Patrn 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. 2. Hacer Mdulos para Joomla! 3. Hacer Plugins para Joomla! Hasta ahora habamos visto como hacer los componentes, tanto la parte de backend, como la de frontend, pero no habamos visto como crear un paquete instalable para poder compartirlo con todo el mundo que se pueda instalar desde el instalador de extensiones de Joomla!. Para ello simplemente hay que generar un fichero XML con nombre igual al del componente, en este caso prueba.xml y con un formato especfico y comprimirlo todo en un zip. Este zip ser el instalable. Vamos a ver un posible fichero XML para un componente de prueba.

<?xml version=1.0 encoding=utf -8?> <!DOCTYPE install SYSTEM http://dev.joomla.org/xml/1.5/component install.dtd> <install type=component version= 1.5.0> <name>COM_PRUEBA </name> <! Los siguientes elementos son opcionales <creationDate> 2007 01 17 </creationDate> <author>David </author> <authorEmail> david@nosolocodigo.com </authorEmail> >

<authorUrl> http://www.nosolocodigo.com </authorUrl> <copyright> Copyright Info </copyright> <license> License Info </license> <! Esta cadena es almacenada en la base de datos >

<version> Component Version String </version> <! La descripcin es opcional, y por defecto es el nombre del componente > <description> Descripcin del componente </description>

<! Script php personalizado que se ejecutar en la instalacin > <installfile> install.php </installfile>

<! Script php personalizado que se ejecutar en la desinstalacin > <uninstallfile> uninstall.php </uninstallfile>

<! Scripts SQL que se ejecutaran en la instalacin <install> <sql> <file driver=mysql charset= utf8>install.mysql.utf8.sql </file> <file driver=mysql>install.mysql.nonutf8.sql </file> </sql> </install>

>

<!Scripts SQL que se ejecutarn en la desinstalacin > <uninstall> <sql>

<file driver=mysql charset= utf8>uninstall.mysql.utf8.sql </file> <file driver=mysql>uninstall.mysql.nonutf8.sql </file> </sql> </uninstall>

<! Ficheros de la parte de front -end del componente, incluye aqu todos los ficheros del componente, incluidas las vistas, controladores, etc > <files> <filename> index.html </filename> <!El punto de entrada al componente ha de tener el atributo component > <filename component= prueba.php >prueba.php </filename> </files>

<! Ficheros de leguanjes para el sitio > <languages> <language tag=en-GB>en-GB.com_prueba.ini </language> <language tag=de-DE>de-DE.com_prueba.ini </language> <language tag=nl-NL>nl-NL.com_prueba.ini </language> </languages>

<! Ficheros multimedia para el sitio <media destination= com_test> <filename> image.png </filename> <filename> flash.swf </filename> </media>

>

<administration>

<! Seccin para el menu del Back -End > <menu img=components/com_test/assets/test 16.png>EventList </menu> <submenu> <! Date cuenta que todos los & estan escapados a &amp; para que el fichero XML valide correctamente y pueda ser parseado por el instalador > <menu link=option=com_helloworld&amp;task=hello&amp;who=world > Hello World! </menu> <! Puedes especificar el link como arriba o los atribitos de la URL individu almente como abajo > <menu img=icon task=hello controller= z view=a layout= b sub=c>Hello Again! </menu> <menu view=prueba layout= foo>Testing Foo Layout </menu> </submenu>

<! Ficheros de la parte de Administracin > <!El atributo folder especifica la carpeta desde donde sern copiados los ficheros, por lo tanto index.html estar ubicado dentro del componente en admin/index.html > <files folder=admin> <filename> index.html </filename> <!El punto de entrada al componente ha de tener el atributo component > <filename component= admin.prueba.php > admin.prueba.php </filename> </files>

<! Ficheros de lenguaje de la parte de Administracin <languages folder=admin> <language tag=en-GB>enGB.com_prueba.ini </language> <language tag=de-DE>deDE.com_prueba.ini </language> <language tag=nl-NL>nlNL.com_prueba.ini </language> </languages>

>

<!Ficheros multimedia de la parte de Administracin > <media folder=admin destination= com_prueba > <filename> admin-image.png </filename> <filename> admin-flash.swf </filename> </media> </administration> </install>

Este fichero ser ledo por el instalador de Joomla! y de aqu sacara la informacin para proceder a instalar el componente. Si el fichero no valida correctamente, no podr ser parseado y fallar la instalacin, as que estate al tanto de que valide ya que XML es muy estricto y puede fallar por cualquier tontera, como dejarse espacios en blanco al inicio. Con los comentarios incluidos dentro del fichero creo que se entiende todo, este fichero de ejemplo ha sido sacado de la documentacin oficial de Joomla y traducido al castellano para su mejor comprensin.

Tutorial: Como crear mdulos para Joomla! 1.5

Frameworks, Joomla, Programacin
David | 10/02/2008

ndice de la serie: desarrollo de extensiones con Joomla

1. Hacer componentes en Joomla! 1. Patrn 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. 2. Hacer Mdulos para Joomla! 3. Hacer Plugins para Joomla! Aunque con las extensiones existentes de Joomla tendremos suficiente en la mayora de los casos, hay ocasiones en que necesitamos algo concreto, como por ejemplo un mdulo que muestre los usuarios registrados que cumplan aos hoy o uno que muestre los artculos publicados hace un ao. 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 artculos con un enlace al articulo completo. Hacer un mdulo es mucho ms sencillo que un componente. De hecho los mdulos estn pensados para mostrar datos concretos, como usuarios conectados, datos de contacto, mens etc que en muchos casos son una simple consulta a la base de datos. Los mdulos 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 . 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 , puedes encontrar una definicin de la clase en el sitio oficial de Joomla 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:
<?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 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:
<?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 la el rbol de clases que hay en la documentacin oficial : 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:
<?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>

Para finalizar solo queda meter todo esto en un zip y subirlo al instalador de Joomla!.

Tutorial: creando plugins con Joomla! 1.5

Joomla, Programacin
David | 15/02/2008

ndice de la serie: desarrollo de extensiones con Joomla

1. Hacer componentes en Joomla! 1. Patrn 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. 2. Hacer Mdulos para Joomla! 3. Hacer Plugins para Joomla! Ya hemos visto como hacer componentes y como hacer mdulos en Joomla! 1.5 y hemos visto que no es nada complicado, y simplemente hay que entender la mecnica de trabajo . Lo ultimo que nos queda son los plugins, con ellos podremos 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. Esta es la estrctura 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 seccion 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 . 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 = ""; $mensaje = $pluginParams ->get('mensaje', 'Hola Mundo' ); $salidaPantalla = ' <h2>' . $mensaje . '</h2> '; return $salidaPantalla ; } } ?>

En Joomla 1.5 se ha introducido una nueva forma de hacer los plugins, ms orientada a objetos. Para que nuestro plgin 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. 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, que aunque sea oficial, es escasa, y tambin puedes ver los eventos en los ficheros example.php que existen dentro de cada directorio de tipo de plugin, es decir, en

plugins/content , plugins/user Este fichero te puede servir como plantilla a la hora de crear plugins. Saludos.

Enviar correo electrnico con el API de Joomla 1.5

Frameworks, Joomla, Programacin
David | 8/02/2008 Hoy en el trabajo he necesitado crear un componente para enviar correos electrnicos. All usamos Joomla 1.5 como CMS, as que lo primero que he hecho a sido ir a la pgina de documentacin oficial de Joomla a buscar documentacin. La versin 1.5 acaba de salir, por lo tanto no hay mucha documentacin, as que no he encontrado nada. Despus he pensado pero si Joomla lleva un componente para enviar correos Cmo lo habrn hecho? Menos mal, que Joomla es open source y me permite ver como esta hecho por dentro. Me he metido a ver el componente com_massmail que lleva instalado Joomla de serie y que posibilita enviar correos masivos.

Este es el cdigo de mi componente :

function sendMail(){ $mailer =& JFactory::getMailer(); $sender = JRequest::getVar('email'); $nombre = JRequest::getVar('nombre'); $apellidos = JRequest::getVar('apellidos' ); $fromname = $nombre . " " . $apellidos ; $asunto = "NUEVO CLIENTE INTERESADO : ". $fromname; $body = JRequest::getVar('comentarios' ); $mailer->setSender(array($sender, $fromname )); $mailer->setSubject ($asunto); $mailer->setBody($body); $mailer->IsHTML(0); // Add recipients $mailer->addRecipient ("atencionClientes@empresa.com" ); // Send the Mail $rs = $mailer->Send(); if ( JError::isError($rs) ) {

$msg = $rs->getError(); $this->setRedirect ( "index.php?option=com_miComponente&view=contacto" , $msg); } else { $msg = "Mensaje enviado correctamente. Pronto nos pondremos en contacto usted." ; $this->setRedirect ("index.php" ,$msg); } }

Lo que tiene que hacer el componente es recibir unos datos del cliente que se ha interesado por el producto y as como la informacin que ha rellenado en el formulario, y enviarlo por correo a la cuenta de la empresa destinada a atender a los clientes. El formulario se enva al task sendMail. Se obtiene el objeto mailer mediante la clase JFactory y despus mediante JRequest::getVar() se obtienen los datos del formulario. Despus, mediante lso metodos setSender, setSubject y setBody se establecen el remitente, el asunto y el cuerpo del mensaje respectivamente. Con $mailer->IsHTML(0) se especifica que el correo se enva son formato HTML. Por ltimo mediante addRecipients se introduce el destinatario, que en este caso es una cuenta de correo dedicada para la atencin de los clientes. El mtodo addRecipient se puede usar tantas veces como destinatarios haya, es decir, se puede hacer una consulta a la base de datos, obtener las cuentas de todos los usuarios y enviar el correo a todos los usuarios, recorriendo el recordset con un foreach y aadiendo un addRecipient en cada pasada de bucle. Finalmente se ejecuta el mtodo $mailer->Send(); que enva el correo a todos los destinatarios. Al final del todo se muestra una vista u otra segn si ha resultado error o no el envo del correo: si da error se enva otra vez al formulario de contacto, y si no ha dado error , se enva a la pgina principal, y se muestra un mensaje de confirmacin.

Utilizar el calendario que incorpora el API de Joomla

Frameworks, Javascript, Joomla
David | 23/02/2009 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 especfico 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 funcin 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 continuacinse puede ver un ejemplo de calendario implementado en un componente de backoffice de Joomla.
1 2 3 4 5 6 <?php JHTML::_('behavior.calendar' ); ?> <form> <input id="fecha" name="fecha" size="20" type="text" /> <img class ="calendar" onclick="return showCalendar('fecha', '%Y -%m%d');" src="templates/system/images/calendar.png" alt="calendar" /> </form>

Primero se crea el textbox y despus 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 aade el siguiente cdigo:
1 onclick="return showCalendar('fecha', '%Y -%m-%d');"

Este cdigo es el que crea el objeto calendario y lo muestra o lo esconde segn convenga. El primer parmetro es el id del textbox donde se guardar la fecha y el segungo parmetro 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 generara 26/02/2009. El resultado de usar el calendario es el siguiente:

Subir ficheros al servidor con el API de Joomla!

Joomla, Programacin
David | 13/03/2008 Vamos a ver como subir un fichero al servidor usando el API de Joomla!. La ventaja de usar el API de Joomla! es que internamente comprueba si se esta usando la capa FTP y si esta configurada se usar para subir el fichero. Primero creamos una vista donde mostraremos un formulario con un input de tipo file. El formulario ha de tener enctype=multipart/form-data como atributo, de lo contrario, apache no sabr interpretar los datos recogidos en la variable post como ficheros. El enctype multipart/form-data especifica que vamos a poder enviar tanto texto como ficheros.

Cdigo de la vista
<form name="registro" id="registro" enctype="multipart/form -data" > action="index.php" method="POST"

Introduce el fichero : <input type="file" name="fichero" /> <input type="submit" value="Subir Fichero" /> <input type="hidden" name="option" value="com_aplicacion" /> <input type="hidden" name="task" value="subirFich ero" /> </form>

La vista es enviada a un task, en este caso el task se llama subirFichero, as que creamos un mtodo en el controlador con este nombre e introducimos el siguiente cdigo : (Si no entiendes lo que es un task, vista, etc hay un tutorial bastante extenso sobre componentes donde se explica)

Cdigo del task

$file = JRequest::getVar( 'fichero' , null , 'files', 'array' ); jimport('joomla.filesystem.file' ); if(!is_array($file)){ $mensaje .= "NoSeHaSubido" ; } if($file['error'] || $file['size'] < 1 ){ $mensaje .= " NoExisteFichero" ; } if( $file['size'] > 100 ){ $mensaje .=" FicheroDemasiadoGrande" ; }

if(!JFile::upload($file['tmp_name'],"/directorioLocal" .DS. $file['name'])){ $mensaje .= " ErrorAlSubirElFichero" ; }

En l pri ra lnea obtenemos el fi ero de la peti i n provenient e del formulario. Investi a ms sobre los mtodos de JRequest , te ser muy til . La segunda lnea sirve para importar el objeto JFile que usaremos para introducir el fichero en nuestro sistema de ficheros local. Por ltimo llevamos a cabo algunas comprobaciones para ver si el fichero es demasiado grande ,demasiado pequeo o si no se ha subido ningn fichero y vamos guardando en una var iable el mensaje de error correspondiente, para que despus solo haya que invocar el mtodo upload del objeto JFile al cual le pasamos como pr imer parmetro el fichero temporal que an se encuentra en la petici n y como segundo parmetro la ruta completa en el disco local (incluyendo el nombre del fichero) donde queremos guardar el fichero. Ya deber a de estar fichero correctamente subido en el disco duro del servidor ; )

Agregar javascript y css a una vista en Joomla 1.5

C , Javascript, Joomla
/ 8 David | 18/

Muchas veces he necesitado aadir un scr ipt Javascript a una vista en concreto mientras desarrollaba un componente para, por ejemplo,mostrar un mapa de Google maps. Tambin he necesitado aadir un estilo especfico para dar estilo a mi componente, pero solo a esa vista sin que se cargue el script de google maps en todo el sitio, ya que esto lo ralenti ara. En un principio lo solucionaba haciendo un arreglo en la estructura de ficheros de Joomla! y poniendo un include en el template. Esto me sirvi , pero es poco mantenible y poco portable, ya que si me levo el componente a otro sitio tendr a que aadir el script necesario al template para que funcionara correctamente. As que me puse a leer la documentaci n oficial, y en la descripci n de clases encontr el mtodo addStyle y el mtodo addScript del objeto JDocument, los cuales me permiten agregar estilos css y scr ipts de javascript solo a una vista en concreto. La forma de uso es la siguiente:

En nuestra fichero view.html.php agregamos el siguiente codigo:

class componenteViewcontacto extends JView { function display($tpl = null ) { $document = JFactory::getDocument (); $document ->addScript(JURI::base() . 'componentes/com_componente/fichero.js' ); $document ->addStyleSheet (JURI::base() . 'componentes/com_componente/fichero.css' ); $script = ' var variable = "holaaaaaaaa";' ; $estilo = "body{color:green;}" ; $document -> addScriptDeclaration ($script); $document ->addStyleDeclaration ($estilo); parent::display($tpl); } }

Primero obtenemos el objeto JDocument, y despus usamos los mtodos addStyleSheet o addScript si lo qeu queremos es hacer un link del estilo/script o el mtodo addScriptDeclaration o addStyleDeclaration pasndole como parmetro un string que contendr el cdigo css o javascript que queramos que se incluya directamente en la cabecera. Lo ideal es empaquetar los ficheros css y js en el componente y hacer un link a la URL del fichero dentro del componente, de esta forma lo podremos instalar en cualquier Joomla! sin tener que modificar el template. Si ahora cargas la vista en el navegador e inspeccionas el cdigo fuente podras comprobar que se han aadido los css y js correctamente. Es muy simple y til y nos permitir incluir css y javascript independiente en cada vista sin hacer chapuzas.

Popups elegantes en Joomla usando Mootools

Frameworks, Javascript, Joomla
David | 5/10/2009 Una ventana modal es el popup de la Web 2.0. Adems de ser ms usable y rpido, es ms bonito. Joomla incorpora Mootools como framework Javascript en el core permitiendo crear popups en forma de ventana modal de una manera muy sencilla y homognea. De hecho, cuando se programa en Joomla es recomendable usar todas las caractersticas del core Joomla para que todo quede con un look ms consistente (Cmo usar el datepicker de Joomla).

Para poder usar los comportamientos que incorpora la librera Mootools en Joomla hay que incluir la siguiente lnea de cdigo en la primera lnea del fichero index.php de tu template. Si ests desarrollando un componente, entonces adela en el fichero view.html.php.
<?php JHTML::_( 'behavior.modal' ); ?>

Esta lnea de cdigo genera el include de la librera Mootools y la librera Squeezebox, encargada de generar la ventana modal. Es importante usar esta funcin PHP ya que de esta forma te aseguras que no se cargue varias veces repetida la librera por diferentes extensiones. Una vez incluidas las libreras basta aadir la clase modal a los enlaces que queremos que generen una ventana modal. Por ejemplo:
<a class="modal" href="images/stories/i magen_grande.jpg"> <mg src="images/stories/imagen_pequena.jpg" border="0" alt="Una imagen" /> </a>

Con el cdigo introducido en este bloque se mostrara por pantalla la imagen pequea, y al hacer click sobre ella aparecera una ventana modal con la imagen grande en alta resolucin.

Se pueden aadir ms 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>

Con el cdigo introducido en el bloque de arriba se mostrara una ventana modal con un iframe que puede apuntar a cualquier sitio. En este caso est apuntando a la pgina principal de este Nosolocodigo, pero si ests desarrollando una aplicacin podra apuntar a una vista raw, o una vista html con el parmetro tmpl=component. Vamos, que puede apuntar a donde sea. Las opciones se definen en el atributo rel del enlace, creo que no hace falta ms explicacin. Esto est muy bien para lanzar las ventanas desde un enlace, haciendo click sobre l, pero y si queremos lanzar las ventanas usando una funcin Javascript? Pues entonces sigue leyendo.. En caso de que lo que se quiera sea lanzar la ventana modal desde Javascript puedes usar la siguiente funcin:
<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 funcin se ejecutara automticamente en el evento load y provocara que en el enlace con id popup se mostrar una ventana modal exactamente igual que si hiciramos click sobre el enlace. Igual que se ha utilizado el evento load se podra usar cualquier otro evento. Por ltimo, si quieres lanzar una ventana modal instantneamente sin haber definido previamente ningn enlace en el documento HTML, he implementado esta funcin que he encontrado por los foros de Joomla.org y que me funciona bastante bien. La funcin hay que definirla previamente para despus usarla. Puedes crear un fichero Javascript y aadirlo 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 aadida la definicin del mtodo 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 imgenes como para enlaces externos/internos. Si adems deseas programar extensiones en Joomla y quieres ms, dispones de toda la potencia del framework Mootools para desarrollar tu aplicacin.