LinuxParty

11- Añadir verificaciones

Verificación de los formularios (lado del cliente)

Los formularios se pueden verificar en el lado del cliente mediante código javascript.
En el archivo admin/views/helloworld/tmpl/edit.php ingrese las siguientes líneas:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
JHtml::_('behavior.tooltip');
JHtml::_('behavior.formvalidation');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld&layout=edit&id='.(int) $this->item->id); ?>"
      method="post" name="adminForm" id="helloworld-form" class="form-validate">
        <fieldset class="adminform">
                <legend><?php echo JText::_( 'COM_HELLOWORLD_HELLOWORLD_DETAILS' ); ?></legend>
                <?php foreach($this->form->getFieldset() as $field): ?>
                        <?php if (!$field->hidden): ?>
                                <?php echo $field->label; ?>
                        <?php endif; ?>
                        <?php echo $field->input; ?>
                <?php endforeach; ?>
        </fieldset>
        <div>
                <input type="hidden" name="task" value="helloworld.edit" />
                <?php echo JHtml::_('form.token'); ?>
        </div>
</form>

 Se puede notar en el formulario html, contenido en el archivo admin/views/helloworld/tmpl/edit.php, que ahora posee la clase form-validate. Tambien podras ver que hemos añadido la llamada JHTML::_('behavior.formvalidation'); para decirle a Joomla! que utilice su formulario de validación javascript.

Modificamos el archivo admin/models/forms/helloworld.xml para indicar que el campo greeting se tiene que verificar:

<?xml version="1.0" encoding="utf-8"?>
<form
        addrulepath="/administrator/components/com_helloworld/models/rules"
>
        <fieldset>
                <field
                        name="id"
                        type="hidden"
                />
                <field
                        name="greeting"
                        type="text"
                        label="COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL"
                        description="COM_HELLOWORLD_HELLOWORLD_GREETING_DESC"
                        size="40"
                        class="inputbox validate-greeting"
                        validate="greeting"
                        required="true"
                        default=""
                />
        </fieldset>
</form>

Note que por el momento la clase css es “inputbox validate-greeting” y que el atributo required está puesto a true. Esto significa que este campo es obligatorio y debe ser verificado por un validador de formulario del Framework de Joomla!.

Con tu gestor de archivo y editor favorito cree el archivo admin/models/forms/helloworld.js que contenga:

 window.addEvent('domready', function() {

        document.formvalidator.setHandler('greeting',
                function (value) {
                        regex=/^[^0-9]+$/;
                        return regex.test(value);
        });
});

 Se añade un controlador al formulario de validación de Joomla! para los campos que tienen la clase “validate-greeting”.  Cada vez que se modifica el campo greeting  el controlador se ejecutará para comprobar su validez (sin cifras). El último paso es verificar el formulario cuando se hace clic en el botón guardar.

Con tu gestor de archivo y editor favorito cree el archivo admin/views/helloworld/submitbutton.js que contenga:

Joomla.submitbutton = function(task)
{
        if (task == '')
        {
                return false;
        }
        else
        {
                var isValid=true;
                var action = task.split('.');
                if (action[1] != 'cancel' && action[1] != 'close')
                {
                        var forms = $$('form.form-validate');
                        for (var i=0;i<forms.length;i++)
                        {
                                if (!document.formvalidator.isValid(forms[i]))
                                {
                                        isValid = false;
                                        break;
                                }
                        }
                }

                if (isValid)
                {
                        Joomla.submitform(task);
                        return true;
                }
                else
                {
                        alert(Joomla.JText._('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE',
                                             'Some values are unacceptable'));
                        return false;
                }
        }
} 

Esta función verifica que todos los formularios que tienen la clase css “form-validate” sean validados.

Tenga en cuenta que se mostrará un mensaje de alerta, traducido por el Framework de Joomla!.

En la vista la clase HelloWorldViewHelloWorld tiene que ser modificada para usar estos archivos javascript: admin/views/helloworld/view.html.php 

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
 
// Importar la biblioteca view de Joomla
jimport('joomla.application.component.view');
 
/**
 * Vista HelloWorld
*/
class HelloWorldViewHelloWorld extends JView
{
        /**
         * Mostrar el metodo de la vista Hello
         * @return void
*/
        public function display($tpl = null) 
        {
                // Obtener los datos
                $form = $this->get('Form');
                $item = $this->get('Item');
                $script = $this->get('Script');
 
                // Verificar existencia de errores.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Asiganar datos
                $this->form = $form;
                $this->item = $item;
                $this->script = $script;
 
                // Establezca el Toolbar
                $this->addToolBar();
 
                // Mostrar la plantilla
                parent::display($tpl);
 
                // Establesca el Document
                $this->setDocument();
        }
 
        /**
         * Configuración del Toolbar
*/
        protected function addToolBar() 
        {
                $input = JFactory::getApplication()->input;
                $input->set('hidemainmenu', true);
                $isNew = ($this->item->id == 0);
                JToolBarHelper::title($isNew ? JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW') : JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT'), 'helloworld');
                JToolBarHelper::save('helloworld.save');
                JToolBarHelper::cancel('helloworld.cancel', $isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE');
        }
        /**
         * Método para configurar las propiedades del documento
         *
         * @return void
*/
        protected function setDocument() 
        {
                $isNew = ($this->item->id < 1);
                $document = JFactory::getDocument();
                $document->setTitle($isNew ? JText::_('COM_HELLOWORLD_HELLOWORLD_CREATING') : JText::_('COM_HELLOWORLD_HELLOWORLD_EDITING'));
                $document->addScript(JURI::root() . $this->script);
                $document->addScript(JURI::root() . "/administrator/components/com_helloworld" . "/views/helloworld/submitbutton.js");
                JText::script('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE');
        }
}
 

 Esta vista ahora:

• Verifica si el modelo no tiene error
• Agrega dos archivos Javascript
• Inyecta traducciones usando la función javascript JText::script

El paso final es implementar una función getScript en el modelo HelloWorldModelHelloWorld.

Modificando el archivo admin/models/helloworld.php tenemos:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// Importar la biblioteca modelform
jimport('joomla.application.component.modeladmin');

/**
 * Modelo HelloWorld
*/
class HelloWorldModelHelloWorld extends JModelAdmin
{
        /**
         * Retornar una referencia a la tabla object, siempre que se cree.
         *
         * @paramtype    El tipo de tabla para crear una instancia
         * @paramstring  Un prefijo para el nombre de la clase de la tabla. Opcional.
         * @paramarray  Configuración del array para el modelo. Opcional.
         * @return      JTable   Un objeto de Base de Datos.
         * @since       2.5
*/
        public function getTable($type = 'HelloWorld', $prefix = 'HelloWorldTable', $config = array()) 
        {
                return JTable::getInstance($type, $prefix, $config);
        }
        /**
         * Método para obtener el formulario de registro.
         *
         * @paramarray   $data             Datos para el formulario.
         * @paramboolean  $loadData    True si el formulario carga sus propios datos (caso por     defecto), false si no.
         * @return       mixed                        Un objeto JForm en caso de éxito, FALSE en caso de fallo
         * @since       2.5
*/
        public function getForm($data = array(), $loadData = true) 
        {
                // Obtener el formulario
                $form = $this->loadForm('com_helloworld.helloworld', 'helloworld',
                                        array('control' => 'jform', 'load_data' => $loadData));
                if (empty($form)) 
                {
                        return false;
                }
                return $form;
        }
        /**
         * Método para obtener los script que se deben incluir en el formulario
         *
         * @return string       Archivos Script
*/
        public function getScript() 
        {
                return 'administrator/components/com_helloworld/models/forms/helloworld.js';
        }
        /**
         * Método para obtener los datos que deben ser inyectados en el formulario.
         *
         * @return      mixed   Los datos para el formulario.
         * @since       2.5
*/
        protected function loadFormData() 
        {
                // Compruebe la sesión de datos del formulario previamente introducidos.
                $data = JFactory::getApplication()->getUserState('com_helloworld.edit.helloworld.data', array());
                if (empty($data)) 
                {
                        $data = $this->getItem();
                }
                return $data;
        }
} 

Verificación de los formularios (lado del servidor)

Las verificaciones de los formularios en el lado del servidor se realiza mediante la herencia de la clase JControllerForm. Hemos especificado en el archivo admin/models/forms/helloworld.xml que la función de validación del servidor usará el archivo greeting.php.

Con tu gestor de archivos y editor favorito crea el archivo admin/models/rules/greeting.php que contenga:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// Importar la biblioteca formrule de Joomla
jimport('joomla.form.formrule');

/**
 * Reglas de la clase formulario para el Framework de Joomla.
*/
class JFormRuleGreeting extends JFormRule
{
        /**
         * Una expresión regular.
         *
         * @access      protected
         * @varstring
         * @since       2.5
*/
        protected $regex = '^[^0-9]+$';
} 

Empaqueta tu componente e instalalo mediante el gestor de extensiones de Joomla! o descarga el archivo directamente.

12- Añadir categorías

El Framework de Joomla! ha implementado el uso de categorías para todos los componentes. Añadir esta habilidad es bastante simple.

Modificar el SQL

Para gestionar las categorías, tenemos que cambiar las tablas SQL.
Con tu editor favorito, modifica el archivo admin/sql/install.mysql.utf8.sql y añade estas líneas:

DROP TABLE IF EXISTS `#__helloworld`;

