Está en la página 1de 41

c 


   
   

 




admin | 4/02/2008

          



1.V   
   

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

Ô    

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:

ëV Ô  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.
ëV Ô
  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.
ëV º  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«

c  
    
  

!"##




David | 5/02/2008

          



1.V   
   

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

#

    
!"

En 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.

#    $% &' % 

Nuestro componente tendrá dos partes diferenciadas: el front-end y el back-end.

ëV % : 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!.
ëV  % : 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.

c  
    
  

###




David | 5/02/2008

          



1.V   
   

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

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

#      


  
  
!"(  
 
Siguiendo el patrón MVC, vamos a crear un componente simple para joomla 1.5 al que
llamaremos ÷ . 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 ÷
.
Observa que dentro del directorio existen otros directorios que empiezan por  .
Esta es la primera norma que pone Joomla!: los componentes se deben de ubicar en un
directorio cuyo nombre empieze por  seguido del nombre del componente, por
ejemplo para el componente prueba seria  ÷  (este aspecto es similar a la parte
de módulos que hemos visto anteriormente)

Por lo tanto creamos un directorio dentro del directorio ÷


y lo llamamos
 ÷  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 ÷ ÷÷
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   ÷÷ 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 


y otro con nombre 


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 ÷  dentro del directorio

.

Dentro del directorio 


÷  crea el directorio ÷ , 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 


÷  ÷÷ , este fichero también es necesario. Ahora
crea el fichero ÷ ÷÷ 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 
, las
vistas se ubicaran dentro del directorio 
 y el controlador en el archivo
  ÷÷ .

Joomla! 1.5 sabe qué componente tiene que cargar porque busca en la  
 de la
petición el parámetro ³÷ ´, 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  ÷÷÷  ÷  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, ÷ ÷÷, 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 = a  $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   ÷÷ 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   


en la query string, y si existe establece la variable path a
JPATH_COMPONENT/controllers/$controller.php, para luego hacer un   
de path, e importar el controlador que se especifica en la petición y que se sitúa en la
carpeta  
.

Nosotros no hemos creado la carpeta  


, 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   que se establezca en la  


Después de importar el fichero correspondiente a nuestro controlador, lo instanciamos y


ejecutamos el método    del controlador, y le pasamos como parámetro un

que contiene el valor del parámetro 
 que hayamos establecido en la  
.

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

  
   

  

ëV Se comprueba si viene un parámetro en la  


 que establezca un
controlador, y si viene se importa el fichero con el controlador.
ëV Se instancia el controlador.
ëV Se ejecuta el método    del controlador.
ëV Se ejecuta el método   del controlador.

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

Vamos al fichero   ) y copiamos el siguiente codigo:

defined( '_JEXEC' ) or die( 'Restricted access' );


jimport('joomla.application.component.controller' );

›  pruebaController  a JController


{
a›a display()
{
parent::display();
}
}

Esta vez lo único que hemos hecho es crear la clase que hará la función de controlador,
y es '*+ )    Ô .Hemos sobrescrito el metodo 
÷, 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 ÷  !!


÷ " 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  
 , 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 :  ÷÷÷  ÷ # 
.

Lo mismo se puede hacer con el parámetro    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  ÷÷ en el directorio 


÷  y copiamos el siguiente
código:

defined( '_JEXEC') or die( 'Restricted access' );


jimport( 'joomla.application.component.view' );

›  pruebaViewprueba  a JView


