大多数事件的替代物(例子讲解)
对于 Laszlo 中的任何属性,都可以为之赋予一个约束表达式(constraint expression),而不是赋予一个标准的值。约束表达式以一个美元符号开头,格式如下:
$when{ConstrainedExpression} |
其中,when
的值是 always
、once
和 immediately
中的一个。如果忽略了 when
,那么这个值就默认为 always
,也就是说,每当 ContrainedExpression
的一个依赖关系发生改变,该约束都将重新计算。如果一个约束在初始化之后一直是静态的,那么可以将这个值设为 once
,这样可以使约束只计算一次,可以提高效率。另一个值是 immediately
,如果定义了结束元素,并且约束不依赖于其他对象,那么可以使用这个值来计算约束。
我们首先来看一个简单的例子。如果您想要一个大小可变的项,并且还有一个位于它中间的项,应该怎么办呢?清单 3 展示了如何实现这一点。它使用标准的 Laszlo 组件 slider
来控制矩形的大小。
<canvas>
<slider id="sliderItem" y="20" x="10" minvalue="50" maxvalue="300"
value="50"/>
<view y="$once{sliderItem.y + sliderItem.height + 5}"
x="$once{sliderItem.x}" bgcolor="0xff0000"
width="${sliderItem.value}" height="${width}">
<view bgcolor="0x0000ff"
width="${parent.width / 5}" height="${width}"
x="${(parent.width / 2) - (width / 2)}"
y="${(parent.height / 2) - (height / 2)}"/>
</view>
</canvas>
您可以看到,由于 x
是 <view>
的一个属性,您可以使用一个约束来设置这个值。Laszlo 使用分层的方法来标识项,parent
对象是指包含控件。通过这种语法,可以访问该结构中的所有地方,但是也可以指定 name
和 id
属性。两者之间的不同之处是,id
标识的是一个特定的项(因此在文档中只能使用一次),所以它可以全局使用
在这个例子中,注意用于指定有色矩形的 x 和 y 位置的约束的 once
选项的使用。
Laszlo 支持(通过布局组件)很多标准的方法。例如,可以使用 <simplelayout>
元素,该元素有两个主要属性。axis
属性 可用于指定布局方向,它的值可以是 x-axis 或 y-axis,而 spacing
属性可用于控制组件之间的间距。对于一个容器,可以声明多个布局,以便组合水平和垂直方向的间距。