CREATE TABLE `#__helloworld` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `greeting` VARCHAR(25) NOT NULL,
  `catid` INT(11) NOT NULL DEFAULT '0',
   PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;

INSERT INTO `#__helloworld` (`greeting`) VALUES
        ('Hello World!'),
        ('Good bye World!'); 

Recuerden que esto trae consigo que modifiquemos el siguiente fichero admin/sql/updates/mysql/0.0.12.sql:

ALTER TABLE `#__helloworld` ADD `catid` INT(11) NOT NULL DEFAULT '0'

Modificar el formulario

El mensaje HelloWorld puede pertenecer ahora a una categoría. Tenemos que modificar el formulario de edición. Añade estas líneas al archivo admin/models/forms/helloworld.xml:

<?xml version="1.0" encoding="utf-8"?>
<form
        addrulepath="/administrator/components/com_helloworld/models/rules"
>
        <fieldset>
                <field
                        name="id"
                        type="hidden"
                />
                <field
                        name="greeting"
                        type="text"
                        label="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL"
                        description="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC"
                        size="40"
                        class="inputbox validate-greeting"
                        validate="greeting"
                        required="true"
                        default=""
                />
                <field
                        name="catid"
                        type="category"
                        extension="com_helloworld"
                        class="inputbox"
                        default=""
                        label="COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_LABEL"
                        description="COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_DESC"
                        required="true"
                >
                        <option value="0">JOPTION_SELECT_CATEGORY</option>
                </field>
        </fieldset>
</form> 

 Nota: La categoría puede ser 0 (lo que indica que no hay categoría)

Modificar el tipo de menú

El tipo de menú HelloWorld muestra una lista desplegable con todos los mensajes. Si el mensaje está categorizado, tenemos que añadir la categoría en la presentación.

En el archivo admin/models/fields/helloworld.php, añade las siguientes líneas:

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die;

// importar el tipo de campo list
jimport('joomla.form.helper');
JFormHelper::loadFieldClass('list');

/**
 * Clase de campo de formulario para el componente HelloWorld
*/
class JFormFieldHelloWorld extends JFormFieldList
{
        /**
         * El tipo de campo.
         *
         * @varstring
*/
        protected $type = 'HelloWorld';

        /**
         * Método para obtener una lista de opciones para entrada de lista.
         *
         * @return      array           Array de opciones JHmtl.
*/
        protected function getOptions() 
        {
                $db = JFactory::getDBO();

                /// $query = new JDatabaseQuery; ATENCIÓN - Hay un error en esta línea, JDatabaseQuery es una clase abstracta
                $query = $db->getQuery(true); // ESTE ES EL ARREGLO, OJO DEBE SER MODIFICADO EN ARCHIVO COMPRIMIDO (SI ES QUE LO DESCARGA Y LO USA)
                $query->select('#__helloworld.id as id,greeting,#__categories.title as category,catid');
                $query->from('#__helloworld');
                $query->leftJoin('#__categories on catid=#__categories.id');
                $db->setQuery((string)$query);
                $messages = $db->loadObjectList();
                $options = array();
                if ($messages)
                {
                        foreach($messages as $message) 
                        {
                                $options[] = JHtml::_('select.option', $message->id, $message->greeting .
                                                      ($message->catid ? ' (' . $message->category . ')' : ''));
                        }
                }
                $options = array_merge(parent::getOptions(), $options);
                return $options;
        }
}

Ahora mostrará la categoría entre paréntesis.

Gestionar el submenú

El componente com_categories permite configurar el submenú utilizando el archivo helper. Con tu gestor y editor de archivos preferido, crea un archivo admin/helpers/helloworld.php que contenga estas líneas:

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die;

/**
 * Ayuda del componente HelloWorld.
*/
abstract class HelloWorldHelper
{
        /**
         * Configurar la barra de enlaces.
*/
        public static function addSubmenu($submenu) 
        {
                JSubMenuHelper::addEntry(JText::_('COM_HELLOWORLD_SUBMENU_MESSAGES'),
                                         'index.php?option=com_helloworld', $submenu == 'messages');
                JSubMenuHelper::addEntry(JText::_('COM_HELLOWORLD_SUBMENU_CATEGORIES'), 'index.php?option=com_categories&view=categories&extension=com_helloworld', $submenu == 'categories');
                // configurar algunas propiedades globales
                $document = JFactory::getDocument();
                $document->addStyleDeclaration('.icon-48-helloworld ' . '{background-image: url(/../media/com_helloworld/images/tux-48x48.png);}');
                if ($submenu == 'categories') 
                {
                        $document->setTitle(JText::_('COM_HELLOWORLD_ADMINISTRATION_CATEGORIES'));
                }
        }
}
 

 Esta función será llamada automáticamente por el componente com_categories. Sepa que:

• Cambiará el submenú
• Cambiará algunas propiedades css (para mostrar iconos)
• Cambiará el título del navegador si el submenú es categories
• Cambiará el título y añadirá un botón preferences

Tenemos que modificar el controlador general para llamar a esta función y modificar el punto de entrada del componente (la clase css .icon-48-helloworld se configura ahora en la función addSubmenu)

admin/controller.php 

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
 
// Importar librería controller de Joomla
jimport('joomla.application.component.controller');
 
/**
 * Controlador General del componente HelloWorld
*/
class HelloWorldController extends JController
{
        /**
         * mostrar tarea
         *
         * @return void
*/
        function display($cachable = false) 
        {
                // configurar vista por defecto si no está configurada
                $input = JFactory::getApplication()->input;
                $input->set('view', $input->getCmd('view', 'HelloWorlds'));
 
                // llamar comportamiento padre
                parent::display($cachable);
 
                // Configurar el submenú
                HelloWorldHelper::addSubmenu('messages');
        }
}

 admin/helloworld.php

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// requerir archivo de ayuda
JLoader::register('HelloWorldHelper', dirname(__FILE__) . DS . 'helpers' . DS . 'helloworld.php');

// importar librería de controladores de Joomla
jimport('joomla.application.component.controller');

// Obtener una instancia del controlador prefijado por HelloWorld
$controller = JController::getInstance('HelloWorld');

// Realizar la tarea de solicitud
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));

// Redirigir si está configurado por el controlador
$controller->redirect();  

Añadir algunas cadenas de traducción

Algunas cadenas tienen que ser traducidas. En el archivo admin/language/es-ES/es-ES.com_helloworld.ini, añade las siguientes líneas:

COM_HELLOWORLD="Hello World!"
COM_HELLOWORLD_ADMINISTRATION="HelloWorld - Administración"
COM_HELLOWORLD_ADMINISTRATION_CATEGORIES="HelloWorld - Categorías"
COM_HELLOWORLD_HELLOWORLD_CREATING="HelloWorld - Crear"
COM_HELLOWORLD_HELLOWORLD_DETAILS="Detalles"
COM_HELLOWORLD_HELLOWORLD_EDITING="HelloWorld - Editar"
COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE="Algunos valores no se pueden aceptar"
COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_DESC="Categoría a la que pertenecen los mensajes"
COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_LABEL="Categoría"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="Se mostrará este mensaje"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="Mensaje"
COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="Bienvenida"
COM_HELLOWORLD_HELLOWORLD_HEADING_ID="Id"
COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT="Gestor de HelloWorld: Editar Mensaje"
COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW="Gestor de HelloWorld: Nuevo Mensaje"
COM_HELLOWORLD_MANAGER_HELLOWORLDS="Gestor de HelloWorld"
COM_HELLOWORLD_N_ITEMS_DELETED_1="Un mensaje eliminado"
COM_HELLOWORLD_N_ITEMS_DELETED_MORE="%d mensajes eliminados"
COM_HELLOWORLD_SUBMENU_MESSAGES="Mensajes"
COM_HELLOWORLD_SUBMENU_CATEGORIES="Categorías"

Nuestro archivo helloworld.xml queda de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

        <name>COM_HELLOWORLD</name>       
        <creationDate>Octubre 2012</creationDate>
        <author>Carlos R & Andoitz B</author>
        <authorEmail>email</authorEmail>
        <authorUrl>http://www.ejemplo.org</authorUrl>
        <copyright>Copyright Info</copyright>
        <license>Licencia Info</license>       
        <version>0.0.12</version>       
        <description>COM_HELLOWORLD_DESCRIPTION</description>

        <install>
                <sql>
                        <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
                </sql>
        </install>
        <uninstall>
                <sql>
                        <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
                </sql>
        </uninstall>
        <update>
                <schemas>
                        <schemapath type="mysql">sql/updates/mysql</schemapath>
                </schemas>
        </update> 
    
        <files folder="site">
                <filename>index.html</filename>
                <filename>helloworld.php</filename>
                <filename>controller.php</filename>
                <folder>views</folder>
                <folder>models</folder>
                <folder>language</folder>
        </files>

        <media destination="com_helloworld" folder="media">
                <filename>index.html</filename>
                <folder>images</folder>
        </media>

        <administration>
               
                <menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
               
                <files folder="admin">
                       
                        <filename>index.html</filename>
                        <filename>helloworld.php</filename>
                        <filename>controller.php</filename>                       
                        <folder>sql</folder>                       
                        <folder>tables</folder>                       
                        <folder>models</folder>                       
                        <folder>views</folder>                       
                        <folder>controllers</folder>

                        <!-- Sección de archivos helpers -->
                        <folder>helpers</folder>
                </files>

                <languages folder="admin">
                   <language tag="es-ES">language/es-ES/es-ES.com_helloworld.ini</language>
                   <language tag="es-ES">language/es-ES/es-ES.com_helloworld.sys.ini</language>
                </languages>
        </administration>

