网站页面布局的实现

本篇文章将探讨网站布局的实现,以前也写过和视图层相关的文章==>点击查看<==
承接上篇文章的思路,本篇文章讨论的重点是“如何将模块化的块用xml组织起来?”

下面是我总结的视图层的设计要点:
-定义网站的公共布局,以供其他布局调用和修改
-网站同一个URL可能会有多种状态,例如Logged In/Logged Out,不同状态的布局可以不同;
-网站所有的页面都是由路由系统组织起来的,所以包含页面布局的xml文件也应当采用和路由系统相似的机构,便于和页面相互对应

在这里,以句柄(handle)来区分不同的布局。句柄在系统执行时生成,一个页面可以关联多个句柄,每个句柄代表一层,这样就做到了分层。

首先定义公共层<default>,所有的页面都以它为基础;
然后定义当前页面层<module_controller_action>;
如果页面需要处理不同的状态,则定义状态层

最后,在渲染页面时将所有层的布局相融合,生成最终的布局数据。

有了页面布局的xml文件之后,结合View类和template模版,就可以开始渲染页面了。

假如我要定义一个品字形网页:

公共布局:

1
2
3
4
5
6
7
8
9
<default>
    <block class="Top" name="top" as="public.top" template="top.phtml">
        <block class="Top_Log" name="top.log" template="top_log.phtml" />
        <block class="Top_Links" name="top.links" template="top_links.phtml" />
    </block>
    <block class="Left" name="left" as="public.left" template="left.phtml"/>
    <block class="Right" name="right" as="public.right" template="right.phtml"/>
    <block class="footer" name="footer" as="public.footer" template="footer.phtml"/>
</default>

其中,block表示块,class表示块的PHP类,name表示块的名称,as表示块是公共的,可以被其他块修改,“top.log”和“top.links”是“top”的子块(child)

首页布局:

1
2
3
4
5
<home_index_index>
    <reference name="public.right">
        <block class="Banner" name="banner" template="banner.phtml"/>
    </reference>
</home_index_index>

其中,reference表示引用公共块,name表示将要引用的块的as属性,

活动页布局:

1
2
3
<promotion_index_index>
    <update>home_index_index</update>
</promotion_index_index>

其中,<update/>表示新增home_index_index句柄,意味着渲染时程序也会读取<home_index_index/>中的内容。

活动页2布局:

1
2
3
4
5
6
<promotion2_index_index>
    <update>home_index_index</update>
    <reference name="public.right">
        <remove name="banner"/>
    </reference>
</promotion2_index_index>

其中,<update/>表示新增home_index_index句柄,<remove/>表示去掉“public.right”中的“banner”块

当被访问的页面开始渲染时,程序依次读取各句柄中的数据并按照规则生成布局数据。

Block对象$block如何与Template产生关联?
介绍block类的3个方法:
public function toHtml(){}

public function getChild($child){}

public function getChildHtml($child){}

上述3个方法是每一个Block类都具有的方法,这3个方法主要用来在template中调用来产生HTML:
$block->toHtml()将会返回$block的HTML;

//$child是定义在布局xml中的子块的name属性
$block->getChild($child)将会返回一个子Block对象,这个子block对象是在布局xml中定义的;

$block->getChildHtml($child)将会返回一个子Block对象的HTML,这个子block对象是在布局xml中定义的,相当于$block->getChild($child)->toHtml();

通过周而复始的调用getChildHtml($child),最终就可以获得整个页面的HTML。

如果您觉得阅读本文对您有帮助,欢迎转载本文,但是转载文章之后必须在文章页面明显位置保留此段声明,否则保留追究法律责任的权利。

作  者:www.jpdou.top

原文链接:http://www.jpdou.top/website-layout-display/

原文地址:https://www.cnblogs.com/jpdoutop/p/website-layout-display.html