Widget en un Módulo de Joomla

Cómo convertir un widget en un módulo de Joomla

Este tutorial cubre el proceso de creación de un módulo básico de Joomla desde un widget existente. Vamos a tomar un widget de Mixcloud, que aprenderá a convertir en un módulo de Joomla y, finalmente, distribuir la extensión a JED (Directorio Joomla Extension). Si nunca has creado un módulo de Joomla antes, este artículo es el mejor lugar para empezar!

Paso 1: Configuración de nuestros archivos

Archivos básicos

Por cada módulo creado para Joomla, hay dos archivos que tienen una necesidad imperiosa de estar presente. Un archivo es el archivo de configuración XML que contendrá los detalles del módulo y de los parámetros y un archivo PHP que controlará nuestro módulo. A los efectos de este tutorial, vamos a crear una carpeta llamada mod_mixcloud_widget y, dentro de él, usando su editor de código favorito, crear mod_mixcloud_widget.php y mod_mixcloud_widget.xml. Antes de pasar al siguiente paso, crear un único archivo HTML llamado index.html.
El archivo index.html que se ha creado se puede utilizar para ocultar el contenido de la carpeta del módulo cuando se ve a través de un navegador.

Archivos de plantilla

Ahora que ya ha agregado los archivos principales, es el momento de añadir los archivos de plantilla. Hacemos esto mediante la creación de una carpeta llamada tmpl. Dentro de esa carpeta, creamos default.php y index.html. El archivo default.php será la plantilla de módulo, que tendrá la información generada y almacenarlas en formato HTML limpio en la página.

Archivos de idioma

Por último, mientras que dentro de nuestra carpeta del módulo root, se crea una nueva carpeta llamada lenguage. Esta carpeta tiene dos archivos: en-GB.mod_mixcloud_widget.ini y en-GB.mod_mixcloud_widget.sys.ini, que se pueden utilizar para hacer nuestro módulo con la opción de tener varios idiomas.

Estructura de los archivos

Después de seguir cada paso, usted debe tener la siguiente estructura de archivos

  • language/en-GB.mod_mixcloud_widget.ini
  • language/en-GB.mod_mixcloud_widget.sys.ini
  • tmpl/default.php
  • tmpl/index.html
  • index.html
  • mod_mixcloud_widget.php
  • mod_mixcloud_widget.xml

Paso 2: Configuración de Nuestro archivo XML

Cada extensión de Joomla instalado tiene un archivo XML, que se conoce como un manifiesto o un archivo de instalación. Este archivo contiene información de metadatos, tales como autor, versión, descripción, etc También se utiliza como un archivo de configuración para prametros del módulo. A los efectos de este tutorial, vamos a crear un archivo de manifiesto para un módulo de Joomla 2.5. Añada el siguiente código a su archivo XML.

[code lang=»xml»]
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5" client="site" method="upgrade">
<name>MOD_MIXCLOUD_WIDGET</name>
<author>B4ucode</author>
<creationDate>May 2012</creationDate>
<copyright>Copyright (C) 2011 – 2012. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later;</license>
<authorEmail>[email protected]</authorEmail>
<authorUrl>www.b4ucode.com</authorUrl>
<version>1.0.0</version>
<description>MOD_MIXCLOUD_WIDGET_XML_DESCRIPTION</description>
[/code]

La extensión de etiqueta principal tiene algunos atributos:

  • type: indica a qué tipo de Joomla extensión se va a instalar, en este caso del módulo.
  • version: Indica al programa de instalación de la versión de Joomla que estamos creando el módulo.
  • method: Hay dos opciones: nuevos y de actualización. Nosotros vamos a usar la actualización, en caso de futuras actualizaciones en el módulo, simplemente actualizar lo que actualmente existe.
  • client: Indica si el módulo es un módulo de front-end o back-end.

El otro conjunto de etiquetas son las etiquetas de metadatos que contienen información acerca del módulo que será utilizado durante la instalación y la administración del módulo.

Los archivos del módulo