</extension> 

Ya sabes que hacer para comprobar esto. Recuerda también que puedes descargar el archivo directamente, pero ten presente antes de instalarlo, modificar la línea en el archivo admin/models/fields/helloworld.php

Desarrollo de componentes en Joomla 2.5 (5 de 8) | Desarrollo de componentes en Joomla 2.5 (7 de 8)

10- Añadir decoración a la Administración

Añadir algunos iconos

Con tu gestor de archivos favorito crea una imagen de 16x16 y otra de 48x48 en el directorio media/images y añade una etiqueta media en tu archivo de instalación. Modifica la etiqueta menú para que utilice el nuevo icono.

Modificar las vistas

Añade las siguientes líneas al archivo admin/views/helloworlds/view.html.php:

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// importar librería de vistas de Joomla
jimport('joomla.application.component.view');

/**
 * Vista HelloWorlds
*/
class HelloWorldViewHelloWorlds extends JView
{
        /**
         * Método de presentación de vistas HelloWorlds
         * @return void
*/
        function display($tpl = null) 
        {
                // Obtener datos del modelo
                $items = $this->get('Items');
                $pagination = $this->get('Pagination');

                // Comprobar errores.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Asignar datos a la vista
                $this->items = $items;
                $this->pagination = $pagination;

                // Configurar la barra de herramientas
                $this->addToolBar();

                // Mostrar la plantilla
                parent::display($tpl);

                // Configurar el documento
                $this->setDocument();
        }

        /**
         * Configurar la barra de herramientas
*/
        protected function addToolBar() 
        {
                JToolBarHelper::title(JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLDS'), 'helloworld');
                JToolBarHelper::deleteListX('', 'helloworlds.delete');
                JToolBarHelper::editListX('helloworld.edit');
                JToolBarHelper::addNewX('helloworld.add');
        }
        /**
         * Método para configurar las propiedades del documento
         *
         * @return void
*/
        protected function setDocument() 
        {
                $document = JFactory::getDocument();
                $document->setTitle(JText::_('COM_HELLOWORLD_ADMINISTRATION'));
        }
} 

 Esta vista utiliza un segundo parámetro para la función JToolBarHelper::title. Se utilizará para construir la clase css para el título. El método _setDocument define el título en el navegador. Añade las siguientes líneas en el archivo admin/views/helloworld/view.html.php :

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// importar librería de vistas de Joomla
jimport('joomla.application.component.view');

/**
 * Vista HelloWorld
*/
class HelloWorldViewHelloWorld extends JView
{
        /**
         * Ver formulario
         *
         * @varform
*/
        protected $form = null;

        /**
         * mostrar método de la vista HelloWorld
         * @return void
*/
        public function display($tpl = null) 
        {
                // obtener datos
                $form = $this->get('Form');
                $item = $this->get('Item');

                // Comprobar errores.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Asignar datos
                $this->form = $form;
                $this->item = $item;

                // Configurar la barra de herramientas
                $this->addToolBar();

                // Mostrar la plantilla
                parent::display($tpl);

                // Configurar el documento
                $this->setDocument();
        }

        /**
         * Configurar la barra de herramientas
*/
        protected function addToolBar() 
        {               
                $input = JFactory::getApplication()->input;
                $input->set('hidemainmenu', true);
                $isNew = ($this->item->id == 0);
                JToolBarHelper::title($isNew ? JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW')
                                             : JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT'), 'helloworld');
                JToolBarHelper::save('helloworld.save');
                JToolBarHelper::cancel('helloworld.cancel', $isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE');
        }
        /**
         * Método para configurar las propiedades del documento
         *
         * @return void
*/
        protected function setDocument() 
        {
                $isNew = ($this->item->id < 1);
                $document = JFactory::getDocument();
                $document->setTitle($isNew ? JText::_('COM_HELLOWORLD_HELLOWORLD_CREATING')
                                           : JText::_('COM_HELLOWORLD_HELLOWORLD_EDITING'));
        }
}

 Esta vista también utiliza el segundo parámetro de la función JToolBarHelper::title y define el título del navegador.

Modificar el archivo de entrada principal

En el archivo admin/helloworld.php, añade estas líneas para que utilice el icono de 48x48:

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// Configurar algunas propiedades globales
$document = JFactory::getDocument();
$document->addStyleDeclaration('.icon-48-helloworld {background-image: url(/../media/com_helloworld/images/tux-48x48.png);}');

// importar librería de controladores de Joomla
jimport('joomla.application.component.controller');

// Conseguir una instancia de controlador prefijado por HelloWorld
$controller = JController::getInstance('HelloWorld');

// Ejecutar la tarea de solicitud
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));

// Redirigir si está configurado por el controlador
$controller->redirect();

Añadir algunas líneas en el archivo de idioma

 Modifica el admin/language/es-ES/es-ES.com_helloworld.ini y añade las siguientes líneas:

COM_HELLOWORLD_ADMINISTRATION="HelloWorld - Administración"
COM_HELLOWORLD_HELLOWORLD_CREATING="HelloWorld - Crear"
COM_HELLOWORLD_HELLOWORLD_DETAILS="Detalles"
COM_HELLOWORLD_HELLOWORLD_EDITING="HelloWorld - Editar"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="Este es el mensaje que se visualiza"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="Mensaje"
COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="Bienvenida"
COM_HELLOWORLD_HELLOWORLD_HEADING_ID="Id"
COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT="HelloWorld manager: Editar mensaje"
COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW="HelloWorld manager: Nuevo Mensaje"
COM_HELLOWORLD_MANAGER_HELLOWORLDS="Gestor HelloWorld"
COM_HELLOWORLD_N_ITEMS_DELETED_1="Un mensaje eliminado"
COM_HELLOWORLD_N_ITEMS_DELETED_MORE="%d mensajes eliminados"

Antes de empaquetar nuestro componente hagamos un recuento del contenido que debemos tener en nuestro directorio:

• helloworld.xml
• site/index.html
• site/helloworld.php
• site/controller.php
• site/views/index.html
• site/views/helloworld/index.html
• site/views/helloworld/view.html.php
• site/views/helloworld/tmpl/index.html
• site/views/helloworld/tmpl/default.xml
• site/views/helloworld/tmpl/default.php
• site/models/index.html
• site/models/helloworld.php
• site/language/index.html
• site/language/es-ES/index.html
• site/language/es-ES/es-ES.com_helloworld.ini
• admin/index.html
• admin/helloworld.php
• admin/controller.php
• admin/sql/index.html
• admin/sql/install.mysql.utf8.sql
• admin/sql/uninstall.mysql.utf8.sql
• admin/sql/updates/index.html
• admin/sql/updates/mysql/index.html
• admin/sql/updates/mysql/0.0.1.sql
• admin/sql/updates/mysql/0.0.6.sql
• admin/models/index.html
• admin/models/fields/index.html
• admin/models/fields/helloworld.php
• admin/models/forms/index.html
• admin/models/forms/helloworld.xml
• admin/models/helloworld.php
• admin/models/helloworlds.php
• admin/views/index.html
• admin/views/helloworlds/index.html
• admin/views/helloworlds/view.html.php
• admin/views/helloworlds/tmpl/index.html
• admin/views/helloworlds/tmpl/default.php
• admin/views/helloworlds/tmpl/default_head.php
• admin/views/helloworlds/tmpl/default_body.php
• admin/views/helloworlds/tmpl/default_foot.php
• admin/views/helloworld/index.html
• admin/views/helloworld/view.html.php
• admin/views/helloworld/tmpl/index.html
• admin/views/helloworld/tmpl/edit.php
• admin/tables/index.html
• admin/tables/helloworld.php
• admin/language/es-ES/es-ES.com_helloworld.ini
• admin/language/es-ES/es-ES.com_helloworld.menu.ini
• admin/controllers/index.html
• admin/controllers/helloworld.php
• admin/controllers/helloworlds.php
• language/es-ES/es-ES.ini
• media/index.html
• media/images/index.html
• media/images/tux-16x16.png
• media/images/tux-48x48.png

Modificando el archivo helloworld.xml tendríamos:

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

        <name>Hello World!</name>
        <creationDate>Octubre 2012</creationDate>
        <author>Carlos R & Andoitz B</author>
        <authorEmail>email<;/authorEmail>
        <authorUrl>http://www.ejemplo.org</authorUrl>
        <copyright>Copyright Info</copyright>
        <license>Licencia Info</license>
        <version>0.0.10</version>
        <description>COM_HELLOWORLD_DESCRIPTION</description>

        <install> <!-- Se ejecuta al instalar -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
                </sql>
        </install>
        <uninstall> <!-- Se ejecuta al desinstalar -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
                </sql>
        </uninstall>
        <update> <!-- Se ejecuta al actualizar; Nuevo en 2.5 -->
                <schemas>
                        <schemapath type="mysql">sql/updates/mysql</schemapath>
                </schemas>
        </update>

        <files folder="site">
                <filename>index.html</filename>
                <filename>helloworld.php</filename>
                <filename>controller.php</filename>
                <folder>views</folder>
                <folder>models</folder>
                <folder>language</folder>
        </files>

        <media destination="com_helloworld" folder="media">
                <filename>index.html</filename>
                <folder>images</folder>
        </media>

