Tutorial Joomla

Tutorial: Como crear componentes en Joomla – Patrón MVCFrameworks, Joomlaadmin | 4/02/2008

Índice de la serie: desarrollo de extensiones con Joomla1. Hacer componentes en Joomla!

1. Patrón MVC 2. Concepto de Front-End y Back-End 3. Primer componente MVC simple con Joomla! 4. Segundo componente, Back-End y acceso a datos. 5. Crear el xml del componente de joomla y generar instalable.

2. Hacer Módulos para Joomla! 3. Hacer Plugins para Joomla!

El patrón de diseño MVC.La nueva versión 1.5 de joomla! Incluye novedades en la elaboración de componentes, entre ellas la posibilidad de incorporar un patrón de diseño MVC , que a la larga facilitará el mantenimiento de nuestro componente, y lo hará más fácil de extender al mismo tiempo que resultará más fácil de leer por otras personas.El patrón de diseño 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 aplicación web basada en este patrón separa su código en tres partes diferenciadas:

El controlador: el controlador es el punto de entrada de la aplicación, se mantiene a la escucha de todas las peticiones, ejecuta la lógica de la aplicación, y muestra la vista apropiada para cada caso.

El modelo : el modelo contiene todo el código relacionado con el acceso a datos. Es importante que sea un código lo más genérico posible y se pueda reutilizar en otras situaciones y proyectos. Nunca incluiremos lógica en el modelo, solamente consultas a la base de datos y validaciones de entrada de datos.

La vista : la vista contiene el código que representará lo que nosotros veremos por pantalla, en este caso se trata de código html.

El objetivo de usar este patrón de diseño, es separar lo mas posible el código de nuestra aplicación, para que quede mas ordenado.Proximamente más…

Tutorial: Cómo crear un componente para Joomla! 1.5 IIFrameworks, JoomlaDavid | 5/02/2008




Implementación del MVC de Joomla! 1.5En el artículo anterior hablé sobre el patrón MVC . MVC es un patrón genérico, después cada marco de trabajo tiene una forma de implementar este patrón.El marco de trabajo de Joomla! proporciona una implementación sin archivos de configuración, al contrario de lo que hacen otros marcos de trabajo como Struts o JSF. Esto puede ser una ventaja o una desventaja según como se mire. Joomla no proporciona este archivo de configuración, 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 importantísimo que nombres bien el controlador, las vistas y los modelos de tu componente, de lo contrario Joomla no sabrá encontrarlos .De esto hablaremos más adelante.Introducción al concepto de front-end y back-endNuestro componente tendrá dos partes diferenciadas: el front-end y el back-end.

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 código 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 configuración para la aplicación. Después, en la parte de front-end obtendremos los parámetros 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 podríamos crear un formulario para subir el recurso al servidor, y ponerle un nombre , una categoría, 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 podrían subir recursos al servidor.

Tutorial: Como crear un componente para Joomla! IIIFrameworks, JoomlaDavid | 5/02/2008