Como se mencionó antes, el archivo de manifiesto contiene información acerca de los archivos que se utilizan en el módulo. Durante la instalación de Joomla comprueba el archivo de manifiesto para todos los archivos que se deben agregar al sistema. Si alguno de los archivos faltan entonces Joomla dará un error explicando los archivos que faltan. Todos los archivos que se encuentran en el módulo, que no están listados en el archivo XML no se añaden al sistema con los otros. Añada el siguiente código a su archivo de manifiesto.

[code lang=»xml»]
<files>
<filename module="mod_mixcloud_widget">mod_mixcloud_widget.php</filename>
<folder>tmpl</folder>
<filename>index.html</filename>
<filename>mod_mixcloud_widget.xml</filename>
</files>
[/code]

Archivos de idioma

Este elemento contiene los archivos de idioma que se van a instalar con el módulo. Para el propósito de este tutorial, sólo una el idioma que se utilizará. Cuando hay más idiomas, puede simplemente cambiar el prefijo de los archivos y el atributo de código para el lenguaje exacto basado en el marco de Joomla.

[code lang=»xml»]
<languages>
<language tag="en-GB">language/en-GB.mod_mixcloud_widget.ini</language>
<language tag="en-GB">language/en-GB.mod_mixcloud_widget.sys.ini</language>
</languages>
[/code]

Agregar parámetros

Algunas extensiones no funcionan justo fuera de la instalacion, pero necesita ciertos ajustes: estos ajustes se les llama parámetros y se definen en el archivo de manifiesto.
El primer elemento es de configuración que contiene otros elementos que se mostrarán en formato HTML. El elemento llamado campo es la carne de nuestros parámetros que puede definir qué tipo de datos del formulario desea mostrar. Este elemento en su nivel básico se compone de algunos atributos esenciales:

  • Type: tipo de campo de formulario como texto, área de texto, casillas de verificación, la radio y el calendario.
  • name: El nombre de elemento del campo de formulario para muestra.
  • default: El valor por defecto del campo.
  • label: Texto que se muestra al principio de nuestro campo de formulario.
  • description: la Descripción que aparecerá en un texto de ayuda cuando pasa sobre nuestro campo de formulario

[code lang=»xml»]
<config>
<fields name="params">
<fieldset name="basic">
<field type="text" name="feed" default="" label="MOD_MIXCLOUD_WIDGET_FEED_TITLE" description="MOD_MIXCLOUD_WIDGET_FEED_DESC" />
<field name="color" type="color" default="" label="MOD_MIXCLOUD_WIDGET_COLOR_TITLE" description="MOD_MIXCLOUD_WIDGET_COLOR_DESC" />
<field name="width" type="text" default="300" size="40" label="MOD_MIXCLOUD_WIDGET_WIDTH_TITLE" description="MOD_MIXCLOUD_WIDGET_WIDTH_DESCRIPTION" />
<field name="height" type="text" default="300" size="40" label="MOD_MIXCLOUD_WIDGET_HEIGHT_TITLE" description="MOD_MIXCLOUD_WIDGET_HEIGHT_DESCRIPTION" />
</fieldset>
<fieldset
name="advanced">
<field
name="layout"
type="modulelayout"
label="JFIELD_ALT_LAYOUT_LABEL"
description="JFIELD_ALT_module_LAYOUT_DESC" />
<field
name="moduleclass_sfx"
type="text"
label="COM_moduleS_FIELD_moduleCLASS_SFX_LABEL"
description="COM_moduleS_FIELD_moduleCLASS_SFX_DESC" />
<field
name="owncache"
type="list"
default="1"
label="COM_moduleS_FIELD_CACHING_LABEL"
description="COM_moduleS_FIELD_CACHING_DESC">
<option value="1">JGLOBAL_USE_GLOBAL</option>
<option value="0">COM_moduleS_FIELD_VALUE_NOCACHING</option>
</field>
</fieldset>
</fields>
</config>
</extension>
[/code]

Finalizado archivo XML

Si has seguido hasta ahora este tutorial, debe tener un archivo XML completo como el siguiente:

[code lang=»xml»]
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5" client="site" method="upgrade">
<name>MOD_MIXCLOUD_WIDGET</name>
<author>B4ucode</author>
<creationDate>May 2012</creationDate>
<copyright>Copyright (C) 2011 – 2012 Open Source Matters. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later;</license>
<authorEmail>[email protected]</authorEmail>
<authorUrl>www.b4ucode.com</authorUrl>
<version>1.0.0</version>
<description>MOD_MIXCLOUD_WIDGET_XML_DESCRIPTION</description>
<files>
<filename module="mod_mixcloud_widget">mod_mixcloud_widget.php</filename>
<folder>tmpl</folder>
<filename>index.html</filename>
<filename>mod_mixcloud_widget.xml</filename>
</files>
<languages>
<language tag="en-GB">language/en-GB.mod_mixcloud_widget.ini</language>
<language tag="en-GB">language/en-GB.mod_mixcloud_widget.sys.ini</language>
</languages>
<config>
<fields name="params">
<fieldset name="basic">
<field type="text" name="feed" default="" label="MOD_MIXCLOUD_WIDGET_FEED_TITLE" description="MOD_MIXCLOUD_WIDGET_FEED_DESC" />
<field name="color" type="color" default="" label="MOD_MIXCLOUD_WIDGET_COLOR_TITLE" description="MOD_MIXCLOUD_WIDGET_COLOR_DESC" />
<field name="width" type="text" default="300" size="40" label="MOD_MIXCLOUD_WIDGET_WIDTH_TITLE" description="MOD_MIXCLOUD_WIDGET_WIDTH_DESCRIPTION" />
<field name="height" type="text" default="300" size="40" label="MOD_MIXCLOUD_WIDGET_HEIGHT_TITLE" description="MOD_MIXCLOUD_WIDGET_HEIGHT_DESCRIPTION" />
</fieldset>
<fieldset
name="advanced">
<field
name="layout"
type="modulelayout"
label="JFIELD_ALT_LAYOUT_LABEL"
description="JFIELD_ALT_module_LAYOUT_DESC" />
<field
name="moduleclass_sfx"
type="text"
label="COM_moduleS_FIELD_moduleCLASS_SFX_LABEL"
description="COM_moduleS_FIELD_moduleCLASS_SFX_DESC" />
<field
name="owncache"
type="list"
default="1"
label="COM_moduleS_FIELD_CACHING_LABEL"
description="COM_moduleS_FIELD_CACHING_DESC">
<option value="1">JGLOBAL_USE_GLOBAL</option>
<option value="0">COM_moduleS_FIELD_VALUE_NOCACHING</option>
</field>
</fieldset>
</fields>
</config>
</extension>
[/code]

Paso 3: Crear mod_mixcloud_widget.php

La primera cosa que desea con su módulo consiste en añadir su aviso de derechos de autor. Si tiene la intención de presentar su módulo a JED [Directorio Joomla Extension], se debe añadir un poco de información sobre la licencia GPL.

Este es uno de los controles realizados antes de aprobar un módulo en el directorio. Justo debajo de esto, utilice la instrucción define (‘_JEXEC’) o die, que se utiliza en la mayoría de los archivos PHP para proteger contra hackers. Esto también es otro de los requisitos para su aprobación el JED.

[code lang=»php»]
<?php
/**
* @package B4ucode
* @subpackage mod_mixcloud_widget
* @copyright Copyright (C) 2011 – 2012 B4ucode, Inc. All rights reserved.
* @license GNU General Public License version 2 or later;
*/
// no direct access
defined(‘_JEXEC’) or die;
[/code]

A continuación, definimos nuestros Paramatros como variables. Los desarrolladores a veces definen sus parametros de las variables con el fin de tener limpios los archivos de la plantilla. Para llamar a un Paramaters usamos la funcion $params-> get () y asi obtener el nombre del parámetro definido en nuestro archivo de manifiesto. Por último, llamamos a la función auxiliar del módulo, getLayoutPath, que hará nuestro módulo template.
El primer argumento de la función toma el nombre del módulo que estamos tratando de llamar, entonces el segundo argumento busca la plantilla que intentamos hacer de ese módulo. En este caso, se obtiene el diseño de parámetros y en el segundo argumento es el que establece el diseño por defecto o el predeterminado. Este diseño es el nombre exacto del archivo que tenemos en nuestra carpeta tmpl.