        <administration>
               
                <menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU
                </menu>

               <files folder="admin">
                        <!-- Sección principal de Copia de Ficheros -->
                        <filename>index.html</filename>
                        <filename>helloworld.php</filename>
                        <filename>controller.php</filename>

                        <!-- Sección de archivos SQL -->
                        <folder>sql</folder>

                        <!-- Sección de archivos de tablas -->
                        <folder>tables</folder>

                        <!-- Sección de archivos de modelos -->
                        <folder>models</folder>

                        <!-- Sección de archivos de vistas -->
                        <folder>views</folder>

                        <!-- Sección de archivos de controladores -->
                        <folder>controllers</folder>
                </files>

               <languages folder="admin">
                  <language tag="es-ES">language/es-ES/es-ES.com_helloworld.ini</language>
                  <language tag="es-ES">language/es-ES/es-ES.com_helloworld.sys.ini</language>
               </languages>
        </administration>

</extension> 

 Crea un archivo comprimido de este directorio o descarga directamente el archivo e instálalo utilizando el gestor de extensiones de Joomla!.

Desarrollo de componentes en Joomla 2.5 (4 de 8) | Desarrollo de componentes en Joomla 2.5 (6 de 8)

Ahora puedes ver en tu componente hello-world un formulario con dos columnas, dos filas y casillas de verificación. Puedes hacer clic en las casillas para seleccionar las opciones que desees (Figura 11).

Figura 11

8- Añadir la gestión de idiomas

Joomla! 2.5 gestiona los idiomas de los componentes en cuatro situaciones diferentes:

• Mostrando un componente en el sitio público
• Gestionando un componente en la administración
• Gestionando los menús en la administración
• Instalando un componente (nuevo en 1.7)

Joomla! 2.5 utiliza dos ubicaciones de carpetas diferentes para los idiomas:

• Una en administrator/language o language
• Una en la carpeta del componente (administrator/components/*componente*/language o components/*componente*/language)

Esto depende de como se instale el componente.

Gestión del idioma en el sitio público

Con el gestor de archivo y editor favorito, coloque un archivo en site/language/es-ES/es-ES.com_helloworld.ini .  Este archivo contendrá la traducción para la parte pública. Por el momento, este archivo estará vacío.

Gestión del idioma en el manejo del componente

Con el gestor de archivo y editor favorito, coloque el archivo admin/language/es-ES/es-ES.com_helloworld.ini . Este archivo contendrá la traducción de la administración.

COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="El mensaje de bienvenida que se visualizará"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="Mensaje"
COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="Bienvenida"
COM_HELLOWORLD_HELLOWORLD_HEADING_ID="Id"

Gestión del idioma en el manejo de los menús en la administración

Con el gestor de archivos y editor favorito, coloque el archivo admin/language/es-ES/es-ES.com_helloworld.sys.ini . Este archivo contendrá la traducción de la administración.

COM_HELLOWORLD="Hello World!"
COM_HELLOWORLD_DESCRIPTION="Esta es la descripción del componente  Hello World"
COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_TITLE="Hello World"
COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_DESC="Esta vista muestra un mensaje seleccionado"
COM_HELLOWORLD_MENU="Hello World!"

Opciones de ubicación para los archivos de los diferentes idiomas

A partir de la versión 1.7 hay dos formas de instalar los archivos de idiomas para una extensión. Se puede utilizar uno u otro o una combinación de ambos.

En la versión 1.5 los archivos se instalan en la carpeta language del núcleo de Joomla! (RAÍZ/administrator/language/ y RAÍZ/language/). Desde la versión 1.6 existe una nueva vía que incluye los archivos de idiomas en la carpeta language de la raíz de la extensión.

Por lo tanto, una extensión puede incluir una carpeta language  con un .sys.ini diferente a la instalada en la carpeta language del núcleo de Joomla! (este último no está incluido en la carpeta language del núcleo de Joomla!, ya que en la característica multi-idioma de Joomla! podemos tener idiomas a la espera de que sean instalados). Entonces, con esto tenemos dos formas diferentes de mostrar las descripciones: una el .sys.ini en la carpeta language, que se utiliza para los mensajes que van ha ser mostrados cuando la instalación se haya completado, y otra (desde el .ini) se utiliza para el funcionamiento “normal” del componente, es decir, cuando la extensión es usada en la administración.

Esto puede ser extremadamente útil en la instalación ya que puede existir la necesidad de que las descripciones requieran valores diferentes.

Nota:  El archivo .sys.ini también se utiliza para traducir el nombre de las extensiones en algunos gestores en la administración, y para proporcionar a los componentes una traducción al menú.

Por lo tanto, el archivo helloworld.xml incluiría desde la versión 1.6:

<files>
[...]
/*
    * Esta carpeta debe incluir las subcarpetas adecuadas, es decir, language/es-ES/ ... language/fr-FR
*/
<folder>language</folder> 
<filename>cualquier cosa</filename>
[...]
</files>

Y desde la versión 1.5 (o puede ser que no se incluya):

[...]
<languages folder="carpetaidiomanucleojoomla"> // si se usa otra carpeta de idioma (puede colocar cualquier nombre que se ajuste) 
    <language tag="es-ES">es-ES/es-ES.cualquiercosa.ini</language> // o
     <language tag="es-ES">es-ES.cualquiercosa.ini</language> // si no existe una subcarpeta
    <language tag="es-ES">es-ES/en-ES.cualquiercosa.sys.ini</language> // o
    <language tag="es-ES">es-ES.cualquiercosa.sys.ini</language> si no existe una subcarpeta
</languages>
[...] 

 O simplemente en la raíz:

<languages>
<language tag="es-ES">es-ES.cualquiercosa.ini</language>
<language tag="es-ES">es-ES.cualquiercosa.sys.ini</language>
</languages> 

Al instalar o actualizar la extensión, el archivo .sys.ini presente en la carpeta language en la raíz de la extensión, mostrará el resultado de la instalación a partir del valor asociado a la descripción del mismo.

A partir de entonces, si está presente, el .sys.ini así como el .ini instalado en la carpeta language del núcleo de Joomla!, tendrá prioridad sobre los archivos presentes en la carpeta language en la raíz de la extensión.

Nota: Una de las ventajas de la instalación de los archivos en la carpeta language en la raíz de la extensión, es que estos no se tocan cuando se actualiza un paquete de idioma.  La otra ventaja es que esta carpeta puede incluir varios idiomas (en-GB, fr-FR, es-ES, etc) que no requieren que el usuario instale el paquete de idioma correspondiente.  Esto es útil ya que están disponibles si, más adelante, un usuario instala el paquete correspondiente.

Añadir traducción al instalar el componente

Vea: Opciones de ubicación para los archivos de los diferentes idiomas

Con tu gestor de archivos y editor favorito, crea un archivo en RaízExtensión/language/es-ES/es-ES.miextension.sys.ini . Este archivo contendrá la traducción para la instalación.

COM_HELLOWORLD="Hello World!"
COM_HELLOWORLD_DESCRIPTION="Esta es la descripción del componente Hello World"

El COM_HELLOWORLD_DESCRIPTION se puede utilizar en el archivo helloworld.xml.

Entonces, debido a las modificaciones antes expuestas, nuestro archivo helloworld.xml se actualiza de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

        <name>COM_HELLOWORLD</name>
        <creationDate>Octubre 2012</creationDate>
        <author>Carlos R & Andoitz B</author>
        <authorEmail>email</authorEmail>
        <authorUrl>http://www.ejemplo.org</authorUrl>
        <copyright>Copyright Info</copyright>
        <license>Licensia Info</license>      
        <version>0.0.8</version>      
        <description>COM_HELLOWORLD_DESCRIPTION</description>

        <install> 
                <sql>
                        <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
                </sql>
        </install>

        <uninstall> 
                <sql>
                        <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
                </sql>
        </uninstall>
        <update>
                <schemas>
                        <schemapath type="mysql">sql/updates/mysql</schemapath>
                </schemas>
        </update>

        <files folder="site">
                <filename>index.html</filename>
                <filename>helloworld.php</filename>
                <filename>controller.php</filename>
                <folder>views</folder>
                <folder>models</folder>
                <folder>language</folder> // Carpeta para los idiomas en la interfaz de usuario 
      </files>

        <administration>
               
                <menu>COM_HELLOWORLD_MENU</menu>
             
              <files folder="admin">                       
                        <filename>index.html</filename>
                        <filename>helloworld.php</filename>
                        <filename>controller.php</filename>                       
                        <folder>sql</folder>                       
                        <folder>tables</folder>                       
                        <folder>models</folder>                       
                        <folder>views</folder>
              </files>
  
/*
    * Carpetas y archivos para el idioma en la administración
*/
              <languages folder="admin">
                <language tag="es-ES">language/es-ES/es-ES.com_helloworld.ini</language>
                <language tag="es-ES">language/es-ES/es-ES.com_helloworld.sys.ini</language>
              </languages>
        </administration>

</extension>

