Índice de la serie: desarrollo de extensiones con Joomla

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

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.

Seguir leyendo..

Vuelvo a la carga después de varios días sin actualizar por motivos de trabajo y personales, y es que se hace dificil encontrar tiempo para escribir algo cuando todo el mundo reclama tu tiempo.

Esta vez voy a hablar de algo que últimamente me ha llamado bastante la atención, ActionScript 3. Y es que con la renovación de su lenguaje de programación, Adobe a creado una potente plataforma para crear aplicaciones online ricas, y que me parece muy interesante aprender.

Adobe a creado un lenguaje basado en XML que al ser compilado es interpretado en un SWF, este lenguaje se llama MXML.

Este lenguaje facilita la tarea a las personas menos acostumbradas a trabajar con código, y aumenta la productividad, y junto al IDE de Adobe Flex Builder, que va ya por la versión 3, crea un entorno de alta productividad, aunque hay ocasiones en que no nos quedará más remedio que acudir al código como última instancia.

En esta ocasión vamos a ver como usar el lenguaje MXML para acceder a datos de un XML, para lo que Adobe nos provee de varias vías:

El tag Model

Hay 3 escenarios a la hora de acceder a datos XML en nuestra aplicación ActionScript:

1. Incrustar el XML directamente en nuestro SWF.

2. Tener un fichero XML en el mismo servidor que la aplicación.

3. Tener un fichero XML localizado en un servidor externo, que puede tener otro dominio (crossdomain).

Para la primera posibilidad disponemos de la etiqueta <mx:model>.

Esta etiqueta nos sirve para compilar un documento XML dentro de nuestro SWF.Generalmente esta forma no será nada util, pero es bueno saber que existe por si en alguna ocasión la necesitamos.

Compilar el XML dentro del SWF provocará que aumente el tamaño de nuestro SWF bastante y además los datos de nuestro XML serán estaticos, por lo tanto esta forma solo nos valdrá cuando sepamos que los datos no van a variar.

Vamos a ver un ejemplo.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”manejadorViajes(viajes)” >

<mx:Model id=”viajes“>

  <viajes>

  <viaje>

    <salida>Valencia</salida>

    <destino>Barcelona</destino>

    <duracion>3</duracion>

    <precio>100</precio>

    </viaje>

    <viaje>

    <salida>Vdddddd</salida>

    <destino>Badsdsdsdadslona</destino>

    <duracion>3</duracion>

    <precio>100</precio>

    </viaje>

  </viajes>

</mx:Model>

<mx:Script>

      <![CDATA[

      private function manejadorViajes(viajes:Object):void

      {

         area.text = “Viaje desde ” + viajes.viaje[1].salida + “ a ”;

         area.text += viajes.viaje[1].destino + “\n”;

         area.text += “Duración : ” + viajes.viaje[1].duracion ;

         area.text += “Precio : ” + viajes.viaje[1].precio ;

       }

]]>

</mx:Script>

<mx:TextArea x=”256” y=”138” width=”176” height=”90” id=”area“/>

</mx:Application>

Como ves, hemos creado un documento XML dentro del tag model, al cual le hemos asignado “viajes” como id.

La forma de acceder a los datos del XML se llama E4X y es la forma que ha implementado Adobe para acceder a los datos XML que se basa en una notación de objetos. De esto hablaré en otro post, ya qu eme parece muy interesante.

Esta forma es muy poco flexible y realmente sirve para poco, vamosaver ahora el objeto HTTPService, que es un objeto muy potente que nos aporta la flexibilidad y funcionalidad necesaria para recuperar datos de nuestro servidor.

Usando el tag httpService :

El tag HTTPService lee dinamicamente ficheros XML., por lo tanto cada vez que ejecutemos el metodo send() del tag, el tag recuperará el ultimo XML disponible, lo que en Javascript llamariamos una llamada asincrona.

El fichero XML puede estar situado en cualquier servidor web. Cuando se llama al metodo send() se hace una petición a la URL especificada en la propiedad Url del objeto y se genera un resultado que se almacena en la propiedad lastresult del objeto HTTPService.

Esto es así ya que realmente el tag HTTPService es interpretado y convertido en un objeto HTTPService.

Vamos a ver el código necesario para hacer una peticion a un fichero XML en nuestro servidor:

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”httpViajes.send()” >

<mx:HTTPService id=”httpViajes” url=”http://localhost/viajes.xml” />

<mx:DataGrid x=”56” y=”250” width=”950” dataProvider=”{httpViajes.lastResult.viajes.viaje}” />

</mx:Application>

Como puedes ver, en el evento creationComplete de la aplicación, que se dispara una vez cargado el SWF en nuestro navegador, se llama al método send() del objeto HTTPService, el cual se baja del servidor el fichero viajes.xml y lo almacena en la variable lastresult.

Después, usamos un Datagrid para mostrar los datos del resultado y le decimos al datagrid que use como DataProvider httpViajes.lastResul.viajes.viaje, osea que obtenga los elementos viaje y los muestre por columnas. Esta es la forma E4X de acceder al documento XML, en la que ya profuncizaré más adelante.

Este es el fichero XML que he usado :

<?xml version=”1.0″ encoding=”UTF-8″?>

<viajes>

<viaje>

<salida>Valencia</salida>

<destino>Barcelona</destino>

