Openlaszlo学习（一）Demo "Applying Constraints"的修改

penlaszlo 是一个用来生成flash或者html5的一种富客户端框架，有点像flex。由于最近在研究openmeetings(开源的视频会议系统)，它是用OpenLaszlo的做前端。今天在看openlaszlo官方的例子时，发现Applying Constraints这个例子有点小小的问题。例子的运行图片如下

可以拖动中间的小条来改变左右两部分的大小。但是在测试的过程中你会发现，你用鼠标点一下中间的小条，左边部分也会增大，细心点你会发现左边部分增大的大小为你鼠标点的位置到小条左边界的这个大小。问题找到了，想解决它应该不是什么问题了吧。。我就试着修改了一下代码，

<state name="dragging">
      <attribute name="x" value="${Math.min(parent.width-this.width,
                                   Math.max(0, parent.getMouse('x')-this.getMouse('x')))}"/>
</state>

修改后没有一点效果，并且不可以拖动了，好生郁闷呀。再改一下试试

给左边的view添加id="leftView"

<state name="dragging">
      <attribute name="x" value="${Math.min(parent.width-this.width,
                                   Math.max(0, parent.getMouse('x')-(parent.getMouse('x')-leftView.width)))}"/>
</state>

改完后是依然没有变化呀。。

无奈之下，又想到了，以下这个方法

解决方案

<canvas>
  <text id="msg" x="5" y="5" >try dragging divider</text>
  
  <view id="divider" x="110" y="30"
        width="10" height="200" bgcolor="#666699"
        onmousedown="this.setAttribute('space',this.getMouse('x'));dragging.setAttribute('applied', true);"
        onmouseup="dragging.setAttribute('applied', false)">   
    <attribute name="space" value="0"/>
<state name="dragging">
      <attribute name="x" value="${Math.min(parent.width-this.width, 
                                   Math.max(0, parent.getMouse('x')-this.space))}"/> 
    </state>
  </view>

  <!-- constrain width to x of 'divider' -->
  <view id="leftv" name="left" bgcolor="#999999" y="30"
        width="${divider.x}" height="200" clip="true" >
    <text x="5" y="5" >Left Panel</text>
  </view>
  
  <!-- constrain to properties of 'divider' -->
  <view name="right" bgcolor="#CAD0EC" y="30"
        x="${divider.x+divider.width}" 
        width="${parent.width-this.x}" height="200" clip="true" >
    <text x="5" y="5" >Right Panel</text>
  </view>
</canvas>

终于好用了。。总算松了一口气。呵呵。思路就是为这个可以拖动的view添加一个属性space，用来记录在鼠标按下的时候鼠标点击点距离该view的左边的距离。然后再启动state(即是dragging.setAttribute('applied', true);)，

关于state的用法还有一个例子

http://www.openlaszlo.org/lps_demos/laszlo-explorer/editor.jsp?src=docs/reference/programs/LFC-$25.lzx&lzr=dhtml

对于state的主要操作

setAttribute('applied', true);启用 ，也可以用（state.apply(); ）

setAttribute('applied', false);停用，也可以用（state.remove();）

事件

onapply 当启用该state前触发

onremove 当停用前触发

本文为作者原创，转载请注明出处，谢谢。

http://www.cnblogs.com/weirhp