Tutorial para la creación de una Extensión de Magento (parte 3)

4 Comments

En la primera parte del tutorial vimos cómo crear un controlador o punto de entrada para nuestra extensión, y en la segunda parte vimos cómo crear un modelo básico sin estado. En esta tercera parte veremos el componente restante del MVC: cómo crear una vista. En las partes anteriores obteníamos como resultado de nuestra extensión mensajes de texto que aparecían en una página en blanco, ahora incorporaremos esos mensajes en la estructura de la página de magento.

Continuamos con el ejemplo de la extensión «holamundo» que saluda al visitante. En un principio, el controlador debería ser el encargado de indicar al modelo construir un saludo para que luego la vista pidiese ese saludo al modelo y lo mostrara. Sin embargo, recordemos que, por razones de simplicidad, nuestro modelo no tiene estado, por lo tanto la vista no se comunicará con la misma instancia del modelo que el controlador. Por lo tanto, en este tutorial, las llamadas que realizábamos antes desde el controlador, las realizará ahora la vista. Más adelante publicaré otro tutorial avanzado sobre cómo crear modelos.

Lo primero que realizaremos es crear un «block» (bloque). Para ello, crearemos el siguiente fichero:

[sourcecode light=»true»]
/app/code/local/Brainsins/Holamundo/Block/Holamundo.php
[/sourcecode]

Con el siguiente código

[sourcecode language=»php»]
<?php
class Brainsins_Holamundo_Block_Holamundo extends Mage_Core_Block_Abstract {
public function _prepareLayout()
{
return parent::_prepareLayout();
}<span class="Apple-style-span" style="font-family: Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; font-size: 13px; line-height: 19px; white-space: normal;"> </span>
protected function _toHtml() {
$input = $this->getRequest()->getParam("nombre");
$name = $input ? $input : "Desconocido";
$saludador = Mage::getSingleton("holamundo/holamundo");
return "<h1>" . $saludador->construirSaludo($name) . "</h1>";
}
}
[/sourcecode]

Como podéis ver, se trata prácticamente del mísmo código que había en el controlador del tutorial anterior, salvo que ya no imprimimos nada en la página usando la función «echo» de PHP. Cuando indiquemos a Magento que tiene que incorporar nuestro bloque en la página, obtendrá el texto que hay que mostrar utilizando la función _toHtml() que hemos implementado.

Para indicar a Magento que existe este nuevo bloque necesitamos, en primer lugar, crear un fichero de layout para nuestra extensión. El fichero de layout da información a Magento sobre qué bloques mostrar en nuestra extensión, dónde van colocados y cómo tienen que mostrarse. En nuestro caso sólo necesitamos incorporar el bloque que hemos creado al contenido de la página.

[sourcecode light=»true»]
/app/design/frontend/base/default/layout/holamundo.xml
[/sourcecode]

 

[sourcecode language=»xml»]
<?xml version="1.0"?>
<layout version="0.1.0">
<default>
</default>
<holamundo_index_index>
<reference name="content">
<block type="holamundo/holamundo" name="holamundo" />
</reference>
</holamundo_index_index>

<holamundo_index_saludar>
<reference name="content">
<block type="holamundo/holamundo" name="holamundo" />
</reference>
</holamundo_index_saludar>
</layout>
[/sourcecode]

Como puede verse, hemos creado dos entradas iguales, una para la acción index y otra para la acción saludar. Más adelante cambiaremos una de las dos para mostrar otra forma de crear vistas. A continuación vamos a indicar a Magento tanto la existencia de bloques en nuestra extensión(la ruta donde podrá encontrarlos) como la existencia de este fichero de layout. Esto se hace en el fichero config.xml

[sourcecode light=»true»]
/app/code/local/Brainsins/Holamundo/etc/config.xml
[/sourcecode]
[sourcecode language=»xml» highlight=»18,19,20,21,22,23,24,32,33,34,35,36″]
<?xml version="1.0"?>
<config>
<modules>
<Brainsins_Holamundo>
<version>0.1.0</version>
</Brainsins_Holamundo>
</modules>
<frontend>
<routers>
<holamundo>
<use>standard</use>
<args>
<module>Brainsins_Holamundo</module>
<frontName>holamundo</frontName>
</args>
</holamundo>
</routers>
<layout>
<updates>
<holamundo>
<file>holamundo.xml</file>
</holamundo>
</updates>
</layout>
</frontend>
<global>
<models>
<holamundo>
<class&gt;Brainsins_Holamundo_Model&lt;/class>
</holamundo>
</models>
<blocks>
<holamundo>
<class>Brainsins_Holamundo_Block</class>
</holamundo>
</blocks>
</global>
</config>
[/sourcecode]

Por último, como hemos incorporado en la vista el código que teníamos en el controlador, tenemos que cambiar este último. Además, será el controlador quien indique a la vista que debe mostrarse. Con estas incorporaciones el código del controlador queda así:

[sourcecode light=»true»]
/app/code/local/Brainsins/Holamundo/controllers/IndexController.php
[/sourcecode]

 

[sourcecode language=»php» wraplines=»false» highlight=»4, 5, 8,9″]
<?php
class Brainsins_Holamundo_IndexController extends Mage_Core_Controller_Front_Action {
public function indexAction() {
$this->loadLayout();
  $this->renderLayout();
}
public function saludarAction() {
$this->loadLayout();
  $this->renderLayout();
}
}
[/sourcecode]

Como puede verse, simplemente carga el layout y le indica que se muestre. Con esto, al cargar la página www.mitiendamagento.com/holamundo/index/saludar?nombre=Alex veremos algo como esto:

Resultado de incorporar la vista

El inconveniente de esta forma de crear las vistas es que cuando queramos cambiar algo del contenido de nuestra extensión (y esta parte es la que con más probabilidad y frecuencia será cambiada), tendremos que cambiar el código del bloque. Este problema se resuelve creando otro tipo de bloque que no es el encargado de mostrar el contenido de la vista, sino que está asociado a un template – un fichero que contendrá directamente el código php y html que compondrá el contenido que queramos que aparezca en el bloque. Veremos cómo crear un template para la extensión en la próxima parte del tutorial!

Otras partes del tutorial:

Parte 1: Creación de un nuevo módulo con un controlador
Parte 2: Creación de un modelo para la extensión

Referencias

Magento for Developers: Part 1 – Introduction to Magento 
Magento for Developers: Part 4 – Magento Layouts, Blocks and Templates

Suscríbete a nuestra newsletter

4 Comments
    • javier
    • 20/10/2011
    Responder

    una correcion en la parte del codigo del block en la linea
    $saludador = Mage::getSingleton(«holamundo/holamundo»);
    deberia ser
    $saludador = Mage::getSingleton(«holamundo/saludador»);

      • Dani
      • 25/10/2012
      Responder

      Hola, he seguido los pasos tal cual pero no me aparece el texto. Se me carga la página de Magento con la parte central vacía, que es donde debería mostrarse el mensaje. ¿Por qué puede ser?

  1. Pingback: Tutorial para la creación de una Extensión de Magento (parte 3) | BrainSINS | Magento Training Course

  2. Pingback: Bitacoras.com

 

Deja tu comentario