Layout and Design
出自OpenFace
第14章 布局和设计
第三部分 基本概念
LZX使应用有更高的设计价值和流畅优美的交互界面。在本章我们针对布局和设计论述一些基本的工具。更进一步的话题和OpenFace应用设计的美学探索，可以参看设计指南。
目录 |
使用布局对视图定位
默认情况下，所有视图是在同一个空间的x=“0” y=“0”的位置上。那就意味着两个兄弟视图将重叠。给出视图的精确定位，这样他们就不会交叠了。使兄弟布局分开的更简单的方法是使用simplelayout：
你可以定义一个布局来决定，怎样使兄弟视图中的一个与另一个产生相对的位置，而不用指定各个视图的坐标（即通过强制的方式或绝对的方式）。决定一个视图在兄弟视图之下（或右边）的最简单的布局就是simplelayout：
Example 14.1. 简单layout
<canvas height="80"> <view bgcolor="yellow" width="100" height="100"> <simplelayout axis="y" spacing="5"/> <view bgcolor="red" width="20" height="20"/> <view bgcolor="blue" width="20" height="20"/> <view bgcolor="green" width="20" height="20"/> </view> </canvas>
这个例子展示了怎样使用布局去调整视图以回应用户的操作。
Example 14.2. 简单 Layout
<canvas height="140">
<class name="coloredRect" width="20" height="80" oninit="this.setWidth(this.width+2)" />
<view x="10" y="10" name="container">
<simplelayout axis="x" spacing="10"/>
<coloredRect bgcolor="red" width="30" height="30"/>
<coloredRect bgcolor="aqua" width="30" height="30"/>
<coloredRect bgcolor="yellow" width="30" height="30"/>
<coloredRect bgcolor="green" width="30" height="30"/>
<coloredRect bgcolor="blue" width="30" height="30"/>
</view>
<text x="10" y="110" oninit="LzFocus.setFocus(this)">Create A New View
<handler name="onkeydown" reference="LzKeys">
var newView = new coloredRect(container, { bgcolor : 0x000000 ,width:30 ,height:30});
</handler>
</text>
</canvas>
像所有的布局一样，simpleLayout影响兄弟视图之间是如何关联的。即使视图是动态的示例仍然如此。你可以设置simplelayout的axis属性为x或y，作为元素之间的产生距离的方向。注意当视图的尺寸改变时布局也被更新。
如果要通过simplelayout影响到一组特殊的视图，但还想他们从其余的应用中独立出来，那就需要把他们包含到一个父视图中。然后，你可以指定父视图的坐标：
Example 14.3. 单独 views
<canvas height="120"> <class name="coloredRect" width="20" height="80"/> <view width="50" height="50" bgcolor="yellow"/> <view name="container" x="175" y="20"> <simplelayout axis="x" spacing="10"/> <coloredRect bgcolor="red" width="30" height="30"/> <coloredRect bgcolor="aqua" width="30" height="30"/> <coloredRect bgcolor="yellow" width="30" height="30"/> <coloredRect bgcolor="green" width="30" height="30"/> <coloredRect bgcolor="blue" width="30" height="30"/> </view> </canvas>
符合LZX程序的设计考虑
本节讨论通过放置视图的位置进行更大设计的布局结构。布局的实施与限制，将在第２４章约束 中进行描述。OpenLaszlo应用中更多的设计“品质”，请看第3章 设计者的OpenLaszlo。
视图的层次
视图可以相互嵌套，使用点语法和／或IDs可以引用层次的其他部分。视图的层次可以帮助你定义应用中各种元素之间的关系。对于约束应用中各种元素是有帮助的。考虑一个在右手栏中有图像列表的照片观察应用，显示图片的主要区域在左边。也有我们一会将提到的其他区域。你可能按下面的例子分解你的程序：
Example 14.4.
<canvas width="800"> <view name="stage" width="400" height="300" x="20" bgcolor="0xeaeaea"> <text>Stage</text> </view> <view name="listOfImages" width="200" height="300" x="100" bgcolor="0xffff00"> <text>List of images</text> </view> <view name="trash" width="200" height="75" x="100" y="110" bgcolor="0xff0000"> <text>Trash</text> </view> </canvas>
在显示应用样式时，可以像上例一样使用视图的背景颜色，使他们更容易与原型区分。
非固定的视图
视图的层次也是一种约束。设想上面的例子，你想要从listOfImages的图像名称列表拖拽一个项目到其他区域。频繁地在拖放的环境里，当被拖拽的是一个副本是，被拖拽的原始的项目被放置不管（通过某种指示给他瞬间的状态，例如逐渐消失）。为了得到上面描述的行为，如果每一个图像的标题被拖拽，那么不仅是打乱了兄弟节点的排序，也不可能原样不动的保留原项目。
例如：
<canvas width="200" >
<class name="imageRow" width="$once{parent.width}" height="20">
<attribute name="text" type="text"/>
<text name="txt" text="${parent.text}" resize="true"/>
</class>
<imageRow text="hello">
<handler name="onkeydown" reference="LzKeys">
this.f = new LzView(canvas, {width:40,height:20,bgcolor:0x93A5FF,x:30,y:30});
</handler>
</imageRow>
<view name="stage" width="400" height="300" x="20" bgcolor="0xeaeaea">
<text>Stage</text>
</view>
<view name="listOfImages" width="200" height="300" x="100" bgcolor="0xffff00">
<simplelayout axis="y" spacing="2"/>
<imageRow>One</imageRow>
<imageRow>Two</imageRow>
<imageRow>Three</imageRow>
</view>
<view name="trash" width="200" height="75" x="100" y="110" bgcolor="0xff0000">
<text>Trash</text>
</view>
</canvas>
脚本和布局
选择布局
由于layout是从Node扩展来的，可以使用点语法来选择：
<canvas height="140"> <view name="container"> <simplelayout name="slayout" axis="x" spacing="10"/> <view bgcolor="red" width="20" height="20" /> <view bgcolor="aqua" width="20" height="20"> <view bgcolor="yellow" width="20" height="20"/> </view> </canvas>
在上述的例子中，布局能通过container.slayout被访问。
在运行期间你可能需要在脚本中访问一个布局，以改变其属性。布局也能使用id，以便于能被全局访问。
布局数组
所有的节点有一个布局数组，包含指向所有布局和其孩子节点的动作。
Example 14.7. 寻址 Layouts
<canvas height="180">
<view >
<simplelayout axis="y"/>
<view width="50" height="50" bgcolor="red">One</view>
<view width="50" height="50" bgcolor="red">Two</view>
<view width="50" height="50" bgcolor="red">Three</view>
<handler name="oninit">
this.layouts[0].setAttribute("spacing",10);
</handler>
</view>
</canvas>
动态布局
布局可以是动态的。那就是说，布局的性质可以随时间而有所改变。一个例子就是说明这是如何做的，见第17章 动画