En los anteriores posts he hablado sobre el patrón MVC y sobre el concepto de front-end y back-end en Joomla!. Una vez entendido se puede empezar a programar un componente MVC en condiciones.Iniciación: Construir un componente simple en Joomla! 1.5 Usando el patrón MVC.Siguiendo el patrón MVC, vamos a crear un componente simple para joomla 1.5 al que llamaremos prueba. El objetivo de esta primera toma de contacto es entender la metodología de trabajo para crear el componente de joomla! 1.5.Lo primero que haremos será ir a la carpeta principal de Joomla en nuestro servidor web. Dentro de esa carpeta localizar el directorio components .Observa que dentro del directorio existen otros directorios que empiezan por com_xxxx . Esta es la primera norma que pone Joomla!: los componentes se deben de ubicar en un directorio cuyo nombre empieze por com_ seguido del nombre del componente, por ejemplo para el componente prueba seria com_prueba (este aspecto es similar a la parte de módulos que hemos visto anteriormente)Por lo tanto creamos un directorio dentro del directorio components y lo llamamos com_prueba. Cuando llamemos a nuestro componente, lo primero que hace Joomla es buscar el archivo php que hay dentro con el mismo nombre que el componente y ejecutarlo. Este es el punto de entrada del componente. Creamos el fichero prueba.php dentro del directorio y de momento lo dejamos en blanco. Por ahora solo estamos creando la estructura del componente. Lo siguiente es crear el archivo controller.php, y de momento también lo dejaremos en blanco. Ahora necesitamos crear los directorios en los que ubicaremos nuestro Modelo y nuestra Vista.Crea un directorio con nombre models y otro con nombre views. Dentro del directorio views, hay que crear un directorio por cada vista y el directorio tiene que tener el nombre de la vista; crea el directorio prueba dentro del directorio views.Dentro del directorio views/prueba crea el directorio tmpl , aquí es donde se guardarán los layouts de la vista. El layout es el fichero final que se mostrará por el navegador, más adelante explicaré esto.Crea el fichero views/prueba/view.html.php , este fichero también es necesario. Ahora crea el fichero prueba.php dentro de models.

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

Como podrás imaginar el modelo del componente irá dentro de la carpeta models , las vistas se ubicaran dentro del directorio views, y el controlador en el archivo controller.php .Joomla! 1.5 sabe qué componente tiene que cargar porque busca en la query string de la petición el parámetro “option”, del cual obtiene el nombre del componente a cargar. Es decir, nosotros para llamar a nuestro componente prueba, introduciremos en joomla la URL acabada con index.php?option=com_prueba. Esto muestra la pagina principal de nuestro componente, que por defecto carga la vista con el mismo nombre del componente, es decir, la vista con nombre “prueba”.Cuando se carga el componente, se ejecuta el punto de entrada a este, prueba.php, y en el punto de entrada será donde nosotros crearemos una instancia de nuestro componente.Introduce el siguiente código en el punto de entrada de tu componente:defined( '_JEXEC' ) or die( 'Restricted access' ); require_once( JPATH_COMPONENT.DS.'controller.php' ); if($controller = JRequest::getWord('controller')) { $path = JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php'; if (file_exists($path)) { require_once $path; } else { $controller = '';

}} $classname = 'pruebaController'.$controller;$controller = new $classname( ); $controller->execute( JRequest::getVar( 'task' ) ); $controller->redirect();

Vamos a comentar el siguiente codigo paso a paso:La primera línea comprueba si esta definida la variable “_JEXEC”, y si no esta definida se muestra un mensaje de error por pantalla mediante la función “die”. Esto es una medida de seguridad que incluye el marco de trabajo Joomla! y que es recomendable usar en todos nuestros archivos .php que tengamos en el sitio, y que evitara que la gente acceda a las paginas directamente sin hacer antes las comprobaciones de seguridad que lleva incluida Joomla!Seguidamente se importa el fichero controller.php donde crearemos nuestra clase que contendrá el controlador.JPATH_COMPONENT y DS son constantes que define el marco de trabajo de Joomla! y que contienen el path al componente en el sistema y el separador de directorios adecuado para el sistema que se este utilizando, “\” para Windows y “/” para sistemas Unix. Utilizar estas constantes nos facilitara el trabajo más adelante y hará nuestras aplicaciones portables e independientes de la plataforma donde se estén utilizando.Después de importar el controlador, se comprueba si existe el parámetro “controller” en la query string, y si existe establece la variable path a JPATH_COMPONENT/controllers/$controller.php, para luego hacer un require_once de path, e importar el controlador que se especifica en la petición y que se sitúa en la carpeta controllers .Nosotros no hemos creado la carpeta controllers, por que de momento solo crearemos un controlador, pero también se pueden crear varios controladores y se instanciará uno u otro según el parámetro controller que se establezca en la query string.Después de importar el fichero correspondiente a nuestro controlador, lo instanciamos y ejecutamos el método execute del controlador, y le pasamos como parámetro un string que contiene el valor del parámetro task que hayamos establecido en la query string.Después de esto se ejecuta el metodo redirect() del controlador, que redigirá el flujo del programa a la vista adecuada.Parece complicado, pero no lo es tanto simplemente recuerda:

Se comprueba si viene un parámetro en la query string que establezca un controlador, y si viene se importa el fichero con el controlador.

Se instancia el controlador. Se ejecuta el método execute del controlador. Se ejecuta el método redirect del controlador.

Después de esto, lógicamente, tendremos que incluir el código del controlador que acabamos de instanciar.Vamos al fichero controller.php y copiamos el siguiente codigo:defined( '_JEXEC' ) or die( 'Restricted access' );jimport('joomla.application.component.controller'); class pruebaController extends JController{

function display()

{parent::display();

}}

Esta vez lo único que hemos hecho es crear la clase que hará la función de controlador, y es obligatorio que herede de JController.Hemos sobrescrito el metodo display, pero lo único que hacemos es ejecutar el metodo display de la clase padre, es decir, que básicamente no hacemos nada.En un componente más complejo, antes de ejecutar parent::display(); incluiríamos lógica de negocio en la aplicación, con acceso a datos , etc..El controlador da paso a la vista correspondiente, que en este caso es la que se llame prueba.Se le puede especificar la vista que se quiere ver pasándole a la petición un parámetro en la query string , es decir, si en vez de ver la vista por defecto quieres que el controlador redirija a una vista con nombre “noticias”, haremos una petición como la siguiente : index.php?option=com_prueba&view=noticias.Lo mismo se puede hacer con el parámetro controller, pero en ese caso lo que haría sería instanciar el controlador con el nombre especificado en lugar de el controlador por defecto que se instancia.Después de crear nuestro controlador, vamos a crear nuestra vista.Vamos al fichero view.html.php en el directorio views/prueba y copiamos el siguiente código: defined( '_JEXEC') or die( 'Restricted access'); jimport( 'joomla.application.component.view'); class pruebaViewprueba extends JView {

function display($tpl = null) {

$model =& $this->getModel();$mensaje = $model->getMensaje();$this->assignRef('mensaje',$mensaje);

parent::display($tpl);

} }

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

NombreComponenteViewNombreVista Esta norma es la que se sigue también para el modelo.Lo que vamos a hacer en este caso es sobrescribir el método display y utilizar assignRef para crear referencias que utilizará el “layout”.La primera línea del método display obtiene el modelo, Joomla busca un modelo con nombre PruebaModelPrueba debido a que no se le pasa ningún parámetro a la función getModel() y lo instancia. Si le hubiéramos pasado el nombre de algún modelo como parámetro, nos hubiera devuelto el modelo especificado.Una vez tenemos el modelo ejecutamos el método getMensaje de este, que devuelve un string. El string se le pasa al layout por referencia mediante assignRef.

Finalmente se ejecuta el método display de la clase padre, al cual se le puede pasar como parámetro el nombre del layout que se quiere visualizar, en nuestro caso no le pasaremos ninguno y visualizará el layout con nombre default.php .Crea el fichero views/prueba/tmpl/default.php . Este será el layout que se visualizara por defecto en nuestra vista. Añade el siguiente código:<h1> <?php echo $this->mensaje ?> </h1>

Observa que recogemos lareferencia que hemos asignado antes mediante asignRef() simplemente como si fuera una variable local del script php. Yo he puesto este código muy simple, pero tu puedes poner todo el código html que se te ocurra.Solo nos queda preparar el modelo e implementar el método getMensaje() que hemos usado antes en la vista,Ves a la carpeta modelsy en el fichero prueba.php escribe el siguiente codigo : defined('_JEXEC') or die("Invalid access");jimport('joomla.application.component.model'); class pruebaModelprueba extends JModel{

function getMensaje(){return "Hola, soy un valor devuelto por el modelo";

}}