<duracion>3</duracion>

<precio>100</precio>

</viaje>

<viaje>

<salida>sdfdsf</salida>

<destino>Barcssdfdselona</destino>

<duracion>6</duracion>

<precio>100dsfsd</precio>

</viaje>

<viaje>

<salida>Bilbao</salida>

<destino>Vayalodid</destino>

<duracion>87</duracion>

<precio>1232</precio>

</viaje>

<viaje>

<salida>Jamaica</salida>

<destino>valencia</destino>

<duracion>55</duracion>

<precio>67775</precio>

</viaje>

</viajes>

Ya tenemos nuestro XML cargado en el datagrid de nuestra aplicación, como puedes ver, este es un fichero XML estático, pero el XML podría generarse desde una base de datos usando XML, queda para otro post ver esto y además ver como recuperar XML desde código.

Leyendo el Chat de Jesús Conde me he encontrado con esta impresionante recopilación de 100 útiles recursos para desarrolladores web.

En el recopilatorio se encuentran aplicaciones online, extensiones de firefox, sitios web con documentación y más cosas.

Échale un vistazo, seguro que encuentras algo que te puede servir.

Una de las cosas más importantes en los CMS actuales son los editores wysiwyg, que posibilitan la creación de contenidos sin tener que aprender el lenguaje de marcado html.

Joomla viene con el editor tinyMCE por defecto, aunque permite instalar más editores de terceros.

Vamos a ver cómo usar estos editores en nuestros componentes personalizados, para poder crear aplicaciones que generen contenido en formato html sin la necesidad de conocer este

Gracias al api de Joomla, usar este editor en nuestros componentes se hace muy sencillo, para esto han implementado una clase llamada JEditor, la cual tiene todas las propiedades y metodos necesarios pasa interactuar con el editor.

El objeto de la clase JEditor lo obtendremos mediante el método estático getEditor() del objeto JFactory , el cual devuelve una instancia del editor que tiene el usuario actual asignado.

El método getEditor devolvera el tipo de editor que este asignado en el backend de Joomla!, por defecto es tinyMCE, aunque existen otros, algunos muy buenos…

Vamos a ver el código necesario…

<form action="index.php" method="post">
<?php
$editor =& JFactory::getEditor();
echo $editor->display('nombreTextarea', 'contenido del TextArea', '100%','400','100','6');
?> 
<input name="option" value="com_tuComponente" type="hidden" />
<input name="task" value="guardar" type="hidden" />
</form>

Pon este código en la vista de tu componente e imprimirá el editor.
El codigo html generado se almacena en un textare con nombre “nombreTextarea”.

En el task guardar puedes hacer lo que quieras con el contenido del textarea, lo más comun almacenarlo en una base de datos.

Vamos a ver los parámetros del método display del objeto JEditor:

display (string $name, string $html, string $width, string $height, int $col, int $row, [boolean $buttons = true], [array $params = array()])

• string $name: nombre del textarea
• string $html: contenido del text area
• string $width: anchura del textarea (px or %)
• int $col: numero de columnas del textarea
• int $row: numero de filas del textarea
• boolean $buttons: si es verdadero los botones del editor se mostrarán
• array $params: array asociativo con los parametros del editor

­

Sencillo , eh?

Buscando información sobre como hacer themes para WordPress me he encontrado con este generador de themes online, no genera themes muy complicados, ni con muchas virguerías, pero pueden servir como plantilla para un desarrollo más complicado, además de ser una herramienta curiosa.

Vamos a crear el fichero index.php y single.php, los que nos serviran como punto de entrada al theme, desde los que incluiremos el header, sidebar y footer y donde mostraremos los posts.

El fichero index.php es el punto de entrada para la portada del post. En el se mostraran todos los posts mediante una tecnica denominada “el Loop”.

El loop no es más que un bucle que va imprimiendo los posts en pantalla mientras que hayan posts.
Este es el código de nuestro fichero index.php, Seguir leyendo..

Seguimos con el tutorial para hacer themes en WordPress.

En este post vamos a ver como hacer el sidebar de nuestro theme.

El sidebar se almacena en el fichero sidebar.php, y en el mostraremos las categorías, un formulario de busqueda, los archivos de la página por meses y el blogroll, es decir, los enlaces.

Todo esto será lo que se muestre por defecto en nuestro theme, pero lo programaremos para que nuestro WordPress muestre los widgets en lugar de este contenido en caso de que este preparado para widgets .

Seguir leyendo..

Hoy he necesitado modificar un componente de Joomla en el trabajo que mostraba unos productos de una base de datos.

El componente tenía una vista en la cual se mostraba el detalle de un producto.

Para mejorar el SEO de la web he pensado que estaría bien poner como título de la página algo así como… Descripción de … “producto” , de esta forma, Google te posicionara mejor por ese termino de búsqueda y tendrás un titulo de página personalizado.

Pues bien, hacer esto es muy sencillo , para ello usaremos el objecto JDocument.

En el fichero view.html.php de tu vista pon este código :

<?php
    $document=& JFactory::getDocument();
    $document->setTitle(“Tu título de página”);
?>

Primero obtenemos una instancia del objeto JDocument y después , mediante el metodo setTitle, establecemos el título de página.

Y ya esta…

PD: Para que funcione correctamente no hay que poner etiqueta title en el template.