页面效果

如上图，停靠式布局将整个页面或容器的空间划分为五种，分别是left、top、right、bottom和center等五种停靠方式。

另外除了center区域，其他区域都可以有0-n个，如上图中我们就能看到两个bottom和两个right。相同停靠方式在页面所处的布局依赖于其添加的顺序。参看本例：

范例说明

如下范例，在View中添加了7个HtmlContainer控件：

    <View title="DockLayout" layout="Dock regionPadding:1">
        <HtmlContainer content="1) left" layoutConstraint="left"  />
        <HtmlContainer content="2) top" layoutConstraint="top" />
        <HtmlContainer content="3) right" layoutConstraint="right" />
        <HtmlContainer content="4) bottom" layoutConstraint="bottom" />
        <HtmlContainer content="5) bottom" layoutConstraint="bottom" />
        <HtmlContainer content="6) right" layoutConstraint="right" />
        <HtmlContainer content="center" />
    </View>

本例采用HtmlContainer控件说明停靠时布局的使用，实际项目开发时，你可以使用任意的一种控件。

在本例中我们通过view的layout属性进行布局定义"Dock regionPadding:1"，其中"regionPadding:1"是为突出显示效果，是可省略的。你也可以定义为:

<View title="DockLayout" layout="Dock">

其中7个HtmlContainer为了表示控件的上下添加顺序，我们在每一个HtmlContainer中的content属性定义了一个数字，通过这个数字区分顺序,另外停靠方式我们通过layoutConstraint属性定义。

这样当我们在浏览器中打开这个页面的时候看到的效果，就如下图：

在上图中我们看到有2个right和2个bottom。在Dock Layout中的控件按顺序被渲染到容器的空间中，当一个控件被分配了上述五种停靠方式中的一种时，它总是尽可能占据那个区域的所有空间，然后将剩余的空间留给后面的控件。这样由于添加顺序的原因，后边被添加的控件，虽然布局条件与之前的一样但是布局的位置和所占用的空间却并不能保持一致：如6虽然为right，但是3还是在6的右边，且6的高度也小于3。高度小的原因是页面渲染好3控件后，没有直接渲染6控件，而是先后渲染了4和5控件。由于渲染控件的时候控件会尽可能的占用控件，这样4和5就把整个底部的剩余空间给占用了，从而导致后面标号为6的控件渲染的时候页面剩余空间与渲染3时完全不一样，从而高度也与3不一样了。

同样这种渲染顺序也会对不同布局类型的控件产生影响，从图中我们看出"1) left"添加的最早，因此其占据了左边从上到下的所有区域，而"2) top"由于被1占领了左边的区域，因此其只能在剩余的空间中占领所有的顶部空间。"3) right"...与此类似。思考题：

• 如果我们将上述定义中的1和2交换一下顺序会，它们在页面上占用的空间会有什么变化呢？
• 注意5和6,并在纸上画出他们顺序互换后的页面效果，或者3放顺序在5后面的页面效果。并最终通过修改sample-center的范例在浏览器中打开后与你纸上画出来的效果做一个对比，看是不是正确？
  
  

argument.layoutRegion

如果实际产看本范例，会发现范例中含一段argument的定义:

<Arguments>
        <Argument name="layoutRegion" value="background:#FDFEDA; border:1px #DBB74A solid; padding:4px; white-space:nowrap; overflow:visible" />
</Arguments>

Arguments是View中全局参数节点，本例我们利用Arguments定义了一个名称为layoutRegion的全局参数，这样我们就可以在每一个HtmlContainer中通过EL表达式"${argument.layoutRegion}"

引用这个参数所包含的CSS定义,如下:

<HtmlContainer content="1) left" layoutConstraint="left" style="${argument.layoutRegion}" />

该处的目的是为了通过style属性定义HtmlContainer css效果。EL表达式的使用参考用户指南05. EL表达式