El código habla por si solo, ten en cuenta que yo he devuelto una cadena de texto por simplicidad, pero en una aplicación más compleja nos se devolvería una cadena obtenida de una base de datos o un resultSet, p.e.Ya está finalizada la creación del componente. Para llamarlo tendremos que pasarle en la url como argumento el nombre del componente, y Joomla lo mostrará por pantalla. Como es lógico, Joomla sólo podrá mostrar un componente simultáneamente por pantalla.Así quedaría la estructura de directorios para la parte de front-end de los componentes de Joomla!:

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

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

Descargarse los ficheros del componente

Tutorial: Como crear un componente para Joomla!1.5 IVFrameworks, Joomla, ProgramaciónDavid | 7/02/2008




El tutorial anterior fue una introducción a la creación 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 más cosas que se me escapan he iré completando más 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 específicos 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 protección contra inyección Sql, optimización, 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 introducción de datos en el que se presenta un campo de texto y un botón 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 opción 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, pégale un vistazo . La estructura principal del componente es esta:

A continuación puedes observar el diagrama del componente que vamos a crear:

http://www.nosolocodigo.com/wp-content/uploads/2008/02/vistaadmin.gif

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 botón 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 opción 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 código necesario para recuperar los datos de la tabla. Este es el código 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 ); }

http://www.nosolocodigo.com/wp-content/uploads/2008/02/image015.jpg

return $this->datos; } }

Como siempre la primera línea hace una comprobación 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 línea se utiliza la función jimport del api de Joomla!, esta función importa la clase abstracta para el modelo.Observa que la nomenclatura sigue la norma descrita:

Nombre de la Vista– Model – Nombre del modeloAl tener este nombre , el controaldor PruebaAdminController podra acceder directamente a los métodos de este modelo.La función 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 método 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 almacenauna lista de objetos con los resultados de la consulta.Lo siguiente es mostrar estos datos en la vista PruebaAdmin.Introduce el siguiente código 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 líneas ya no necesitan explicación.La nomenclatura de la Vista sigue el patrón descrito.Se sobrescribe el método display() , lo primero es obtener el modelo, al seguir las nombras de nombrado no hace falta especificar el nombre del modelo en el método getModel().Almacenamos en la variable $datos la lista de objetos que devuelve el método que hemos creado anteriormente en el modelo, y se la pasamos al layout mediante el método assignRef.Código 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> </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 método estático JURI::base() devuelve la url base del sitio, para realizar la petición 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 código 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 ningún acceso a datos , simplemente se ejecuta el método display() y se visualiza el layout por defecto (“tmpl/default.php”) .La nomenclatura de la vista ha de seguir el patrón que ya se ha explicado anteriormente :

Nombre componente – View – Nombre de la vista .Ahora vamos a ver el código 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> </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 envía la información 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 automáticamente en la base de datos.Esta información la tiene que procesar el task introduceMensaje . La forma de indicar que la información 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 método: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 parámetros de entrada y detecta que hay un parámetro que indica el componente de destino , el componente com_prueba recibe la petición y el controlador detecta que existe un parámetro task, este parámetro es un parámetro 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 parámetro task y le concedera el control. Es por eso que el nombre del método ha de

coincidir con el nombre del task que pusimos en el formulario. Se pueden mapear task’s a métodos 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.Podríamos utilizar funciones como mysql_query() para realizar consultas de tipo insert y update, sin embargo estas funciones son mas difíciles 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 llamaraTableMensajes. Si no se hace así, Joomla! tendra problemas paraencontrar el objeto JTable.Introduce el siguiente código 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 parámetro el nombre de la tabla, como segundo parámetro la clave primaria y en el tercer parámetro la referencia al objeto base de datos del marco de trabajo Joomla!, el nombre de este tercer parámetro 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 método introduce de este. Es en el método introduce del modelo pruebaAdmin donde se usa el objeto JTable que acabamos de crear.Vamos a implementar el método introduce del modelo pruebaAdmin , introduce el siguiente método 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 parámetro una variable a la que llama $post.