 En este archivo helloworld.xml, los idiomas están instalados en:

• administrator/language para la parte de administración (ver la etiqueta de idiomas xml)
• components/com_helloworld/language para la parte de la interfaz de usuario (No existe ninguna etiqueta de idiomas xml,  pero la carpeta del idioma está incluida)

Ahora para probar lo modificado ya sabes que hacer.

9- Añadir acciones a la administración

Añadir una barra de herramientas

En Joomla!, el administrador normalmente interactúa con los componentes a través de la barra de herramientas. Añade este contenido en el archivo admin/views/helloworlds/view.html.php. Esto creará una barra de herramientas básica y un título para el componente:

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// Importar librería de vistas de Joomla
jimport('joomla.application.component.view');

/**
 * Vistas HelloWorlds
*/
class HelloWorldViewHelloWorlds extends JView
{
        /**
         * método de presentación de la vista HelloWorlds
         * @return void
*/
        function display($tpl = null) 
        {
                // Obtener datos del modelo
                $items = $this->get('Items');
                $pagination = $this->get('Pagination');

                // Comprobación de errores
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Asignar datos a la vista
                $this->items = $items;
                $this->pagination = $pagination;

                // Establecer la barra de herramientas
                $this->addToolBar();

                // Mostrar la plantilla
                parent::display($tpl);
        }

        /**
         * Configurar la barra de herramientas
*/
        protected function addToolBar() 
        {
                JToolBarHelper::title(JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLDS'));
                JToolBarHelper::deleteList('', 'helloworlds.delete');
                JToolBarHelper::editList('helloworld.edit');
                JToolBarHelper::addNew('helloworld.add');
        }
} 

