En los artículos anteriores hemos cubierto, la preparación del escenario para comenzar el desarrollo y empezamos también la estructura básica del componente. En este tutorial nos centraremos en los detalles, escribiremos las funciones y archivos que son fundamentales para esta extensión y hacer que la extensión empiece a trabajar, esperando empezar a unificar todo el componente y el cumplimiento del objetivo general.

Paso 0: Preparar café

Vas a necesitar una taza de café fuerte hoy. En este tutorial vamos a estar cubriendo en detalle los modelos y las vistas, necesarios para el componentes Lendr, que hemos comenzado en tutoriales anteriores. Si acaba de unirse a esta serie, le recomiendo leer el primer artículo y, a continuación, siga con el artículo inicial sobre el desarrollo, antes de continuar con este tutorial. ¿Ya los leistes? ¿Listo para el siguiente? Asegúrese de que está listo para ir por la configuración del sistema y que su editor de código este listo para empezar a escribir código. Y no se olvide de su café.

Paso 1: Archivos detallados de los Modelos (Models) y sus funciones

Ahora que tenemos creados nuestros archivos base y vamos a empezar a escribir nuestros modelos, necesitamos hacer las cosas bien. Lo primero que debes hacer es resolver los modelos que vas a escribir y las funciones que deben ser agregadas. He aquí una breve reseña de los modelos y sus funciones:

Una vez que hemos definido una breve visión general de los modelos y las funciones que necesitaremos, podemos empezar a escribir los modelos. 

Paso 2: Escriba los modelos

Hay un puñado de modelos que se integran en este componente Lendr pero no hay el tiempo para escribir todos ellos aquí. Nos centraremos en varios modelos clave que nos ayudarán a demostrar la mayor parte del componente y dejaremos algunos de los modelos secundarios en el repositorio de GitHub asociado, para su revisión. Vamos a empezar por escribir el modelo book. Cuando comencé a pensar dónde empezar a programar decidí comenzar con el modelo más específico y elaborar luego el modelo library , seguido por el modelo profile. La razón de esto es simple. El modelo book es la unidad más pequeña, el modelo library se compone de libros (book) y el modelo profile contiene una biblioteca (library). Confío en que esto le ayude a entender por qué empezamos con el modelo book y trabajar desde ahí. El primer modelo que veremos será el modelo default. Utilizaremos el modelo default para guardar algunas de las funciones básicas que queremos tener disponibles en todos nuestros modelos y ya que estamos escribiendo código orientado a objetos, no es deseo de nadie volver a escribir las mismas funciones en cada modelo.

Archivos de los modelos

default.php (Ver código)

book.php (Ver código)

library.php (Ver código)

profile.php (Ver código)

Paso 3: Incorporar Recursos adicionales

Mientras escribimos este componente hay ciertos aspectos en los que sería bueno incorporar características de terceros en lugar de reinventar la rueda. Hemos sido capaces de simplificar nuestro estilos y diseños mediante la utilización de las clases de Bootstrap disponibles en Joomla! 3. Otros recursos útiles que se pueden usar incluyen, Gravatar y Open Library. Si no está familiarizado con estas herramientas usted puede leer más acerca de ellos en sus respectivos sitios web. A continuación se muestra una breve explicación de la forma en que se utilizan en Lendr.

Gravatar

Gravatar proporciona una forma sencilla de recuperar una imagen o avatar asociado a una dirección de correo electrónico. Lendr hace uso de esta opción para mostrar imágenes del perfil de una manera increíblemente sencilla. Verá el código necesario para que esto ocurra cuando escribamos los diseños de las vista (view) en el paso siguiente.

Open Library

Proporciona una gran manera de recuperar una cubierta de un libro específico para un ISBN. Esto nos permite incluir fácilmente una tapa con cada libro, sin la molestia de mantener el espacio de almacenamiento, archivos de imagen, etc Open Library tiene varios campos que pueden utilizarse para hacer referencia a la cubierta del libro y obtener la imagen, Lendr hace uso del ISBN, que es parte del formulario Add Book que encontrarán a continuación. Encontrará el código en los diseños de abajo.

Paso 4: Comenzar por los diseños de las vistas (view) y sus estilos

Lo primero que hacemos es volver al punto de entrada del componente. Este es el controlador por defecto, ya que hace referencia a él en el archivo lendr.php de la raíz. Después de escribir nuestros modelos está claro que tenemos que actualizar cuando entra el usuario. Hemos cambiado la siguiente línea de código en el controlador default.php:

joomla_root/components/com_lendr/controllers/default.php

$layoutName   = $app->input->getWord('layout', 'list');

Esto hace enviar al usuario a la vista (view) list del perfil. Ese es el primera vista (view) que vamos a ver. En nuestra carpeta views tenemos una carpeta profile con la siguiente estructura:

Estructura de la carpeta

profile
   tmpl
        _entry.php
        index.html
        list.php
        profile.php
   html.php
   index.html
   phtml.php

Escribir los archivos

Vamos a ver primero el archivo html.php. Este es el archivo que por defecto es referenciado por Joomla!, el cual esta bajo las convenciones de nomenclatura actual. Vimos la estructura básica de estos archivos en el artículo anterior.

Archivos Individuales

html.php (Ver código)

Aparte: Debido a que hemos llamado a la vista (view) helper vale la pena revisar este archivo ahora.

view.php (Ver código)

Volviendo ahora a la vista (view) del archivo HTML original, podemos ver los parámetros que pasamos a la función load de la vist (view) helper. En primer lugar, le decimos al helper la carpeta de las vistas (view) que deseamos utilizar, seguido la vista (view) a utilizar, y, por último, en estos casos, devolvemos el tipo de formato de la página. Por una variedad de razones, hemos creado un nuevo archivo y lo llamó phtml.php para representar parcialmente html.php. Hemos utilizado este archivo en lugar de la vista estándar html debido a las diversas funciones adicionales que actualmente se llaman desde dentro del archivo html.php. Debido a que en la mayoría de los casos simplemente queremos una función render básica para las plantillas parciales no queremos la sobrecarga asociada con el archivo html estándar. Mientras que hay otros métodos para el manejo de problemas de este tipo, que tienen un archivo diferente para la vista (view), ayudará a organizar las cosas y también proporcionar una ubicación fácil de ser necesario funciones adicionales correspondientes sólo a las plantillas parciales.

phtml.php (Ver código)

_entry.php (Ver código)

list.php (Ver código)

profile.php (Ver código)

Diseños Restantes

Hemos revisado todos los diseños en la configuración del perfil, pero en el proceso hemos encontrado vistas (view) adicionales llamadas a ser rendereadas en el diseño del profile. En aras de la longitud de este artículo no vamos a enumerar cada vista y el código que se encuentra dentro. En su lugar, se puede ver el código asociado a cada una de estas vistas directamente en el repositorio GitHub.

Paso 5: Javascript y CSS

La última pieza que veremos en este artículo es el comienzo del Javascript y CSS asociado con Lendr. Debido a que Lendr utiliza Bootstrap y jQuery la ventana modal que tocamos en el paso anterior para añadir un nuevo libro, se incluye de forma automática por lo que no tenemos que escribir funciones específicas de Javascript para lograrlo. Sin embargo, hay una buena parte del sistema, donde tenemos que escribir código javascript específico, y también habrá momentos en que serán necesarias estilos CSS específicos. Vamos a añadir el archivo de ayuda siguiente para abordar estilos css y javascript.

joomla_root/components/com_lendr/helpers/style.php

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
class LendrHelpersStyle
{
   function load()
   {
      $document = JFactory::getDocument();
 
      //stylesheets
      $document->addStylesheet(JURI::base().'components/com_lendr/assets/css/style.css');
 
      //javascripts
      $document->addScript(JURI::base().'components/com_lendr/assets/js/lendr.js');
   }
}

Aquí asociamos cualquier css y javascript que tenga relación con nuestro componente. Este archivo de ayuda reside en la carpeta helpers , y de nuevo, sigue la convención de nomenclatura estándar de la clase del componente. Esta clase se incluye automáticamente con la función (loader) como se define en el archivo raíz lendr.php. Llamamos a esta clase desde ese mismo archivo raíz con la siguiente línea de código:

raíz_joomla/components/com_lendr/lendr.php

//Load styles and javascripts
LendrHelpersStyle::load();

Ahora que tenemos los archivos CSS y Javascript incluidos, podemos empezar a añadir las funciones que necesitamos. La primera función que vamos a añadir está en relación con el nuevo modal que acabamos de crear para la adición de un libro.

Después que el formulario para añadir un libro se ha rellenado, el usuario envía el formulario mediante el botón "Add". Al hacer clic en este botón se activa la acción javascript addBook(); .

raíz_joomla/components/com_lendr/assets/js/lendr.js