En esta variable almacenaremos la petición entera que previamente hemos obtenido en el controlador mediante la instrucción : JRequest::get(’post’) Esta instrucción recoge los parámetros de entrada de la petición, es como acceder al array $_POST de php, pero mediante el API de Joomla!, lo que nos provee de protección contra inyección de código, etc…Es importante saber que si se intenta pasar el valor de los parámetros post mediante el objeto JRequest desde otro sitio que no sea el controlador, por ejemplo desde una vista, el objeto JTable no recibirá los parámetros correctamente y generará un error al intentar obtener los valores de la petición.En la primera línea del método se obtiene una instancia del objeto TableMensajes que hemos creado antes , si no pones los nombre correctamente no se instanciará el objeto.Después se ejecuta el método bin() del objeto TableMensajes que lo que hace es buscar en los parámetros post de entrada parámetros 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 método 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 métodos no se ejecuta correctamente se lanza un error el método mediante el código : return JError::raiseWarning(500, $row->getError()) .De vuelta al task introduce mensaje, obtenemos la devolución del metodo introduce y la procesamos con este código :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 código ya lo hemos introducido antes en el task introduceMensaje.Si todo ha funcionado correctamente , se redirección a la vista pruebaAdmin mediante el método de controlador setRedirect(),en la cual se volverán 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 método 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 también Google Maps.También escribiré algo de módulos.

Crear el XML del componente de Joomla y generar instalableJoomla



David | 11/03/2008




Hasta ahora habíamos visto como hacer los componentes, tanto la parte de backend, como la de frontend, pero no habíamos 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 específico 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>[email protected]</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 descripción es opcional, y por defecto es el nombre del componente –> <description>Descripción del componente …</description> <!– Script php personalizado que se ejecutará en la instalación –> <installfile>install.php</installfile> <!– Script php personalizado que se ejecutará en la desinstalación –> <uninstallfile>uninstall.php</uninstallfile> <!– Scripts SQL que se ejecutaran en la instalación –> <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 ejecutarán en la desinstalación–> <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> <!– Sección 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 & para que el fichero XML valide correctamente y pueda ser parseado por el instalador –> <menu link=”option=com_helloworld&task=hello&who=world” >

Hello World! </menu> <!– Puedes especificar el link como arriba o los atribitos de la URL individualmente 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 Administración–> <!–El atributo folder especifica la carpeta desde donde serán 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 Administración –> <languages folder=”admin“> <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 de la parte de Administración–> <media folder=”admin” destination=”com_prueba“> <filename>admin-image.png</filename> <filename>admin-flash.swf</filename> </media> </administration></install>

Este fichero será leído por el instalador de Joomla! y de aquí sacara la información para proceder a instalar el componente. Si el fichero no valida correctamente, no podrá ser parseado y fallará la instalación, así que estate al tanto de que valide ya que XML es muy estricto y puede fallar por cualquier tontería, 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 documentación oficial de Joomla y traducido al castellano para su mejor comprensión.

Tutorial: Como crear módulos para Joomla! 1.5Frameworks, Joomla, ProgramaciónDavid | 10/02/2008




