Magento前端页面数据显示－layout，template及block的使用

Magento的前端设计和平时多见的WEB MVC前端设计有很大不同，配置项较多，对于新手来说，不太容易理解，此文以一个简单的blog作为实例简单说明一下如何在Magento中开发自已想要的前端面页面

有三种方式可以实现按需显示页面数据：

新增/修改layout文件local.xml，之后在其中加入所需的配置替换content block，此方法简单方便，但local.xml可能还有别的模板在使用，迁移某个模块时，要按需从local.xml中提取所需内容更新至目标系统，对于不熟悉模块配置的人员来说很不方便

不修改layout配置，直接在controller中使用createBlock再append至content block(content block因为类型为text，因此不能直接setTemplate)，此方法不需要更新layout，但增加了代码量，并且与Magento的MVC架构“controller不直接与view交互数据”不符，可能会造成维护上的麻烦

在模块中加入layout的updates配置，并新建模块所需layout文件，按照layout文件内容替换content，此方法是Magento官方模块所使用的方法，结构清析，模块独立性强，推荐使用

以下例子以第三种方式开发了一个简单的blog页面，实现了列表，新增，详情页

首先，在模块的config.xml中，在fronend中加入layout配置

[code lang="xml"]	<routers> <blog>
 <use>standard</use>
 <args>
 <module>Etam_Blog</module>
 <frontName>blog</frontName>
 </args>
 </blog>
 </routers>
	<layout>
 <updates>
<!-- 此处的blog对应routers中的frontName -->
 <blog>
<!-- layout文件的相对路径 -->
 <file>blog.xml</file>
 </blog>
 </updates>
 </layout>
[/code]

在layout目录下，新增blog.xml

[code lang="xml"]<?xml version="1.0"?>
<layout version="0.1.0">
<!-- default对应所有请求，因些这里加入了更换页面模板(root block)的代码，将页面模板更换为1列 -->
 <default>
 <reference name="root">
 <action method="setTemplate">
 <template>page/1column.phtml</template>
 </action>
 </reference>
 </default>
<!-- 当url为blog/index/index时，以下的代码生效，将content block替换为想要被显示的内容，此处使用的是自已新增的block类，用于分页显示post列表 -->
 <blog_index_index>
 <reference name="content">
 <block type="etam_blog/pager" name="blogs" template="etam/blog/index.phtml"/>
 </reference>
 </blog_index_index>
<!-- 当url为blog/index/show时，以下代码生效，此处使用系统block类，但根据setTemplate来达到显示所需内容的目地-->
 <blog_index_show>
 <reference name="content">
 <block type="core/template" name="blog_info" template="etam/blog/show.phtml"/>
 </reference>
 </blog_index_show>
<!-- 当url为blog/index/new时，以下代码生效，此处使用系统block类，但根据setTemplate来达到显示所需内容的目地-->
 <blog_index_new>
 <reference name="content">
 <block type="core/template" name="blog_info" template="etam/blog/new.phtml"/>
 </reference>
 </blog_index_new>
</layout>
[/code]

新增三个模板文件(template)index.phtml, new.phtml, show.phtml

post列表index.phtml

[code lang="xhtml"]<div class="tabs">
 <dl class="collateral-tabs">
 <dd class="tab-container">
 <a href="<?php echo $this->getUrl("blog/index/new"); ?>"><button class="button">New Post</button></a>
 </dd>
 </dl>
</div>
<table width="100%" class="data-table" border="1">
 <thead>
 <th class="label" width="70%">Title</th>
 <th class="label" width="15%">Post At</th>
 <th class="label" width="15%">Post By</th>
 </thead>
 <tbody>
 <?php
 // Get Collection, load all data;
 $posts = $this->getCollection();
 $colstyle=0;
 foreach ($posts as $p) 
 $customer = Mage::getModel("customer/customer")->load($p->getCustomer_id());
 $colstyle++;
 if ($customer) 
 ?>
 <tr class="<?php echo $colstyle%2?"odd":"even"; ?>">
 <td class="data">
 <a href="<?php echo $this->getUrl('blog/index/show', array('id' => $p->getId())); ?>">
 <?php echo $p->getTitle(); ?>
 </a>
 </td>
 <td class="data"><?php echo $p->getPost_at(); ?></td>
 <td class="data"><?php echo $customer->getName(); ?></td>
 </tr>
 <?php
 
 
 ?>
 </tbody>
</table>
<?php echo $this->getChildHtml('pager'); ?>
[/code]

新增post表单new.phtml

[code lang="xhtml"]<div class="tabs">
 <dl class="collateral-tabs">
 <dd class="tab-container">
 <a href="<?php echo $this->getUrl('blog/index'); ?>">Return To Index</a>
 </dd>
 </dl>