 Puedes encontrar otras acciones básicas de Administración en el archivo administrator/includes/toolbar.php de tu instalación de Joomla!.

Ya que la vista puede realizar algunas acciones, tenemos que añadir algunos datos de entrada. Con tu gestor y editor de archivos favorito, añade lo siguiente en el archivo admin/views/helloworlds/tmpl/default.php :

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted Access');
// cargar tooltip
JHtml::_('behavior.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>" method="post" name="adminForm" id="adminForm">
        <table class="adminlist">
                <thead><?php echo $this->loadTemplate('head');?></thead>
                <tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
                <tbody><?php echo $this->loadTemplate('body');?></tbody>
        </table>
        <div>
                <input type="hidden" name="task" value="" />
                <input type="hidden" name="boxchecked" value="0" />
                <?php echo JHtml::_('form.token'); ?>
        </div>
</form> 

Añadir controladores específicos

Hay que incluir tres acciones:

• helloworlds.delete
• helloworld.edit
• helloworld.add

Aquí puedes leer más sobre subcontroladores (en Inglés).

Estas son tareas compuestas (controller.task), así que hay que codificar dos nuevos controladores: HelloWorldControllerHelloWorlds y HelloWorldControllerHelloWorld .

admin/controllers/helloworlds.php 

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
 
// importar librería de controladores de Joomla!
jimport('joomla.application.component.controlleradmin');
 
/**
 *Controlador HelloWorlds
*/
class HelloWorldControllerHelloWorlds extends JControllerAdmin
{
        /**
         * Proxy para getModel.
         * @desde       2.5
*/
        public function getModel($name = 'HelloWorld', $prefix = 'HelloWorldModel') 
        {
                $model = parent::getModel($name, $prefix, array('ignore_request' => true));
                return $model;
        }
}

 admin/controllers/helloworld.php 

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
 
// Importar librería de controladores de formulario de Joomla
jimport('joomla.application.component.controllerform');
 
/**
 *Controlador HelloWorld
*/
class HelloWorldControllerHelloWorld extends JControllerForm
{
} 

Añadir y editar la vista

Esta vista mostrará datos utilizando un diseño.
Crea el archivo admin/views/helloworld/tmpl/edit.php que contenga:

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
JHtml::_('behavior.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld&layout=edit&id='.(int) $this->item->id); ?>"
      method="post" name="adminForm" id="helloworld-form">
        <fieldset class="adminform">
                <legend><?php echo JText::_( 'COM_HELLOWORLD_HELLOWORLD_DETAILS' ); ?></legend>
                <ul class="adminformlist">
<?php foreach($this->form->getFieldset() as $field): ?>
                        <li><?php echo $field->label;echo $field->input;?></li>
<?php endforeach; ?>
                </ul>
        </fieldset>
        <div>
                <input type="hidden" name="task" value="helloworld.edit" />
                <?php echo JHtml::_('form.token'); ?>
        </div>
</form>

Añadir un modelo y modificar el existente

La vista HelloWorldViewHelloWorld pide el formulario y los datos a través de un modelo. Este modelo tiene que proporcionar un método getTable, un método getForm y un método loadData (llamados desde el controlador JModelAdmin)

admin/models/helloworld.php

<?php
// No permitir acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
 
// importar librería modelform de Joomla
jimport('joomla.application.component.modeladmin');
 
/**
 *Modelo HelloWorld
*/
class HelloWorldModelHelloWorld extends JModelAdmin
{
        /**
         * Devuelve una referencia al objeto Table, siempre creándolo.
         *
         * @param type    Tipo de tabla a instanciar
         * @paramstring  Prefijo para el nombre de clase de tabla. Opcional.
         * @paramarray  Array de configuración para el modelo. Opcional.
         * @return      JTable  Objeto de base de datos
         * @since       2.5
*/
        public function getTable($type = 'HelloWorld', $prefix = 'HelloWorldTable', $config = array()) 
        {
                return JTable::getInstance($type, $prefix, $config);
        }
        /**
         * Método para conseguir el formulario.
         *
         * @paramarray   $data           Datos para el formulario.
         * @paramboolean $loadData   Verdadero si el formulario va a cargar sus propios datos (por defecto), falso si no.
         * @return      mixed                      Un objeto JForm object si funciona, false si falla
         * @since       2.5
*/
        public function getForm($data = array(), $loadData = true) 
        {
                // Get the form.
                $form = $this->loadForm('com_helloworld.helloworld', 'helloworld',
                                        array('control' => 'jform', 'load_data' => $loadData));
                if (empty($form)) 
                {
                        return false;
                }
                return $form;
        }
        /**
         * Método para obtener datos que deberían ser inyectados al formulario.
         *
         * @return      mixed   Datos para el formulario.
         * @since       2.5
*/
        protected function loadFormData() 
        {
                // Comprueba la sesión para comprobar datos introducidos previamente.
                $data = JFactory::getApplication()->getUserState('com_helloworld.edit.helloworld.data', array());
                if (empty($data)) 
                {
                        $data = $this->getItem();
                }
                return $data;
        }
}

Este modelo hereda de la clase JModelAdmin y utiliza el método loadForm. Busca formularios en la carpeta forms. Con tu gestor y editor de archivos favorito, crea un archivo admin/models/forms/helloworld.xml que contenga:

<?xml version="1.0" encoding="utf-8"?>
<form>
        <fieldset>
                <field
                        name="id"
                        type="hidden"
                />
                <field
                        name="greeting"
                        type="text"
                        label="COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL"
                        description="COM_HELLOWORLD_HELLOWORLD_GREETING_DESC"
                        size="40"
                        class="inputbox"
                        default=""
                />
        </fieldset>
</form> 

 Modificando el archivo helloworld.xml quedaría:

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

        <name>Hello World!</name>
        <creationDate>Octubre 2012</creationDate>
        <author>Carlos R & Andoitz B</author>
        <authorEmail>email</authorEmail>
        <authorUrl>http://www.ejemplo.org</authorUrl>
        <copyright>Copyright Info</copyright>
        <license>Licencia info</license>
        <version>0.0.9</version>
        <description>COM_HELLOWORLD_DESCRIPTION</description>

        <install> <!-- Se ejecuta al instalar -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
                </sql>
        </install>
        <uninstall> <!-- Se ejecuta al desinstalar -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
                </sql>
        </uninstall>
        <update> <!-- Se ejecuta al actualizar; Nuevo en 2.5 -->
                <schemas>
                        <schemapath type="mysql">sql/updates/mysql</schemapath>
                </schemas>
        </update>

        <files folder="site">
                <filename>index.html</filename>
                <filename>helloworld.php</filename>
                <filename>controller.php</filename>
                <folder>views</folder>
                <folder>models</folder>
                <folder>language</folder>
        </files>

        <administration>
               
                <menu>COM_HELLOWORLD_MENU</menu>
                 <files folder="admin">
                        <!-- Sección principal de Copia de Archivos de Administración -->
                        <filename>index.html</filename>
                        <filename>helloworld.php</filename>
                        <filename>controller.php</filename>

                        <!-- Sección de archivos SQL -->
                        <folder>sql</folder>

                        <!-- Sección de archivos de tablas -->
                        <folder>tables</folder>

                        <!-- Sección de archivos de modelos -->
                        <folder>models</folder>

                        <!-- Sección de archivos de vistas -->
                        <folder>views</folder>

                        <!-- Sección de archivos de controladores -->
                        <folder>controllers</folder>
                </files>

          <languages folder="admin">
               <language tag="es-ES">language/es-ES/es-ES.com_helloworld.ini</language>
               <language tag="es-ES">language/es-ES/es-ES.com_helloworld.sys.ini</language>
           </languages>
        </administration>

</extension>

Ahora crea un archivo comprimido de este directorio o descarga directamente el archivo (modificando el código en /admin/models/helloworld.php por el expuesto aquí) e instálalo utilizando el gestor de extensiones de Joomla.

Desarrollo de componentes en Joomla 2.5 (3 de 8) | Desarrollo de componentes en Joomla 2.5 (5 de 8)

6- Uso de la base de datos

Los componentes suelen gestionar sus contenidos utilizando la base de datos. Durante la fase de instalación o desinstalación o actualización de un componente, se pueden ejecutar consultas SQL a través del uso de archivos de texto SQL.

Coge tu editor favorito, crea dos archivos llamados admin/sql/install.mysql.utf8.sql y admin/sql/updates/mysql/0.0.6.sql . Ambos deberán tener el contenido siguiente:

DROP TABLE IF EXISTS `#__helloworld`;

CREATE TABLE `#__helloworld` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `greeting` VARCHAR(25) NOT NULL,
   PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;

INSERT INTO `#__helloworld` (`greeting`) VALUES
        ('Hello World!'),
        ('Good bye World!');
 

 El archivo admin/sql/install.mysql.utf8.sql se ejecuta al instalar el componente. El archivo 0.0.6.sql se ejecuta al actualizar el componente.

Nota: Cuando el componente está instalado, los archivos de la carpeta SQL correspondientes a las actualizaciones del componente (por ejemplo admin/sql/updates/mysql) se leen y el nombre del último archivo (alfabéticamente) se utiliza para rellenar el número de la versión del componente en la tabla #__schemas. Este valor debe estar con un orden (en este caso alfabético) en la tabla, para que la actualización automática ejecute los archivos de actualización de SQL para futuras versiones. Por esta razón, es una buena práctica crear un archivo de actualización SQL para cada versión (incluso si está vacío o sólo tiene un comentario). De esta manera la versión #__schemas siempre coincidirá con la versión de los componentes.

Para que esto se ejecute nuestro archivo helloworld.xml tiene que ser modificado para agregar las líneas correspondientes. De paso, agrego todas las otras modificaciones que verán más abajo:

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">

        <name>Hello World!</name>

        <!-- Los siguientes elementos son opcionales y sin restricciones de formato -->
        <creationDate>Octubre 2012</creationDate>
        <author>Carlos R</author>
        <authorEmail>email</authorEmail>
        <authorUrl>http://www.ejemplo.org</authorUrl>
        <copyright>Copyright Info</copyright>
        <license>Licencia Info</license>

        <!--  La  versión de desarrollo del componente se registra en la tabla del mismo -->
        <version>0.0.6</version>

        <!-- La descripción es opcional. Por defecto se introduce el nombre del componente -->
        <description>Descripción del Componente Hello World!...</description>

        <install> <!-- Se ejecuta en la instalación -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
                </sql>
        </install>
        <uninstall> <!-- Se ejecuta en la desinstalación -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
                </sql>
        </uninstall>
        <update> <!-- Se ejecuta en la actualización; Nuevo en 2.5 -->
                <schemas>
                        <schemapath type="mysql">sql/updates/mysql</schemapath>
                </schemas>
        </update>

        <!-- Archivos pertenecientes  a la interfaz de usuario -->
        <!-- Nota el atributo de la carpeta: Este atributo describe hacia dónde 
               y de donde van a ser copiados los archivos del paquete de instalación.-->
        <files folder="site">
                <filename>index.html</filename>
                <filename>helloworld.php</filename>
                <filename>controller.php</filename>
                <folder>views</folder>
                <folder>models</folder>
        </files>

        <administration>
                <!-- Menú de la sección de Administración -->
                <menu>Hello World!</menu>
                <!-- Archivos pertenecientes  a la administración -->
                <!-- Nota el atributo de la carpeta: Este atributo describe hacia donde 
                       y de donde van a ser copiados los archivos del paquete de instalación. -->
                <files folder="admin">
                        <!-- Archivos principales de la carpeta admin  -->
                        <filename>index.html</filename>
                        <filename>helloworld.php</filename>

                        <!-- Archivos de la sección de SQL -->
                        <folder>sql</folder>

                        <!-- Archivos de la Sección de las Tablas -->
                        <folder>tables</folder>

                        <!-- Archivos de la Sección de los Modelos -->
                        <folder>models</folder>
                </files>
        </administration>

</extension>

 Hacemos lo mismo con el archivo de desinstalación. Con su editor favorito, cree el archivo admin/sql/uninstall.mysql.utf8.sql que contenga:

DROP TABLE IF EXISTS `#__helloworld`;

Añadir un nuevo tipo de campo

Por el momento, se ha utilizado un tipo de campo codificado para los mensajes. El objetivo es utilizar nuestra base de datos para elegir el mensaje. Para esto modificamos el archivo site/views/helloworld/tmpl/default.xml y le agregamos estas líneas:

<?xml version="1.0" encoding="utf-8"?>
<metadata>
        <layout title="COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_TITLE">
                <message>COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_DESC</message>
        </layout>
        <fields
                name="request"
                addfieldpath="/administrator/components/com_helloworld/models/fields"
        >
                <fieldset name="request">
                        <field
                                name="id"
                                type="helloworld"
                                label="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL"
                                description="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC"
                        />
                </fieldset>
        </fields>
</metadata

 Esta parte introduce un nuevo tipo de campo y le dice a Joomla! que debe buscar la definición del campo en la carpeta /administrator/components/com_helloworld/models/fields.

Con tu editor favorito crea el archivo admin/models/fields/helloworld.php que contenga lo siguiente:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// Importar biblioteca modelitem de Joomla
// jimport('joomla.application.component.modelitem');
jimport('joomla.form.helper');
JFormHelper::loadFieldClass('list');

class JFormFieldHelloWorld extends JFormFieldList                                                                                
{                                                                                                                                
        /** 
         * The field type.                                                                                                       
         *
         * @varstring
*/
        protected $type = 'HelloWorld';

        /**
         * Method to get a list of options for a list input.
         *
         * @return  array           An array of JHtml options.
*/
        protected function getOptions() 
        {
                $db = JFactory::getDBO();
                $query = $db->getQuery(true);
                $query->select('id,greeting');
                $query->from('#__helloworld');
                $db->setQuery((string)$query);
                $messages = $db->loadObjectList();
                $options = array();
                if ($messages)
                {
                        foreach($messages as $message) 
                        {
                                $options[] = JHtml::_('select.option', $message->id, $message->greeting);
                        }
                }
                $options = array_merge(parent::getOptions(), $options);
                return $options;
        }
}

El nuevo tipo de campo muestra una lista desplegable de mensajes para elegir. Usted puede ver el resultado de este cambio, en el gestor de menú en la administración de su sitio para el elemento

HelloWorld (Figura 7).

Muestra el mensaje seleccionado

Cuando un elemento de menú del componente, se cree o se actualice, Joomla! almacena el identificador del mensaje. El modelo HelloWorldModelHelloWorld tiene ahora para calcular el mensaje de acuerdo a este identificador y los datos son almacenados en la base de datos. De acuerdo a esto, necesitamos entonces modificar el archivo site/models/helloworld.php :

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// importar la biblioteca de Joomla modelitem
jimport('joomla.application.component.modelitem');

/**
 * Modelo HelloWorld
*/
class HelloWorldModelHelloWorld extends JModelItem
{
        /**
         * @var array demensajes
*/
        protected $messages;

        /**
         * Devuelve una referencia al objeto Tabla, siempre creando
         *
         * @param type    El tipo de tabla para crear una instancia
         * @param string  Un prefijo para el nombre de la clase de la tabla. Opcional
         * @param array   Configuración del array del Modelo. Opcional
         * @return      JTable  Un objeto de tipo Base de Datos
         * @since       2.5
*/
        public function getTable($type = 'HelloWorld', $prefix = 'HelloWorldTable', $config = array()) 
        {
                return JTable::getInstance($type, $prefix, $config);
        }
        /**
         * Obtener el mensaje
         * @param int    Recuperar el ID del mensaje corrrespondiente
         * @return string  El mensaje que se le muestra al usuario
*/
        public function getMsg($id = 1) 
        {
                if (!is_array($this->messages))
                {
                        $this->messages = array();
                }

                if (!isset($this->messages[$id])) 
                {
                        //solicitar el ID seleccionado
                        $id = JRequest::getInt('id');

                        // Obtener una instancia de TableHelloWorld 
                        $table = $this->getTable();

                        // Cargar el mensaje
                        $table->load($id);

                        // Asignar el mensaje
                        $this->messages[$id] = $table->greeting;
                }

                return $this->messages[$id];
        }
}

El modelo ahora le pide a TableHelloWorld hacer llegar el mensaje. Esta clase tiene que ser definida en el archivo admin/tables/helloworld.php :

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// Importar la librería table de Joomla
jimport('joomla.database.table');

/**
 * Clase Hello Table
*/
class HelloWorldTableHelloWorld extends JTable
{
        /**
         * Constructor
         *
         * @param object Database connector object
*/
        function __construct(&$db) 
        {
                parent::__construct('#__helloworld', 'id', $db);
        }
} 

No debes ver ninguna diferencia, pero si se accede a la base de datos debería ver una tabla denominada jos_helloworld con dos columnas: id y greeting. Y dos entradas:  Hello World! y Good bye World! (Figura 10).

Figura 10

Para probar los cambios ya sabes que hacer, tan sólo tienes que empaquetar e instalar. Pero primero hagamos un recuento del contenido que tenemos que tener en nuestro directorio:

• helloworld.xml
• site/index.html
• site/helloworld.php
• site/controller.php
• site/views/index.html
• site/views/helloworld/index.html
• site/views/helloworld/view.html.php
• site/views/helloworld/tmpl/index.html
• site/views/helloworld/tmpl/default.xml
• site/views/helloworld/tmpl/default.php
• site/models/index.html
• site/models/helloworld.php
• admin/index.html
• admin/helloworld.php
• admin/sql/index.html
• admin/sql/install.mysql.utf8.sql
• admin/sql/uninstall.mysql.utf8.sql
• admin/sql/updates/index.html
• admin/sql/updates/mysql/index.html
• admin/sql/updates/mysql/0.0.1.sql
• admin/sql/updates/mysql/0.0.6.sql
• admin/models/index.html
• admin/models/fields/index.html
• admin/models/fields/helloworld.php
• admin/tables/index.html
• admin/tables/helloworld.php

También puedes descargar el archivo directamente, pero necesitas antes de instalarlo copiar el código de los archivo site/models/helloworld.php y admin/models/fields/helloworld.php antes expuesto, ya que no viene incluido en el paquete.

7- Administración Básica

Diseñar la parte de Administración nos lleva a crear al menos el tríptico Modelo-Vista-Controlador. Tenemos que modificar el punto de entrada de la administración de nuestro componente, el archivo ha ser modificado sería admin/helloworld.php :

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// Importar la biblioteca controller de jomla
jimport('joomla.application.component.controller');

// Obtener una instancia del controlador prefijado por HelloWorld
$controller = JController::getInstance('HelloWorld');

// Realice la tarea solicitada
$controller->execute(JRequest::getCmd('task'));

// Redirigir si se define por el controlador
$controller->redirect();

Crear el controlador general

Ahora, el punto de entrada recibe una instancia del controlador prefijado por HelloWorld. Creemos un controlador básico para la parte de la administración: admin/controller.php 

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
 
// Importar la biblioteca controller de jomla
jimport('joomla.application.component.controller');
 
/**
 * General Controller of HelloWorld component
*/
class HelloWorldController extends JController
{
        /**
         * Mostrar la tarea
         *
         * @return void
*/
        function display($cachable = false) 
        {
                // programar una vista por defecto si no se establece
                JRequest::setVar('view', JRequest::getCmd('view', 'HelloWorlds'));
 
                // call parent behavior
                parent::display($cachable);
        }
} 

 Este controlador mostrará la vista HelloWorlds por defecto.

Crear la vista

 Con tu gestor y editor de archivos favorito, crea un archivo admin/views/helloworlds/view.html.php que contenga:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');

// Importar la biblioteca view de Joomla
jimport('joomla.application.component.view');

/**
 * Vista HelloWorlds  */
class HelloWorldViewHelloWorlds extends JView
{
        /**
         *Métodoo para mostrar la vista HelloWorlds 
         * @return void
*/
        function display($tpl = null) 
        {
                // Obtener los datos desde el modelo
                $items = $this->get('Items');
                $pagination = $this->get('Pagination');

                // Verificar existencia de errores.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Asignar los datos a la vista
                $this->items = $items;
                $this->pagination = $pagination;

                // Mostrar la plantilla
                parent::display($tpl);
        }
}

 En Joomla!, las vistas muestran los datos usando un diseño. Con tu gestor y editor de archivos favorito, pon el archivo admin/views/helloworlds/tmpl/default.php que contenga:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted Access');

// Cargar el comportamiento tooltip
JHtml::_('behavior.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>" method="post" name="adminForm">
        <table class="adminlist">
                <thead><?php echo $this->loadTemplate('head');?></thead>
                <tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
                <tbody><?php echo $this->loadTemplate('body');?></tbody>
        </table>
</form>

Este diseño llama a varios sub-diseños (head, foot y body). Cada uno de ellos corresponde a un archivo prefijado por el nombre del diseño principal (default), y un guión bajo.

Pon un archivo llamado admin/views/helloworlds/tmpl/default_head.php que contenga:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
        <th width="5">
                <?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_ID'); ?>
        </th>
        <th width="20">
                <input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo     count($this->items); ?>);" />
        </th>                   
        <th>
                <?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING'); ?>
        </th>
</tr>  

 CheckAll es una función JavaScript definida en el core de Joomla!, capaz de comprobar todos los elementos.

Pon un archivo llamado admin/views/helloworlds/tmpl/default_body.php que contenga:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted Access');
?>
<?php foreach($this->items as $i => $item): ?>
        <tr class="row<?php echo $i % 2; ?>">
                <td>
                        <?php echo $item->id; ?>
                </td>
                <td>
                        <?php echo JHtml::_('grid.id', $i, $item->id); ?>
                </td>
                <td>
                        <?php echo $item->greeting; ?>
                </td>
        </tr>
<?php endforeach; ?> 

 JHtml::_  es una función de ayuda que muestra varias salidas HTML. En este caso mostrará una casilla de verificación para el elemento.

Pon un archivo llamado admin/views/helloworlds/tmpl/default_foot.php que contenga:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
        <td colspan="3"><?php echo $this->pagination->getListFooter(); ?></td>
</tr> 

 JPagination es una clase de Joomla! que maneja y controla objetos de paginación.

Crear el modelo

La vista HelloWorlds le pide los datos al modelo. En Joomla!, hay una clase que maneja una lista de datos: JModelList. La clase JModelList y las clases heredadas sólo necesitan un método:

• getListQuery que construye una sentencia SQL

Y dos estados:

• list.start para determinar la compensación de la lista
• list.limit para determinar la longitud de la lista

Los métodos getItems y getPagination se definen en la clase JModelList. No necesitan ser definidos en la clase HelloWorldModelHelloWorlds. Modificando el archivo admin/models/helloworlds.php quedaría:

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die('Restricted access');
// Importar biblioteca modellist de Joomla
jimport('joomla.application.component.modellist');
/**
 * HelloWorldList Model
*/
class HelloWorldModelHelloWorlds extends JModelList
{
        /**
         * Método para crear una consulta SQL para cargar los datos de la lista.
         *
         * @return      string  Una consulta SQL
*/
        protected function getListQuery()
        {
                // Cree un objeto de consulta nueva.           
                $db = JFactory::getDBO();
                $query = $db->getQuery(true);
                // Seleccione algunos campos
                $query->select('id,greeting');
                // De la tabla hello
                $query->from('#__helloworld');
                return $query;
        }
}

 El método _populateState es (por defecto) llamado automáticamente cuando un estado es leído por el método getState.
Luego de este paso el contenido del directorio se ha incrementado:

• helloworld.xml
• site/index.html
• site/helloworld.php
• site/controller.php
• site/views/index.html
• site/views/helloworld/index.html
• site/views/helloworld/view.html.php
• site/views/helloworld/tmpl/index.html
• site/views/helloworld/tmpl/default.xml
• site/views/helloworld/tmpl/default.php
• site/models/index.html
• site/models/helloworld.php
• admin/index.html
• admin/helloworld.php
• admin/controller.php
• admin/sql/index.html
• admin/sql/install.mysql.utf8.sql
• admin/sql/uninstall.mysql.utf8.sql
• admin/sql/updates/index.html
• admin/sql/updates/mysql/index.html
• admin/sql/updates/mysql/0.0.1.sql
• admin/sql/updates/mysql/0.0.6.sql
• admin/models/index.html
• admin/models/fields/index.html
• admin/models/fields/helloworld.php
• admin/models/helloworlds.php
• admin/views/index.html
• admin/views/helloworlds/index.html
• admin/views/helloworlds/view.html.php
• admin/views/helloworlds/tmpl/index.html
• admin/views/helloworlds/tmpl/default.php
• admin/views/helloworlds/tmpl/default_head.php
• admin/views/helloworlds/tmpl/default_body.php
• admin/views/helloworlds/tmpl/default_foot.php
• admin/tables/index.html
• admin/tables/helloworld.php

Crea un archivo comprimido de este directorio o descárga directamente el archivo e instálalo utilizando el gestor de extensiones de Joomla!. Recuerda también que hay que modificar el archivo helloworld.xml :

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">
        <name>Hello World!</name>
        <creationDate>Octubre 2012</creationDate>
        <author>Carlos R & Andoitz Brit</author>
        <authorEmail>email</authorEmail>
        <authorUrl>http://www.ejemplo.org</authorUrl>
        <copyright>Copyright Info</copyright>
        <license>Licencia Info</license>
        <version>0.0.7</version>
        <description>Descripción del Componente Hello World!...</description>

        <install> <!-- Se ejecuta en la instalación-->
                <sql>
                        <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
                </sql>
        </install>
        <uninstall> <!-- Se ejecuta en la desintalación -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
                </sql>
        </uninstall>
        <update> <!-- Se ejecuta en la actualización; Nuevo en 2.5 -->
                <schemas>
                        <schemapath type="mysql">sql/updates/mysql</schemapath>
                </schemas>
        </update>

        <files folder="site">
                <filename>index.html</filename>
                <filename>helloworld.php</filename>
                <filename>controller.php</filename>
                <folder>views</folder>
                <folder>models</folder>
        </files>

        <administration>
                <menu>Hello World!</menu>
                <files folder="admin">
                        <filename>index.html</filename>
                        <filename>helloworld.php</filename>
                        <filename>controller.php</filename>
                        <folder>sql</folder>
                        <folder>tables</folder>
                        <folder>models</folder>

                        <!-- Sección para los archivos de las vistas -->
                        <folder>views</folder>
                </files>                
        </administration>
</extension>

 Desarrollo de componentes en Joomla 2.5 (2 de 8) | Desarrollo de componentes en Joomla 2.5 (4 de 8)

2- Configuración Modelo-Vista-Controlador (MVC)

En el Framework de Joomla! 2.5, los autores de los componentes dividen el código en 3 partes principales:

• models (Modelo): Gestionar los datos
• views (Vista):  Mostrará el contenido de acuerdo al tipo (error, feed, html, json, raw, xml) y el diseño elegido por los controladores
• controllers (Controlador): Llevan a cabo las tareas, establecen y obtienen el estado del  modelo y preguntan qué vista es la que hay que mostrar.

Configuración del Controlador

En el código del núcleo de Joomla, hay una clase capaz de gestionar los controladores: JController.

Esta clase tiene que ser extendida para ser usada en nuestro componente.  En el archivo site/helloworld.php (punto de entrada de nuestro componente Hello World!) ubicamos estas líneas:

 <?php

// No permitir el acceso directo a este archivo
defined('_JEXEC') or die('Restricted access');

// Importar la biblioteca del controlador de Joomla
jimport('joomla.application.component.controller');

// Obtener una instancia del controlador prefijado por HelloWorld
$controller = JController::getInstance('HelloWorld');

// Lleva a cabo la tarea solicitada
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));

// Redirigir si se define por el controlador
$controller->redirect();