Aunque con las extensiones existentes de Joomla tendremos suficiente en la mayoría de los casos, hay ocasiones en que necesitamos algo concreto, como por ejemplo un módulo que muestre los usuarios registrados que cumplan años hoy o uno que muestre los artículos publicados hace un año.Y eso es precisamente lo que voy a hacer.En el siguiente tutorial vamos a crear un modulo que consulte a la base de datos y muestre el titulo de los artículos con un enlace al articulo completo.Hacer un módulo es mucho más sencillo que un componente.De hecho los módulos están pensados para mostrar datos concretos, como usuarios conectados, datos de contacto, menús etc… que en muchos casos son una simple consulta a la base de datos.Los módulos se encuentran situados en el directorio modules dentro del directorio de instalación de Joomla y por cada módulo hay una carpeta con nombre mod_nombredelModulo .Nuestro módulo se va a llamar anyo, por lo tanto la carpeta del módulo se llamará mod_anyo.La estructura de un módulo es muy simple, tiene un fichero php con el mismo nombre que el módulo, el cual es el punto de entrada, que tomará en control del módulo cuando este sea llamado.Para separar la lógica de la presentación se ha creado la clase helper, en la cual escribiremos nuestras funciones y de esta forma nuestro código quedará más ordenador y legible. La clase helper se encuentra en el fichero de nombre helper.php en la raíz del directorio del módulo.Desde mod_anyo.php ejecutaremos las funciones de la clase helper simplemente llamándolos como métodos estáticos , puedes encontrar una definición 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 módulo , 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 parámetros del módulo y mediante el cual podremos parametrizar el modulo para hacerlo mas configurable y reutilizable.Vamos a ver el código de nuestro punto de entrada:<?php // no acceso directodefined( '_JEXEC' ) or die( 'Restricted access' ); // incluir al helper que devolverá los datos, solo una vezrequire_once( dirname(__FILE__).DS.'helper.php' ); $articulos = modAnyoHelper::getArticulos( $params );require( JModuleHelper::getLayoutPath( 'mod_Anyo','default') );?>

La primera línea, como siempre que hacemos una extensión para Joomla, es una línea de comprobación, que asegura que no se este accediendo al modulo estar usando Joomla.La segunda línea importa el fichero de la clase helper, donde almacenamos nuestras funciones.En la tercera línea, ejecutamos la función 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 método getLayoutPath de la clase JModuleHelper, que devuelve la ruta del layout pasándole como parámetro el nombre del módulo y al nombre del layout.En el helper almacenamos nuestras funciones, donde accedemos a datos para recuperar la lista de artículos que se escribieron hoy hace un anyo. Vamos a ver el código:<?phpclass 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 parámetro un string que apunte al “package” donde se encuentre la clase. Es un concepto similar al import de java . Los paquetes se importan según la el árbol de clases que hay en la documentación oficial : Después creamos el método getArticulos que será el que devuelva una lista de artículos que tengan un año de antigüedad.Utilizamos un objeto de tipo JDatabase para realizar la consulta y después simplemente obtenemos la lista de objetos mediante el método loadObjectList .El meollo de la cuestión esta en la consulta SQL, donde se utiliza la función datediff para consultar los artículos con una antigüedad de 365 días Finalmente , en el layout, sacamos por pantalla una lista HTML con enlaces a los artículos que se escribieron hace justo 365 días:<?phpif($params->get('asignarCss')){$css = $params->get('clase');} ?><ul <?php if(isset($css )){ echo 'class="'.$css.'"';} ?> ><?phpforeach ($articulos as $articulo) {

echo '<li><a href="index.php?option=com_content&id='.$articulo-">id.'>'. $articulo->title .'</a></li> ';

}?></ul>

Fíjate que para acceder a los parámetros del fichero mod_anyo.xml se utiliza $params->get() .Estos parámetros se definen previamente en el fichero xml que acompaña el modulo.<?xml version="1.0" encoding="utf-8"?><install type="module" version="1.5.0"> <name>Hoy hace un año</name> <author>David Noguera</author> <version>1.5.0</version> <creationDate>30.07.2006</creationDate> <description>Modulo que carga los artículos de tal dia como hoy pero hace un año</description> <authorEmail>[email protected]</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.5Joomla, ProgramaciónDavid | 15/02/2008




Ya hemos visto como hacer componentes y como hacer módulos en Joomla! 1.5 y hemos visto que no es nada complicado, y simplemente hay que entender la mecánica de trabajo .Lo ultimo que nos queda son los plugins, con ellos podremos modificar el comportamiento estándar de Joomla!, pudiendo interceptar ciertos eventos prefijados para ejecutar nuestro código antes o después 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 imaginación 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 métodos definidos que son ganchos (hooks) , también se les podría 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 código allí.Por ejemplo, si sobrescribimos el método 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 , lógicamente , seria inútil hacer una cosa así, además 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 parámetros del plugin.Los parámetros del plugin se fijan como siempre en Joomla!, mediante el fichero xml de configuración.Esta es la estrctura de nuestro plugin :

