QUIN SOY

Currculum
Next-Ecommerce
Mesala
PROGRAMACIN
Magento
PHP
Javascript
Otros
TRABAJOS
Ecommerces
Otros
COLABORACIONES
Onlinecomics
Lara de Miguel
Gente Ecommerce
TWITTER
FACEBOOK
CONTACT
Diego Mestre
diego@diegomestre.com
Seguir a @diego_mestre 548 seguidores
Diego Mestre programacin de pginas web
Comprendiendo el layout y el renderizado de los XML en Magento http://www.diegomestre.com/comprendiendo-el-layout-y-el-renderizad...
1 de 5 16/07/2014 12:53
Comprendiendo el layout y el renderizado de los XML en
Magento (parte 1)
Home Magento Comprendiendo el layout y el renderizado de los XML en Magento (parte 1)
Comentarios recientes
website design software
microsoft en Cmo aadir
columnas en diferentes zonas
del administrador de Magento
nudity en Como validar mis
formularios en Magento
Severbus.eu en Preparar
magento para desarrollo
Diego Mestre en Cmo aadir
columnas en diferentes zonas
del administrador de Magento
Rafael en Cmo aadir
columnas en diferentes zonas
del administrador de Magento
Archivos
febrero 2014
mayo 2013
abril 2013
febrero 2013
diciembre 2012
marzo 2012
Categoras
Javascript
Magento
Todas las categoras
Fecha: 28 abril, 2013
Autor: Diego Mestre
Comentarios: Sin
comentarios
Categora: Magento, Todas
las categoras
Antes de empezar, debo decir que este artculo es una traduccin libre hecha de este otro
magnfico artculo en ingls. Si queris consultar la versin original aqu:
Artculo original en ingls
La visualizacin de la implementacin del modelo MVC de Magento, es algo particular, se divide
en dos partes, el template y el layout. El template contiene los bloques phtml mientras que
define la localizacin del bloque en la pgina. Magento dispone de un flexible y reusable
sistema de diseo por layouts definido en los XML
Layout XML
Los archivos XML del Layout se pueden encontrar en app/design/frontend/[package]/[theme]/layout, cada mdulo de
Magento puede, adems, definir su propio archivo XML de Layout en su archivo config.xml
Cada archivo XML del layout representa su propia actualizacin de diseo. Por ejemplo, la navegacin del catlogo es parte del
mdulo Mage_Catalog y el mdulo Mage_Catalog define su propia actualizacin del layout general en el archivo catalog.xml.
De este modo, el bloque para la navegacin del catlogo y su localizacin en la pgina web se definirn en este catalog.xml
Previamente al renderizado de la pgina, magento carga todos los archivos de actualizacin de layout configurados con sus
actualizaciones de diseo para determinar qu bloque va a ser renderizado en cada localizacin
Aqu tenemos un ejemplo del archivo XML del layout contacts.xml del mdulo Mage_Contacts, el elemento raz de cada
archivo XML de layout es <layout>
Handles del Layout
Los elementos del primer nivel (child) del nodo <layout>, se llaman handles (manejadores, aunque mantendr su nomenclatura
en ingls), en el ejemplo supperior seran <default> y <contacts_index_indes>, cada handle representa una actualizacin del
layout de la pgina. Puede definir nuevos bloques para ser incluidos en la pgina en una posicin determinada o retirar un
bloque de la pgina. Puede tambin definir modificaciones en bloques ya incluidos en la pgina por otros archivos XML de
layout.
Despus de que Magento haya cargado todos los XML del layout, determinar qu handles han de ser procesados.
Normalmente el handle es seleccionado basndose en la accin del controller que est siendo ejecutada. En la mayora de
casos Magento cargar el handle con el nombre: [nombre_modulo]_[nombre_controller]_[nombre_action]
Por ejemplo, cuando la pgina contctanos es solicitada, entonces el action index del controller index del mdulo
Mage_Contacts es ejecutado. El nombre del mdulo Mage_Contacts en el front es contacts. As pues el handle que se
procesar en la pgina contctanos ser <contacts_index_index>
Para cualquier pgina Magento siempre procesar el handle default, as que las actualizaciones definidas en el handle default
del layout sern procesadas en cada pgina independientemente de en qu parte del site estemos navegando. Como ilustra el
ejemplo de arriba, el mdulo Mage_Contacts necesita un enlace a la pgina de contctanos en el footer de cada pgina para
los elementos especficos para l definidos en el handle default. Estos elementos van a ser definidos en la siguiente seccin
Elementos del Layout
Un handle puede contener los siguientes elementos
label: Este elemento fue introducido en la versin 1.4 de Magento, define la etiqueta que se mostrar como referencia descriptiva en
1
2
3
4
5
6
7
8
9
<frontend>
<layout>
<updates>
<mymodule>
<file>mymodule.xml</file>
</mymodule>
</updates>
</layout>
</frontend>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<layout version="0.1.0">
<default>
<reference name="oo!er"lin#s">
<action me!$od="add%in#" !ransla!e="la&el !i!le" module="'on!a'!s" i'oni(="'on!a'!s/'on!a'!s/ena&led"
</reference>
</default>