</div>
<form id="post_new" method="post" action="<?php echo Mage::getUrl("blog/index/postNew"); ?>">
 <div class="filedset">
 <label class="required" for="title">
 Title
 </label>
 <input id="title" name="title" class="input-text required-entry" required/>
 </div>
 <div class="filedset">
 <label class="required" for="contents">
 Contents
 </label>
 <div class="input-box">
 <textarea name="contents" id="contents" cols="5" rows="3" class="required-entry"></textarea>
 </div>
 </div>
 <div class="buttons-set">
 <button type="submit" title="Submit Review" class="button">Post</button>
 </div>
</form>[/code]

post详情show.phtml

[code lang="xhtml"]<?php
$id=Mage::app()->getRequest()->getParam("id");
if(!$id)
 die("Illegal Call!");

$post=Mage::getModel("etam_blog/blog")->load($id);
?>
<div class="tabs">
 <dl class="collateral-tabs">
 <dd class="tab-container">
 <a href="<?php echo $this->getUrl('blog/index'); ?>">Return To Index</a>
 </dd>
 </dl>
</div>
<table width="100%" class="data-table" border="1">
 <thead>
 <th class="label"><?php echo $post->getTitle(); ?></th>
 </thead>
 <tbody>
 <tr>
 <td class="data">
 <?php echo $post->getContents(); ?>
 </td>
 </tr>
 <tr>
 <td class="data" >
 Comments
 </td>
 </tr>
 </tbody>
</table>[/code]

新增block配置至config.xml，class中内容为类名前缀

[code lang="xml"]<blocks>
 <etam_blog>
 <class>Etam_Blog_Block</class>
 </etam_blog>
</blocks>
[/code]

新增的block类代码，注意这个block没有重载_toHtml方法，因为显示方式都定义在名为index.phtml的模板文件中，需要显示的数据用getCollection方法得到，分页控件使用Magento的html_pager block，在显示时只要使用$this->getChildHtml('pager')即可得到内容

[code lang="php"]class Etam_Blog_Block_Pager extends Mage_Core_Block_Template

 protected $collection;
 protected function _prepareLayout()
 
 parent::_prepareLayout();
 $this->collection = Mage::getModel("etam_blog/blog")->getCollection()->addFieldToFilter("status", "PUBLISHED")->setOrder("Post_at","DESC");
 $pager = $this->getLayout()->createBlock('page/html_pager', 'custom.pager');
 $pager->setAvailableLimit(array(50 => 50, 100 => 100, 'all' => 'all'));
 $pager->setCollection($this->collection);
 $this->setChild('pager', $pager);
 return $this;
 
 public function getCollection()
 return $this->collection;
 
[/code]

最后是controller，因为所需的配置及数据源都已经用layout,template和block做好，代码很简单：

[code lang="php"]class Etam_Blog_IndexController extends Mage_Core_Controller_Front_Action

 public function preDispatch()
 
 parent::preDispatch();
 $this->loadLayout();
//在页面最上方显示一个通知
 $this->getLayout()->getBlock("global_notices")->setTemplate("etam/dev/info.phtml");
 
 public function indexAction()
 
 $this->getLayout()->getBlock("head")->setTitle(Mage::getStoreConfig("etam_blog_options/confs/blog_title"));
 $this->renderLayout();
 
 public function showAction()
 
 $this->getLayout()->getBlock("head")->setTitle(Mage::getStoreConfig("etam_blog_options/confs/blog_title"));
 $this->renderLayout();
 
 public function newAction()
 
 //只有已登陆础客才能新增post;
 $loginUrl = Mage::helper('customer')->getLoginUrl();
 if (!Mage::getSingleton('customer/session')->authenticate($this, $loginUrl)) 
 $this->setFlag('', self::FLAG_NO_DISPATCH, true);
 
 $this->renderLayout();
 
 public function postNewAction()
 
 //只有已登陆础客才能新增post;
 $loginUrl = Mage::helper('customer')->getLoginUrl();
 if (!Mage::getSingleton('customer/session')->authenticate($this, $loginUrl)) 
 $this->setFlag('', self::FLAG_NO_DISPATCH, true);
 
 try 
 $customer = Mage::getSingleton("customer/session");
 $post = Mage::getModel("etam_blog/blog");
 $post->setTitle(strip_tags($this->getRequest()->getParam("title")));
 $post->setContents(strip_tags($this->getRequest()->getParam("contents")));
 $post->setStatus("PUBLISHED");
 $post->setCustomer_id($customer->getId());
 $post->setPost_at(date('Y-m-d H:i:s'));
 $post->save();
 catch (Exception $e) 
 Mage::log($e->getMessage());
 
 $this->_redirectUrl(Mage::getUrl("blog/index/index"));
 
[/code]