Finalizando el archivo

[code lang=»php»]
<?php
/**
* @package B4ucode
* @subpackage mod_mixcloud_widget
* @copyright Copyright (C) 2011 – 2012 B4ucode, Inc. All rights reserved.
* @license GNU General Public License version 2 or later;
*/
// no direct access
defined(‘_JEXEC’) or die;
$width = $params->get(‘width’,300);
$height = $params->get(‘height’,300);
$feed = $params->get(‘feed’);
$color = $params->get(‘color’);
$moduleclass_sfx = htmlspecialchars($params->get(‘moduleclass_sfx’));
require JmoduleHelper::getLayoutPath(‘mod_mixcloud_widget’, $params->get(‘layout’, ‘default’));
?>
[/code]

Paso 4: Crear default.php

En este punto, hemos creado nuestro archivo de manifiesto con Paramatros, tomo esos mismos parámetros y los convirtieron en variables. En este paso, vamos a utilizar estas variables en nuestro archivo de plantilla. El archivo de plantilla hará nuestros HTML para el módulo. Edite default.php de la carpeta tmpl y agregue los siguientes fragmentos:

[code lang=»php»]
<?php
/**
* @package B4ucode
* @subpackage mod_mixcloud_widget
* @copyright Copyright (C) 2011 – 2012 B4ucode, Inc. All rights reserved.
* @license GNU General Public License version 2 or later;
*/
// no direct access
defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );
[/code]

Adición de nuestro HTML

Para este tutorial, vamos a necesitar el código de inserción de Mixcloud. He aquí un ejemplo en la adquisición del código. Nuestro módulo objetivo es hacer que el código sea reutilizable sin tener que conseguir la inserción cada vez que desee crear o modificar un Widget Mixcloud en nuestro sitio. El código predeterminado embed viene con alguna información adicional sobre el contenido del widget que no necesitamos. Así que para este tutorial, lo he despojado a poco el guión de inserción. Pega este código para incrustar en el archivo default.php.

[code lang=»html»]
<div><object width="480" height="480"><param name="movie" value="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FMaryAnneHobbs%2Fthom-yorke-moneyback-mix-xfm-music-response-150911%2F&amp;embed_uuid=5d6c18a4-a837-409e-8cec-23ab44372842&amp;stylecolor=&amp;embed_type=widget_standard"></param><param name="allowFullScreen" value="true"></param><param name="wmode" value="opaque"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FMaryAnneHobbs%2Fthom-yorke-moneyback-mix-xfm-music-response-150911%2F&amp;embed_uuid=5d6c18a4-a837-409e-8cec-23ab44372842&amp;stylecolor=&amp;embed_type=widget_standard" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="480" height="480"></embed></object></div>
[/code]

Hacer que el script configurable

Si queremos insertar un widget de forma permanente, se podría comprimir el módulo en estos momentos.Sin embargo, no vamos a realizarlo por ahora, por lo que vamos a reemplazar algunos de los atributos params a nuestros módulos.

Vamos a cambiar el ancho, la altura, el color y el feed. Pega el siguiente código a través de el script de inserción.

[code lang=»html»]
<div><object width="<?php echo $width; ?>" height="<?php echo $height; ?>">
<param name="movie" value="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=<?php echo $feed; ?>&amp;embed_uuid=&amp;stylecolor=<?php echo $color; ?>&amp;embed_type=widget_standard"></param><param name="allowFullScreen" value="true"></param><param name="wmode" value="opaque"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=<?php echo $feed; ?>&amp;embed_uuid=&amp;stylecolor=<?php echo $color; ?>&amp;embed_type=widget_standard" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="<?php echo $width; ?>" height="<?php echo $height; ?>"></embed></object>
</div>
[/code]