<contacts_index_index !ransla!e="la&el">
<label>)on!a'! *s +orm</label>
<reference name="roo!">
<action me!$od="se!,em-la!e"><template>-a(e/2'olumns.ri($!.-$!ml</template></action>
<action me!$od="se!/eader,i!le" !ransla!e="!i!le" module="'on!a'!s"><title>)on!a'! *s</title></action
</reference>
<reference name="'on!en!">
<block !y-e="'ore/!em-la!e" name="'on!a'!+orm" !em-la!e="'on!a'!s/orm.-$!ml"/>
</reference>
</contacts_index_index>
</layout>
Comprendiendo el layout y el renderizado de los XML en Magento http://www.diegomestre.com/comprendiendo-el-layout-y-el-renderizad...
2 de 5 16/07/2014 12:53
Home 2014 Diego Mestre :: Diego Mestre Programacin Magento, PHP, programacin web
algunas reas del panel de administracin
reference: Este elemento se usa para referenciar un bloque que ya est definido en otro XML de layout. Para aadir otro bloque hijo a
otro que ya existe, para modificar atributos de un bloque existente o para realizar cualquier accin en bloques existentes. el valor del
elemento reference debe coincidir con el atributo name del bloque que ya existe
block: Se utiliza para definir un nuevo bloque, este elemento normalmente se define dentro de reference cuando queremos crear un
bloque nuevo, debe tener obligatoriamente los atributos name, que define un identificador nico del bloque en el layout y un atributo
type, que define el nombre de del tipo de bloque. Si el bloque es del type o subtype de core/template, puede tambin tener el atributo
template que define el archivo phtml para esr usado para renderizar el bloque
remove: Este elemento se usa para eliminar un bloque existente en el layout. El bloque a ser eliminado se especifica con su atributo
name
action: Este elemento define una accin para ser realizada en el bloque definido como referencia o en el bloque nuevo. Un action es
simplemente un mtodo de una instancia de bloque en el cual ser ejecutado. Este atributo define el nombre del mtodo en la instancia
del bloque y en todos sus elementos hijos son tratados como parmetros del mtodo. Este elemento puede ser colocado dentro de
elementos reference o block
update: Este elemento carga un handle dentro del handle actual, esto nos ofrece una especie de herencia en los handles del layout.
Debe contener un attribute handle que define el handle del bloque que va a ser incluido
Por ejemplo, todas las pginas de cuentas de cliente tienen un layout similar y aplican a menudo los mismos updates de layout,
as, en vez de definir todos los updates para pginas individuales un handle frecuente:customer_account se define as
customer.xml como:
Este es el handle que se carga en todas las pginas de cuenta de cliente. Aqu hay un ejemplo del handle de la pgina de
direccin del cliente en el mismo archivo customer.xml
De este modo, cuando la pgina de direccin del cliente se renderiza los bloques del layout definidos en customer_account son
tambin aplicados a la pgina
Proceso de renderizado
Antes de renderizar la pgina todos los elementos bloque definidos en el layout son instanciados. Los elementos bloque
anidados definen bloques hijos. Si algn elemento bloque tiene un atributo output, entonces es considerado como un bloque de
tipo output. Slamente los bloques output son renderizados y aadidos al response. El resto de bloques hijos son renderizados
slo cuando son llamados por el bloque padre. Veamos como trabaja
El tema por defecto de Magento, el bloque raz se define como un bloque output. Este bloque se define en el archivo page.xml.
Con un valor concreto del atributo template, este bloque define el template a ser usado en el proceso de renderizado (por ej. 1
column, 2 columns with left sidebar, etc). Por defecto el template de 3 columns es el asignado a la pgina. Hay otros bloques
hijos definidos bajo el raz como head, header, breadcrumbs, left, right, content, footer, etc Estos bloques hijos sern
renderizados en el archivo raz del template (3columns.phtml) haciendo una llamada a algo como esto:
En cualquier template, los bloques hijos pueden ser renderizados llamando al mtodo getChildHtml(), como arriba, pasando el
nombre del bloque como primer argumento. Si el mtodo se llama sin argumentos, renderizar todos los bloques hijos del
bloque actual que estn definidos en el archivo XML del layout para ese bloque.
Por tanto, Magento procesa el layout siguiendo un proceso de renderizado recursivo. Primero el bloque raz , despus sus
bloques hijos, despus los hijos de sus hijos y as sucesivamente
Ponindolo todo junto
Echemos un vistazo al ejemplo del archivo contacs.xml. El objetivo de este archivo de actualizacin de layout es aadir un
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<customer_account !ransla!e="la&el">
<label>)us!omer 0y 1''oun! 21ll 3a(es4</label>
<5.. 0a(e")us!omer ..>
<reference name="roo!">
<action me!$od="se!,em-la!e"><template>-a(e/2'olumns.le!.-$!ml</template></action>
</reference>

<reference name="'on!en!">
<block !y-e="-a(e/$!ml"6ra--er" name="my.a''oun!.6ra--er">
<action me!$od="se!7lemen!)lass"><value>my.a''oun!</value></action>
</block>
</reference>

<reference name="le!">
<block !y-e="'us!omer/a''oun!"navi(a!ion" name="'us!omer"a''oun!"navi(a!ion" &eore="." !em-la!e="'us!omer/a''oun!/navi(a
<action me!$od="add%in#" !ransla!e="la&el" module="'us!omer"><name>a''oun!</name><path>'us!omer/a''oun!/</
<action me!$od="add%in#" !ransla!e="la&el" module="'us!omer"><name>a''oun!"edi!</name><path>'us!omer/a''oun!/edi!/</
<action me!$od="add%in#" !ransla!e="la&el" module="'us!omer"><name>address"&oo#</name><path>'us!omer/address/</
</block>
<block !y-e="'a!alo(/-rodu'!"'om-are"side&ar" name="'a!alo(.'om-are.side&ar" !em-la!e="'a!alo(/-rodu'!/'om-are/side&ar.-$
<block !y-e="sales/reorder"side&ar" name="sale.reorder.side&ar" as="reorder" !em-la!e="sales/reorder/side&ar.-$!ml"
<remove name="!a(s"-o-ular"/>
</reference>
</customer_account>
1
2
3
4
5
6
7
8
<customer_address_index !ransla!e="la&el">
<label>)us!omer 0y 1''oun! 1ddress 8oo#</label>
<5.. 0a(e")us!omer ..>
<update $andle="'us!omer"a''oun!"/>
<reference name="my.a''oun!.6ra--er">
<block !y-e="'us!omer/address"&oo#" name="address"&oo#" &eore="." !em-la!e="'us!omer/address/&oo#.-$!ml"
</reference>
</customer_address_index>
e'$o 9!$is.>(e!)$ild/!ml2:$eader:4;
Comprendiendo el layout y el renderizado de los XML en Magento http://www.diegomestre.com/comprendiendo-el-layout-y-el-renderizad...
3 de 5 16/07/2014 12:53
enlace al footer en la pgina de contacto si el contacto est habilitado en Sistema-Configuracin y definir la estructura de la
pgina Contactanos.
Ya hay un bloque footer_links definido el archivo page.xml para mostrar enlaces en la pgina footer. El bloque footer_links
tiene un mtodo addLink para aadir nuevos enlaces dentro del bloque. As que aqu, el bloque existente footer_links puede
ser referenciado y la accin addLink puede ser llamada en l con ciertos parmetros para aadir un enlace a la pgina
Contctanos en l. Como el enlace necesita ser aadido en el footer en cada pgina, este deberia ser definido en el handle
default.
Aqu, el handle default contiene una referencia al bloque footer_links y realiza una accin addLink en l pasndole los
parmetros label, url, title, etc Tambin en este caso, el atributo translate se utiliza para definir qu parmetros necesitan ser
traducidos antes de ser pasados al mtodo. En el ejemplo superior, label y title son traducidos utilizando el actual locale. La
traduccin ser buscada en el scope definido en el mdulo del atributo. El atributo ifconfig define la clave del sistema-
configuracin para ser chequeada antes de realizar la accin del mtodo. Esta clave utilizada como valor de ifconfig, es
normalmente definida como tipo S/No y devuelve un valor booleano. Si la configuracin devuelve false, la accin no se
realizar. En nuestro caso si valor de contacts/contacts/enabled es false (p.ej. contact us es deshabilitado en sistema-
configuracin) la accin de aadir el enlace no se realizar y el enlace al contactanos no aparecer en el footer. ifconfig puede
ser slo utilizado en el elemento action y slo cuando el action necesita para realizarse si una hay un valor concreto en la
configuracin puesto a S
Como mencion antes, Magento automticamente determina el handle para ser cargado en la base de una accin que en estos
momentos est siendo ejecutada. En el caso de la pgina de contctanos, llamara al mdulo Mage_Contacts, su
IndexController y su indexAction. El front name de Mage_Contacts es contacts. As que el handle del layout debera ser
contacts_index_index. La etiqueta dada es Contact Us Form para identificar la pgina en algunas reas del panel de
adminitracin, por ejemplo el formulario para la creacin de una instancia del widget.
Despus, la pgina de Contact Us debera tener dos columnas con columna derecha. Como expliqu en la seccin anterior, el
template es definido por el nodo root y por defecto utiliza el template 3 columnas. As pues, para modificar ste para la pgina
Contctanos, el nodo root es refernciado aqu utilizando el elemento reference. Para asignar un template diferente a la pgina
el mtodo setTemplate debera ser llamado. De este modo un elemento action es definido para llamar al mtodo setTemplate
con la ruta del template deseado como parmetro.
Por ltimo, en el rea de contenido principal, un formulario de contacto debera mostrarse. Para aadir el bloque de formulario
de contacto, el bloque de content es referenciado y un elemento nuevo bloque es definido para ser includo en el formulario.
1
2
3
4
5
<default>
<reference name="oo!er"lin#s">
<action me!$od="add%in#" !ransla!e="la&el !i!le" module="'on!a'!s" i'oni(="'on!a'!s/'on!a'!s/ena&led"
</reference>
</default>
1
2
3
4
5
6
7
8
9
10
<contacts_index_index !ransla!e="la&el">
<label>)on!a'! *s +orm</label>
<reference name="roo!">
<action me!$od="se!,em-la!e"><template>-a(e/2'olumns.ri($!.-$!ml</template></action>
<action me!$od="se!/eader,i!le" !ransla!e="!i!le" module="'on!a'!s"><title>)on!a'! *s</title></action>
</reference>
<reference name="'on!en!">
<block !y-e="'ore/!em-la!e" name="'on!a'!+orm" !em-la!e="'on!a'!s/orm.-$!ml"/>
</reference>
</contacts_index_index>
1
2
3
<reference name="roo!">
<action me!$od="se!,em-la!e"><template>-a(e/2'olumns.ri($!.-$!ml</template></action>
</reference>
Comprendiendo el layout y el renderizado de los XML en Magento http://www.diegomestre.com/comprendiendo-el-layout-y-el-renderizad...
4 de 5 16/07/2014 12:53
Tipos de bloques
Magento define algunos tipos de bloques ya construidos que son generalmente los utilizados en el layout
core/template: Este bloque renderiza un template definido en el atributo template, la mayora de bloques definidos en el layout son de
este tipo
page/html: Este es un subtipo del anterior y define el archivo raz
page/html_head: Define el HTML de la seccin head de la pgina que lo contiene, donde llama a los archivos CSS, JS, etc
page/html_header: Define la parte del header en la que van el logo, los toplinks, etc
page/template_links: Este bloque se utiliza para definir listas de enlaces. Los enlaces visibles en el footer o en el header son de este
tipo.
core/text_list: Algunos bloques como content, left, right, etc son de este tipo. Cuando estos bloques son renderizados, todos sus
bloques child son renderizados sin la necesidad de llamar al mtodo getChildHtml()
page/html_wrapper: Este bloque se utiliza para crear un bloque envoltorio que renderiza todos sus childs dentro de la etiqueta HTML
que hayamos definido en el action setHtmlTagName, del bloque. Si no se define ningn tag, utilizar por defecto <div>
page/html_breadcrumbs: Define el rastro de migas de la pgina
page/html_footerDefine el rea del footer de la pgina que contiene normalmente los enlaces del footer, el mensaje del copyright, etc
core/messages: Este bloque renderiza los mensajes de error, notas o success
page/switch: Este bloque puede ser usado para el selector de tienda, lenguaje o moneda
Esto es una lista solamente de los tipos de bloques usados ms frecuentemente. Hay muchos otros tipos de bloques que son
tuilizados en las implementaciones de themes ms avanzados.
Anotaciones
Los archivos XML hacen el diseo de temas modular utilizando handles. Esto son slo las bases de XML layouts en Magento.
Utilizaciones ms avanzadas pueden ser hechas utilizando handles y actions. Cubriremos el uso ms avanzado de XML layouts
en el prximo artculo de esta serie
Escribe tu comentario
0 comentarios
1
2
3
<reference name="'on!en!">
<block !y-e="'ore/!em-la!e" name="'on!a'!+orm" !em-la!e="'on!a'!s/orm.-$!ml"/>
</reference>
Plug-in social de Facebook
Comentar
Aade un comentario...
Comprendiendo el layout y el renderizado de los XML en Magento http://www.diegomestre.com/comprendiendo-el-layout-y-el-renderizad...
5 de 5 16/07/2014 12:53