//add a book
function addBook()
{
   var bookInfo = {};
   jQuery("#bookForm :input").each(function(idx,ele){
      bookInfo[jQuery(ele).attr('name')] = jQuery(ele).val();
   });
 
   jQuery.ajax({
      url:'index.php?option=com_lendr&controller=add&format=raw&tmpl=component',
      type:'POST',
      data:bookInfo,
      dataType:'JSON',
      success:function(data)
      {
         if ( data.success ){
            jQuery("#book-list").append(data.html);
            jQuery("#newBookModal").modal('hide');
         }else{
 
         }
      }
   });
}

En esta función, primero usamos jQuery para crear un objeto bookInfo que contiene todas nuestras variables del formulario. Una vez que tengamos las variables, comenzamos a crear el envío a través de ajax, otra vez usando jQuery. Note que especificamos en nuestra URL los detalles para incluir el controlador, el formato(format) y el tmpl (o tipo de plantilla). Un par de cosas a tener en cuenta aquí. Debido a que Lendr es una extensión para Joomla! 3.x nuestros controladores son los controladores de una sola función, es decir, ellos contienen una sola función a ejecutar. El formato(format) se utiliza para devolver sólo los datos del controlador y el tmpl le dice a la plantilla de Joomla qué archivo (component.php o index.php) va a usar. A continuación, definimos el tipo(type) de envío, en este caso POST. Para los datos(data) se le asigna el objeto bookInfo que hemos creado antes y para el tipo(dataType) especificamos JSON.

Entonces el controlador (en este caso add.php) gestionará el envío del formulario, introducirá en el modelo correcto los datos para que sean almacenados, para devolver luego el resultado. El resultado será una matriz codificada con JSON estableciendo una variable de éxito. Este controlador es el que se muestra a continuación:

raíz_joomla/components/com_lendr/controllers/add.php

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); 
 
class LendrControllersAdd extends JControllerBase
{
   public function execute()
   {
 
      $return = array("success"=>false);
 
      $model = new LendrModelsBook();
      if ( $row = $model->store() )
      {
         $return['success'] = true;
         $return['msg'] = JText::_('COM_LENDR_BOOK_SAVE_SUCCESS');
 
         $bookView = LendrHelpersView::load('Book','_entry','phtml');
         $bookView->book = $row;
 
         ob_start();
         echo $bookView->render();
         $html = ob_get_contents();
         ob_clean();
 
         $return['html'] = $html;
      }else{
          $return['msg'] = JText::_('COM_LENDR_BOOK_SAVE_FAILURE');
      }
      echo json_encode($return);
   }
}

Nota: ob_start(), ob_get_contents(), y ob_clean() se utilizan para poder renderear la plantilla parcial y devolver el HTML resultante al javascript, el cual se añade dinámicamente a la página.

Nota: El resultado de la ejecución de la función es un echo de la matriz codificada JSON. Esto se debe a que procesamos este controlador a través de AJAX.

Volviendo a la función de javascript anterior podemos ahora examinar los resultados de AJAX y analizar la respuesta.

if ( data.success )
 {
   jQuery("#book-list").append(data.html);
   jQuery("#newBookModal").modal('hide');
}else{
 ...
 }

Aquí tomamos el HTML (que es rendereado en el controlador y asignado a la variable html) y lo añadimos a la lista de libros del cuerpo de la tabla. También vamos a ocultar la ventana modal que contiene el mensaje de éxito. Actualmente contamos con una declaración vacía "else", que vamos a llenar después con un mensaje apropiado. Esto será parte del artículo "toques finales" que haremos más adelante en esta serie.

Conclusiones

Este artículo esta mucho más detallado y más profundo que los anteriores. Proporciona un enfoque bastante amplio en el desarrollo de extensiones en Joomla! 3 utilizando los estándares de codificación establecidos y también la aplicación de una nueva funcionalidad MVC, así como otras características únicas en Joomla! 3.x. El siguiente tutorial de esta serie continuará para completar los modelos y controladores, vistas(view) y javascript necesarios para seguir el desarrollo de la extensión.

Espero que lo anterior halla sido de utilidad para crear sus propios componentes para Joomla! y espero que se ponga en contacto con nosotros si tiene preguntas o comentarios acerca de estos tutoriales. Parte del artículo anterior fueron reescritos varias veces mientras se buscaba el mejor método y el formato más claro para el código y diseños. Soy consciente de que hay aspectos de esta etapa que no se ha hecho a través de un paso a paso. Esperemos con interés el próximo artículo de esta serie donde vamos a seguir añadiendo funcionalidad al componente y añadir características más emocionantes.