Primero vamos a ver el fichero xml de configuración, en el que definiremos nuestro parámetro.<?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>[email protected]</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 parámetros 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, más 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á.Después crearemos el constructor de la clase, el cual invoca el constructor de la clase padre.El constructor ha de crearse con una función de igual nombre que la clase, ya que si lo hacemos con el método __construct de php5 no será compatible con php4.Esto se hace siempre igual en todos los plugins.Después crearemos el metodo onBeforeDisplayContent , donde introduciremos el código que queremos que se ejecute antes de mostrar el titulo.Si te has fijado, el método admite como parámetro las variables $article, $params y $limitstart. Esta definición de parámetros 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 función :Con el metodo getPlugin de JPluginHelper, obtenemos el plugin pasandole como parámetro el tipo y el nombre, por este orden.Después en la variable $pluginParams almacenamos una instancia del objeto JParameter al que le tenemos que pasar como parámetro la propiedad params del objeto plugin que previamente hemos obtenido.Acto seguido almacenamos en la variable $mensaje el parámetro ‘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 instálalo con el instalador de extensiones de Joomla!, después ves al Plugin Manager y actívalo, allí también podrás cambiar el mensaje que se imprime por pantalla.Este es el resultado:

Puedes consultar los eventos disponibles en la documentación oficial de Joomla, que aunque sea oficial, es escasa, y también 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 electrónico con el API de Joomla 1.5Frameworks, Joomla, ProgramaciónDavid | 8/02/2008 Hoy en el trabajo he necesitado crear un componente para enviar correos electrónicos. Allí usamos Joomla 1.5 como CMS, así que lo primero que he hecho a sido ir a la página de documentación oficial de Joomla a buscar documentación. La versión 1.5 acaba de salir, por lo tanto no hay mucha documentación, así que no he encontrado nada.

Después he pensado… pero si Joomla lleva un componente para enviar correos… ¿Cómo lo habrán 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 código 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("[email protected]");

// 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 información 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 envía al task sendMail. Se obtiene el objeto mailer mediante la clase JFactory y después mediante JRequest::getVar() se obtienen los datos del formulario. Después, 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 envía son formato HTML. Por último mediante addRecipients se introduce el destinatario, que en este caso es una cuenta de correo dedicada para la atención de los clientes. El método 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 añadiendo un addRecipient en cada pasada de bucle.

Finalmente se ejecuta el método $mailer->Send(); que envía el correo a todos los destinatarios.Al final del todo se muestra una vista u otra según si ha resultado error o no el envío del correo: si da error se envía otra vez al formulario de contacto, y si no ha dado error , se envía a la página principal, y se muestra un mensaje de confirmación.

Utilizar el calendario que incorpora el API de JoomlaFrameworks, Javascript, JoomlaDavid | 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 específico para que puedan ser procesadas en el servidor (con PHP).Joomla incorpora un datepicker (calendario) que utiliza en el backoffice. Vamos a ver como utilizar este calendario en un componente creado por nosotros.Para implementar el calendario en la parte de backoffice simplemente hay que llamar a la función JHTML::_(‘behavior.calendar’), que se encarga de incluir los ficheros necesarios donde se haya el objeto javascript que genera el calendario. Luego hay que escribir un formulario HTML con una llamada javascript que se encargará de generar el calendario. A continuaciónse puede ver un ejemplo de calendario implementado en un componente de backoffice de Joomla.

123456

<?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 después se crea una imagen, la ruta de la imagen es la misma que se usa en los calendarios del backoffice. En el evento click de la imagen se añade el siguiente código:1 onclick="return showCalendar('fecha', '%Y-%m-%d');"

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

de usar el calendario es el siguiente:

Subir ficheros al servidor con el API de Joomla!Joomla, ProgramaciónDavid | 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.

Código de la vista<form name="registro" id="registro" action="index.php" method="POST" enctype="multipart/form-data" > 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="subirFichero" /></form>

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