 El método estático getInstance de la clase JController creará un controlador.  En el código anterior, se creará una instancia del objeto del controlador de una clase llamada HelloWorldController. Joomla! buscará la declaración de esa clase en un archivo llamado exactamente controller.php (es un comportamiento por defecto).

Ahora, controller.php es necesario crearlo y HelloWorldController debe ser declarado y definido. Así que con tu gestor de archivos y editor favorito , creamos el archivo site/controller.php que contenga lo siguiente:

<?php
// No permitir el acceso directo a este archivo
defined('_JEXEC') or die('Restricted access');

// Importar la biblioteca del controlador de Joomla
jimport('joomla.application.component.controller');

/**
 * Controlador del Componente Hello World!
*/
class HelloWorldController extends JController
{
} 

 Cuando no hay ninguna tarea dada en las variables de petición, la tarea por defecto se ejecutará. Dicha tarea la contiene la clase JController, que ejecuta la tarea de visualización por defecto. En nuestro ejemplo, se mostrará una vista denominada HelloWorld.

Configuración de la Vista

Cuando la clase JController decide mostrar una vista, va en busca de los archivos que están en la carpeta component/com_[nombre_componente]/views/[nombre_vista]/ .

El nombre de la carpeta, de la vista por defecto, es el nombre del propio componente. En nuestro caso la ruta es component/com_helloworld/views/helloworld/.

El archivo que contiene el código de la vista se denomina view.[modo_vista].php. El modo de la vista por defecto, y probablemente el único que tenga un componente es el modo html. Así que esto nos da nuestro nombre del archivo, que es view.html.php.

Con el gestor de archivos y editor favorito, crea el archivo site/views/helloworld/view.html.php que será nuestra vista predeterminada, conteniendo lo siguiente:

<?php
// No permitir el acceso directo a este archivo
defined('_JEXEC') or die('Restricted access');

// Importar la biblioteca del controlador de Joomla
jimport('joomla.application.component.view');

/**
 * HTML clase View para el componente HelloWorld */
class HelloWorldViewHelloWorld extends JView
{
        // Sobrescribir visualización del método JView
        function display($tpl = null) 
        {
                // Asignar datos a la vista
                $this->msg = 'Hello World';

                // Visualiza la vista
                parent::display($tpl);
        }
} 

