Magento para Desenvolvedores: Parte 4 - Magento Layouts, Blocos e Modelos

Categoria: Desenvolvimento
Developers novas para Magento so frequentemente confundidos pelo sistema Layout e
View. Este artigo vai dar uma olhada no layout abordagem / Bloco de Magento, e mostrar-lhe
como ele se encaixa em Magento MVC viso de mundo.
Ao contrrio de muitos sistemas MVC populares, Action Controller do Magento
que no passar um objeto de dados para o visualizar ou definir propriedades no objeto view
(com algumas excees). Em vez disso, o componente Vista faz referncia direta modelos de
sistema para obter as informaes de que necessita para exibio.
Uma das conseqncias dessa deciso de projeto que o Vista foi separada em Blocos e
Modelos. Blocos so objetos PHP, Templates so arquivos "brutos" PHP (com extenso .phtml)
que contm uma mistura de HTML e PHP (onde PHP usada como uma linguagem de
templates). Cada bloco vinculado a um nico arquivo de modelo. Dentro de um arquivo
phtml, do PHP $ thispalavra-chave ir conter uma referncia ao modelo de objeto do bloco.
Um exemplo rpido
D uma olhada um o modelo padro do produto no arquivo em
app / design / frontend / base / default / template / catalog / produto / list.phtml
Voc ver o seguinte cdigo do modelo PHP.
<? Php

. h produtos que correspondam seleco " ) ?>

</ div > <? php else: ?>
...
O getLoadedProductCollection mtodo pode ser encontrado na sala de aula do bloco do
modelo,Mage_Catalog_Block_Product_List como mostrado:
Arquivo: app / code / core / Mago / catlogo / Bloco / produto / list.php
...
funo pblica getLoadedProductCollection () {
return este $ -> _getProductCollection ();}
...

O bloco _getProductCollection ento instancia modelos e l os seus dados, retornando um

resultado para o modelo.
Assentamento Blocks
O poder real de Blocos / Modelos vm com o getChildHtml mtodo. Isso permite que voc
incluir o contedo de um bloco / Template secundrio dentro de um bloco / Template
primrio.
Blocos chamando Blocks chamando Blocks como o layout HTML inteira para sua pgina
criada. D uma olhada no layout do modelo uma coluna.
Arquivo: app / design / frontend / base / default / template / page / one-column.phtml
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns = "http : //www.w3.org/1999/xhtml " xml : lang = ? "php echo $ this> getlang ()> "? lang = "<? php echo? $ this -> getlang ()> "? >
< head >
<? php echo $ this -> getChildHtml ( "cabea" ) >?
</ head >
< body class = "page-pop <echo php? $ this -> getBodyClass (): $ this ->getBodyClass (): ''
?>" >
<?php echo $this -> getChildHtml ( 'content' ) ?>
<?php echo $this -> getChildHtml ( 'before_body_end' ) ?>
<?php echo $this -> getAbsoluteFooter () ?>
</ body >
O modelo em si apenas 11 linhas. No entanto, cada chamada para $ this-> getChildHtml
(...) vai incluir e tornar outro bloco. Estes blocos, por sua vez, utilize getChildHtml prestar
outros blocos. Blocks todo o caminho.
O layout
Ento, Blocos e modelos so tudo muito bem, mas voc provavelmente est se perguntando

Como eu digo Magento que Blocks Eu quero usar em uma pgina?

Como eu digo que Magento Bloco I deve comear fazendo com?
Como fao para especificar um determinado bloco em getChildHtml (...) ? Esses argumentos
cordas no se parecem com os nomes bloco para mim.
Este o lugar onde o objeto de layout entra em cena. O objeto de layout um objeto XML que
vai definir quais blocos esto includos em uma pgina, e que Block (s) deve iniciar o processo
de renderizao.
A ltima vez que estvamos fazendo eco contedo diretamente de nossos mtodos de
ao. Desta vez, vamos criar um modelo de HTML simples para nosso mdulo Ol Mundo.
Primeiro, crie um arquivo em
app / design / frontend / base / default / layout / local.xml
com os seguintes contedos
< verso de layout = "0.1.0" >
<default>
< blocktype = "page/html" name = "root" output = "toHtml" template ="magentotutorial/helloworld/simple_page.phtml"
/>
</default>
</ layout >