Código del task$file = JRequest::getVar( 'fichero', null, 'files', 'array' );

http://www.nosolocodigo.com/wp-content/uploads/2009/02/calendariopng.png

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 la primera línea obtenemos el fichero de la petición proveniente del formulario. Investiga más sobre los métodos de JRequest , te será muy útil!!. La segunda línea 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 pequeño o si no se ha subido ningún fichero y vamos guardando en una variable el mensaje de error correspondiente, para que después solo haya que invocar el método upload del objeto JFile al cual le pasamos como primer parámetro el fichero temporal que aún se encuentra en la petición y como segundo parámetro 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.5CSS, Javascript, JoomlaDavid | 18/02/2008 Muchas veces he necesitado añadir un script Javascript a una vista en concreto mientras desarrollaba un componente para, por ejemplo,mostrar un mapa de Google maps. También he necesitado añadir un estilo específico 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 ralentizaría. 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 añadir 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 método addStyle y el método addScript del objeto JDocument, los cuales me permiten agregar estilos css y scripts 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 después usamos los métodos addStyleSheet o addScript si lo qeu queremos es hacer un link del estilo/script o el método addScriptDeclaration o addStyleDeclaration pasándole como parámetro un string que contendrá el código 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 código fuente podras comprobar que se han añadido 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 MootoolsFrameworks, Javascript, JoomlaDavid | 5/10/2009 Una ventana modal es el popup de la Web 2.0. Además de ser más usable y rápido, es más bonito. Joomla incorpora Mootools como framework Javascript en el core permitiendo crear popups en forma de ventana modal de una manera muy sencilla y homogénea. De hecho, cuando se programa en Joomla es recomendable usar todas las características del core Joomla para que todo quede con un “look” más consistente (Cómo usar el datepicker de Joomla). Para poder usar los comportamientos que incorpora la librería Mootools en Joomla hay que incluir la siguiente línea de código en la primera línea del fichero index.php de tu template. Si estás desarrollando un componente, entonces añádela en el fichero view.html.php.

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

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

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

Con el código introducido en este bloque se mostraría por pantalla la imagen pequeña, y al hacer click sobre ella aparecería una ventana modal con la imagen grande en alta resolución. Se pueden añadir más opciones al enlace, por ejemplo:

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

Con el código introducido en el bloque de arriba se mostraría una ventana modal con un iframe que puede apuntar a cualquier sitio. En este caso está apuntando a la página principal de este Nosolocodigo, pero si estás desarrollando una aplicación podría apuntar a una vista raw, o una vista html con el parámetro tmpl=component. Vamos, que puede apuntar a donde sea. Las opciones se definen en el atributo rel del enlace, creo que no hace falta más explicación.Esto está muy bien para lanzar las ventanas desde un enlace, haciendo click sobre él, pero ¿y si queremos lanzar las ventanas usando una función Javascript? Pues entonces sigue leyendo..En caso de que lo que se quiera sea lanzar la ventana modal desde Javascript puedes usar la siguiente función:

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

<script> window.addEvent('domready', function(){

window.addEvent('load', function(){ SqueezeBox.fromElement($('popup')); });

});</script>

Esta función se ejecutaría automáticamente en el evento load y provocaría que en el enlace con id popup se mostrará una ventana modal exactamente igual que si hiciéramos click sobre el enlace. Igual que se ha utilizado el evento load se podría usar cualquier otro evento.Por último, si quieres lanzar una ventana modal instantáneamente sin haber definido previamente ningún enlace en el documento HTML, he implementado esta función que

he encontrado por los foros de Joomla.org y que me funciona bastante bien. La función hay que definirla previamente para después usarla. Puedes crear un fichero Javascript y añadirlo al head del template usando el API de Joomla.

SqueezeBox.loadModal = function(modalUrl,handler,x,y) { this.initialize();

var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));

this.setOptions(this.presets, options); this.assignOptions(); this.setContent(handler,modalUrl);

};

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

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

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

Tutorial Joomla

Documents

Transcript of Tutorial Joomla