 El método de visualización de la clase JView se llama con la tarea de visualización de la clase JController. En nuestro caso, este método mostrará los datos utilizando el archivo tmpl/default.php.

Con el gestor de archivos y editor favorito , crea el archivo site/views/helloworld/tmpl/default.php que contenga lo siguiente:

<?php

// No permitir el acceso directo a este archivo
defined('_JEXEC') or die('Restricted access');
?>
<h1><?php echo $this->msg; ?></h1> 

 Este archivo de plantilla se incluirán en la clase JView. Por lo tanto, aquí, $this  se refiere a la clase HelloWorldViewHelloWorld.

Haciendo un recuento de lo que hemos creado hasta ahora, deberíamos de tener el siguiente directorio:

• helloworld.xml
• site/index.html
• site/helloworld.php
• site/controller.php
• site/views/index.html
• site/views/helloworld/index.html
• site/views/helloworld/view.html.php
• site/views/helloworld/tmpl/index.html
• site/views/helloworld/tmpl/default.php
• admin/index.html
• admin/helloworld.php
• admin/sql/index.html
• admin/sql/updates/index.html
• admin/sql/updates/mysql/index.html
• admin/sql/updates/mysql/0.0.1.sql

Luego de rectificar esto, actualizamos el archivo helloworld.xml para añadir los cambios pertinentes:

 <?xml version="1.0" encoding="utf-8"?>

<extension type="component" version="2.5.0" method="upgrade">

        <name>Hello World!</name>

        <!-- Los siguientes elementos son opcionales y sin restricciones de formato -->
        <creationDate>October 2012</creationDate>
        <author>Carlos R & Andoitz Brit</author>
        <authorEmail>email</authorEmail>
        <authorUrl>http://www.ejemplo.org</authorUrl>
        <copyright>Copyright Info</copyright>
        <license>Licencia Info</license>

        <!--  La  versión de desarrollo del componente se registra en la tabla del mismo -->
        <version>0.0.2</version>

        <!-- The description is optional and defaults to the name -->
        <description>Descripción del Componente Hello World...</description>

        <!-- Para las actualizaciones; Nuevo en 2.5 --> 
        <update>
                <schemas>
                        <schemapath type="mysql">sql/updates/mysql</schemapath>
                </schemas>
        </update>

        <!-- Archivos pertenecientes  a la interfaz de usuario -->
        <!-- Nota el atributo de la carpeta: Este atributo describe hacia donde y 
de donde van a ser copiados los archivos del paquete de instalación.-->
        <files folder="site">
              <filename>index.html</filename>
                <filename>helloworld.php</filename>
                <filename>controller.php</filename>
                <folder>views</folder>
        </files>

        <administration>

                <!-- Menú de la sección de Administración  -->
                <menu>Hello World!</menu>

                <!-- Archivos pertenecientes  a la administración -->
                <!-- Nota el atributo de la carpeta: Este atributo describe hacia donde y de donde van a ser copiados los archivos del paquete de instalación. -->
                <files folder="admin">

                        <!-- Archivos principales de la carpeta admin -->
                        <filename>index.html</filename>
                        <filename>helloworld.php</filename>

                        <!-- Archivos de la sección de SQL -->
                        <folder>sql</folder>
                </files>
        </administration>

</extension>

Si deseas probar los cambios, solo sigue los mismos pasos para empaquetar el directorio o descarga el archivo que brinda la sección para los desarrolladores en la documentación de Joomla! e instálalo mediante el gestor de extensiones de Joomla!. Luego ingresa tusitio/index.php?option=com_helloworld en tu navegador y verás por defecto el mensaje contenido en la variable $this->msg en el archivo view.html.php (Figura 4).

Figura 4

3- Añadir un tipo de elemento de Menú

En el Framework de Joomla!,  los componentes se ejecutan utilizando elementos del menú. Si vas al gestor de menú en la administración de tu sitio, verás que aún no existe ningún tipo de elemento de Menú correspondiente a nuestro componente Helloworld (Figura 5).

Figura 5

Para lograr esto, es muy sencillo en Joomla!, simplemente añadimos el archivo site/views/helloworld/tmpl/default.xml que contenga lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<metadata>
        <layout title="COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_TITLE">
                <message>
                        <![CDATA[COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_DESC]]>
                </message>
        </layout>
</metadata> 

 Por el momento las cadenas no serán traducidas, ya que más adelante lo veremos con más detalles.
Ahora modificamos nuestro archivo helloworld.xml para añadir una nueva versión, ya que fue modificado el componente. Exactamente la línea que buscamos en el archivo es esta:

 [….]

        <!--  La  versión de desarrollo del componente se registra en la tabla del mismo -->
        <version>0.0.3</version>
[….] 

 Si empaquetamos nuestro directorio y luego lo instalamos, veremos que ya tenemos un elemento de menú nuevo (Figura 6). También puedes descargarte el archivo brindado en la documentación de Joomla! para desarrolladores.

Figura 6

4- Añadir el Modelo

En el Framework de Joomla!, los modelos son responsables de la gestión de los datos. La primera función que tiene que ser escrita para un modelo es la función get. Su objetivo es devolver los datos una vez haya sido llamada. En nuestro caso la que llama a esta función es la vista HelloWorldViewHelloWorld. Por defecto, el modelo llamado HelloWorldModelHelloWorld es el modelo principal asociado a esta vista. Para implementar esto, coge el gestor de archivos y editor favorito y crea el siguiente archivo site/models/helloworld.php, el cual contendrá lo siguiente:

<?php
// No permitir el acceso directo a este archivo
defined('_JEXEC') or die('Restricted access');

// Importar la biblioteca del controlador de Joomla
jimport('joomla.application.component.modelitem');

/**
 * Modelo HelloWorld 
*/
class HelloWorldModelHelloWorld extends JModelItem
{
        /**
         * @var string msg
*/
        protected $msg;

        /**
         * Obtener el mensaje
         * @return string El mensaje que se muestra al usuario
*/
        public function getMsg() 
        {
                if (!isset($this->msg)) 
                {
                        $this->msg = 'Hello World!';
                }
                return $this->msg;
        }
}