Em seguida, crie um arquivo em

app / design / frontend / base / default / template / magentotutorial / helloworld /
simple_page.phtml
com os seguintes contedos
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns = "http : //www.w3.org/1999/xhtml " >

< head>
< title > Ol Mundo </ title >
< style type = "text / css" >
body {
fundo - cor : # f00; }

</ style >

</ head >
< body > </body >
</ html >
Por fim, cada Action Controller responsvel por dar incio a processo de layout. Vamos
precisar de acrescentar duas chamadas de mtodo para o mtodo de ao.
funo pblica indexAction () {
// remover o nosso anterior echo
// echo 'Ol Index!';
$ this -> loadLayout ();
$ this -> renderLayout ();
}
Limpe o cache do Magento e recarregar sua pgina controlador Ol Mundo. Agora voc deve
ver um site com um fundo vermelho brilhante e uma fonte de HTML que corresponde ao que
est em simple_page.phtml.
O que est acontecendo
Ento, isso um monte de voodoo e encantamentos enigmticas. Vamos dar uma olhada no
que est acontecendo.
Primeiro, voc vai querer instalar o Layoutviewer mdulo. Este um mdulo similar
ao Configviewer mdulo que voc construiu no artigo Ol mundo que vai deixar-nos espreitar
alguns dos internos do Magento.
Depois de instalar o mdulo (semelhante
o Configviewer mdulo), v para o seguinte URL

forma

como

voc

configurar

http://example.com/helloworld/index/index?showLayout=page
Este o xml layout para a sua pgina / pedido. Ela composta de <bloco />, <referncia /> e
<remover /> tags.Quando voc chama o loadLayout mtodo de sua Action Controller,
Magento ir

Gerar esse layout XML

Instanciar uma classe de bloco para cada <bloco /> tag, olhando para a classe usando o
atributo tipo do tag como um caminho global config e armazen-lo no internas _blocks matriz
do objeto layout, usando o atributo nome do tag como chave matriz.
Se o <bloco /> tag contm um atributo de sada, o seu valor adicionado ao
interno _output matriz do objeto layout.
Ento, quando voc chamar o renderLayout mtodo em sua Action Controller, Magento ir
iterar sobre todos os blocos na _output matriz, com o valor do atributo de sada como um
mtodo de retorno de chamada. Isto sempre ToHTML , e significa que o ponto de partida
para a sada ser que o Modelo de Bloqueio.
As sees a seguir abordar como blocos so instanciado, como esse arquivo de layout
gerado, e termina com iniciando o processo de sada.
Bloco de instanciao
Assim, dentro de um arquivo XML Layout, a <bloco /> tem um "tipo" isso realmente um
nome URI Agrupados Classe
< tipo de bloco = "Pgina / html ...
< tipo de bloco = "page / template_links" ...
A URI faz referncia a uma localizao no (diga comigo) de configurao global. A primeira
poro do URI (no exemplos acima pgina ) vai ser utilizado para consultar a configurao
global para encontrar o nome da classe principal. A segunda parte da URI (nos dois exemplos
acima, html e template_links ) ser anexado ao nome da classe base para criar o nome da
classe Magento deve instanciar.
Ns vamos passar por pgina / html como um exemplo. Em primeiro lugar, Magento olha para
o n de configurao global no
/ blocos / page mundial
e encontra
< page >
<class> Mage_Page_Block </ class>
</ page >
Isso nos d o nosso prefixo classe base Mage_Page_Block . Em seguida, a segunda parte da URI
( html ) anexado ao nome da classe para dar nosso nome final classe
Bloco Mage_Page_Block_Html . Esta a classe que vai ser instanciada.

Se criarmos um bloco com o mesmo nome de um bloco j existente, a nova instncia do bloco
ir substituir a instncia original. Isto o que temos feito em nosso arquivo local.xml de cima.
< verso de layout = "0.1.0" >
<default>
< bloco
type = "page/html" name = "root" output = "toHtml" template ="magentotutorial/hellow
orld/simple_page.phtml" />
</default>
</ layout >
The Block chamado raiz foi substituda com o nosso bloco, o que aponta para um arquivo de
modelo phtml diferente.
Usando referncias
<Nome refernce = "" /> vai ligar todas as declaraes XML contidos em um bloco existente
com o nome especificado. Contido <bloco /> ns ser atribudo como blocos filho para o bloco
pai referenciado.
< verso de layout = "0.1.0" >
<default>
< bloco tipo = "Pgina / html cottage = "root" output = "" ToHTML template = "page /
2columns-left.phtml" >
<! - .. . sub blocos ... ->
</ bloco >
</ default>
</ o layout >
Em um arquivo de layout diferente:
< verso de layout = "0.1.0" >
<default>

< referncia cottage = "root" >

<! - ... outra sub bloco ... ->
< bloco
type = "page/someothertype" name = "some.other.block.name" template = "path/to/som
e/other/template" />
</ reference >
</default>
</ layout >
Mesmo que o bloco de raiz declarado em um arquivo XML de layout separado, o novo bloco
adicionado como um bloco infantil. Magento inicialmente cria uma pgina / html bloco
nomeado raiz . Ento, quando ele mais tarde encontra a referncia com o mesmo nome
( raiz ), que ir atribuir o novo bloco some.other.block.namecomo uma criana do bloco de
raiz.
Como arquivos de layout so gerados
Ento, ns temos um pouco melhor compreenso do que est acontecendo com o XML
Layout, mas onde est esse arquivo XML vindo? Para responder a essa pergunta, precisamos
introduzir dois novos conceitos; Puxadores e a apresentao da embalagem.
Handles
Cada solicitao de pgina em Magento ir gerar vrios identificadores nicos. O mdulo
Layoutview pode mostrar-lhe estas alas usando uma URL algo como
http://example.com/helloworld/index/index?showLayout=handles
Voc dever ver uma lista semelhante seguinte (dependendo da configurao)
omisso
STORE_bare_us
THEME_frontend_default_default
helloworld_index_index
customer_logged_out
Cada um deles um Handle. Alas so definidos em uma variedade de lugares dentro do
sistema
Magento. Os
dois
queremos
prestar
ateno
so padro e helloworld_index_index . O padro Handle est presente emcada pedido no
sistema Magento. O helloworld_index_index Handle criado combinando o nome da rota
(helloworld), Action Controller nome (index) e Action Controller Mtodo de ao (index) em

uma nica cadeia. Isso significa que cada mtodo possvel em um Controlador de aco tem
um identificador associado a ele.
Lembre-se que "index" o padro Magento para ambos os controladores de ao e mtodos
de ao, ento o seguinte pedido
http://example.com/helloworld/?showLayout=handles
Tambm ir produzir um identificador chamado helloworld_index_index
Pacote de layout
Voc pode pensar a apresentao da embalagem semelhante configurao global. um
arquivo XML grande que contm todas as configuraes de layout possvel para um Magento
especial instalar. Vamos dar uma olhada nele usando o mdulo Layoutview
http://example.com/helloworld/index/index?showLayout=package
Isso pode demorar um pouco para carregar. Se o seu navegador est engasgada com a
prestao XML, experimente o formato de texto
http://example.com/helloworld/index/index?showLayout=package&showLayoutFormat=text
Voc dever ver um arquivo XML muito grande. Esta a apresentao da embalagem. Esse
arquivo XML criado combinando o contedo de todos os arquivos de layout XML para o tema
atual (ou pacote). Para a instalao padro, esta a
app / design / frontend / base / default / layout /
Nos bastidores h <frontend> <layout> <atualizaes /> e <adminhtml> <layout>
<atualizaes /> sees da configurao global que contm os ns com todos os nomes de
arquivos para carregar para a respectiva rea.Uma vez que os arquivos listados no config ter
sido combinado, Magento iro se fundir em um ltimo arquivo xml, local.xml. Este o arquivo
onde voc capaz de adicionar suas personalizaes para o seu Magento instalar.
Combinando Puxadores e a apresentao da embalagem
Ento, se voc olhar para a apresentao da embalagem, voc ver algumas marcas
conhecidas, como o <bloco /> e <referncia />, mas todos eles esto cercados por tags que se
parecem
<Padro />
< catalogsearch_advanced_index />
etc ...
Estas so todas as tags ala. O layout para um pedido individual gerado por agarrando todas
as sees da apresentao da embalagem que correspondem os identificadores para o
pedido. Assim, em nosso exemplo acima, o nosso layout est sendo gerado, agarrando as tags
a partir das seguintes sees

<Padro

/>

< STORE_bare_us />

< THEME_frontend_default_default />
< helloworld_index_index />
< customer_logged_out />
H uma tag adicional voc precisa estar ciente de, a apresentao da embalagem. O <update
/> tag permite incluir tags de outra ala. Por exemplo
< customer_account_index >
<! - ... ->
< handle update = "customer_account" />
<! - ... ->
</ customer_account_index >
Est dizendo que os pedidos com uma ala customer_account_index deve incluir <blocos /> s
do <customer_account /> ala.
Aplicando o que foi aprendido
OK, isso um monte de teoria. Vamos voltar ao que fizemos anteriormente. Sabendo o que
sabemos agora, acrescentando
< verso de layout = "0.1.0" >
<default>
< bloco
type = "page/html" name = "root" output = "toHtml" template ="magentotutorial/hellow
orld/simple_page.phtml" />
</default>
</ layout >

para local.xml significa que tenho substitudo a tag "root". com um bloco diferente. Ao colocar
isso no <default /> Handle temos assegurado que essa substituio vai acontecer para cada
solicitao de pgina no sistema.Isso provavelmente no o que queremos.
Se voc vai para qualquer outra pgina em seu site Magento, voc vai notar que eles esto em
branco ou branco, ou ter o mesmo fundo vermelho que sua pgina Ol mundo faz. Vamos
mudar o seu local.xml arquivo para que ele s se aplica pgina Ol mundo. Ns vamos fazer
isso alterando padro para usar a ala nome da ao integral ( helloworld_index_index ).
< verso de layout = "0.1.0" >
< helloworld_index_index >
< bloco
type = "page/html" name = "root" output = "toHtml" template ="magentotutorial/hellow
orld/simple_page.phtml" />
</ helloworld_index_index >
</ layout >
Limpe o cache do Magento, eo resto de suas pginas devem ser restauradas.
Agora isso s se aplica ao nosso ndice mtodo de ao. Vamos adicion-lo ao adeus Mtodo
de ao tambm.Em sua Action Controller, modificar a ao adeus de modo que parece
funo pblica goodbyeAction () {
$ this -> loadLayout ();
$ this -> renderLayout ();
}
Se voc carregar o seguinte URL, voc vai perceber que voc ainda est recebendo o layout
padro Magento.
http://example.com/helloworld/index/goodbye
Precisamos adicionar uma ala para o nome da ao integral ( helloworld_index_goodbye ) ao
nosso arquivo local.xml. Em vez de especificar um novo <bloxk />, vamos usar a tag atualizao
para incluir ohelloworld_index_index Handle.
< verso de layout = "0.1.0" >
<! - ... ->
< helloworld_index_goodbye >

< handle update = "helloworld_index_index" />

</ helloworld_index_goodbye >
</ o layout >
Carregando as pginas seguintes (depois de limpar o cache do Magento) agora deve produzir
resultados idnticos.
http://example.com/helloworld/index/index
http://example.com/helloworld/index/goodbye
Sada Iniciando e getChildHtml
Em uma configurao padro, sada comea na raiz chamado Block (porque tem um atributo
de sada). Temos substitudo Template de raiz com a nossa prpria
template = "magentotutorial / helloworld / simple_page.phtml"
Templates so referenciadas a partir da pasta raiz do tema atual. Neste caso, isso
app / design / frontend / base / default
por isso precisamos de aprofundar a nossa pgina personalizada. A maioria dos modelos so
armazenados em Magento
app / design / frontend / base / default / templates
Combinando isso nos d o caminho completo
app / design / frontend / base / default / templates / magentotutorial / helloworld /
simple_page.phtml
Adicionando blocos de contedo
Uma pgina simples vermelho muito chato. Vamos adicionar algum contedo desta
pgina. Mude sua<helloworld_index_index /> Manusear de local.xml por isso parece com o
seguinte
< helloworld_index_index >
< bloco
type = "page/html" name = "root" output = "toHtml" template ="magentotutorial/hellow
orld/simple_page.phtml" >
< block
type = "customer/form_register" name = "customer_form_register" template = "customer
/form/register.phtml" />
</ block >
</ helloworld_index_index >

Estamos adicionando um novo bloco aninhado dentro de nossa raiz. Este um bloco que
distribudo com o Magento, e ir mostrar um formulrio de registro do cliente. Ao incorporar
este bloco dentro do nosso bloco de raiz, ns fizemos disponvel para ser puxado para o
nosso simple_page.html Template. A seguir, vamos usar o mtodo getChildHtml do Bloco em
nossa simple_page.phtml arquivo. Editar simple_page.html para que ele se parece com isso
< corpo >
<? php echo $ this -> getChildHtml ( 'customer_form_register' ); ?>
</ corpo >
Limpe o cache do Magento e recarregue a pgina e voc deve ver o formulrio de registro do
cliente em seu fundo vermelho. Magento tambm tem um bloco chamado top.links. Vamos
tentar incluir isso. Mude o seu arquivo simple_page.html assim que l
< corpo >
< h1 > links </ h1 >
<? php echo $ this -> getChildHtml ( 'top.links' ); ?>
</ corpo >
Quando voc recarregar a pgina, voc ver que suas ligaes <h1> </ h1> ttulo est
rendendo, mas nada est rendendo para top.links. Isso porque ns no adicion-lo
local.xml. O getChildHtml mtodo s pode incluir blocos que so especificados como subblocos no layout. Isso permite que Magento para apenas instanciar os Blocos de que necessita,
e tambm permite que voc defina diferena Templates para os Blocos com base no contexto.
Vamos adicionar as top.links Bloco para a nossa local.xml
< helloworld_index_index >
< bloco
Tipo = "pgina / 'template_links cottage = "top.links" />
< bloco
Limpe seu cache e recarregue a pgina. Agora voc deve ver o mdulo top.links.
Tempo de ao
H mais um conceito importante para cobrir antes de encerrar esta lio, e que o <action />
tag. Usando o <action /> tag nos permite chamar mtodos PHP pblicos das classes de
bloco. Ento, ao invs de mudar o modelo do bloco de raiz, substituindo a instncia do bloco
com a nossa prpria, podemos usar uma chamada parasetTemplate vez.
< verso de layout = "0.1.0" >
< helloworld_index_index >

< referncia cottage = "root" >

< ao

Tipo = "pgina / 'template_links cottage = "top.links" />

< bloco
Este layout XML ir primeiro definir a propriedade modelo do bloco de raiz e, em seguida, ir
adicionar os dois blocos que usamos como blocos da criana. Uma vez que limpar o cache, o
resultado deve ficar como antes. A vantagem de usar o <action /> a mesma instncia do
bloco usado que foi criado anteriormente, e todas as outras associaes de pais / criana
ainda existem. Por essa razo, esta uma forma de prova mais atualizao de implementar as
nossas mudanas.
Todos os argumentos para o mtodo da ao precisa ser envolto em um n filho individual do
<action /> tag. O nome de n que no importa, apenas da ordem dos ns. Poderamos ter
escrito o n de ao a partir do exemplo anterior da seguinte maneira com o mesmo efeito.
< ao method = "setTemplate" >
< some_new_template > magentotutorial / helloworld / simple_page . phtml </some_new_template >

</ action >

Este apenas para ilustrar que os nomes dos ns argumento da ao so arbitrrias.