Paso 5: Creación de archivos de idioma

En el primer paso, te habrás dado cuenta que hemos creado una carpeta, llamada lenguaje, con dos archivos. Luego, en el paso dos, hemos añadido algo de texto traducible. En esta sección, vamos a traducir ese texto al Inglés. Inserte el siguiente código en los archivos ini, en-GB.mod_mixcloud_widget.sys.ini y en GB.mod_mixcloud_widget.ini.

[code lang=»php»]
; B4ucode
; Copyright (C) 2011 – 2012 B4ucode. All rights reserved.
; License GNU General Public License version 2 or later;
; Note : All ini files need to be saved as UTF-8 – No BOM
MOD_MIXCLOUD_WIDGET="Mixcloud Widget"
MOD_MIXCLOUD_WIDGET_XML_DESCRIPTION="This module displays the Mixcloud Widget using feed and other paramaters"
MOD_MIXCLOUD_WIDGET_ITEMS_LAYOUT_DEFAULT="Default"
MOD_MIXCLOUD_WIDGET_FEED_TITLE="Feed Url"
MOD_MIXCLOUD_WIDGET_FEED_DESC="Add the link to single/cloudcast"
MOD_MIXCLOUD_WIDGET_COLOR_TITLE="Color"
MOD_MIXCLOUD_WIDGET_COLOR_DESC="Add Style color"
MOD_MIXCLOUD_WIDGET_WIDTH_TITLE="Width"
MOD_MIXCLOUD_WIDGET_WIDTH_DESCRIPTION="Width of Widget"
MOD_MIXCLOUD_WIDGET_HEIGHT_TITLE="Height"
MOD_MIXCLOUD_WIDGET_HEIGHT_DESCRIPTION="Height of Widget"
[/code]

Si te fijas bien, te darás cuenta de que el texto que utilicé para los parámetros tienen ahora una traducción al Inglés. Usted puede agregar otros archivos y crear traducciones en otros idiomas!

Paso 6: Empaquetamiento del módulo

Después de seguir todos los pasos a fondo, su módulo es ahora instalable, pero nos gustaría hacer una lista de cosas que hacer antes de la instalación y distribución

Añadir index.html a carpetas

Se recomienda que agregue un archivo index.html para cada carpeta. Este archivo, como se ha mencionado anteriormente, evita que los usuarios de ver el contenido de una carpeta de módulo directamente en un navegador. Añada el siguiente código a los archivos:

[code lang=»html»]
<html><body bgcolor="#FFFFFF"></body></html>
[/code]

Comparar nuestra Estructura de archivo para el archivo de manifiesto

En esta etapa, se recomienda que mire los archivos y las carpetas definidas en el archivo de manifiesto, y asegurarse de que existe en la carpeta de módulos. Cualquier archivo que no exista puede detener el instalador desde la instalación de los archivos, o, tal vez un error.

Packaging

Luego de nuestra lista , podemos empaquetar el módulo en un archivo zip, e instalarlo.
Al navegar al administrador de módulos y seleccionar el módulo, se pueden modificar los Paramaters con el ancho deseado, altura, color y feed

Activa el módulo y compruebe si funciona de la manera que debería.

Paso 7: Enviar modulo para JED

Localización de la categoría

Después de registrar para JED, una de las principales cosas a tener en cuenta es que no se puede agregar una extensión a múltiples secciones.
Por lo tanto, la elección de la sección adecuada es muy importante. Busque una sección adecuada al navegar por el sitio, entonces busca en la esquina superior izquierda verás Enviar Extensión

Llenando los Detalles JED

Una vez que haya optado por presentar una extensión, habrá un formulario para llenar en todos los detalles de su presentación. Revise las imágenes de abajo para ver los diferentes campos para ser llenados, y leer las instrucciones cuidadosamente.

Final Exitoso

Una vez llene todos los campos correspondientes y los archivos se han enviado, verá un mensaje como la imagen de arriba, que le explicará cómo sera los envios de los modulos y como deben estos deben ser revisados antes de ser publicados.