README

基于CSS基本功能的显示布局的对象表示

• 所有项目总是垂直堆叠在容器中；
• 容器可以是一组列，在这种情况下，每个列都包含另一个容器，该容器将项目垂直堆叠。

一旦你理解了这个基本原理，你就可以使用API。

叶项目（非容器）由一个接口表示，需要实现的方 法很少，还有一个处理服务，其基本功能包括

• 一次性预载所有项目；
• 一次性渲染一组项目。

你很可能已经理解了，这是为了在更复杂的框架上实现渲染速度，这些框架已经能够提供预载和预渲染对象的支持（例如，Drupal）。

请注意，到目前为止，这更像是一个游乐场，而不是你可以使用的API，但值得一试。

在深入了解之前

你应该知道，这个API的目标是在不久的将来集成到页面组合工具中，其API将隐藏在用户友好的UI后面以供贡献。不要害怕下面的具体代码示例，它只显示它是如何工作的，但不会与这个API的具体用例相关。

完整示例

为了简单起见，我们将使用单元测试示例来解释我们想要显示的布局，以下是我们要显示的bootstrap网格的HTML表示：

<div class="container">
  <div class="row">
    <div class="col-md-12" data-id="container:vbox/top-level">
      <div class="row" data-id="container:hbox/C1">
        <div class="col-md-6" data-id="container:vbox/C11">
          <item id="leaf:a/1" />
          <item id="leaf:a/4" />
        </div>
        <div class="col-md-6" data-id="container:vbox/C12">
          <div class="row" data-id="container:hbox/C2">
            <div class="col-md-6" data-id="container:vbox/C21">
              <item id="leaf:a/2" />
              <item id="leaf:a/5" />
            </div>
            <div class="col-md-6" data-id="container:vbox/C22">
              <item id="leaf:a/3" />
            </div>
          </div>
        </div>
      </div>
      <item id="leaf:a/6" />
      <item id="leaf:a/7" />
    </div>
  </div>
</div>

为了提高可理解性，它会显示如下（是的，我为此抱歉，这是基本复制/粘贴单元测试中的注释）：

        /**
         *             TOP LEVEL
         * +-----------------------------+
         * | 2 columns, with nested:     |
         * |   C1                        |
         * |   C11           C12         |
         * | +-----------+-------------+ |
         * | |           |  C2         | |
         * | |           |  C21  C22   | |
         * | |           | +----+----+ | |
         * | | A1        | | A2 | A3 | | |
         * | | A4        | | A5 |    | | |
         * | |           | +----+----+ | |
         * | +-----+-----+-------------+ |
         * |  A6                         |
         * |  A7                         |
         * +-----------------------------+
         *
         * C: Container
         * A: Item of type A
         */

创建布局

以及创建容器树的关联PHP代码

// Create types
$aType = new ItemAType();

// Place a top level container and build layout (no items)
$topLevel = new TopLevelContainer('top-level');
$c1 = new HorizontalContainer('C1');
$topLevel->append($c1);
$c11 = $c1->appendColumn('C11');
$c12 = $c1->appendColumn('C12');
$c2 = new HorizontalContainer('C2');
$c12->append($c2);
$c21 = $c2->appendColumn('C21');
$c22 = $c2->appendColumn('C22');

// Now place all items
$a1  = $aType->create(1);
$a2  = $aType->create(2);
$a3  = $aType->create(3);
$a4  = $aType->create(4);
$a5  = $aType->create(5);
$a6  = $aType->create(6);
$a7  = $aType->create(7);

$c11->append($a1);
$c11->append($a4);

$c21->append($a2);
$c21->append($a5);

$c22->append($a3);

$topLevel->append($a6);
$topLevel->append($a7);

渲染布局

在初始化类型处理程序之前，我们首先创建容器类型处理程序：容器是网格的基础，负责垂直和水平布局管理。

// This is the class you would change in order to integrate more deeply with
// your own theme and templating engine, or if you do not use bootstrap but
// another grid layout.
$gridRenderer = new BootstrapGridRenderer();

现在我们有了我们的顶级容器，我们需要实例化各种类型处理程序

$itemTypeRegistry = new ItemTypeRegistry();
$itemTypeRegistry->registerType($aType);

然后渲染它

$renderer = new Renderer($itemTypeRegistry, $gridRenderer);
$string = $renderer->render($topLevel);

这将给出$string的HTML表示，这是我们之前显示的。

为什么它渲染得快？

当你请求渲染时，做了两件非常重要的事情

• 整个容器树被递归遍历，所有叶项都引用在一个平面索引中；

• 对于每种项目类型，所有项目都在一次调用中预载并渲染。

因为容器不表示与数据库或任何业务对象相关的任何内容，你不需要预载任何内容，它们的渲染也不复杂：它们最终按照它们之间的依赖顺序渲染。