{
a›a display($tpl = a )
{
$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:

ü  
 ü


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 


÷ y utilizar 

$%
para crear referencias que utilizará el ³layout´.

La primera línea del método 


÷ obtiene el modelo, Joomla busca un modelo con
nombre & '&  debido a que no se le pasa ningún parámetro a la función
 ' 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  '


( de este, que devuelve un

. El string se le pasa al layout por referencia mediante 

$%.

Finalmente se ejecuta el método 


÷ 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 % ÷÷ 

Crea el fichero 


÷  ÷% ÷÷  Este será el layout que se visualizara por
defecto en nuestra vista. Añade el siguiente código:

Xh1> X  echo $this->mensaje  X h1>

Observa que recogemos lareferencia que hemos asignado antes mediante 


$%
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  '


(() que hemos
usado antes en la vista,

Ves a la carpeta 


y en el fichero ÷ ÷÷ escribe el siguiente codigo :

defined('_JEXEC') or die("Invalid access" );


jimport('joomla.application.component.model' );

›  pruebaModelprueba  a JModel


{

a›a 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 
 ) , 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/
 */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

  ÷
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

c  
    
  

!"#


*
 

David | 7/02/2008

          



1.V   
   

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

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 
  ÷
. El acceso al componente es por la
URL « ) 
   ÷÷÷  ÷  

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
+
   ÷  ÷ . 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:

m   'jos_prueba' (


`id` INT   
m  
  ,
`mensaje` VARCHAR( 30 )    '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:


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 ÷ ,÷÷ , 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 ÷ ,÷÷ . 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' );
›  PruebaAdminModelPruebaAdmin  a JModel
{
 $datos;
a›a getData()
{
if (empty( $this->datos ))
{
$query = ' SELECT * '
. ' FROM #__prueba ' ;

$this->datos = $this->_getList( $query );


}

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:

ü    -
. ' . ü   

Al 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 G 

. 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 almacena

una 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 


÷ , ÷÷ :

defined( '_JEXEC' ) or die( 'Restricted access' );


jimport( 'joomla.application.component.view' );
›  PruebaAdminViewPruebaadmin  a JView
{
a›a display($tpl = a )
{
$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 % ÷÷ de la vista :

Xtable class="adminlist">
Xthead>
Xtr>
Xth width="5">ID X th>
Xth>Mensaje X th>
X tr>
X thead>
Xtbody>
Xphp
$n =count( $this ->mensajes );
for ($i=0; $i X $n; $i++)
{
$row =& $this ->mensajes[$i];
>

Xtr>
Xtd> Xphp echo $row ->id; > X td>
Xtd>Xphp echo $row ->mensaje; > X td>
X tr>

Xphp

}
>
Xtr>
Xtd>&#160;X td>
Xtd>Xa href="Xphp echo JURI::base();>
index.phpoption=com_prueba&view=introduceNuevo">Nuevo Mensaje
X a>X td>
X tr>
X tbody>
X 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  ü dentro de la carpeta 


, crea el directorio ÷ y
los archivos  ÷÷ y ÷% ÷÷ correspondientes .

Introduce el siguiente código en  ÷÷:

defined( '_JEXEC' ) or die( 'Restricted access' );


jimport( 'joomla.application.component.view' );
›  PruebaAdminViewIntroduceNuevo  a JView
{
a›a display($tpl = a )
{
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 :

Xform action="index.php" method="post">

Xtable border="0">
Xtbody>
Xtr>
Xtd>IDX td>
Xtd>MensajeX td>
X tr>
Xtr>
Xtd>Xinput disabled size="3" name="id" >X td>
Xtd>Xinput maxlength="30" size="30" name="mensaje" >X td>
X tr>
Xtr>
Xtd>&#160;X td>
Xtd>Xinput type="submit" value="Enviar" >X td>
X tr>
X tbody>
X table>
Xinput type="hidden" value="com_prueba" name="option" >
Xinput type="hidden" value="introduceMensaje" name="task" >

X form>

Como puedes observar, he creado un formulario que envía la información a  ÷÷ 

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  '
( . 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  '


( :

En la clase controlador PruebaAdminController que debes haber creado anteriormente


introduce el siguiente método:

a›a 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.phpoption=' . $option.
'&view=pruebaAdmin' );
}else{
$this->setMessage ('Error al introducir!' );
$this->setRedirect ('index.phpoption=' . $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 


   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 


, y dentro de esta carpeta crea el archivo '
(
÷÷ , 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 código en el archivo:

defined( '_JEXEC' ) or die( 'Restricted access' );


›  TableMensajes  a JTable
{
 $id = a ;
 $mensaje = a ;
a›a __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:

a›a 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 :    */  !! 
0 122 3 45 /   .

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.phpoption=' . $option.
'&view=pruebaAdmin' );
}else{
$this->setMessage ('Error al introducir!' );
$this->setRedirect ('index.phpoption=' . $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


 '

 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.


  ,º  
   

&*  ' 



David | 11/03/2008

          



1.V   
   

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

Hasta ahora habíamos visto como hacer los componentes, tanto la parte de backend,
como la de frontend, pero no habíamos visto 
    +  ' para
poder compartirlo con todo el mundo que se pueda instalar desde el instalador de
extensiones de Joomla!.

Para ello simplemente hay que*   $ ) ,º con nombre igual al del
componente, en este caso prueba.xml y con un formato específico y 


 - . Este zip será el instalable.

Vamos a ver un posible fichero XML para un componente de prueba.

Xxml version=´1.0Ǝ encoding=´utf -8Ǝ>

X!DOCTYPE install SYSTEM ³http: dev.joomla.org xml 1.5 component -


install.dtd´>

Xinstall type=´component´ version=´ 1.5.0³>

Xname>COM_PRUEBA X name>

X!± Los siguientes elementos son opcionales ±>

XcreationDate> 2007 01 17 X creationDate>

Xauthor>DavidX author>

XauthorEmail> david@nosolocodigo.com X authorEmail>


XauthorUrl> http: www.nosolocodigo.com X authorUrl>

Xcopyright> Copyright Info X copyright>

Xlicense> License Info X license>

X!± Esta cadena es almacenada en la base de datos ±>

Xversion> Component Version String X version>

X!± La descripción es opcional, y por defecto es el nombre del


componente ±>

Xdescription> Descripción del componente « X description>

X!± Script php personalizado que se ejecutará en la instalación


±>

Xinstallfile> install.php X installfile>

X!± Script php personalizado que se ejecutará en la


desinstalación ±>

Xuninstallfile> uninstall.php X uninstallfile>

X!± Scripts SQL que se ejecutaran en la instalación ±>

Xinstall>

Xsql>

Xfile driver=´mysql´
charset=´ utf8³>install.mysql.utf8.sql X file>

Xfile
driver=´mysql³>install.mysql.nonutf8.sql X file>

X sql>

X install>

X!±Scripts SQL que se ejecutarán en la desinstalación ±>

Xuninstall>

Xsql>
Xfile driver=´mysql´
charset=´ utf8³>uninstall.mysql.utf8.sql X file>

Xfile
driver=´mysql³>uninstall.mysql.nonutf8.sql X file>

X sql>

X uninstall>

X!± Ficheros de la parte de front -end del componente, incluye


aquí todos los ficheros del componente, incluidas las vistas,
controladores, etc« ±>

Xfiles>

Xfilename> index.html X filename>

X!²El punto de entrada al componente ha de tener el atributo


component ±>

Xfilename component=´ prueba.php ´>prueba.php X filename>

X files>

X!± Ficheros de leguanjes para el sitio ±>

Xlanguages>

Xlanguage tag=´en-GB³>en-GB.com_prueba.ini X language>

Xlanguage tag=´de-DE³>de-DE.com_prueba.ini X language>

Xlanguage tag=´nl-NL³>nl-NL.com_prueba.ini X language>

X languages>

X!± Ficheros multimedia para el sitio ±>

Xmedia destination=´ com_test³>

Xfilename> image.png X filename>

Xfilename> flash.swf X filename>

X media>
Xadministration>

X!± Sección para el menu del Back -End ±>

Xmenu img=´components com_test assets test -


16.png³>EventList

X menu>

Xsubmenu>

X!± Date cuenta que todos los & estan escapados a


&amp; para que el fichero XML valide correctamente y pueda ser
parseado por el instalador ±>

Xmenu
link=´option=com_helloworld&amp;task=hello&amp;who=world ´ >

Hello World! X menu>

X!± Puedes especificar el link como arriba o los


atribitos de la URL individu almente como abajo ±>

Xmenu img=´icon´ task=´hello´ controller=´ z´


view=´a´ layout=´ b´ sub=´c³>Hello Again! X menu>

Xmenu view=´prueba´ layout=´ foo³>Testing Foo


LayoutX menu>

X submenu>

X!± Ficheros de la parte de Administración ±>

X!±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

±>

Xfiles folder=´admin³>

Xfilename> index.html X filename>

X!²El punto de entrada al componente ha de tener el atributo


component ±>

Xfilename component=´ admin.prueba.php ´>


admin.prueba.php X filename>

X files>
X!± Ficheros de lenguaje de la parte de Administración ±>

Xlanguages folder=´admin³>

Xlanguage tag=´en-GB³>en-
GB.com_prueba.ini X language>

Xlanguage tag=´de-DE³>de-
DE.com_prueba.ini X language>

Xlanguage tag=´nl-NL³>nl-
NL.com_prueba.ini X language>

X languages>

X!±Ficheros multimedia de la parte de Administración ±>

Xmedia folder=´admin´ destination=´ com_prueba ³>

Xfilename> admin-image.png X filename>

Xfilename> admin-flash.swf X filename>

X media>

X administration>

X 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.

c  
  
  

!"


*
 

David | 10/02/2008
          

1.V   
   

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

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
  ' 

Nuestro módulo se va a llamar anyo, por lo tanto la carpeta del módulo se llamará
.

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 & 


 , que se encuentra     

de nuestro módulo , el cual puede tener cualquier nombre que se te ocurra, pero le
asignaremos % ÷÷ que es el nombre por defecto que buscara Joomla si no le
indicamos lo contrario.

Para la parte de Back-End disponemos del fichero


.&
 , 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:

X 

jj    

defined( '_JEXEC' ) or die( 'Restricted access' );

jj            
    
require_once ( dirname( 
 ).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 % 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:

X 
›  modAnyoHelper
{
a›a getArticulos ( $params )
{
jimport('joomla.utilities.date' );
$jnow = a  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:

X 
if($params->get('asignarCss' )){
$css = $params->get('clase');
}


Xul X  if(isset($css )){ echo 'class="'.$css.'"';}  >
X 
foreach ($articulos as $articulo) {
echo '
Xli>Xa href="index.phpoption=com_content&amp;id=' .$articulo-">id.'>'.
È›   .'X a>X li>

';
}
>
X 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.

X xml version ="1.0" encoding="utf-8" 


Xinstall type="module" version="1.5.0">
Xname>Hoy hace un añoX name >
Xauthor>David NogueraX author>
Xversion>1.5.0X version>
XcreationDate>30.07.2006X creationDate>
Xdescription>Modulo que carga los artículos de tal dia como hoy
pero hace un añoX description>
XauthorEmail>david@nosolocodigo.comX authorEmail>
Xfiles>
Xfilename module="mod_anyo">mod_anyo.phpX filename>
Xfilename>helper.phpX filename>
Xfilename>mod_anyo.xmlX filename>
Xfilename>tmpl default.phpX filename>
Xfilename>tmpl index.htmlX filename>
X files>
Xparams>
Xparam name="clase" type="text" default="mod_anyo"
label="Clase Css para el ul"
description="La clase que se aplicara al
ul" >
Xparam name="asignarCss" type="radio" default="1"
label="Clase css" description="Determina si se debe asignar la clase
css o no">
Xoption value="0">NoX option>
Xoption value="1">SiX option>
X param>
X params>
X install>

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

c     * 



!"

*
 

David | 15/02/2008

          



1.V   
   

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

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 ÷
  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>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


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' );

›  plgContentHolaMundo  a JPlugin {

a›a plgContentHolaMundo ( &$subject ) {


parent::__construct ( $subject );
}

a›a onBeforeDisplayContent (&$article, &$params, $limitstart =0) {

$plugin =& JPluginHelper ::getPlugin('content', 'HolaMundo' );


$pluginParams = a  JParameter ( $plugin->params );
$mensaje = "";

$mensaje = $pluginParams ->get('mensaje', 'Hola Mundo' );

$salidaPantalla = '
Xh2>' . $mensaje . 'X 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.

Ô        /# 



!"


*
 

David | 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 :

a›a 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);

jj  

$mailer->addRecipient ("atencionClientes@empresa.com" );

jj 
 
$rs = $mailer->Send();

if ( JError::isError($rs) ) {
$msg = $rs->getError();
$this->setRedirect (
"index.phpoption=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.

(-   +    


/# 


   


David | 23/02/2009

Cuando se crea un componente es muy habitual crear formularios en los que el usuario
tiene que $ ). 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).

      0  1que 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 



$  cº.02' )   31, 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 4
   

 en
un componente de backoffice de Joomla.

Xphp JHTML::_('behavior.calendar' ); >


1
Xform>
2
Xinput id="fecha" name="fecha" size="20" type="text" >
3
4
Ximg › ="calendar" onclick="return showCalendar('fecha', '%Y -%m-
5
%d');" src="templates system images calendar.png" alt="calendar" >
6
X form>

Primero se crea el textbox y después se crea una imagen,   
*  


+       ' $$ . 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:

V
0 '$ )     /# 



*
 

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 


 '   
  c 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  & 56
 7$
%6 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 
    
  
$ ) .

*  


Xform name="registro" id="registro" action="index.php" method="POST"
enctype="multipart form -data" >

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

La vista es enviada a un task, en este caso el task se llama  ' ) , 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)

* 
$file = JRequest::getVar( 'fichero' , a , 'files', 'array' );

jimport('joomla.filesystem.file' );

if(!is_array($file)){
$mensaje .= "NoSeHaSubido" ;
}
if($file['error'] || $file['size'] X 1 ){
$mensaje .= " NoExisteFichero" ;
}
if( $file['size'] > 100 ){
$mensaje .=" FicheroDemasiadoGrande" ;
}
VV
VVVVVVVV  
  
      V
   VV
VV
V V V ! "V#VV$ % & $ ' (V
VVVVVVVV)V

Ô l i lí t  l


i  lti i   i t l
 li
  ti   l t   R  tt  til 

  lí  i itljtil   i t il

i   t i t 


i ll

ltill  l  ›  › 






› 


 

 








›    
      ill j   i t      l
 i lt  l  ljtill ll  i
tl
itl      t ltii   
tl tlt l i lli l  l  l
i  
    l
i

 í  t


it t i  l i   l  i ;


  ›

›


 


 


 
  ›
 

 i |!"/ / "

M      it # i  it  it 


i t  ti t   ll   t
jl t  $l %i 
 it # i  til í
i  tili
  t l  i t i    l it
l  t l iti  tll ti í

Ô  i iil l i i  l l t t  


i  
l& i  i l  ltlt

Ô t i i   t iltl  il l


  tt itit í # il it  iltlt 

i t t' í  ll   ti 


iil l
 ii  l    tlt  (tllt  (it ljt
   tl  l it  til   it  j  it l 
i t  t


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

›  componenteViewcontacto  a JView


{
a›a display($tpl = a )
{

$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´.

   *  
 


   


David | 5/10/2009

Una ventana modal es el popup de la Web 2.0. Además de ser más ' &8 , 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  *   9   *  
9  $ )   )  
 
 . Si estás desarrollando un componente, entonces añádela en el fichero
view.html.php.

Xphp JHTML::_( 'behavior.modal' ); >

Esta línea de código *       ' 9&' 9


0+ - ', 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   

  + + 
+ *     
. Por ejemplo:

Xa class="modal" href="images stories i magen_grande.jpg">


Xmg src="images stories imagen_pequena.jpg" border="0" alt="Una
imagen" >
X 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:

Xa class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y:


450}}" href="http: www.nosolocodigo.com"> Popup con iframe a
nosolocodigo.com X a>

Con el código introducido en el bloque de arriba  


9  
 
$
+     +  . 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 - 


       
*   $  :

Xa class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y:


450}}" href="http: www.nosolocodigo.com">X a>

Xscript>
window.addEvent('domready', function(){
window.addEvent('load', function(){
SqueezeBox.fromElement($('popup'));
});
});
X script>

Esta función se ejecutaría automáticamente en el evento load y provocaría que en el


enlace con id popup  
8  
  
 * + 
) :
  '    . 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.