LinuxParty

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;
        }
} 

Como sabemos la clase HelloWorldViewHelloWorld es la que le pregunta al modelo por los datos utilizando el método get de la clase JView. Modificando el archivo site/views/helloworld/view.html.php quedaría de la siguiente forma:

<?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 = $this->get('Msg');

                // Comprueba si hay errores.
                if (count($errors = $this->get('Errors'))) 
                { 
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Visualiza la vista
                parent::display($tpl);
        }
}

Nota: $this->get()  es un miembro de JView::get que es un proxy para (get*) obtener los métodos por defecto del modelo, donde * se rellena con el valor del primer parámetro pasado a get().
Nota: La clase JError está obsoleta, utiliza la clase JLog o PHP Exception en su lugar.

Un cambio, una nueva versión para nuestro componente. Por tanto, modificamos la línea correspondiente en el archivo helloworld.xml, para añadir la nueva versión y la carpeta correspondiente a los modelos. Exactamente serían estas líneas:

[….]
<!--  La  versión de desarrollo del componente se registra en la tabla del mismo -->
        <version>0.0.4</version>
[….]
 <!-- 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>
[….]

5- Adición de una petición de variable en el tipo de menú

Por el momento, el mensaje que siempre aparece es Hello World!. Joomla! 2.5 ofrece la posibilidad de agregar parámetros a los tipos de menú (Figura 7).

Figura 7

En nuestro caso, esto se hace en el archivo site/views/helloworld/tmpl/default.xml : 

<?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">
                <fieldset name="request">
                        <field
                                name="id"
                                type="list"
                                label="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL"
                                description="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC"
                                default="1"
                        >
                                <option value="1">Hello World!</option>
                                <option value="2">Good bye World!</option>
                        </field>
                </fieldset>
        </fields>
</metadata>

 Dos cosas importantes a tener en cuenta:

• El grupo de campos (fields) de solicitud (request) indica los campos obligatorios
• El valor del atributo se pasa al componente en la dirección URL. En este caso, ?option=com_helloworld&id=1 indicaría que se ha elegido la opción “1”

El modelo tiene que ser modificado con el fin de cambiar entre los dos mensajes diferentes (que es elegido por el usuario con el campo definido anteriormente). Entonces el archivo site/models/helloworld.php quedaría:

<?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
{
        /**
         * @varstringmsg
*/
        protected $msg;
 
        /**
         * Obtener el mensaje
         * @return string El mensaje que se muestra al usuario
*/
        public function getMsg() 
        {
                if (!isset($this->msg)) 
                {
                        $id = JRequest::getInt('id');
                        switch ($id) 
                        {
                        case 2:
                                $this->msg = 'Good bye World!';
                        break;
                        default:
                        case 1:
                                $this->msg = 'Hello World!';
                        break;
                        }
                }
                return $this->msg;
        }
} 

Otro cambio, otra versión para nuestro componente. Ya sería la 0.0.5 . Para ver en funcionamiento lo anteriormente explicado, solo tienes que escribir en tu navegador index.php?option=com_helloworld&id=1 para la primera opción (Figura 8) o index.php?option=com_helloworld&id=2 para la segunda (figura 9). Esto claro, después de haber empaquetado e instalado su nueva versión del componente. También puedes descargar el archivo que brinda la sección para desarrolladores en la documentación de Joomla.

Figura 8

Figura 9

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